/* ═══════════════════════════════════════════════════════════════════════════
   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: var(--ao-cloud) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ao-cloud); border-radius: 10px; border: 2px solid var(--ao-base); }
::-webkit-scrollbar-thumb:hover { background: var(--ao-border-hover); }
::-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: color-mix(in srgb, var(--ao-chrome) 92%, transparent) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ao-divider) !important;
    box-shadow: none !important;
}
/* El nombre de la persona va en la tipografía del sistema (Space Grotesk), no en la monoespaciada:
   la mono queda para números y etiquetas técnicas. */
.ao-user-chip { color: var(--ao-mist) !important; font-family: var(--ao-font-text); font-size: .875rem; min-width: 0; }
.ao-user-nombre {
    color: var(--ao-ink); font-weight: 500; letter-spacing: .005em; line-height: 1.2;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── «Ver como» (SelectorVista): el selector de vista junto al nombre ─────── */
.ao-vista { position: relative; display: flex; align-items: center; gap: 8px; margin-right: 14px; min-width: 0; }
.ao-vista-btn, .ao-vista-volver {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
    border-radius: 8px; border: 1px solid var(--ao-border); background: var(--ao-surface-2);
    color: var(--ao-ink); font-family: var(--ao-font-text); font-size: .875rem; line-height: 1;
    cursor: pointer; white-space: nowrap; min-width: 0;
    transition: background .15s, border-color .15s;
}
.ao-vista-btn:hover, .ao-vista-volver:hover { background: var(--ao-surface-3); border-color: var(--ao-blue-lite); }
.ao-vista-btn:focus-visible, .ao-vista-volver:focus-visible { outline: 2px solid var(--ao-blue-lite); outline-offset: 2px; }
.ao-vista-btn .mud-icon-root, .ao-vista-volver .mud-icon-root { font-size: 1.05rem; color: var(--ao-mist); flex: none; }
.ao-vista-pre { color: var(--ao-mist); font-weight: 400; flex: none; }
.ao-vista-txt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
/* Mirando como otra persona: se nota siempre (ámbar, el color de aviso del sistema). */
.ao-vista-btn--como { border-color: var(--ao-warning); background: rgba(245,166,35,.14); }
.ao-vista-btn--como:hover { border-color: var(--ao-warning); background: rgba(245,166,35,.22); }
.ao-vista-btn--como .mud-icon-root, .ao-vista-btn--como .ao-vista-pre { color: var(--ao-warning); }
.ao-vista-volver { font-weight: 600; }
.ao-vista-volver .mud-icon-root { color: var(--ao-ink); }

.mud-popover.ao-vista-panel {
    margin-top: 8px; border: 1px solid var(--ao-border); border-radius: 12px;
    background: var(--ao-white); overflow: visible;
}
.ao-vista-form { display: flex; flex-direction: column; gap: 12px; width: 340px; max-width: calc(100vw - 32px); padding: 16px; }
.ao-vista-titulo { font-family: var(--ao-font-display); font-weight: 600; font-size: 1rem; color: var(--ao-ink); }
.ao-vista-nota { display: flex; align-items: flex-start; gap: 8px; color: var(--ao-mist); font-size: .8125rem; line-height: 1.35; }
.ao-vista-nota .mud-icon-root { font-size: 1rem; margin-top: 1px; flex: none; }
.ao-vista-nota--aviso { color: var(--ao-warning); }
.ao-vista-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

/* Barra angosta: primero se acorta el texto de la vista; después se va el prefijo y el rótulo de volver. */
@media (max-width: 1100px) { .ao-vista-txt { max-width: 260px; } .ao-user-nombre { max-width: 170px; } }
@media (max-width: 820px) {
    .ao-vista-pre, .ao-vista-volver span { display: none; }
    .ao-vista-txt { max-width: 130px; }
    .ao-user-nombre { display: none; }
}

.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 ───────────────────────────────────────
   Los colores de cada nivel (tarjeta, campo, hover, líneas) están en aolab-tokens.css: aquí no se escribe ninguno. */
.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: var(--ao-glass-lo);
    border-bottom: 1px solid var(--ao-border) !important;
}
.mud-table-body .mud-table-row:hover { background: var(--ao-hover-fila) !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: var(--ao-border-hover) !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: var(--ao-hover-item) !important; }
.mud-selected-item { background: rgba(var(--ao-blue-rgb), .14) !important; color: var(--ao-blue-text) !important; }
.mud-tooltip { background: var(--ao-tooltip) !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: var(--ao-line-input); }
.mud-progress-linear { background-color: var(--ao-surface-3); }
.mud-divider { border-color: var(--ao-divider) !important; }

/* ── Selector segmentado (MudToggleGroup) ──────────────────────────────────
   Vale para todos los MudToggleGroup horizontales del sistema, sin clase nueva («Se identifica por» en los grupos de
   equipos y «Racks y bateas | Solo bateas» en el equipo).
   El marco es el de un campo Outlined dense: 40 px, borde --ao-border, radio 8 y fondo hundido; hover y foco como los
   campos. El elegido es una pastilla azul sólida DENTRO del marco (5 px de aire arriba y abajo, 4 a los lados, radio
   5): nunca toca ni pisa el borde. Es el azul del elegido del selector de Seguimiento (.ica-seg) y de los botones
   primarios.
   Manda sobre lo que trae Outlined/Color.Primary (borde azul, separador entre ítems, radio y sombra de botón): el
   .mud-button-root { border-radius: 10px !important } de arriba pierde por especificidad. */
.mud-toggle-group.mud-toggle-group-horizontal {
    box-sizing: border-box; height: 40px; padding: 5px 4px; column-gap: 4px;
    border: 1px solid var(--ao-border) !important;
    border-radius: var(--ao-radius-sm); background: var(--ao-surface-2); overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.mud-toggle-group.mud-toggle-group-horizontal:hover:not(:has(.mud-toggle-item:disabled)) { border-color: var(--ao-border-hover) !important; }
.mud-toggle-group.mud-toggle-group-horizontal:has(.mud-toggle-item:focus-visible) {
    border-color: var(--ao-blue) !important; box-shadow: 0 0 0 3px rgba(var(--ao-blue-rgb), .15);
}
.mud-toggle-group > .mud-toggle-item.mud-button-root {
    height: 100%; min-width: 0; margin: 0 !important; padding: 0 12px !important;
    border: 0 !important; border-radius: 5px !important; box-shadow: none !important;
    background-color: transparent !important; color: var(--ao-muted) !important;
    font-family: var(--ao-font-text); font-size: .8125rem; font-weight: 600; letter-spacing: .1px; line-height: 1;
    text-transform: none; white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.mud-toggle-group > .mud-toggle-item.mud-button-root:hover { background-color: var(--ao-surface-3) !important; color: var(--ao-ink) !important; }
.mud-toggle-group > .mud-toggle-item.mud-toggle-item-selected {
    background-color: var(--ao-blue) !important; color: var(--ao-on-accent) !important; box-shadow: var(--ao-shadow-sm) !important;
}
.mud-toggle-group > .mud-toggle-item.mud-toggle-item-selected:hover { background-color: var(--ao-blue-dark) !important; }
.mud-toggle-group > .mud-toggle-item.mud-button-root:focus-visible { outline: 2px solid var(--ao-blue-lite); outline-offset: -2px; }
.mud-toggle-group > .mud-toggle-item.mud-toggle-item-selected:focus-visible { outline-color: rgba(255,255,255,.85); }
/* Deshabilitado: el marco queda igual que el de un campo deshabilitado; el elegido pasa a gris (se sigue leyendo
   cuál es) y el otro se apaga. */
.mud-toggle-group > .mud-toggle-item.mud-button-root:disabled { color: rgba(240,246,255,.32) !important; background-color: transparent !important; }
.mud-toggle-group > .mud-toggle-item.mud-toggle-item-selected:disabled {
    color: var(--ao-muted) !important; background-color: rgba(255,255,255,.08) !important; box-shadow: none !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; }
}