/* ============================================================================
   TRÁMITES — Sistema de diseño
   Tokens + restyling de componentes Bootstrap para un look moderno y con
   profundidad. Las páginas siguen usando clases estándar (card, btn, table…);
   aquí se les da una capa visual coherente.
   ============================================================================ */

:root {
    /* Marca (teal Fluapp). Los tonos se eligen por ROL, no por el número de la escala Tailwind:
       --brand-600 es el "primary" del sistema (texto, links, botón filled) y por eso vale teal-700
       #0f766e (5,5:1 sobre blanco ⇒ AA). El teal-600 real #0d9488 solo da 3,9:1 y NO pasa AA para
       texto, así que NO se usa aquí; vive en la paleta categórica del dashboard (Servicios/Viz.cs),
       donde el piso exigido es 3:1 por ser marcas gráficas con leyenda. */
    --brand-50:  #f0fdfa;
    --brand-100: #ccfbf1;
    --brand-200: #99f6e4;
    --brand-400: #2dd4bf;
    --brand-500: #14b8a6;
    --brand-600: #0f766e;
    --brand-700: #115e59;
    --brand-800: #134e4a;

    /* Estados */
    --success-50:  #ecfdf5;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --danger-50:   #fef2f2;
    --danger-500:  #ef4444;
    --danger-600:  #dc2626;
    --warning-50:  #fffbeb;
    --warning-500: #f59e0b;
    --warning-700: #b45309;
    --info-50:     #eff6ff;
    --info-500:    #3b82f6;
    --info-700:    #1d4ed8;

    /* Neutros — alineados con el Fluapp ERP (frontend/src/index.css: canvas/text/border) para que la
       suite de Nuvexia Tech se vea una sola. */
    --bg:        #f5f7fb;
    --surface:   #ffffff;
    --surface-2: #f9fafe;
    --text:      #232e40;
    --text-soft: #334155;
    /* Un punto más oscuro que el slate-500 de origen (#64748b): aquel daba 4,06:1 sobre
       --md-surface-container-high, por debajo de AA. Este pasa en la superficie MÁS oscura del tema
       claro (4,63:1) y conserva la separación con --text-soft, que es lo que marca la jerarquía
       entre texto principal y secundario. El valor del tema oscuro va aparte y ya cumplía. */
    --muted:     #5a6b84;
    --border:    #e3e9f2;
    --border-2:  #eef0f6;

    /* Radios (los del ERP: sm 7 · md 10 · lg 14) */
    --radius-sm: 7px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Alto compartido de la barra superior y la cabecera del sidebar (deben coincidir) */
    --topbar-h: 4rem;

    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .05);
    --shadow:    0 4px 12px -2px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .06);
    --shadow-md: 0 10px 24px -6px rgba(16, 24, 40, .14), 0 4px 10px -4px rgba(16, 24, 40, .08);
    --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .22);

    /* Bootstrap overrides */
    --bs-primary: var(--brand-600);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    /* Bootstrap 5.3 deriva de estos el color de .table, .list-group, .nav-tabs y .navbar. Su valor de
       fábrica es #000 fijo: sin atarlo al tema, en modo oscuro las tablas salían en NEGRO sobre
       superficie oscura (1,35:1, ilegible). El -rgb no se puede derivar del hex en CSS, así que se
       declara aparte y se redefine en el bloque oscuro. */
    --bs-emphasis-color: var(--text);
    --bs-emphasis-color-rgb: 35, 46, 64;

    /* ── Material 3 (capa de roles) ───────────────────────────────────────────
       Alias M3 mapeados a la marca teal y a los neutros que ya existen. Los
       componentes se reestilan contra estos --md-* (no se borran los tokens base).
       ------------------------------------------------------------------------- */
    --md-primary: var(--brand-600);            --md-on-primary: #ffffff;
    /* Estados del primario. La dirección se INVIERTE por tema (en claro el hover oscurece, en oscuro
       aclara), así que no puede salir de un solo valor: cada tema declara el suyo. */
    --md-primary-hover: var(--brand-700);
    --md-primary-container-hover: var(--brand-200);
    --md-primary-container: #d7f3ef;           --md-on-primary-container: #134e4a; /* «accent-soft» del ERP */
    --md-surface: #ffffff;
    --md-surface-container-low: #f9fafe;        /* cards sutiles */
    --md-surface-container: #f1f3fb;            /* hover / zonas */
    --md-surface-container-high: #e9edf7;
    --md-surface-dim: var(--bg);                /* canvas */
    --md-on-surface: var(--text);              --md-on-surface-variant: #475569;
    --md-outline: #d2dbe9;                     --md-outline-variant: var(--border);

    /* Forma: cards 16px y botones con radio de 10px como el ERP (allí la píldora queda solo para el
       botón de «Ingresar» del login y los chips/segmentados). */
    --md-shape-card: 16px;   --md-shape-button: var(--radius);   --md-shape-field: 10px;

    /* Elevación M3 (sutil): reaprovecha las sombras base */
    --md-elev-1: var(--shadow-xs);  --md-elev-2: var(--shadow-sm);  --md-elev-3: var(--shadow);

    /* Pares tonales de estado M3 (badges/alerts suaves, no saturados) */
    --md-success-container: var(--success-50);  --md-on-success-container: var(--success-700);
    --md-warning-container: var(--warning-50);  --md-on-warning-container: var(--warning-700);
    --md-danger-container:  var(--danger-50);   --md-on-danger-container:  #b91c1c;
    --md-info-container:    var(--info-50);     --md-on-info-container:    var(--info-700);
}

/* ── Tema oscuro M3 (ACTIVO) ───────────────────────────────────────────────────
   Preferencia POR USUARIO (persistida en BD, Usuario.ModoOscuro): App.razor fija data-theme="dark"
   server-side (CSP-safe, sin parpadeo ni JS); el toggle vive en el menú de usuario (/preferencias/tema).
   Todos los componentes leen los --md-* y aquí se redefinen también los neutros base. */

[data-theme="dark"] {
    /* Valores del tema oscuro del ERP (canvas #0e1422, surface #151b2a, muted #20293c, text #e2e8f5,
       border-strong #38445f, accent #2ee6d6). --muted conserva #9aa3b5: el «subtle» del ERP (#8593ab)
       no alcanza AA sobre la superficie más clara de este tema. */
    --md-surface: #151b2a;
    --md-surface-container-low: #1a2131;
    --md-surface-container: #20293c;
    --md-surface-container-high: #283247;
    --md-surface-dim: #0e1422;
    --md-on-surface: #e2e8f5;
    --md-on-surface-variant: #b7bdcc;
    --md-outline: #38445f;
    --md-outline-variant: #263048;
    --md-primary: #2ee6d6;
    --md-on-primary: #04211d;
    --md-primary-container: #134e4a;
    --md-on-primary-container: #ccfbf1;
    --md-primary-hover: #55ecdf;                     /* invertido: en oscuro el hover ACLARA */
    --md-primary-container-hover: var(--brand-700);

    --bs-emphasis-color-rgb: 226, 232, 245;

    --bg: #0e1422;          --surface: #151b2a;     --surface-2: #1a2131;
    --text: #e2e8f5;        --text-soft: #cbd2e3;   --muted: #9aa3b5;
    --border: #263048;      --border-2: #20293c;
}

/* ---------------------------------------------------------------- Base ----- */

html, body {
    /* Tipografía del Fluapp ERP: DM Sans en la aplicación (Inter queda para el login, como allá). */
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    /* M3: cuerpo un poco más aireado para legibilidad. */
    line-height: 1.55;
}

a, .btn-link {
    color: var(--md-primary);
    text-decoration: none;
}

a:hover {
    color: var(--md-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 1.75rem;
    margin-bottom: .35rem;
}

h1:focus {
    outline: none;
}

.lead {
    color: var(--muted);
    font-size: 1.02rem;
    font-weight: 400;
}

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

code {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    padding: .1rem .4rem;
    border-radius: 6px;
    font-size: .85em;
}

.content {
    padding-top: 1.5rem;
}

/* -------------------------------------------------------------- Botones ----- */

.btn {
    /* M3: botones tipo "pill". */
    --bs-btn-border-radius: var(--md-shape-button);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--md-shape-button);
    padding: .5rem 1.15rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:active {
    transform: translateY(0);
}

/* Botón FILLED M3 (acción principal). */
.btn-primary {
    color: var(--md-on-primary);
    background: var(--md-primary);
    border: 1px solid var(--md-primary);
    box-shadow: var(--md-elev-1);
}

.btn-primary:hover {
    background: var(--md-primary-hover);
    border-color: var(--md-primary-hover);
    color: var(--md-on-primary);
    box-shadow: var(--md-elev-2);
}

/* Botón TONAL M3 (acción secundaria): color de contenedor, suave, sin saturar. */
.btn-tonal {
    color: var(--md-on-primary-container);
    background: var(--md-primary-container);
    border: 1px solid transparent;
    box-shadow: var(--md-elev-1);
}

.btn-tonal:hover {
    color: var(--md-on-primary-container);
    background: var(--md-primary-container-hover);
    box-shadow: var(--md-elev-2);
}

.btn-success {
    color: #fff;
    background: var(--success-600);
    border: 1px solid var(--success-600);
    box-shadow: var(--shadow-xs);
}

.btn-success:hover {
    background: var(--success-700);
    border-color: var(--success-700);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn-danger {
    color: #fff;
    background: var(--danger-600);
    border: 1px solid var(--danger-600);
    box-shadow: var(--shadow-xs);
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* Los outline se estilan contra --md-* y NO contra --brand-600/700: esos son el teal oscuro en los
   DOS temas, así que como color de texto se hundían sobre la superficie oscura (3,0:1 el primario,
   3,5:1 el secundario). En tema claro --md-primary vale ese mismo #0f766e ⇒ el aspecto no cambia. */
.btn-outline-primary {
    color: var(--md-primary);
    border: 1px solid color-mix(in srgb, var(--md-primary) 45%, transparent);
    background: var(--md-surface);
}

.btn-outline-primary:hover {
    color: var(--md-on-primary-container);
    background: var(--md-primary-container);
    border-color: var(--md-primary);
}

/* Bootstrap lo deja en un gris fijo (#6c757d): 3,5:1 sobre la superficie oscura. Se ata a los
   tokens, con lo que también sube en claro (4,6:1 → 7,4:1). */
.btn-outline-secondary {
    --bs-btn-color: var(--md-on-surface-variant);
    --bs-btn-border-color: var(--md-outline);
    --bs-btn-hover-color: var(--md-on-surface);
    --bs-btn-hover-bg: var(--md-surface-container);
    --bs-btn-hover-border-color: var(--md-outline);
    --bs-btn-active-color: var(--md-on-surface);
    --bs-btn-active-bg: var(--md-surface-container-high);
    --bs-btn-active-border-color: var(--md-outline);
    --bs-btn-disabled-color: var(--md-on-surface-variant);
    --bs-btn-disabled-border-color: var(--md-outline-variant);
}

/* Secundario sobrio: superficie neutra con borde (en vez del gris Bootstrap). */
.btn-secondary {
    color: var(--text-soft);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--muted);
}

.btn-link {
    font-weight: 600;
    color: var(--muted);
}

.btn-link:hover {
    color: var(--md-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--brand-100);
    outline: none;
}

/* -------------------------------------------------------------- Tarjetas ---- */

.card {
    /* M3: superficie elevada, esquinas 16px, borde sutil. */
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-card);
    box-shadow: var(--md-elev-1);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--md-elev-2);
}

/* Tarjeta-enlace (índice de Configuración oficina): texto en color de cuerpo y leve realce al pasar. */
.config-card {
    color: var(--md-on-surface, inherit);
}

.config-card:hover {
    transform: translateY(-2px);
    border-color: var(--md-outline);
}

.card-header {
    /* M3: tipografía "title" con más aire. */
    background: var(--md-surface-container-low);
    border-bottom: 1px solid var(--md-outline-variant);
    font-weight: 600;
    font-size: 1rem;
    color: var(--md-on-surface);
    padding: 1rem 1.25rem;
    letter-spacing: -0.01em;
}

.card-body {
    padding: 1.25rem;
}

/* Encabezados de color (éxito) más suaves y modernos */
.card-header.bg-success {
    background: var(--success-600) !important;
    border-bottom: none;
}

.card.border-success {
    border-color: var(--success-500);
    box-shadow: 0 0 0 1px var(--success-500), var(--shadow);
}

/* --------------------------------------------------------------- Tablas ----- */

.table {
    --bs-table-bg: transparent;
    /* El color va en las VARIABLES, no solo en `color`: Bootstrap lo aplica a cada celda y pisaba el
       del contenedor (por eso el cuerpo salía #000 y no el tono suave del diseño, en los dos temas). */
    --bs-table-color: var(--text-soft);
    --bs-table-striped-color: var(--text-soft);
    --bs-table-active-color: var(--text-soft);
    --bs-table-hover-color: var(--text-soft);
    --bs-table-border-color: var(--md-outline-variant);
    color: var(--text-soft);
    border-color: var(--border-2);
    margin-bottom: 0;
}

.table > thead {
    color: var(--muted);
}

.table > thead th {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--md-outline-variant);
    padding: .7rem .85rem;
    background: var(--md-surface-container-low);
}

.table > tbody td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--md-outline-variant);
    vertical-align: middle;
}

.table > tbody tr {
    transition: background-color .12s ease;
}

.table > tbody tr:hover {
    background-color: var(--md-surface-container);
}

/* ------------------------------------------------------------- Formularios -- */

.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--md-on-surface-variant);
    margin-bottom: .3rem;
}

.form-control, .form-select {
    /* M3: campos con esquinas suaves (12px) y borde outline. */
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-field);
    padding: .55rem .8rem;
    color: var(--text);
    background-color: var(--md-surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control::placeholder {
    color: #aab2c0;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem var(--brand-100);
}

.form-check-input {
    border-color: #c3cad6;
    border-radius: 5px;
}

.form-check-input:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control:focus {
    z-index: 3;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-500);
}

.invalid {
    outline: 1px solid var(--danger-500);
}

.validation-message {
    color: var(--danger-600);
    font-size: .85rem;
}

/* --------------------------------------------------------------- Alertas ---- */

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius);
    border-left-width: 4px;
    padding: .9rem 1.1rem;
    box-shadow: var(--shadow-xs);
}

.alert-heading {
    font-weight: 700;
    font-size: 1rem;
}

.alert-info {
    background: var(--info-50);
    border-color: #bfdbfe;
    border-left-color: var(--info-500);
    color: #1e3a8a;
}

.alert-danger {
    background: var(--danger-50);
    border-color: #fecaca;
    border-left-color: var(--danger-500);
    color: #991b1b;
}

.alert-warning {
    background: var(--warning-50);
    border-color: #fde68a;
    border-left-color: var(--warning-500);
    color: var(--warning-700);
}

.alert-secondary {
    background: var(--surface-2);
    border-color: var(--border);
    border-left-color: var(--muted);
    color: var(--text-soft);
}

/* --------------------------------------------------------------- Badges ----- */

.badge {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .4em .7em;
    border-radius: var(--radius-pill);
}

.badge.bg-secondary {
    background: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
}

/* ---------------------------------------------------- Utilidades de diseño -- */

/* Hero usado en la página de inicio. Degradado de marca Fluapp (el mismo --gradient-brand del ERP),
   sobrio; el acento se reserva para el chip y los elementos interactivos. Todo el degradado mantiene
   el texto blanco por encima de 5,4:1 ⇒ AA en cualquier punto. */
.hero {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #134e4a);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.hero h1 {
    color: #fff;
}

.hero .lead {
    color: rgba(255, 255, 255, .82);
}

/* Chip sobre el hero (antes era estilo inline en Home.razor). */
.hero .chip {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Tarjetas de métrica (dashboard) */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
    height: 100%;
}

.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.stat-card .stat-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    font-size: 1.35rem;
    color: var(--md-on-primary-container);
    background: var(--md-primary-container);
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

.stat-card .stat-label {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 500;
}

/* Variantes de color del icono de métrica */
.stat-icon.is-success { color: var(--success-600); background: var(--success-50); }
.stat-icon.is-info    { color: var(--info-700);    background: var(--info-50); }
.stat-icon.is-warning { color: var(--warning-700); background: var(--warning-50); }

/* Encabezado de página (icono + título + bajada) */
.page-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-head-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    font-size: 1.4rem;
    color: var(--md-on-primary-container);
    background: var(--md-primary-container);
    border: 1px solid color-mix(in srgb, var(--md-primary) 25%, transparent);
}

.page-head h1 {
    margin-bottom: .1rem;
}

.page-head .lead {
    margin-bottom: 0;
    font-size: .95rem;
}

/* Listas (list-group) modernas */
.list-group {
    border-radius: var(--radius);
    overflow: hidden;
}

.list-group-item {
    border-color: var(--border-2);
    padding: .7rem 1rem;
    color: var(--text-soft);
    transition: background-color .12s ease;
}

.list-group-item:hover {
    background-color: var(--surface-2);
}

.list-group-item.active-row {
    background-color: var(--md-primary-container);
    box-shadow: inset 3px 0 0 var(--md-primary);
}

/* Estados M3: pares contenedor/on-container (tonales, no saturados) */
.badge.bg-success { background: var(--md-success-container) !important; color: var(--md-on-success-container) !important; }
.badge.bg-danger  { background: var(--md-danger-container)  !important; color: var(--md-on-danger-container) !important; }
.badge.bg-warning { background: var(--md-warning-container) !important; color: var(--md-on-warning-container) !important; }
.badge.bg-info    { background: var(--md-info-container)    !important; color: var(--md-on-info-container) !important; }

/* Ítem de permiso/entitlement (checkbox enriquecido) */
.permiso-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
    height: 100%;
}

.permiso-item:hover {
    border-color: var(--brand-400);
}

.permiso-item.is-on {
    border-color: var(--brand-400);
    background: var(--md-primary-container);
    box-shadow: inset 0 0 0 1px var(--brand-200);
}

.permiso-item .form-check-input {
    flex: 0 0 auto;
}

.permiso-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.permiso-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--text);
}

.permiso-desc {
    font-size: .76rem;
    color: var(--muted);
}

/* El ítem de permiso/entitlement como SWITCH (no checkbox), conservando el layout flex del card.
   Anula el padding-left:2.5em y el margin-left:-2.5em que Bootstrap aplica con .form-switch. */
.permiso-item.form-switch {
    padding-left: .75rem;
}

.permiso-item.form-switch .form-check-input {
    margin-left: 0;
}

/* ── Menú de acciones por fila (dropdown CSP-safe, gestionado por estado de Blazor) ─────────────
   Bootstrap JS no está cargado; el despliegue lo controla Blazor (no hay data-bs-toggle). El backdrop
   transparente cierra al hacer clic fuera. Las páginas que lo usen ponen `overflow-visible` en la card
   y en `.table-responsive` mientras hay un menú abierto, para que el menú no lo recorte la card. */
.acciones-dd {
    position: relative;
    display: inline-block;
}

.acciones-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1051;
    min-width: 220px;
    padding: .35rem;
    text-align: left;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius);
    box-shadow: var(--md-elev-3);
}

.acciones-menu .acciones-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .6rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
}

.acciones-menu .acciones-item:hover {
    background: var(--md-surface-container);
    color: var(--md-primary);
}

.acciones-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: transparent;
}

/* ── Matrículas iniciales (/tramites): sombreado de filas con faltas + chips ─────────────────────
   Contra los pares container/on-container de estado (se redefinen en [data-theme="dark"]): la fila
   sin placa sombrea en peligro (bloquea más) y la de impuesto pendiente en advertencia; una franja
   en la primera celda refuerza el color para lectores con baja distinción cromática. */
.fila-falta-impuesto > td { background: var(--md-warning-container); }
.fila-falta-placa    > td { background: var(--md-danger-container); }
.fila-falta-impuesto > td:first-child { box-shadow: inset 3px 0 0 var(--md-on-warning-container); }
.fila-falta-placa    > td:first-child { box-shadow: inset 3px 0 0 var(--md-on-danger-container); }

.chip-falta {
    display: inline-flex;
    align-items: center;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.chip-falta-impuesto {
    background: var(--md-warning-container);
    color: var(--md-on-warning-container);
    border: 1px solid var(--md-on-warning-container);
}

.chip-falta-placa {
    background: var(--md-danger-container);
    color: var(--md-on-danger-container);
    border: 1px solid var(--md-on-danger-container);
}

/* ── Novedades de trámites: fila «En novedad» sombreada en NARANJA + chip ─────────────────────────
   Par container/on-container propio (naranja, distinto del ámbar de advertencia y del rojo de
   peligro), con su variante para el tema oscuro. */
:root {
    --md-novedad-container: #ffe0c7;
    --md-on-novedad-container: #8a3a00;
}

[data-theme="dark"] {
    --md-novedad-container: #5a2e00;
    --md-on-novedad-container: #ffb77d;
}

.fila-en-novedad > td { background: var(--md-novedad-container); }
.fila-en-novedad > td:first-child { box-shadow: inset 3px 0 0 var(--md-on-novedad-container); }

.chip-novedad {
    background: var(--md-novedad-container);
    color: var(--md-on-novedad-container);
    border: 1px solid var(--md-on-novedad-container);
}

/* ── Franjas multi-color: una franja por cada falta/novedad abierta, con el COLOR de su tipo ─────
   El degradado (franjas duras) se pinta en el <tr> vía style inline (los colores salen del catálogo,
   validados a «#RRGGBB» en el dominio) y las celdas se vuelven transparentes para dejarlo ver
   (Bootstrap pinta el fondo de la tabla en el <td>). El acento de la primera celda toma el color de
   la primera franja (--fila-acento, inline). */
.fila-franjas > td { background: transparent; }
.fila-franjas > td:first-child { box-shadow: inset 3px 0 0 var(--fila-acento, var(--md-on-novedad-container)); }

/* Muestra circular del color de un tipo de novedad (catálogo y listados). */
.novedad-swatch {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: 1px solid var(--md-outline-variant);
    vertical-align: -.08rem;
}

/* ── Detalle del recibo (modal «Ver detalles»): encabezado destacado + tarjetas de datos ── */
.detalle-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    margin-bottom: 1rem;
}

.detalle-num { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.detalle-total { font-size: 1.3rem; font-weight: 700; margin-top: .15rem; }

.detalle-card {
    border: 1px solid var(--md-outline-variant);
    border-radius: 14px;
    padding: .75rem 1rem;
    height: 100%;
    background: var(--md-surface);
}

.detalle-card > h6 {
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    margin-bottom: .5rem;
}

.detalle-dato {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .18rem 0;
    font-size: .875rem;
}

.detalle-dato > span { color: var(--md-on-surface-variant); white-space: nowrap; }
.detalle-dato > strong { text-align: right; font-weight: 600; }

/* Chip / píldora informativa */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-soft);
}

/* ----------------------------------------------------- Error boundary ------ */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius);
}

    .blazor-error-boundary::after {
        content: "Ha ocurrido un error."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===================== Sidebar M3 — modo riel (colapsado) =====================
   El colapso es 100% CSS sobre el estado del checkbox oculto #sidebar-toggle (lo alterna el
   <label.rail-toggle>). NO se mueve ni se quita ningún nodo del DOM (no reintroduce el bug del
   circuito). Cruza el límite de componentes (MainLayout ↔ NavMenu), por eso vive en el CSS global.
   Solo escritorio; en móvil se conserva el off-canvas existente. Usar #id dentro de :has() eleva la
   especificidad ⇒ estas reglas ganan a las scoped de NavMenu.razor.css.
   Solo con el sidebar fijo (≥ 992px); en teléfono y tablet vertical el menú es un cajón.
   ============================================================================ */
@media (min-width: 992px) {
    .page:has(#sidebar-toggle:checked) .sidebar {
        width: 76px;
    }

    /* Solo iconos: oculta los textos de marca y los carets de sección. */
    .page:has(#sidebar-toggle:checked) .brand-text,
    .page:has(#sidebar-toggle:checked) .nav-group-caret {
        display: none;
    }

    /* Marca centrada (solo el cuadro del icono). */
    .page:has(#sidebar-toggle:checked) .navbar-top {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* El logo de la oficina se encoge para caber en el riel angosto. */
    .page:has(#sidebar-toggle:checked) .brand-logo {
        max-width: 44px;
        height: 2.2rem;
    }

    /* El texto del ítem es un nodo suelto (sin <span>): font-size:0 lo oculta; el icono se restaura. */
    .page:has(#sidebar-toggle:checked) .nav-link {
        font-size: 0;
        gap: 0;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .page:has(#sidebar-toggle:checked) .nav-link i {
        font-size: 1.05rem;
    }

    /* Encabezados de grupo: sin ícono que mostrar (es marca exclusiva del ítem), el rótulo se vuelve
       un SEPARADOR con el punto del grupo encima. Así el riel deja de ser una columna de iconos
       indistinguibles: los iconos son ítems y las líneas separan módulos. */
    .page:has(#sidebar-toggle:checked) .nav-group-nombre {
        display: none;
    }

    .page:has(#sidebar-toggle:checked) .nav-group-summary {
        justify-content: center;
        gap: 0;
        padding: .45rem 0 .35rem;
        position: relative;
    }

    .page:has(#sidebar-toggle:checked) .nav-group-summary::after {
        content: "";
        position: absolute;
        left: 1.15rem;
        right: 1.15rem;
        top: 50%;
        height: 1px;
        background: var(--md-outline-variant, #e4e7ee);
    }

    /* El punto se monta sobre la línea y la corta con un halo del color del sidebar. */
    .page:has(#sidebar-toggle:checked) .nav-group-summary::before,
    .page:has(#sidebar-toggle:checked) .nav-group:has(a.active) > .nav-group-summary::before {
        position: relative;
        z-index: 1;
        box-shadow: 0 0 0 4px var(--md-surface, #fff);
    }

    /* Las guías verticales no tienen sentido sin texto: el riel recupera todo su ancho. */
    .page:has(#sidebar-toggle:checked) .nav-item::before,
    .page:has(#sidebar-toggle:checked) .nav-subgroup::before {
        display: none;
    }

    .page:has(#sidebar-toggle:checked) .nav-item,
    .page:has(#sidebar-toggle:checked) .nav-subgroup .nav-item {
        padding-left: .55rem;
    }
}

/* ── Control segmentado (tabs tipo píldora M3) — reemplazo de .nav-tabs para 2–3 vistas ──────── */
.seg {
    display: inline-flex;
    background: var(--md-surface-container, #f1f3fb);
    border: 1px solid var(--md-outline-variant, #e4e7ee);
    border-radius: var(--radius-pill, 999px);
    padding: .25rem;
    gap: .2rem;
}

.seg > button {
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant, #475569);
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem 1rem;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background-color .12s ease, color .12s ease;
}

.seg > button:hover { color: var(--md-on-surface, #1e293b); }

.seg > button.active {
    background: var(--md-surface, #fff);
    color: var(--md-primary, #0f766e);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, .05));
}

/* Números tabulares en todas las tablas (montos y numeraciones bien alineados). */
.table { font-variant-numeric: tabular-nums; }

/* Tinte de vencimiento para fechas (SOAT/RTM u otras). Presentacional, sin tocar datos.
   La regla general sirve fuera de tablas (texto suelto, tarjetas de detalle); la variante `.table td`
   le gana en especificidad a la regla de Bootstrap `.table > :not(caption) > * > *` (color de celda). */
.fecha-porvencer { color: var(--warning-700, #b45309); font-weight: 600; }
.fecha-vencida   { color: var(--danger-600,  #dc2626); font-weight: 600; }
.table td.fecha-porvencer { color: var(--warning-700, #b45309); }
.table td.fecha-vencida   { color: var(--danger-600,  #dc2626); }

/* ── Filtro multi-select de novedades (columna «Novedades» de los listados de trámites) ────────── */
.filtro-novedades > summary {
    list-style: none;
    cursor: pointer;
    font-size: .8rem;
    padding: .25rem .5rem;
    border: 1px solid var(--md-outline-variant, #e4e7ee);
    border-radius: var(--radius-sm, 6px);
    background: var(--md-surface, #fff);
    color: var(--md-on-surface, #1e293b);
    white-space: nowrap;
}
.filtro-novedades > summary::-webkit-details-marker { display: none; }
.filtro-novedades[open] > summary { border-color: var(--brand-500, #14b8a6); }
.filtro-novedades-panel {
    margin-top: .25rem;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .1rem;
}
.filtro-novedades-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
}
.filtro-novedades-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--md-novedad-container, #f59e0b);
    flex: 0 0 auto;
}
/* Asistentes de operación (M3) — COMPARTIDO por «Nuevo trámite» y «Nueva cotización»: stepper,
   secciones-tarjeta, entidades cargadas y total. Estilado contra los tokens --md-*; los tintes usan
   color-mix sobre --md-surface para que sirvan igual en tema claro y oscuro. */

/* ── Stepper ───────────────────────────────────────────────────────────────── */
.wiz-stepper {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.25rem;
}

.wiz-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    opacity: .55;
    transition: opacity .15s ease;
}

.wiz-step-activo,
.wiz-step-hecho { opacity: 1; }

.wiz-step-num {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: .95rem;
    background: var(--md-surface-container, #eef0f7);
    color: var(--md-on-surface-variant, #64748b);
    border: 1px solid var(--md-outline-variant, #e4e7ee);
}

.wiz-step-activo .wiz-step-num {
    background: var(--md-primary, var(--brand-600, #0f766e));
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, .1));
}

.wiz-step-hecho .wiz-step-num {
    background: color-mix(in srgb, #22c55e 18%, var(--md-surface, #fff));
    color: var(--success-700, #15803d);
    border-color: transparent;
}

.wiz-step-rotulo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.wiz-step-titulo { font-weight: 700; font-size: .92rem; }

.wiz-step-sub {
    font-size: .74rem;
    color: var(--md-on-surface-variant, #64748b);
}

.wiz-step-linea {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--md-outline-variant, #e4e7ee);
}

/* ── Secciones como tarjetas ───────────────────────────────────────────────── */
.wiz-seccion {
    border: 1px solid var(--md-outline-variant, #e4e7ee);
    border-radius: var(--md-shape-lg, 14px);
    background: var(--md-surface, #fff);
    margin-bottom: .9rem;
    overflow: hidden;
}

.wiz-seccion-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .9rem;
    font-weight: 700;
    font-size: .9rem;
    background: var(--md-surface-container, #f6f7fb);
    border-bottom: 1px solid var(--md-outline-variant, #e4e7ee);
}

.wiz-seccion-icono {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--md-primary-container, #ccfbf1);
    color: var(--md-on-primary-container, #134e4a);
    font-size: .9rem;
}

.wiz-seccion-body { padding: .9rem; }

/* ── Entidad cargada (vehículo / propietario / comprador) ──────────────────── */
.wiz-cargado {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem;
    border-radius: var(--radius-sm, 10px);
    background: color-mix(in srgb, #22c55e 10%, var(--md-surface, #fff));
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
    margin-bottom: .5rem;
}

.wiz-cargado-icono {
    width: 1.8rem;
    height: 1.8rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, #22c55e 22%, var(--md-surface, #fff));
    color: var(--success-700, #15803d);
}

.wiz-cargado-info {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.wiz-cargado .btn { margin-left: auto; flex: none; }

.wiz-cargado-detalle {
    color: var(--md-on-surface-variant, #475569);
    font-size: .9rem;
}

/* Placa al estilo de placa vehicular (sobria: borde doble + espaciado). */
.wiz-placa {
    font-weight: 800;
    letter-spacing: .1em;
    padding: .1rem .55rem;
    border: 2px solid var(--md-on-surface, #334155);
    border-radius: 6px;
    background: var(--md-surface, #fff);
    font-variant-numeric: tabular-nums;
}

/* ── Trámites elegidos ─────────────────────────────────────────────────────── */
.wiz-items {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.wiz-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .65rem;
    border: 1px solid var(--md-outline-variant, #e4e7ee);
    border-radius: var(--radius-sm, 10px);
    background: var(--md-surface-container, #f8f9fc);
}

.wiz-item-icono { color: var(--md-primary, var(--brand-600, #0f766e)); }

.wiz-item-nombre { font-weight: 600; }

/* ── Paso 2 · Liquidación ──────────────────────────────────────────────────── */
.wiz-grupo .card-header {
    background: var(--md-surface-container, #f6f7fb);
}

.wiz-grupo-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--md-primary, var(--brand-700, #115e59));
}

.wiz-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: .8rem 1.1rem;
    border-radius: var(--md-shape-lg, 14px);
    background: var(--md-primary-container, #ccfbf1);
    color: var(--md-on-primary-container, #134e4a);
}

.wiz-total-rotulo { font-weight: 600; }

.wiz-total-valor {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   DASHBOARD (/dashboard) — barra de filtros, tarjetas de indicador y gráficas
   ----------------------------------------------------------------------------
   Capa compartida (como wiz-*) porque las gráficas viven en componentes hijos
   (Shared/Viz + Pages/Tablero) y el CSS scoped del padre no los alcanzaría.
   Todo contra los tokens --md-*: el tema oscuro sale solo. Sin JavaScript: las
   gráficas son CSS + atributos title (CSP intacta).
   ========================================================================== */

/* ── Barra de filtros: UNA fila arriba que acota TODO el tablero ───────────── */
.dash-filtros { margin-bottom: .25rem; }

.dash-filtros .card-body {
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.dash-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.dash-fila-titulo {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 5.5rem;
}

.dash-periodos { display: flex; flex-wrap: wrap; gap: .3rem; }

.dash-chip {
    border: 1px solid var(--md-outline);
    background: transparent;
    color: var(--text-soft);
    border-radius: var(--radius-pill, 999px);
    padding: .2rem .75rem;
    font-size: .82rem;
    line-height: 1.45;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.dash-chip:hover { background: color-mix(in srgb, var(--md-primary) 10%, transparent); }

.dash-chip.active {
    background: var(--md-primary);
    border-color: var(--md-primary);
    color: var(--md-on-primary);
    font-weight: 600;
}

.dash-rango { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.dash-rango input { width: auto; min-width: 8.5rem; }
.dash-rango-sep { color: var(--muted); }

/* width:auto ajusta el select al texto y la flecha de Bootstrap se monta encima: se reserva su carril. */
.dash-filtros select {
    width: auto;
    max-width: 14rem;
    padding-right: 2.4rem;
}

.dash-periodo {
    font-size: .82rem;
    color: var(--text-soft);
    margin: .7rem 0 .2rem;
}

.dash-sin-datos {
    background: var(--md-surface-container);
    border-radius: var(--radius-pill, 999px);
    padding: .1rem .6rem;
    font-size: .75rem;
    margin-left: .4rem;
}

/* Al refrescar se atenúa el render anterior en vez de mostrar un skeleton: sin salto de layout. */
.viz-cargando { opacity: .5; transition: opacity .15s ease; pointer-events: none; }

/* ── Tarjetas de indicador ─────────────────────────────────────────────────── */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

.dash-kpi {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-field, 12px);
    padding: .7rem .85rem .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    position: relative;
    overflow: hidden;
}

.dash-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--kpi-acento, var(--md-primary));
}

.dash-kpi-lbl {
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .35rem;
}

.dash-kpi-lbl i { color: var(--kpi-acento, var(--md-primary)); }

/* Cifras proporcionales: a este tamaño las tabulares se ven sueltas. */
.dash-kpi-val {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    font-variant-numeric: proportional-nums;
}

.dash-kpi-delta,
.dash-kpi-nota {
    font-size: .76rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.dash-kpi-nota { color: var(--muted); }
.dash-delta-bien { color: var(--success-700, #15803d); }
.dash-delta-mal { color: #b91c1c; }
.dash-delta-neutro { color: var(--muted); }

[data-theme="dark"] .dash-delta-bien { color: #4ade80; }
[data-theme="dark"] .dash-delta-mal { color: #f87171; }

.card-sub {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 400;
    margin-left: .35rem;
}

/* ── Columnas agrupadas (serie temporal, UN solo eje) ──────────────────────── */
.viz-chart { display: flex; gap: .5rem; height: 230px; }

.viz-eje {
    position: relative;
    width: 3.4rem;
    flex: 0 0 auto;
    margin-bottom: 1.35rem;
}

.viz-tick {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: .7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.viz-plot { position: relative; flex: 1 1 auto; min-width: 0; }

/* Rejilla: hairline sólido a un tono de la superficie. Nunca punteada. */
.viz-linea {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--md-outline-variant);
    margin-bottom: 1.35rem;
}

.viz-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }

.viz-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
}

.viz-barras {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;              /* separación por hueco de superficie, no por borde */
    height: calc(100% - 1.35rem);
}

.viz-barra {
    flex: 1 1 0;
    max-width: 18px;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    transition: height .25s ease;
}

.viz-col-lbl {
    font-size: .68rem;
    color: var(--muted);
    text-align: center;
    height: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
}

/* ── Leyenda (siempre presente con ≥2 series) ──────────────────────────────── */
.viz-leyenda {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    font-size: .8rem;
    color: var(--text-soft);
}

.viz-leyenda li { display: flex; align-items: center; gap: .4rem; }
.viz-leyenda .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.viz-leyenda b { color: var(--text); font-variant-numeric: tabular-nums; }
.viz-leyenda .pct { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Ranking (barras horizontales) ─────────────────────────────────────────── */
.viz-rank { display: flex; flex-direction: column; gap: .5rem; }

.viz-rank-fila {
    display: grid;
    grid-template-columns: minmax(5.5rem, 38%) 1fr auto;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.viz-rank-lbl {
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viz-rank-pista {
    display: block;
    height: 12px;
    background: var(--md-surface-container);
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
}

.viz-rank-barra {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill, 999px);
    min-width: 2px;
    transition: width .25s ease;
}

.viz-rank-val {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 3rem;
}

/* ── Barra apilada (parte de un todo; se prefiere a una dona) ──────────────── */
.viz-stack {
    display: flex;
    height: 22px;
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
    background: var(--md-surface-container);
    gap: 2px;
}

.viz-stack-seg { min-width: 3px; }

.viz-stack-leyenda { margin-top: .75rem; flex-direction: column; gap: .3rem; }
.viz-stack-leyenda li { gap: .5rem; }
.viz-stack-leyenda .lbl { flex: 1 1 auto; }

/* ── Tablas de datos (la «vista de tabla» accesible de cada gráfica) ───────── */
.viz-tabla { font-size: .85rem; }
.viz-tabla th, .viz-tabla td { vertical-align: middle; }
.viz-tabla tfoot th { border-top: 2px solid var(--md-outline); }

.viz-tabla .viz-celda-larga {
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viz-meter-col { width: 22%; white-space: nowrap; }

.viz-meter {
    display: inline-block;
    width: 58%;
    height: 8px;
    background: var(--md-surface-container);
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
    vertical-align: middle;
}

.viz-meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill, 999px);
    background: #16a34a;
    transition: width .25s ease;
}

.viz-meter-pct {
    font-size: .75rem;
    color: var(--muted);
    margin-left: .4rem;
    font-variant-numeric: tabular-nums;
}

.viz-dias { font-variant-numeric: tabular-nums; font-weight: 600; }
.viz-dias-alto { color: #b91c1c; }
[data-theme="dark"] .viz-dias-alto { color: #f87171; }

.viz-vacio {
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
    margin: 0;
    padding: 2rem 0;
}

.viz-pie { color: var(--muted); font-size: .76rem; margin: .6rem 0 0; }

/* ── Bloque «requiere atención» ────────────────────────────────────────────── */
.dash-atencion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.dash-atencion-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-left: .75rem;
    border-left: 2px solid var(--md-outline-variant);
}

.dash-atencion-val { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.dash-atencion-lbl { font-size: .78rem; color: var(--muted); }

@media (max-width: 767.98px) {
    .dash-rango { margin-left: 0; width: 100%; }
    .dash-rango input { min-width: 0; flex: 1 1 0; }
    .dash-filtros select { max-width: 100%; flex: 1 1 10rem; }
    .viz-rank-fila { grid-template-columns: minmax(4.5rem, 45%) 1fr auto; }
}

/* ── Indicador de navegación en curso ────────────────────────────────────────
   site.js pone html.nav-cargando entre 'enhancednavigationstart' y 'enhancednavigationend'. La barra es
   un pseudo-elemento del <html> (no un nodo del DOM que Blazor gestione) y usa los tokens --md-*: en claro
   es el teal del primario y en oscuro el teal claro, siempre sobre el borde superior. Mientras carga, el
   contenido anterior se atenúa un poco y el cursor pasa a "progress" para que no haya duda de que el clic
   fue recibido (antes la URL cambiaba y nada más se movía, y el usuario repetía el clic). */
html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--md-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--md-primary) 60%, transparent);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

html.nav-cargando::before {
    opacity: 1;
    animation: nav-progreso 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

html.nav-cargando body {
    cursor: progress;
}

html.nav-cargando main > .content {
    opacity: .72;
    transition: opacity .25s ease .15s;
}

@keyframes nav-progreso {
    0%   { width: 0;   margin-left: 0; }
    55%  { width: 70%; margin-left: 0; }
    100% { width: 0;   margin-left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html.nav-cargando::before {
        animation: none;
        width: 100%;
        opacity: .9;
    }
}

/* ============================================================================
   RESPONSIVE — teléfono, tablet y PC
   Breakpoints (los de Bootstrap): < 576 teléfono · < 768 teléfono grande/tablet pequeña · < 992 tablet
   vertical (el menú lateral es un cajón) · ≥ 992 PC y tablet horizontal (menú lateral fijo).
   Todo es CSS: no se mueve ni se quita ningún nodo del DOM de Blazor.
   ============================================================================ */

/* Encabezados de tarjeta con acciones (título + botones): se acomodan en dos renglones si no caben. */
.card-header.d-flex {
    flex-wrap: wrap;
    gap: .5rem;
}

/* Las tablas siempre desplazan en horizontal dentro de su tarjeta (nunca la página entera). */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Imágenes y medios nunca desbordan su contenedor. */
img, svg, video {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    /* Pie de los modales: los botones se acomodan si no caben en una fila. */
    .modal-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Control segmentado: si no cabe, desplaza en horizontal en vez de desbordar. */
    .seg {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .seg::-webkit-scrollbar { display: none; }

    .seg > button { flex: 0 0 auto; white-space: nowrap; }

    /* Pestañas de Bootstrap con muchos ítems: una sola fila desplazable. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .nav-tabs .nav-link { white-space: nowrap; }
}

@media (max-width: 767.98px) {
    .page-head {
        align-items: flex-start;
        gap: .75rem;
        margin-bottom: 1rem;
    }

    .page-head-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.15rem;
    }

    .page-head h1 { font-size: 1.35rem; }
    .page-head .lead { font-size: .875rem; }

    .card-header { padding: .8rem 1rem; }
    .card-body { padding: 1rem; }

    /* Asistentes: el paso inactivo solo muestra su número; la sección y el total ocupan todo el ancho. */
    .wiz-step-sub { display: none; }
    .wiz-cargado { flex-wrap: wrap; }
    .wiz-cargado .btn { margin-left: 0; }

    /* Menú de acciones de fila: no sale de la pantalla en teléfonos. */
    .acciones-menu {
        min-width: min(220px, calc(100vw - 2.5rem));
        max-width: calc(100vw - 2.5rem);
    }
}

@media (max-width: 575.98px) {
    /* Los modales a pantalla casi completa viven en Shared/Modal.razor.css (CSS scoped). */
    .modal-body { padding: 1rem; }

    /* iOS hace zoom al enfocar campos con letra < 16px: en teléfono los campos van a 16px. */
    .form-control,
    .form-select {
        font-size: 16px;
    }

    /* Grupos de botones de acción de la página: ocupan el ancho y se reparten. */
    .card-header.d-flex > .d-flex { width: 100%; }
    .card-header.d-flex > .d-flex > * { flex: 1 1 auto; }

    h1, .h1 { font-size: 1.35rem; }
}

/* Paginador: el contador «n / m» no se parte y el bloque de controles se acomoda en otra fila. */
.paginador .btn { white-space: nowrap; }
.paginador > .d-flex { flex-wrap: wrap; }

@media (max-width: 767.98px) {
    .paginador { justify-content: center !important; }
    .paginador > .d-flex { justify-content: center; }

    /* Filtros por columna en la cabecera de las tablas: ancho mínimo usable (la tabla desplaza en horizontal). */
    .filtros-col input.form-control,
    .filtros-col select.form-select {
        min-width: 7.5rem;
    }
}