/* ────────────────────────────────────────────────────────────────────
   LEX App — Theme overrides for Metronic Tailwind v9.4.4
   Mapea los tokens semánticos de Metronic (--primary, --background,
   --foreground, --border, etc.) a la paleta LEX (azul cielo + verde
   menta + neutros fríos).
   Cargar SIEMPRE después de assets/metronic-tw/css/styles.css.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Modo claro (cuerpo de la app) */
  --background:           #F9F9F9;
  --foreground:           #2C2D30;
  --card:                 #FFFFFF;
  --card-foreground:      #2C2D30;
  --popover:              #FFFFFF;
  --popover-foreground:   #2C2D30;

  --primary:              #1B84FF;   /* lex-blue-deep */
  --primary-foreground:   #FFFFFF;
  --secondary:            #EEF6FF;   /* lex-blue-soft */
  --secondary-foreground: #1379F0;
  --muted:                #F4F4F4;
  --muted-foreground:     #676A72;
  --accent:               #F1F1F4;
  --accent-foreground:    #2C2D30;
  --destructive:          #F8285A;
  --destructive-foreground: #FFFFFF;
  --mono:                 #16151E;
  --mono-foreground:      #FFFFFF;

  --border:               #DBDFE9;
  --input:                #DBDFE9;
  --ring:                 rgba(27, 132, 255, 0.4);

  --radius:               0.5rem;
}

/* ── Sidebar oscuro (LEX) ──────────────────────────────────────────── */
/* Aplica cuando el sidebar lleva la clase `dark` (patrón Metronic).
   Sobreescribe los tokens dentro de ese subárbol para usar la paleta
   LEX-ink en lugar del zinc-950 que viene por defecto. */
.kt-sidebar.dark,
.dark {
  --background:           #16151E;   /* LEX dark-bg */
  --foreground:           #FFFFFF;
  --card:                 #1B1C22;
  --card-foreground:      #FFFFFF;
  --popover:              #1B1C22;
  --popover-foreground:   #FFFFFF;

  --primary:              #1B84FF;
  --primary-foreground:   #FFFFFF;
  --secondary:            #26272F;
  --secondary-foreground: #FFFFFF;
  --muted:                #1B1C22;
  --muted-foreground:     #9A9CAE;
  --accent:               #26272F;
  --accent-foreground:    #FFFFFF;
  --destructive:          #F8285A;
  --destructive-foreground: #FFFFFF;

  --border:               #26272F;
  --input:                #26272F;
  --ring:                 rgba(27, 132, 255, 0.4);
}

/* ── Tipografía base alineada con design system LEX ────────────────── */
html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Numerales tabulares en tablas (Metronic + LEX guideline) */
table { font-variant-numeric: tabular-nums; }

/* ── Sidebar LEX (positioning + collapse) ──────────────────────────
   El bundle Metronic posiciona el sidebar vía `.demo1 .kt-sidebar { width }`
   y requiere que el body tenga la clase `demo1` antes del primer paint.
   En Blazor esa clase se agrega vía JS interop después del primer render,
   así que hay una ventana donde el sidebar queda sin width. Forzamos por
   `#sidebar` directamente (mayor especificidad que la clase utility) para
   que aparezca siempre, y el collapse sigue funcionando porque dejamos que
   el estado `.kt-sidebar-collapse` en el body cambie el ancho. */
#sidebar {
  /* display forzado: el div tiene `hidden lg:flex`; en el styles.css purgado
     `.hidden` le gana a `.lg\:flex` por orden de cascada y el sidebar queda
     display:none (gutter vacío). Lo fijamos acá igual que position. */
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 280px;
  background-color: #16151E;
  color: #9A9CAE;
  border-inline-end: 1px solid #26272F;
  z-index: 20;
  transition: width 0.3s ease;
}
.kt-sidebar-collapse #sidebar:not(:hover) {
  width: 80px;
}

/* Helper para el patrón geométrico del panel de auth */
.lex-auth-pattern {
  background-image:
    radial-gradient(circle at 90% 10%, rgba(27,132,255,0.18) 0, transparent 60%),
    radial-gradient(circle at 10% 90%, rgba(96,208,208,0.10) 0, transparent 55%);
}

/* ── Alerts semánticos retemados a paleta LEX ──────────────────────
   Metronic Tailwind v9.4 hardcodea `kt-alert-info` a `--color-violet-600`
   y `kt-alert-success` / `-warning` a otros colores Tailwind directos.
   Forzamos que usen los tokens LEX (`--info` cielo, `--success` verde,
   `--warning` amarillo) tanto en variante sólida como `outline`. */
:root {
  --info:        #40A0F0;
  --info-foreground:    #FFFFFF;
  --success:     #17C653;
  --success-foreground: #FFFFFF;
  --warning:     #F6C000;
  --warning-foreground: #FFFFFF;
}

.kt-alert-info {
  background-color: var(--info);
  color: var(--info-foreground);
}
.kt-alert-success {
  background-color: var(--success);
  color: var(--success-foreground);
}
.kt-alert-warning {
  background-color: var(--warning);
  color: var(--warning-foreground);
}

.kt-alert-outline.kt-alert-info {
  background-color: color-mix(in srgb, var(--info) 10%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}
.kt-alert-outline.kt-alert-info .kt-alert-icon,
.kt-alert-outline.kt-alert-info .kt-alert-title { color: var(--info); }
.kt-alert-outline.kt-alert-info .kt-alert-description { color: var(--foreground); }

.kt-alert-outline.kt-alert-success {
  background-color: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.kt-alert-outline.kt-alert-success .kt-alert-icon,
.kt-alert-outline.kt-alert-success .kt-alert-title { color: var(--success); }
.kt-alert-outline.kt-alert-success .kt-alert-description { color: var(--foreground); }

.kt-alert-outline.kt-alert-warning {
  background-color: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.kt-alert-outline.kt-alert-warning .kt-alert-icon,
.kt-alert-outline.kt-alert-warning .kt-alert-title { color: var(--warning); }
.kt-alert-outline.kt-alert-warning .kt-alert-description { color: var(--foreground); }

.kt-alert-outline.kt-alert-primary .kt-alert-description { color: var(--foreground); }
.kt-alert-outline.kt-alert-destructive .kt-alert-description { color: var(--foreground); }

/* ── Modales Bootstrap retemados a tokens LEX ──────────────────────── */
/* Mantenemos el JS de Bootstrap (bootstrap.Modal) por compatibilidad
   con los helpers legacy `KTModal*.js`. Solo ajustamos los tokens
   `--bs-modal-*` y `--bs-backdrop-*` para que el frame quede en estética
   LEX (card blanco, borde sutil, backdrop LEX-ink con blur). */
.modal {
  --bs-modal-bg:                  var(--card);
  --bs-modal-color:               var(--card-foreground);
  --bs-modal-border-color:        var(--border);
  --bs-modal-border-width:        1px;
  --bs-modal-border-radius:       0.75rem;
  --bs-modal-inner-border-radius: 0.75rem;
  --bs-modal-header-border-color: var(--border);
  --bs-modal-header-border-width: 1px;
  --bs-modal-footer-border-color: var(--border);
  --bs-modal-footer-border-width: 1px;
  --bs-modal-box-shadow:          0 24px 48px -12px rgba(15,23,42,0.18);
}

.modal-backdrop {
  --bs-backdrop-bg:      #16151E;   /* LEX dark-bg */
  --bs-backdrop-opacity: 0.40;
  backdrop-filter:       blur(2px);
}

/* Quitar el outline rectangular que BS dibuja al focalizar el modal */
.modal:focus,
.modal-content:focus {
  outline: 0;
}

/* Variante de botón "link" — componente custom (Tailwind no lo genera, así
   que vive acá y no en utilities purgables). Migrado desde lex-utilities.css. */
.kt-btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}
.kt-btn-link:hover { text-decoration: underline; color: var(--primary-foreground, #1379F0); }