:root {
  --mdc-primary: #6200ee;
  --mdc-secondary: #606060;
  --mdc-error: #b00020;
  
  /* Unidades base relativas */
  --base-unit: 0.25rem; /* 4px base */
  --spacing-xs: 0.5rem;  /* 8px */
  --spacing-sm: 1rem;    /* 16px */
  --spacing-md: 1.5rem;  /* 24px */
  --spacing-lg: 2rem;    /* 32px */
  --spacing-xl: 3rem;    /* 48px */
  
  /* Sombras adaptables al tema - Light mode */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-hover: rgba(0, 0, 0, 0.15);
  --shadow-color-elevated: rgba(0, 0, 0, 0.2);
  
  /* Colores personalizados para Bootstrap - Light mode */
  --color-primary: #6200ee;
  --color-secondary: #606060;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-light: #c8c9c9;
  --color-dark: #343a40;
}

/* Dark mode shadows - más claras para contraste */
[data-bs-theme="dark"] {
  --shadow-color: rgba(255, 255, 255, 0.1);
  --shadow-color-hover: rgba(255, 255, 255, 0.15);
  --shadow-color-elevated: rgba(255, 255, 255, 0.12);
}

/* Mejorar contraste de cards en dark mode */
[data-bs-theme="dark"] .card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0.125rem 0.25rem var(--shadow-color);
  background-color: var(--bs-card-bg);
}

[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0.25rem 0.75rem var(--shadow-color-hover);
}

[data-bs-theme="dark"] .card-header {
  background-color: var(--bs-card-bg);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .card-body {
  background-color: var(--bs-card-bg);
}

/*================== se agrega animacion a las cards =======================*/

.card {
    border-radius: 12px;
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.badge {
    font-size: 0.75em;
}

code {
    background-color: var(--bs-card-bg);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.875em;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.alert {
    border-radius: 10px;
    border: none;
}

.display-4 {
    font-size: 2.5rem;
}

@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
}

.card {
    border-radius: 12px;
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.list-group-item {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.2s ease;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.list-group-item:hover {
    background-color: var(--bs-card-bg) !important;
}

.badge {
    font-size: 0.75em;
}


/* ===== COMPLEMENTOS MOBILE FIRST CON UNIDADES RELATIVAS ===== */

/* Botones con unidades relativas */
.btn {
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.089em;
  font-weight: 500;
  box-shadow: 
    0px 0.1875rem 0.0625rem -0.125rem var(--shadow-color), 
    0px 0.125rem 0.125rem 0px var(--shadow-color), 
    0px 0.0625rem 0.3125rem 0px var(--shadow-color);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  position: relative;
  overflow: hidden;
  min-height: 2.75rem; /* 44px mínimo para touch */
}

.btn:hover, .btn:focus {
  box-shadow: 
    0px 0.125rem 0.25rem -0.0625rem var(--shadow-color-hover), 
    0px 0.25rem 0.3125rem 0px var(--shadow-color-hover), 
    0px 0.0625rem 0.625rem 0px var(--shadow-color-hover);
  transform: translateY(-0.0625rem);
}

.btn:active {
  box-shadow: 
    0px 0.3125rem 0.3125rem -0.1875rem var(--shadow-color-elevated), 
    0px 0.5rem 0.625rem 0.0625rem var(--shadow-color-elevated), 
    0px 0.1875rem 0.875rem 0.125rem var(--shadow-color-elevated);
  transform: translateY(0);
}

/* Colores personalizados */
.btn-primary {
  background-color: var(--mdc-primary) !important;
  border-color: var(--mdc-primary) !important;
}

.btn-primary:hover {
  background-color: var(--mdc-primary) !important;
  border-color: var(--mdc-primary) !important;
}

/* Sobrescribir colores de fondo de Bootstrap con variables personalizadas */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
}

.bg-light {
  background-color: var(--color-light) !important;
}

.bg-dark {
  background-color: var(--color-dark) !important;
}

/* Sobrescribir colores de texto con variables personalizadas */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.text-light {
  color: var(--color-light) !important;
}

.text-dark {
  color: var(--color-dark) !important;
}

/* Sobrescribir colores de bordes con variables personalizadas */
.border-primary {
  border-color: var(--color-primary) !important;
}

.border-secondary {
  border-color: var(--color-secondary) !important;
}

.border-success {
  border-color: var(--color-success) !important;
}

.border-danger {
  border-color: var(--color-danger) !important;
}

.border-warning {
  border-color: var(--color-warning) !important;
}

.border-info {
  border-color: var(--color-info) !important;
}

.border-light {
  border-color: var(--color-light) !important;
}

.border-dark {
  border-color: var(--color-dark) !important;
}

/* Cards con unidades relativas */
.card {
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
  transition: all 0.3s ease;
  border: none;
  margin-bottom: var(--spacing-sm);
}

.card:hover {
  box-shadow: 0 0.25rem 0.75rem var(--shadow-color-hover);
}

/* Formularios responsivos */
.form-control {
  border-radius: 0.25rem;
  transition: all 0.3s;
  font-size: 1rem; /* Previene zoom en iOS */
  min-height: 2.75rem; /* 44px touch */
}

.form-control:focus {
  border-color: var(--mdc-primary);
  box-shadow: 0 0 0 0.2rem rgba(98, 0, 238, 0.25);
}

/* Navbar mobile first */
.navbar {
  box-shadow: 
    0px 0.125rem 0.25rem -0.0625rem var(--shadow-color), 
    0px 0.25rem 0.3125rem 0px var(--shadow-color), 
    0px 0.0625rem 0.625rem 0px var(--shadow-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  min-height: 3.5rem; /* 56px */
}

/* Tabs mobile first */
.nav-tabs {
  border-bottom: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-tabs .nav-link {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.089em;
  font-size: 0.875rem;
  border: none;
  color: var(--bs-secondary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  white-space: nowrap;
}

.nav-tabs .nav-link.active {
  color: var(--mdc-primary);
  border-bottom: 0.125rem solid var(--mdc-primary);
  background: transparent;
}

/* Modales responsivos */
.modal-content {
  border-radius: 0.25rem;
  border: none;
  box-shadow: 
    0px 0.6875rem 0.9375rem -0.4375rem var(--shadow-color-elevated), 
    0px 1.5rem 2.375rem 0.1875rem var(--shadow-color-elevated), 
    0px 0.5625rem 2.875rem 0.5rem var(--shadow-color-elevated);
  margin: var(--spacing-sm);
  min-height: calc(100vh - 2 * var(--spacing-sm));
}

/* Alertas con unidades relativas */
.alert {
  border-radius: 0.25rem;
  border: none;
  box-shadow: 
    0px 0.1875rem 0.3125rem -0.0625rem var(--shadow-color), 
    0px 0.375rem 0.625rem 0px var(--shadow-color), 
    0px 0.0625rem 1.125rem 0px var(--shadow-color);
  padding: var(--spacing-sm);
  margin: var(--spacing-sm) 0;
}

/* Toasts mobile first */
.toast-container {
  position: fixed;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 1060;
}

.toast {
  margin-bottom: var(--spacing-xs);
  border-radius: 0.25rem;
}

/* Imágenes responsivas */
.image-preview {
  width: 100%;
  max-width: 9.375rem; /* 150px */
  height: 9.375rem;
  object-fit: cover;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.image-preview:hover {
  transform: scale(1.05);
}

/* Grid responsivo para móviles */
@media (max-width: 36em) { /* 576px */
  .container-fluid {
    padding-right: var(--spacing-xs);
    padding-left: var(--spacing-xs);
  }
  
  .row {
    margin-right: calc(-0.5 * var(--spacing-xs));
    margin-left: calc(-0.5 * var(--spacing-xs));
  }
  
  .col, [class*="col-"] {
    padding-right: calc(0.5 * var(--spacing-xs));
    padding-left: calc(0.5 * var(--spacing-xs));
  }
}

/* Tablet */
@media (min-width: 48em) { /* 768px */
  .toast-container {
    left: auto;
    max-width: 21.875rem; /* 350px */
  }
  
  .modal-content {
    margin: var(--spacing-lg) auto;
    min-height: auto;
    max-width: 31.25rem; /* 500px */
  }
}

/* Desktop */
@media (min-width: 62em) { /* 992px */
  .nav-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Utilidades con unidades relativas */
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }

.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

/* Ripple effect mejorado */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* Mejora accesibilidad y rendimiento */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .form-control {
    transition: none;
  }
}

/* Asegurar contraste para accesibilidad */
@media (prefers-contrast: high) {
  .btn {
    border: 0.125rem solid currentColor;
  }
}