/* ═══════════════════════════════════════════════════════════════════════════
   AOLAB · TEMA GLOBAL (estética ICA)
   El acabado de la calculadora ICA aplicado a todo el sistema. Se carga después de
   MudBlazor y de app.css, así que manda sobre ambos.

   Principios del prototipo que se trasladan a toda la app:
   · Fondo profundo y superficies de VIDRIO: se separan por borde fino, no por sombra
     (en oscuro las sombras casi no se ven).
   · El azul de BactiQuant como único color de interacción. Los demás colores significan algo: estado
     (verde/ámbar/rojo) o plano de medición (celeste, naranja, verde, rojo).
   · Etiquetas, encabezados de tabla y números en monoespaciada: se leen como datos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ───────────────────────────────────────────────────────────────── */
html, body {
    background: var(--ao-base);
    color: var(--ao-ink);
    font-family: var(--ao-font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(var(--ao-blue-rgb), .35); color: #fff; }
a { color: var(--ao-blue-text); }
a:hover { color: var(--ao-blue-lite); }

/* Barras de desplazamiento discretas, del color del fondo. */
* { scrollbar-color: #24395C transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #24395C; border-radius: 10px; border: 2px solid var(--ao-base); }
::-webkit-scrollbar-thumb:hover { background: #2F4A73; }
::-webkit-scrollbar-track { background: transparent; }

/* Foco visible y del mismo color en todo: la navegación con teclado tiene que verse. */
:focus-visible { outline: 2px solid var(--ao-blue); outline-offset: 2px; }

/* ── Tipografía ─────────────────────────────────────────────────────────── */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    letter-spacing: -.02em;
    color: var(--ao-ink);
}
.mud-typography-h4 { font-weight: 700; }
.mud-typography-overline, .ao-kicker {
    font-family: var(--ao-font-mono) !important;
    font-size: .66rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
    color: var(--ao-blue-text) !important;
}
/* Números alineados en columnas: tablas, métricas, folios. */
.mud-table-cell, .ao-num, .ao-metrica, .ao-folio-celda { font-variant-numeric: tabular-nums; }

/* ── Chrome: barra superior y menú lateral ─────────────────────────────── */
.mud-appbar.ao-appbar {
    background: rgba(7,17,31,.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ao-divider) !important;
    box-shadow: none !important;
}
.ao-user-chip { color: var(--ao-mist) !important; font-family: var(--ao-font-mono); font-size: .75rem; }

.mud-drawer.ao-drawer { border-right: 1px solid var(--ao-divider) !important; }
.ao-drawer .mud-nav-link.active {
    background: rgba(var(--ao-blue-rgb), .12) !important;
    color: var(--ao-blue-text) !important;
    box-shadow: inset 3px 0 0 var(--ao-blue);
}
.ao-drawer .mud-nav-link:hover { color: var(--ao-ink) !important; }
.ao-drawer .mud-nav-group .mud-nav-group-header { color: #5F7D98 !important; }
.ao-drawer .mud-nav-group .mud-nav-group-header:hover { color: var(--ao-ink) !important; }

/* ── Superficies: vidrio con borde ─────────────────────────────────────── */
.mud-paper:not(.mud-popover):not(.mud-appbar):not(.mud-drawer) {
    background-color: var(--ao-white);
}
.mud-paper-outlined, .mud-card, .mud-table.mud-paper, .mud-expand-panel {
    border: 1px solid var(--ao-border) !important;
}
.mud-elevation-1, .mud-elevation-2, .mud-elevation-3, .mud-elevation-4 {
    box-shadow: var(--ao-shadow-sm) !important;
    border: 1px solid var(--ao-border);
}
.mud-card { border-radius: var(--ao-radius-lg) !important; }
.mud-expand-panel { background: var(--ao-white) !important; }
.mud-expand-panel .mud-expand-panel-header { font-weight: 600; }

/* ── Tablas: encabezado como rótulo de datos ───────────────────────────── */
.mud-table-head .mud-table-cell {
    font-family: var(--ao-font-mono);
    font-size: .66rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ao-muted) !important;
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid var(--ao-border) !important;
}
.mud-table-body .mud-table-row:hover { background: rgba(var(--ao-blue-rgb), .05) !important; }
.mud-table-cell { border-bottom-color: var(--ao-divider) !important; }
.mud-table-pagination { color: var(--ao-muted); }

/* ── Campos: fondo hundido y foco azul ─────────────────────────────────── */
.mud-input.mud-input-outlined { background: var(--ao-surface-2); border-radius: var(--ao-radius-sm); }
.mud-input-outlined-border { border-color: var(--ao-border) !important; border-radius: var(--ao-radius-sm) !important; }
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: #2F4A73 !important; }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--ao-blue) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px rgba(var(--ao-blue-rgb), .15);
}
.mud-input-label { color: var(--ao-muted) !important; }
.mud-input-label.mud-input-label-outlined { background: transparent !important; }
.mud-focused .mud-input-label, .mud-input-label.mud-focused { color: var(--ao-blue-text) !important; }
.mud-input > input.mud-input-root, .mud-input textarea { color: var(--ao-ink); }
.mud-input-helper-text { color: var(--ao-muted); }
input[type=date], input[type=time] { color-scheme: dark; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.mud-button-root { border-radius: 10px !important; }
.mud-button-filled-primary { color: var(--ao-on-accent) !important; }
.mud-button-filled-primary .mud-icon-root { color: var(--ao-on-accent) !important; }
.mud-button-filled-primary:hover { background-color: var(--ao-blue-dark) !important; }
.mud-button-filled-secondary {
    background: var(--ao-surface-3) !important;
    color: var(--ao-ink) !important;
    border: 1px solid var(--ao-border);
}
.mud-button-filled-secondary:hover { border-color: var(--ao-blue); color: var(--ao-blue-text) !important; }
.mud-button-outlined { border-color: var(--ao-border) !important; }
.mud-button-outlined-primary { border-color: rgba(var(--ao-blue-rgb), .55) !important; }
.mud-button-outlined:hover { border-color: var(--ao-blue) !important; }

/* ── Pestañas: subrayado azul, como las de la calculadora ──────────────── */
.mud-tabs-tabbar, .mud-tabs-toolbar {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--ao-border);
}
.mud-tab { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; color: var(--ao-muted); }
.mud-tab:hover { color: var(--ao-ink); background: rgba(255,255,255,.03); }
.mud-tab.mud-tab-active { color: var(--ao-blue-text) !important; }
.mud-tab-slider { background: var(--ao-blue) !important; height: 2px !important; }
.mud-tabs-panels { background: transparent; }

/* ── Azul como texto ───────────────────────────────────────────────────────
   MudBlazor pinta con el mismo Primary los rellenos y los textos. El #2D58FF sirve de relleno
   (con texto blanco) pero como letra sobre el fondo oscuro no se lee: los textos, íconos
   sueltos y botones de texto/contorno usan su versión clara. */
.mud-primary-text,
.mud-button-text-primary,
.mud-button-outlined-primary,
.mud-link.mud-primary-text { color: var(--ao-blue-text) !important; }

/* ── Chips y etiquetas ─────────────────────────────────────────────────── */
.mud-chip { font-weight: 600; }
.mud-chip.mud-chip-outlined { border-color: currentColor; background: transparent; }
.mud-chip-text { background: rgba(255,255,255,.05); }

/* ── Avisos: tinte del estado sobre vidrio, en vez de bloques de color ── */
.mud-alert { border-radius: var(--ao-radius-md) !important; border: 1px solid; }
.mud-alert-text-normal  { background: rgba(255,255,255,.03) !important; border-color: var(--ao-border); color: var(--ao-ink); }
.mud-alert-text-info    { background: rgba(56,184,224,.08) !important;  border-color: rgba(56,184,224,.30); color: #CDEBF7; }
.mud-alert-text-success { background: rgba(79,209,139,.08) !important;  border-color: rgba(79,209,139,.30); color: #CFF3DF; }
.mud-alert-text-warning { background: rgba(245,166,35,.08) !important;  border-color: rgba(245,166,35,.32); color: #FBE3B8; }
.mud-alert-text-error   { background: rgba(232,93,74,.09) !important;   border-color: rgba(232,93,74,.34);  color: #F8D2CC; }
.mud-alert-text-info .mud-alert-icon    { color: var(--ao-info) !important; }
.mud-alert-text-success .mud-alert-icon { color: var(--ao-success) !important; }
.mud-alert-text-warning .mud-alert-icon { color: var(--ao-warning) !important; }
.mud-alert-text-error .mud-alert-icon   { color: var(--ao-danger) !important; }

/* ── Diálogos, menús y avisos flotantes ────────────────────────────────── */
.mud-dialog { background: var(--ao-white) !important; border: 1px solid var(--ao-border); }
.mud-dialog .mud-dialog-title { font-weight: 700; }
.mud-overlay-dark { backdrop-filter: blur(2px); }
.mud-popover { background: var(--ao-white) !important; border: 1px solid var(--ao-border); box-shadow: var(--ao-shadow-md) !important; }
.mud-list-item:hover { background: rgba(var(--ao-blue-rgb), .08) !important; }
.mud-selected-item { background: rgba(var(--ao-blue-rgb), .14) !important; color: var(--ao-blue-text) !important; }
.mud-tooltip { background: #1A2E4D !important; color: var(--ao-ink) !important; font-size: .75rem; border: 1px solid var(--ao-border); }
.mud-snackbar { border-radius: var(--ao-radius-md) !important; border: 1px solid var(--ao-border); }

/* ── Controles de selección ────────────────────────────────────────────── */
.mud-switch-track { background-color: #2A4166; }
.mud-progress-linear { background-color: var(--ao-surface-3); }
.mud-divider { border-color: var(--ao-divider) !important; }

/* ── Selector de fechas ────────────────────────────────────────────────── */
.mud-picker-toolbar { background: var(--ao-surface-2) !important; }
.mud-picker-calendar-header-day, .mud-day { color: var(--ao-ink); }
.mud-day.mud-selected { background: var(--ao-blue) !important; color: var(--ao-on-accent) !important; }

/* ── Login y registro: tarjeta de vidrio sobre el fondo profundo ───────── */
.ao-auth-card {
    background: var(--ao-white) !important;
    border: 1px solid var(--ao-border);
    color: var(--ao-ink);
}
.ao-auth-card .form-control {
    background: var(--ao-surface-2) !important;
    color: var(--ao-ink) !important;
    border-color: var(--ao-border) !important;
}
.ao-auth-card .form-control:focus { background: var(--ao-surface-2) !important; }
.ao-auth-card .form-floating > label { color: var(--ao-muted); }
.ao-auth-card .btn-primary { color: var(--ao-on-accent) !important; }
.ao-auth-card .btn.ao-btn-external { background: var(--ao-surface-2) !important; border-color: var(--ao-border) !important; }
.ao-auth-card .btn.ao-btn-external:hover { border-color: var(--ao-blue) !important; }

/* ── La calculadora ya trae su fondo: dentro de la app se funde con la página ── */
.ao-page-wrapper > .ica { background: transparent; padding: 4px 0 24px; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}