/* AxosCore · hoja de estilos de la web de mantenimiento.
   1) Tokens (colores, tipografía, radios, sombras) en :root; el modo oscuro solo redefine tokens.
   2) Componentes: usan siempre tokens, nunca colores sueltos.
   Tema: automático según el sistema; se fuerza con <html data-theme="claro|oscuro">. */

/* ---------- 1. Tokens ---------- */
:root {
    color-scheme: light;
    --fuente: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --fuente-mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", ui-monospace, Consolas, monospace;

    --fondo: #eef3fb;
    --fondo-brillo: #dce8fb;
    --superficie: #ffffff;
    --superficie-2: #f6f9fe;
    --borde: #e1e8f3;
    --borde-fuerte: #cbd7e8;
    --texto: #0f1b2d;
    --texto-2: #4a5a72;
    --texto-3: #8594aa;

    --primario: #2563eb;
    --primario-hover: #1d4ed8;
    --primario-suave: #e6efff;
    --primario-texto: #1d4ed8;
    --sobre-primario: #ffffff;
    --activo: #0f1b2d;          /* pastilla seleccionada */
    --sobre-activo: #ffffff;
    --foco: #93b4f5;

    /* Familias tonales: fondo · borde · texto fuerte */
    --azul-fondo: #e8f0fe;  --azul-borde: #cfdffc;  --azul: #1d5fe0;
    --verde-fondo: #dcf6e8; --verde-borde: #bdebd2; --verde: #12804a;
    --ambar-fondo: #fdf3d3; --ambar-borde: #f6e3a3; --ambar: #b45309;
    --rojo-fondo: #fde4e4;  --rojo-borde: #f8c9c9;  --rojo: #c42525;
    --neutro-fondo: #f6f8fb; --neutro-borde: #e1e8f3; --neutro: #0f1b2d;

    --radio-s: 8px;
    --radio: 12px;
    --radio-l: 16px;
    --radio-pastilla: 999px;
    --sombra: 0 1px 2px rgba(15, 27, 45, .04), 0 4px 16px rgba(37, 99, 235, .05);
    --sombra-l: 0 2px 4px rgba(15, 27, 45, .04), 0 12px 32px rgba(37, 99, 235, .08);
    --hueco: 16px;
    --ancho-lateral: 232px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="claro"]) {
        color-scheme: dark;
        --fondo: #0a111e; --fondo-brillo: #10213d;
        --superficie: #111b2c; --superficie-2: #152136;
        --borde: #1f2c44; --borde-fuerte: #2b3b58;
        --texto: #e6edf7; --texto-2: #a6b4c9; --texto-3: #6c7c95;
        --primario: #4f8cf7; --primario-hover: #6b9ff8; --primario-suave: #172a4d; --primario-texto: #8fb5fb;
        --sobre-primario: #ffffff; --activo: #e6edf7; --sobre-activo: #0a111e; --foco: #3b6fd0;
        --azul-fondo: #13264a;  --azul-borde: #1e3a6b;  --azul: #7eaafa;
        --verde-fondo: #0f2e22; --verde-borde: #18473a; --verde: #5fd49a;
        --ambar-fondo: #33270c; --ambar-borde: #4d3a12; --ambar: #f2c14e;
        --rojo-fondo: #3a1518;  --rojo-borde: #5a2025;  --rojo: #f58b8b;
        --neutro-fondo: #152136; --neutro-borde: #1f2c44; --neutro: #e6edf7;
        --sombra: 0 1px 2px rgba(0, 0, 0, .3);
        --sombra-l: 0 8px 28px rgba(0, 0, 0, .35);
    }
}
:root[data-theme="oscuro"] {
    color-scheme: dark;
    --fondo: #0a111e; --fondo-brillo: #10213d;
    --superficie: #111b2c; --superficie-2: #152136;
    --borde: #1f2c44; --borde-fuerte: #2b3b58;
    --texto: #e6edf7; --texto-2: #a6b4c9; --texto-3: #6c7c95;
    --primario: #4f8cf7; --primario-hover: #6b9ff8; --primario-suave: #172a4d; --primario-texto: #8fb5fb;
    --sobre-primario: #ffffff; --activo: #e6edf7; --sobre-activo: #0a111e; --foco: #3b6fd0;
    --azul-fondo: #13264a;  --azul-borde: #1e3a6b;  --azul: #7eaafa;
    --verde-fondo: #0f2e22; --verde-borde: #18473a; --verde: #5fd49a;
    --ambar-fondo: #33270c; --ambar-borde: #4d3a12; --ambar: #f2c14e;
    --rojo-fondo: #3a1518;  --rojo-borde: #5a2025;  --rojo: #f58b8b;
    --neutro-fondo: #152136; --neutro-borde: #1f2c44; --neutro: #e6edf7;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-l: 0 8px 28px rgba(0, 0, 0, .35);
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh;
    font: 14px/1.5 var(--fuente); color: var(--texto);
    background: radial-gradient(1200px 600px at 85% -10%, var(--fondo-brillo), transparent 60%), var(--fondo);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.6rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .75rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
a { color: var(--primario-texto); }
code, pre, kbd { font-family: var(--fuente-mono); font-size: .86em; }
code { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 6px; padding: .05em .35em; }
pre { white-space: pre-wrap; margin: 0; padding: .75rem; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-s); color: var(--texto-2); }
small { color: var(--texto-3); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
svg.icono { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 3. Esqueleto: lateral + contenido ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1rem;
    padding: 1.1rem .8rem; background: var(--superficie); border-right: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: .6rem; padding: .2rem .5rem .6rem; color: var(--texto); text-decoration: none; }
.marca-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primario); color: var(--sobre-primario); font-weight: 800; }
.marca-nombre { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.marca-sub { font-family: var(--fuente-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--radio-s);
    color: var(--texto-2); text-decoration: none; font-weight: 500; border: 1px solid transparent;
}
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
.menu a.active { background: var(--primario-suave); color: var(--primario-texto); border-color: var(--azul-borde); font-weight: 600; }
.sesion { margin-top: auto; padding: .75rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }
.sesion .etiqueta { display: block; margin-bottom: .25rem; }
.sesion button { width: 100%; margin-top: .6rem; }
.sesion form { margin: 0; }
/* Nombre del tema activo, sin JS: lo decide data-theme */
.tema-actual::after { content: "automático"; }
:root[data-theme="claro"] .tema-actual::after { content: "claro"; }
:root[data-theme="oscuro"] .tema-actual::after { content: "oscuro"; }
.contenido { padding: 1.25rem 1.5rem 2rem; display: flex; flex-direction: column; gap: var(--hueco); min-width: 0; }

/* Cabecera de página */
.cabecera-pagina {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra);
}
.cabecera-pagina .etiqueta { color: var(--primario-texto); }
.cabecera-pagina p { margin: .25rem 0 0; color: var(--texto-2); }
.cabecera-pagina .acciones { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* ---------- 4. Rejillas ---------- */
.rejilla { display: grid; gap: var(--hueco); }
.rejilla-panel { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.rejilla-resumen { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.columna { display: flex; flex-direction: column; gap: var(--hueco); min-width: 0; }

/* ---------- 5. Tarjetas ---------- */
.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
    box-shadow: var(--sombra); padding: 1rem 1.1rem; min-width: 0;
}
.tarjeta-cabecera { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.tarjeta-cabecera .enlace { margin-left: auto; font-size: .78rem; font-weight: 600; text-decoration: none; }
.tarjeta-vacia { padding: 1rem; text-align: center; color: var(--texto-3); font-size: .85rem; }
.destacada { background: linear-gradient(135deg, var(--superficie) 40%, var(--azul-fondo)); padding: 1.3rem 1.4rem; }

/* Etiqueta pequeña monoespaciada en mayúsculas */
.etiqueta { font-family: var(--fuente-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }

/* Cifra grande */
.cifra { font-family: var(--fuente); font-size: 3.2rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cifra .de { color: var(--texto-3); font-weight: 700; }
.cifra-nota { color: var(--texto-2); font-weight: 600; }

/* Indicadores (KPI) en tonos pastel */
.kpi { padding: .85rem 1rem; border-radius: var(--radio); border: 1px solid var(--neutro-borde); background: var(--neutro-fondo); --tono: var(--neutro); min-width: 0; }
.kpi .etiqueta { color: var(--texto-3); }
.kpi-valor { font-family: var(--fuente-mono); font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: .3rem 0 .1rem; color: var(--tono); font-variant-numeric: tabular-nums; }
.kpi-pie { font-size: .76rem; color: var(--texto-3); }
.kpi.azul  { background: var(--azul-fondo);  border-color: var(--azul-borde);  --tono: var(--azul); }
.kpi.verde { background: var(--verde-fondo); border-color: var(--verde-borde); --tono: var(--verde); }
.kpi.ambar { background: var(--ambar-fondo); border-color: var(--ambar-borde); --tono: var(--ambar); }
.kpi.rojo  { background: var(--rojo-fondo);  border-color: var(--rojo-borde);  --tono: var(--rojo); }
.kpi.blanco { background: var(--superficie); }

/* ---------- 6. Insignias, puntos, pastillas ---------- */
.insignia {
    display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 6px;
    font-family: var(--fuente-mono); font-size: .68rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    background: var(--neutro-fondo); color: var(--texto-2); border: 1px solid var(--neutro-borde);
}
.insignia.ok    { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde-borde); }
.insignia.aviso { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-borde); }
.insignia.mal   { background: var(--rojo-fondo);  color: var(--rojo);  border-color: var(--rojo-borde); }
.insignia.info  { background: var(--azul-fondo);  color: var(--azul);  border-color: var(--azul-borde); }
.insignia.vivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .insignia.vivo::before { animation: none; } }

.leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8rem; color: var(--texto-2); }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; background: var(--texto-3); }
.punto.azul { background: var(--azul); } .punto.verde { background: var(--verde); }
.punto.ambar { background: var(--ambar); } .punto.rojo { background: var(--rojo); } .punto.oscuro { background: var(--texto); }

.pestanas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.pastilla {
    display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .75rem; border-radius: var(--radio-pastilla);
    border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto);
    font: 600 .78rem var(--fuente); cursor: pointer;
}
.pastilla:hover { background: var(--superficie-2); }
.pastilla.activa { background: var(--activo); border-color: var(--activo); color: var(--sobre-activo); }
.pastilla .contador { font-family: var(--fuente-mono); font-weight: 700; opacity: .8; }

/* ---------- 7. Listas de filas ---------- */
.grupo { display: flex; align-items: baseline; gap: .5rem; margin: .4rem 0 .5rem; }
.grupo h3 { margin: 0; }
.grupo .etiqueta { margin-left: auto; text-transform: none; letter-spacing: .02em; }
.lista { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: .9rem; }
.fila { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; background: var(--superficie); }
.fila + .fila { border-top: 1px solid var(--borde); }
.fila:hover { background: var(--superficie-2); }
.fila-icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--azul-fondo); color: var(--azul); }
.fila-titulo { font-weight: 600; }
.fila-sub { font-family: var(--fuente-mono); font-size: .7rem; color: var(--texto-3); }
.fila-fin { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.mono { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.cifra-linea { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.destacada .progreso { margin-bottom: .9rem; }
.fila-suelta { padding: 0; background: none; color: inherit; text-decoration: none; }
.fila-suelta:hover { background: none; }
a.fila-suelta:hover .fila-titulo { color: var(--primario-texto); }
.fila-icono.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.fila-icono.rojo { background: var(--rojo-fondo); color: var(--rojo); }
.fila-icono.verde { background: var(--verde-fondo); color: var(--verde); }
.fila-fin > svg.icono { color: var(--texto-3); }
.detalle { font-size: .76rem; line-height: 1.8; }
/* Configuración: marca de obligatorio y nombre con ayuda */
.estado-param { display: inline-flex; width: 18px; margin-right: .35rem; vertical-align: -4px; }
.estado-param svg.icono { width: 17px; height: 17px; stroke-width: 2.6; }
.estado-param.ok { color: var(--verde); }
.estado-param.mal { color: var(--rojo); }
.pastilla .estado-param { width: auto; margin: 0 0 0 .1rem; vertical-align: -3px; }
.pastilla .estado-param svg.icono { width: 14px; height: 14px; }
.nombre-celda { white-space: nowrap; }
.con-ayuda { cursor: help; text-decoration: underline dotted var(--texto-3); text-underline-offset: 3px; }
.texto-3 { color: var(--texto-3); }
.alerta .botones { flex: none; }
.botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.texto-2 { color: var(--texto-2); }
td .insignia + .insignia { margin-left: .3rem; }
.fuerte { font-weight: 700; }

/* Atajos */
.atajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.atajo {
    display: flex; flex-direction: column; gap: .15rem; padding: .8rem; border-radius: var(--radio);
    border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); text-decoration: none;
}
.atajo:hover { border-color: var(--azul-borde); background: var(--primario-suave); }
.atajo .fila-icono { width: 28px; height: 28px; border-radius: 8px; margin-bottom: .5rem; background: var(--superficie); border: 1px solid var(--borde); }
.atajo .fila-icono svg { width: 15px; height: 15px; }
.atajo b { font-size: .88rem; }
.atajo span { font-family: var(--fuente-mono); font-size: .66rem; color: var(--texto-3); }

/* ---------- 8. Tablas ---------- */
.tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { font-family: var(--fuente-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); background: var(--superficie-2); white-space: nowrap; }
tbody tr:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
table.datos { font-size: 12px; }
table.datos td { white-space: nowrap; }

/* ---------- 9. Formularios y botones ---------- */
button, .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .95rem; border-radius: var(--radio-s); border: 1px solid var(--primario);
    background: var(--primario); color: var(--sobre-primario); font: 600 .82rem var(--fuente); cursor: pointer; text-decoration: none;
}
button:hover, .boton:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
button:disabled { opacity: .45; cursor: default; }
button.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
button.secundario:hover { background: var(--superficie-2); }
button.peligro { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-borde); }
button.peligro:hover { background: var(--rojo); color: #fff; border-color: var(--rojo); }
button.icono-solo { padding: .45rem; }

.campos { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; margin-bottom: .8rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--texto-2); }
.casilla { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--texto-2); cursor: pointer; padding-bottom: .5rem; }
input, textarea, select {
    padding: .5rem .65rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s);
    background: var(--superficie); color: var(--texto); font: 400 .88rem var(--fuente);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: var(--primario); box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
textarea { width: 100%; resize: vertical; margin-bottom: .8rem; }

/* Avisos */
.alerta { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border-radius: var(--radio); border: 1px solid var(--azul-borde); background: var(--azul-fondo); color: var(--texto); font-size: .86rem; }
.alerta svg { color: var(--azul); margin-top: 1px; }
.alerta.aviso { background: var(--ambar-fondo); border-color: var(--ambar-borde); }
.alerta.aviso svg { color: var(--ambar); }
.alerta.error { background: var(--rojo-fondo); border-color: var(--rojo-borde); }
.alerta.error svg { color: var(--rojo); }
.alerta p { margin: 0; }
p.error, span.error, small.error { color: var(--rojo); }
p.aviso, small.aviso { color: var(--ambar); }

/* Barra de progreso */
.progreso { height: 8px; border-radius: 99px; background: var(--neutro-fondo); border: 1px solid var(--borde); overflow: hidden; display: flex; }
.progreso > span { display: block; height: 100%; background: var(--primario); }
.progreso > span.verde { background: var(--verde); } .progreso > span.ambar { background: var(--ambar); } .progreso > span.rojo { background: var(--rojo); }

/* Resultado de búsqueda */
.caso { border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; background: var(--superficie); }
.caso + .caso { margin-top: .7rem; }
.caso-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .4rem; }
.caso-cabecera .fila-sub { font-size: .72rem; }
.caso-asunto { font-weight: 600; margin-bottom: .5rem; }

/* Entrar */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.entrar .tarjeta { width: 100%; max-width: 380px; padding: 1.6rem; box-shadow: var(--sombra-l); }
.entrar .marca { padding: 0 0 1.2rem; }
.entrar .campo, .entrar input, .entrar button { width: 100%; }
.entrar .campo { margin-bottom: 1rem; }

/* Blazor */
#blazor-error-ui { display: none; position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; padding: .7rem 2.5rem .7rem 1rem; border-radius: var(--radio); background: var(--ambar-fondo); border: 1px solid var(--ambar-borde); box-shadow: var(--sombra-l); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .8rem; top: .6rem; }

/* Visor de datos */
.buscador { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.buscador-campo { position: relative; flex: 1 1 320px; display: flex; }
.buscador-campo svg.icono { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-3); pointer-events: none; }
.buscador-campo input { width: 100%; padding-left: 2.1rem; }
.visor td { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.visor th.ordenable { cursor: pointer; user-select: none; }
.visor th.ordenable:hover { color: var(--texto); }
.visor tbody tr { cursor: pointer; }
.visor tbody tr.seleccionada td { background: var(--primario-suave); }
mark { background: var(--ambar-fondo); color: inherit; border-radius: 3px; outline: 1px solid var(--ambar-borde); padding: 0 1px; }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
.paginacion .etiqueta { margin-right: auto; text-transform: none; letter-spacing: .02em; }
.ficha { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0; font-size: .86rem; }
.ficha dt { font-family: var(--fuente-mono); font-size: .72rem; color: var(--texto-3); padding-top: .15rem; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.ficha pre { margin: 0; white-space: pre-wrap; max-height: 340px; overflow: auto; padding: .6rem .7rem; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-s); }
.ficha small { display: block; margin-top: .2rem; }
.nulo { font-family: var(--fuente-mono); font-size: .78rem; color: var(--texto-3); }

/* ---------- 10. Pantallas estrechas ---------- */
@media (max-width: 1100px) {
    .rejilla-panel, .rejilla-resumen { grid-template-columns: minmax(0, 1fr); }
    .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .6rem 1rem; border-right: 0; border-bottom: 1px solid var(--borde); }
    .marca { padding: 0; }
    .menu { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
    .menu a { white-space: nowrap; padding: .45rem .6rem; }
    .sesion { margin: 0 0 0 auto; padding: 0; border: 0; background: none; display: flex; gap: .4rem; }
    .sesion .etiqueta, .sesion .correo { display: none; }
    .sesion button { margin: 0; width: auto; }
    .contenido { padding: 1rem; }
    .cabecera-pagina { flex-wrap: wrap; }
    .cabecera-pagina .acciones { margin-left: 0; }
    .rejilla-2, .rejilla-4 { grid-template-columns: minmax(0, 1fr); }
    .rejilla-2:has(> .kpi), .rejilla-4:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cifra { font-size: 2.4rem; }
}