/* ============================================================
   InsCore Backoffice — Dark Glass Design System
   Portado del broker (InsCore.Web/wwwroot/css/theme.css) para paridad visual.
   El tema (claro/oscuro) se controla con las clases body.ins-light / body.ins-dark
   que inyecta App.razor (anti-flash desde la cookie backoffice-theme) y
   window.backofficeTheme.applyTheme en cada toggle. Default = oscuro.

   1.  Design Tokens
   2.  Global Reset & Font Rendering
   3.  Animated Background Orbs
   4.  AppBar — Glass Surface
   5.  Drawer — Glass Surface
   6.  Cards & Papers — Glassmorphism
   7.  Tables
   8.  Inputs & Buttons
   9.  Nav Links
   10. KPI Cards
   11. Empty State
   12. Page Entry Animations
   13. Light Mode Overrides
   14. Responsive Media Queries
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
    /* 💼 La CIFRA de una tarjeta KPI, solida. Mismo token y mismo valor que el host del corredor:
       dos hosts que declaran la misma pieza con distinto nombre acaban divergiendo. */
    --ins-kpi-number: #e2e8f0;
    /* Glassmorphism surfaces */
    /* 🎴🌓 M-340 · La TARJETA en oscuro tiene que leerse como una superficie, no como un hueco. Medido
       renderizado contra esta consola viva (sonda Playwright, /tenants, 1440×900, 9.067 px de tarjeta y
       30.128 px de lienzo verificados con elementFromPoint): con el valor anterior —rgba(10,22,50,0.65)—
       la tarjeta componía rgb(14,25,49) sobre un lienzo rgb(8,15,32), 1,094:1, SIN sombra y con la MITAD
       de canto que en claro (alfa 0,10 frente a 0,20). El defecto es el mismo que el del host del corredor
       y es ASIMÉTRICO: en claro la tarjeta tiene canto y sombra; en oscuro no tenía ninguna de las dos.
       🏆 Estándar del sector (Material): en tema oscuro la elevación se expresa con superficies MÁS
       CLARAS, no con sombras —una sombra negra sobre un lienzo casi negro no se ve—. Así que sube la
       superficie: compuesta sobre el lienzo de esta consola (rgb(5,13,26), medido con
       getComputedStyle(body)) da 1,254:1. Sigue siendo cristal: la opacidad no llega a tapar el fondo.

       🔭 s73 · SUBE OTRA VEZ, POR EL MISMO MOTIVO QUE EN EL HOST DEL CORREDOR (ver allí la medida
       completa): el lienzo contra el que se componía era el PELADO, y encima hay ORBES fijos declarados
       en esta misma hoja (§3). Bajo un orbe la página sube a `rgb(15,34,66)` y la tarjeta, que solo
       recibe el 28 % del orbe a través de su alfa, sube mucho menos: el par se cierra justo donde el
       usuario dijo «brillo». Medido en el corredor 1,077:1 en Home oscuro, por debajo del suelo 1,15
       que esta casa fijó. El eje que se mueve es el TONO y no el alfa (ni opaca llegaba el color
       anterior). Con este valor el par da 1,298:1 bajo el orbe.

       ⚖️ Recalibrado A LA BAJA dentro de la misma sesión, igual que en el corredor y por el mismo
       motivo: el primer intento (`rgba(50,68,110,0.72)`) cumplía de sobra el par de ABAJO —tarjeta
       contra su página— y se llevaba por delante el de ARRIBA, el del texto escrito encima. Son suelo y
       techo del MISMO fondo, así que el valor bueno no es «el que más separa»: es el que deja los dos. */
    --glass-bg:             rgba(44, 60, 98, 0.72);
    --glass-bg-heavy:       rgba(6, 14, 30, 0.85);
    --glass-border:         rgba(148, 163, 184, 0.10);
    /* El canto de la TARJETA, separado de --glass-border a propósito: ese peina otras superficies
       (barra, cajón, filas de tabla, bordes de campo) donde una línea tenue SÍ es lo correcto, y subirlo
       allí engordaría toda la consola. Aquí tiene que ser al menos tan visible como en claro (0,20):
       sobre un lienzo oscuro un canto se ve MENOS, no más. */
    --glass-border-card:    rgba(148, 163, 184, 0.22);
    /* Sube con la tarjeta: al hover le queda que distinguirse de un canto que ahora parte de 0,22. */
    --glass-border-hover:   rgba(148, 163, 184, 0.38);
    --glass-blur:           blur(20px) saturate(180%);
    --glass-blur-heavy:     blur(32px) saturate(200%);

    /* Layout */
    --app-radius-card:      18px;
    --app-radius-input:     12px;
    --app-radius-button:    10px;

    /* Shadows */
    --app-shadow-card:       0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.20);
    --app-shadow-card-hover: 0 8px 40px rgba(59, 130, 246, 0.18), 0 2px 8px rgba(0, 0, 0, 0.30);
    --app-glow-blue:         0 0 40px rgba(59, 130, 246, 0.15);
    --app-glow-violet:       0 0 40px rgba(124, 58, 237, 0.12);

    /* Animation timing */
    --anim-ease:   cubic-bezier(0.16, 1, 0.3, 1);
    --anim-fast:   180ms;
    --anim-normal: 280ms;
    --anim-slow:   500ms;

    /* Orb colors */
    --orb-blue:   rgba(59, 130, 246, 0.18);
    --orb-violet: rgba(124, 58, 237, 0.13);
    --orb-mint:   rgba(16, 185, 129, 0.10);
}

/* ── 2. Global Reset & Font Rendering ─────────────────────── */
html, body {
    font-feature-settings: 'cv11', 'ss01', 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    /* Fondo navy oscuro (paridad broker). En claro lo sobreescribe body.ins-light. */
    background-color: #050d1a;
    overflow-x: hidden;
    transition: background-color 300ms ease;
}

/* ── 3. Animated Background Orbs ──────────────────────────── */
.app-bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.app-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.app-orb--blue {
    width: clamp(400px, 60vw, 900px);
    height: clamp(400px, 60vw, 900px);
    background: radial-gradient(circle, var(--orb-blue) 0%, transparent 70%);
    top: -20%;
    right: -10%;
    animation: orbFloat 14s ease-in-out infinite alternate;
}

.app-orb--violet {
    width: clamp(300px, 45vw, 700px);
    height: clamp(300px, 45vw, 700px);
    background: radial-gradient(circle, var(--orb-violet) 0%, transparent 70%);
    bottom: -15%;
    left: -5%;
    animation: orbFloat 18s ease-in-out infinite alternate-reverse;
    animation-delay: -6s;
}

.app-orb--mint {
    width: clamp(200px, 30vw, 500px);
    height: clamp(200px, 30vw, 500px);
    background: radial-gradient(circle, var(--orb-mint) 0%, transparent 70%);
    top: 40%;
    left: 30%;
    animation: orbFloat 22s ease-in-out infinite alternate;
    animation-delay: -10s;
}

@keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(40px, -30px) scale(1.05); }
    66%  { transform: translate(-20px, 20px) scale(0.97); }
    100% { transform: translate(30px, 40px) scale(1.03); }
}

/* Layout layers sit above orbs */
.mud-layout {
    position: relative;
    z-index: 1;
}

/* ── 4. AppBar — Glass Surface ────────────────────────────── */
.mud-appbar {
    background: var(--glass-bg-heavy) !important;
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
}

.mud-appbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.35) 30%,
        rgba(124, 58, 237, 0.25) 70%,
        transparent 100%
    );
    pointer-events: none;
}

/* ── Texto con degradado — UN solo mecanismo ────────────────────────────────
   `background-clip: text` recorta el degradado a la CAJA DE PINTADO del elemento, no a las letras: el rabo
   de una «p» o una «g» que asoma por debajo de esa caja se queda sin pintar y la letra sale amputada. En esta
   consola muerde de verdad en el título de «Recuperar contraseña» y en el de «Verificación en dos pasos».
   El antídoto es dar caja de sobra por abajo (`padding-bottom`) y devolverla con un `margin-bottom` negativo
   del MISMO tamaño: la caja de MARGEN no cambia, así que nada se mueve de sitio — y eso importa porque el
   título de la barra superior se centra por flexbox, que alinea justamente por la caja de margen.

   El recorte estaba copiado en SEIS bloques (tres selectores × dos temas), cada uno con su propia tríada de
   declaraciones. Ahora el mecanismo se declara UNA vez, con `.ins-gradient-text` como nombre canónico, y cada
   sitio solo aporta SU degradado en `--ins-gradient-text`. Precedente en el repo: InsBrandWordmark ya
   demostró que un degradado de marca no obliga a recortar. */
.ins-gradient-text,
.mud-appbar .mud-typography-h6,
.app-brand-text {
    background-image: var(--ins-gradient-text, linear-gradient(135deg, #e2e8f0 0%, #93c5fd 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
}

/* Brand name de la barra superior */
.mud-appbar .mud-typography-h6 {
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    --ins-gradient-text: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
}

/* Utilidad de texto-marca con gradiente (login/TOTP y otros títulos puntuales) */
.app-brand-text {
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    --ins-gradient-text: linear-gradient(135deg, #e2e8f0 0%, #93c5fd 100%);
}

/* ── 5. Drawer — Glass Surface ────────────────────────────── */
.mud-drawer {
    background: var(--glass-bg-heavy) !important;
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border-right: 1px solid var(--glass-border) !important;
}

.mud-drawer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(59, 130, 246, 0.40) 30%,
        rgba(124, 58, 237, 0.30) 70%,
        transparent 100%
    );
    pointer-events: none;
}

/* ── 6. Cards & Papers — Glassmorphism ────────────────────── */
.mud-paper {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-card);
    border-radius: var(--app-radius-card);
    /* 🪤 M-340 · La sombra estaba SOLO dentro del `transition` de aquí abajo: una transición de una sombra
       que no existía. Computado en vivo daba `box-shadow: none` en oscuro mientras el tema claro declaraba
       dos capas. Se DECLARA, y así la tarjeta tiene relieve en los dos temas. */
    box-shadow: var(--app-shadow-card);
    transition:
        box-shadow var(--anim-normal) var(--anim-ease),
        border-color var(--anim-normal) var(--anim-ease),
        transform var(--anim-normal) var(--anim-ease);
}

.mud-card {
    box-shadow: var(--app-shadow-card);
}

.mud-card:hover,
.mud-paper.app-card-hover:hover {
    box-shadow: var(--app-shadow-card-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
}

/* Dialogs */
.mud-dialog {
    background: rgba(6, 14, 35, 0.94) !important;
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid var(--glass-border-hover);
    border-radius: var(--app-radius-card);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.60), var(--app-glow-blue);
}

/* Popovers / dropdowns */
.mud-popover-paper {
    background: rgba(6, 14, 35, 0.96) !important;
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid var(--glass-border-hover);
    border-radius: var(--app-radius-input);
}

/* .ins-tall-popover (selects de lista larga) vive ahora en el RCL compartido insLayout.css —
   SSOT único para los 3 hosts; se eliminó de aquí para no duplicar. */

/* ── 7. Tables ─────────────────────────────────────────────── */
.mud-table-root .mud-table-head .mud-table-cell {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-secondary);
    background: rgba(10, 22, 50, 0.50) !important;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
}

.mud-table-root .mud-table-body .mud-table-row {
    transition: background-color var(--anim-fast) ease;
}

.mud-table-root .mud-table-row.app-row-hover:hover,
.mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: rgba(59, 130, 246, 0.06) !important;
}

.mud-table-root .mud-table-cell {
    border-bottom: 1px solid var(--glass-border);
}

/* Evita el recorte de texto en celdas (heredado de backoffice.css) */
.mud-table-cell {
    word-break: break-word;
}

/* Scroll horizontal en tablas/datagrids del backoffice sin tocar cada página */
.mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Superficie estándar de las grillas (MudPaper que envuelve un MudDataGrid). Antes se usaba el inline
   `overflow: clip`, que RECORTA el desbordamiento horizontal (la última columna se cortaba cuando el
   sidebar fijo estrechaba el contenido). `overflow-x: auto` deja scroll horizontal cuando hace falta;
   `overflow-y: clip` conserva el recorte vertical (esquinas redondeadas) sin añadir scrollbar vertical. */
.app-grid-surface {
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
}

/* MudSimpleTable (tablas clave/valor, trazas) también necesita scroll-x */
.mud-simple-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 7b. Data Grid (MudDataGrid · WP-F2) ───────────────────────
   MudDataGrid renderiza .mud-table-root/.mud-table-head/.mud-table-cell/
   .mud-table-container ⇒ hereda el glass de la sección 7. Aquí solo se pulen
   sus elementos propios (sort-label, paginación) y utilidades de columna. */
.mud-data-grid .mud-table-sort-label { font-weight: 600; white-space: nowrap; }
.mud-data-grid .mud-table-sort-label:hover { color: #60a5fa; }
.mud-data-grid .mud-table-sort-label .mud-table-sort-label-icon { color: #3b82f6; }

.mud-table-pagination {
    border-top: 1px solid var(--glass-border);
    background: rgba(10, 22, 50, 0.40);
}

/* Celda de acciones: botones en una sola línea, alineados a la derecha. */
.mud-table-cell.grid-actions {
    white-space: nowrap;
    text-align: right;
}

/* Texto monoespaciado de columnas (códigos, claves, versiones). */
.mud-table-cell.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Recorte de textos largos a 2 líneas (nombres) con tope de ancho. */
.mud-table-cell.col-clamp { max-width: 560px; }
.mud-table-cell.col-clamp .mud-typography,
.mud-table-cell.col-clamp .col-clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prioridad de columnas (responsive prioridad + scroll-x):
   .col-hide-sm se oculta en móvil (<600); .col-hide-md también en tablet (<960).
   Aplicar con HeaderClass + CellClass; las reglas display:none viven en la
   sección 14 (media queries). Las columnas sin clase + acciones siempre visibles;
   el desbordamiento restante hace scroll-x vía .mud-table-container. */

/* Toolbar de tablas (ListToolbar): los estilos base viven en el asset compartido
   _content/InsCore.Ui.Gadgets/insList.css (.app-list-toolbar*), el mismo que usan
   broker y portal tomador. Aquí solo quedan los ajustes responsive (más abajo). */

/* ── 8. Inputs & Buttons ───────────────────────────────────── */
.mud-input-outlined-border {
    border-color: var(--glass-border) !important;
    border-radius: var(--app-radius-input) !important;
    transition: border-color var(--anim-fast) ease, box-shadow var(--anim-fast) ease;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--glass-border-hover) !important;
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: rgba(59, 130, 246, 0.60) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.mud-input-control .mud-input-slot {
    border-radius: var(--app-radius-input);
    background: rgba(10, 22, 50, 0.40);
}

.mud-button-root {
    border-radius: var(--app-radius-button) !important;
    text-transform: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition:
        box-shadow var(--anim-fast) var(--anim-ease),
        transform var(--anim-fast) var(--anim-ease);
}

.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.30);
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.45);
    transform: translateY(-1px);
}

.mud-button-filled.mud-button-filled-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.30);
}

/* ── 9. Nav Links ─────────────────────────────────────────── */
.mud-nav-link {
    margin: 2px 8px;
    border-radius: 10px;
    transition:
        background-color var(--anim-fast) ease,
        color var(--anim-fast) ease;
}

.mud-nav-link:hover {
    background-color: rgba(59, 130, 246, 0.08);
}

.mud-nav-link.active {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.18) 0%,
        rgba(59, 130, 246, 0.06) 100%
    );
    color: #60a5fa !important;
    border-radius: 10px;
    box-shadow: inset 3px 0 0 #3b82f6;
}

.mud-nav-link.active .mud-icon-root {
    color: #3b82f6 !important;
}

/* Encabezado de grupo del drawer */
.mud-nav-group > .mud-nav-link {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── 10. KPI Cards ────────────────────────────────────────── */
/* M-572 · Espejo EXACTO del host del corredor (ver el motivo completo allí): el degradado anterior
   terminaba en rgba(10,22,50,0.60), que sobre el lienzo de esta consola (rgb(5,13,26), medido) compone
   a 1,05:1 — una tarjeta sin superficie, la clase de M-340 viva porque este `!important` pisa el
   `--glass-bg` que aquel mandato subió. Ahora el acento es un TINTE que se desvanece SOBRE la
   superficie: si `--glass-bg` se mueve, la KPI lo sigue. Lo vigila, con los dos pares juntos,
   `AKpiNumberAndItsCardKeepBothContrastPairsTests`. */
.app-kpi-card {
    position: relative;
    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.12) 0%,
            rgba(59, 130, 246, 0.00) 100%
        ),
        var(--glass-bg) !important;
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    box-shadow: var(--app-glow-blue), var(--app-shadow-card);
    transition:
        box-shadow var(--anim-normal) var(--anim-ease),
        transform var(--anim-normal) var(--anim-ease),
        border-color var(--anim-normal) ease;
}

.app-kpi-card--link { cursor: pointer; }

.app-kpi-card--link:hover {
    box-shadow: 0 8px 40px rgba(59, 130, 246, 0.22), 0 2px 8px rgba(0, 0, 0, 0.30);
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, 0.35) !important;
}

.app-kpi-card__go {
    position: absolute;
    bottom: 10px;
    right: 12px;
    opacity: 0.35;
    color: var(--mud-palette-primary);
    transition: opacity var(--anim-normal) ease, transform var(--anim-normal) ease;
}

.app-kpi-card--link:hover .app-kpi-card__go {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* 💼 LA CIFRA DE UNA TARJETA ES UN DATO DE NEGOCIO, NO UN TITULAR DE PORTADA — la MISMA receta que
   el host del corredor, y por eso vive en los DOS: un arreglo por entorno no es un arreglo, y esta clase ya
   se declaró dos veces con la misma pinta (la lección de M-415). Fuera Syne/800 y fuera el degradado
   recortado: `Inter` 600 con cifras tabulares, que es lo que se compara de un vistazo.
   📏 MEDIDO al tocarlo: esta consola tiene **CERO** pintores de `.app-kpi-card` — 0 usos en sus `.razor`
   frente a 26 en el host del corredor— y aún así le dedica **11 declaraciones**. No se borra a ciegas en la
   misma pasada que cambia el estilo: queda declarado para retirarlo con su barrido propio. */
.app-kpi-card .mud-typography-h3,
.app-kpi-card .mud-typography-h4 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ins-kpi-number);
}

/* ── 11. Empty State ──────────────────────────────────────── */
.app-empty-state {
    padding: 64px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* `>` y no descendiente: espejo EXACTO de la misma regla en el host del corredor (ver su motivo allí).
   La regla alcanzaba al icono del BOTÓN de la salida y lo inflaba a 64 px; aquí hay cinco vacíos con
   `StartIcon` (países, plantillas, coberturas, auditoría, solicitudes) con el mismo botón deforme. */
.app-empty-state > .mud-icon-root {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.30;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.30));
}

/* ── 12. Page Entry Animations ────────────────────────────── */
.mud-main-content > .mud-container {
    animation: pageEnter var(--anim-slow) var(--anim-ease) both;
}

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mud-grid > .mud-item {
    animation: itemEnter var(--anim-slow) var(--anim-ease) both;
}

.mud-grid > .mud-item:nth-child(1) { animation-delay: 0ms; }
.mud-grid > .mud-item:nth-child(2) { animation-delay: 60ms; }
.mud-grid > .mud-item:nth-child(3) { animation-delay: 120ms; }
.mud-grid > .mud-item:nth-child(4) { animation-delay: 180ms; }
.mud-grid > .mud-item:nth-child(5) { animation-delay: 240ms; }
.mud-grid > .mud-item:nth-child(6) { animation-delay: 300ms; }
.mud-grid > .mud-item:nth-child(7) { animation-delay: 360ms; }
.mud-grid > .mud-item:nth-child(8) { animation-delay: 420ms; }

@keyframes itemEnter {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chips */
.mud-chip {
    border-radius: 999px !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
}

/* Progress bars */
.mud-progress-linear .mud-progress-linear-bar {
    background: linear-gradient(90deg, #3b82f6, #7c3aed) !important;
    border-radius: 999px;
}

/* Snackbar */
.mud-snackbar {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-hover);
    border-radius: var(--app-radius-input);
}

/* ── 13. Light Mode Overrides ─────────────────────────────── */
/* MudBlazor v7 no añade clase a <body>; inyectamos ins-light/ins-dark vía JS
   (backofficeTheme.applyTheme) para que estos selectores disparen siempre. */

body.ins-light {
    --ins-kpi-number: #0f172a;
    background-color: #f0f4ff;
}

body.ins-light .app-bg-orbs {
    opacity: 0.22;
}

body.ins-light .mud-paper {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(148, 163, 184, 0.20);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.ins-light .mud-appbar {
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: rgba(148, 163, 184, 0.20) !important;
}

/* Tema claro: los tres sitios comparten degradado, así que es UNA declaración y no tres bloques repetidos.
   El mecanismo del recorte no se repite: ya está en el bloque único de «Texto con degradado». */
body.ins-light .ins-gradient-text,
body.ins-light .mud-appbar .mud-typography-h6,
body.ins-light .app-brand-text {
    --ins-gradient-text: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);
}

body.ins-light .mud-appbar::after {
    opacity: 0.5;
}

body.ins-light .mud-drawer {
    background: rgba(248, 250, 255, 0.96) !important;
    border-right-color: rgba(148, 163, 184, 0.20) !important;
}

body.ins-light .mud-dialog {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.15);
}

body.ins-light .mud-popover-paper {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.20);
}

body.ins-light .mud-input-control .mud-input-slot {
    background: rgba(248, 250, 252, 0.80);
}

/* 🌕 s73 · Espejo EXACTO del host del corredor (la medida completa vive allí): en claro esta tarjeta
   componía POR DEBAJO de su propia página —7 de 8 tarjetas medidas en el corredor, peor par 1,003:1—
   porque el TINTE solo puede restar luminancia sobre un lienzo claro, y `#f0f4ff` ya es azulado.
   🏆 En tema claro la elevación la da la SOMBRA, no la superficie (el techo físico de una tarjeta
   blanca sobre este lienzo es 1,10:1): el acento se muda del fondo al CANTO y la sombra pasa a ser la
   neutra de dos capas que ya usa `body.ins-light .mud-paper`, en vez de un halo azul al 0,08 que sobre
   un lienzo azulado no se ve. */
body.ins-light .app-kpi-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
}

body.ins-light .mud-table-root .mud-table-head .mud-table-cell {
    background: rgba(248, 250, 255, 0.80) !important;
}

body.ins-light .mud-table-pagination {
    background: rgba(248, 250, 255, 0.80);
}

body.ins-light .mud-nav-link.active {
    color: #1d4ed8 !important;
    box-shadow: inset 3px 0 0 #2563eb;
}

body.ins-light .mud-nav-link.active .mud-icon-root {
    color: #2563eb !important;
}

/* ── 14. Responsive Media Queries ─────────────────────────── */

/* Mobile — < 600px */
@media (max-width: 599px) {
    .mud-main-content > .mud-container {
        padding: 12px !important;
    }

    /* Orbs más pequeños en móvil para ahorrar GPU */
    .app-orb {
        filter: blur(60px);
        opacity: 0.75;
    }
    .app-orb--blue   { width: 280px; height: 280px; }
    .app-orb--violet { width: 230px; height: 230px; }
    .app-orb--mint   { width: 140px; height: 140px; }

    /* Las barras de filtro no fuerzan overflow en pantallas pequeñas */
    .mud-input-control,
    .mud-select,
    .mud-text-field {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Filtros del toolbar de tabla: anulan min-width fijos (180px/200px) en xs */
    .app-list-toolbar .mud-input-control,
    .app-list-toolbar .mud-select { min-width: 0 !important; width: 100% !important; }

    /* Toolbar de tablas: búsqueda a ancho completo */
    .app-list-toolbar__search { max-width: 100% !important; flex: 1 1 100%; }

    /* Prioridad de columnas: oculta baja y media-baja en móvil (resto = scroll-x) */
    .mud-table-cell.col-hide-sm,
    .mud-table-cell.col-hide-md { display: none !important; }

    /* Diálogos como bottom-sheet en móvil */
    .mud-dialog-container .mud-dialog {
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        max-height: 92vh;
        overflow-y: auto;
    }
}

/* Tablet — 600px–959px */
@media (min-width: 600px) and (max-width: 959px) {
    .mud-main-content > .mud-container {
        padding: 16px !important;
    }

    .app-orb--blue   { width: 480px; height: 480px; }
    .app-orb--violet { width: 370px; height: 370px; }

    /* Prioridad de columnas: oculta solo la de menor prioridad en tablet */
    .mud-table-cell.col-hide-md { display: none !important; }
}

/* Accessibility — reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-orb { animation: none; }

    .mud-main-content > .mud-container,
    .mud-grid > .mud-item {
        animation: none;
    }

    .mud-card,
    .mud-paper,
    .mud-button-root,
    .mud-nav-link,
    .app-kpi-card {
        transition: none;
    }
}

/* Malla de seguridad anti-desborde para tooltips de la LIBRERÍA MudBlazor: acota el ancho y permite
   wrap para que ningún popover suyo se pinte a ancho completo. La aplicación ya NO tiene ni un solo
   MudTooltip propio (canal único = InsTooltip, guardado por TooltipChannelTests); esto queda solo por
   lo que MudBlazor pueda emitir por dentro. */
.mud-tooltip {
    max-width: min(360px, 90vw);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Drawer: el menú scrollea dentro del drawer (alto fijo bajo el AppBar), independiente del scroll
   de la página — así el buscador fijo de arriba no se va con el contenido y los grupos del final se
   alcanzan sin alargar la página. */
.app-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.app-drawer .mud-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* ── Barra compacta "pegajosa" de páginas de detalle (PageHeader): SOLO SU TEMA ──
   🧹 s73 · Su geometría, su ritmo y su despliegue viven en `insDetail.css` (RCL), que es el SSOT de la
   banda de detalle y lo enlazan los tres hosts. Aquí estaban las 35 líneas enteras, calcadas de las del
   corredor. Lo que se queda es lo que SÍ es de este host: el fondo opaco de cristal. */
.ins-detail-stickybar {
    background-image: linear-gradient(rgba(10, 22, 50, 0.50), rgba(10, 22, 50, 0.50));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* 🌕 s73 · Su contraparte CLARA, que no existía (medido en el corredor: la barra computaba
   `rgb(255,255,255)` y se pintaba `rgb(132,138,152)`, porque el tinte navy se aplicaba también en
   claro). Mismo valor que la cabecera fija de listados de esta hoja: el tinte existe para volver OPACA
   una superficie translúcida, y ese papel es el mismo en los dos temas. */
body.ins-light .ins-detail-stickybar {
    background-image: linear-gradient(rgba(248, 250, 255, 0.80), rgba(248, 250, 255, 0.80));
}