/* Central · estética inspirada en iOS.
   Capa de presentación local: conserva estructura, estados, permisos e impresión.
   El vidrio se reserva para navegación; los datos descansan sobre superficies sólidas. */
@media screen {
    :root, :root[data-tema="claro"] {
        color-scheme: light;
        --fondo: #f5f5f7;
        --panel: #ffffff;
        --tarjeta: #ffffff;
        --hundido: #f0f0f3;
        --borde: #dedee5;
        --borde-suave: #ebebf0;
        --texto: #1d1d1f;
        --texto-2: #656571;
        --texto-3: #72727f;
        --tinta: #1d1d1f;
        --acento: #0066d6;
        --acento-claro: #0066d6;
        --acento-oscuro: #0059be;
        --acento-fondo: #eaf2ff;
        --acento-borde: #b7d4fa;
        --ok: #187747;
        --alerta: #9c6300;
        --peligro: #c93434;
        --coral: #c93434;
        --amarillo: #9c6300;
        --celeste: #0066d6;
        --ios-vidrio: rgba(255, 255, 255, .88);
        --ios-icono-fondo: #eaf2ff;
        --ios-seleccion: #ffffff;
        --ios-verde-fondo: #eaf6ee;
        --ios-alerta-fondo: #fff4df;
        --ios-rojo-fondo: #ffeded;
        --sombra: 0 2px 8px rgba(29, 29, 31, .025), 0 12px 32px -24px rgba(29, 29, 31, .14);
        --sombra-elevada: 0 8px 28px -12px rgba(29, 29, 31, .16);
    }
    :root[data-tema="oscuro"] {
        color-scheme: dark;
        --fondo: #101012;
        --panel: #1c1c1e;
        --tarjeta: #242426;
        --hundido: #151517;
        --borde: #39393e;
        --borde-suave: #303034;
        --texto: #f5f5f7;
        --texto-2: #b6b6c0;
        --texto-3: #a0a0ad;
        --tinta: #f5f5f7;
        --acento: #0071e3;
        --acento-claro: #70b5ff;
        --acento-oscuro: #0066d6;
        --acento-fondo: #1a2c44;
        --acento-borde: #345d8b;
        --ok: #6bd591;
        --alerta: #ffca70;
        --peligro: #ff8989;
        --coral: #ff8989;
        --amarillo: #ffca70;
        --celeste: #70b5ff;
        --ios-vidrio: rgba(28, 28, 30, .92);
        --ios-icono-fondo: #1a2c44;
        --ios-seleccion: #39393e;
        --ios-verde-fondo: #1b3327;
        --ios-alerta-fondo: #392e1b;
        --ios-rojo-fondo: #3e2527;
        --sombra: 0 2px 8px rgba(0, 0, 0, .08), 0 12px 32px -24px rgba(0, 0, 0, .5);
        --sombra-elevada: 0 8px 28px -12px rgba(0, 0, 0, .6);
    }
    html[data-tema] body {
        color-scheme: inherit;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
        background: var(--fondo);
        color: var(--texto);
        -webkit-font-smoothing: antialiased;
        line-height: 1.55;
    }
    html[data-tema] body.con-rail { padding-left: 242px; }
    html[data-tema] .shell { padding: 36px 34px 52px; }

    /* Navegación flotante: mismo menú, foco y áreas táctiles más cómodas. */
    html[data-tema] .rail {
        inset: 16px auto 16px 16px;
        width: 210px;
        padding: 18px 12px 12px;
        border: 1px solid var(--borde);
        border-radius: 26px;
        background: var(--ios-vidrio);
        box-shadow: var(--sombra);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        backdrop-filter: blur(24px) saturate(140%);
    }
    html[data-tema] .rail .rail-marca {
        color: var(--texto);
        padding: 6px 9px 20px;
        margin-bottom: 20px;
        border-color: var(--borde-suave);
    }
    html[data-tema] .rail .rail-marca:hover { color: var(--texto); background: transparent; }
    html[data-tema] .rail .rail-marca b { font-weight: 700; letter-spacing: -.5px; }
    html[data-tema] .rail .rail-marca small { color: var(--texto-2); font-size: 11px; letter-spacing: 0; }
    html[data-tema] .rail-grupo-titulo { color: var(--texto-3); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
    html[data-tema] .rail a.rail-modulo, html[data-tema] .rail button.rail-modulo {
        min-height: 44px;
        border: 1px solid transparent;
        border-radius: 13px;
        color: var(--texto-2);
        background: transparent;
        font-size: 13px;
        font-weight: 500;
        transition: background-color .18s ease, color .18s ease, border-color .18s ease;
        transform: none;
    }
    html[data-tema] .rail a.rail-modulo:hover, html[data-tema] .rail button.rail-modulo:hover {
        color: var(--texto);
        background: var(--hundido);
        border-color: var(--borde-suave);
        transform: none;
    }
    html[data-tema] .rail a.rail-modulo.activo {
        color: var(--acento-claro);
        background: var(--acento-fondo);
        border-color: transparent;
        box-shadow: none;
        font-weight: 650;
    }
    html[data-tema] .rail .rail-grupo .rail-icono { color: var(--texto-2); }
    html[data-tema] .rail a.rail-modulo.activo .rail-icono { color: var(--acento-claro); }
    html[data-tema] .rail button.rail-tema { background: var(--hundido); margin-top: 5px; }
    html[data-tema] .rail-sesion { border-color: var(--borde-suave); background: var(--hundido); border-radius: 15px; }
    html[data-tema] .rail-sesion-avatar { color: var(--acento-claro); border-color: transparent; background: var(--acento-fondo); }
    html[data-tema] .rail-sesion-datos b { color: var(--texto); }
    html[data-tema] .rail-sesion-datos small { color: var(--texto-2); }
    html[data-tema] .rail-sesion.en-linea .rail-sesion-datos i { background: var(--ok); box-shadow: none; }
    html[data-tema] .rail-sesion.sin-linea .rail-sesion-datos i { background: var(--peligro); }

    /* Portadas y accesos: jerarquía tipográfica, color concentrado en los íconos. */
    html[data-tema] :is(.tablero-portada, .admin-portada) {
        padding: 8px 0 28px;
        margin-bottom: 12px;
        border: 0;
        border-radius: 0;
        color: var(--texto);
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    html[data-tema] :is(.tablero-portada, .admin-portada)::before,
    html[data-tema] :is(.tablero-portada, .admin-portada)::after { content: none; }
    html[data-tema] :is(.tablero-portada h2, .admin-portada h2) {
        color: var(--texto);
        max-width: 680px;
        font-size: clamp(28px, 2.7vw, 38px);
        line-height: 1.14;
        font-weight: 700;
        letter-spacing: -1.25px;
        margin: 8px 0 12px;
    }
    html[data-tema] :is(.tablero-portada p, .admin-portada p) { color: var(--texto-2); font-size: 14px; }
    html[data-tema] .admin-eyebrow { color: var(--acento-claro); letter-spacing: .06em; font-size: 10px; font-weight: 650; }
    html[data-tema] .tablero-accesos { gap: 12px; }
    html[data-tema] .tablero-accesos a {
        position: relative;
        --ios-modulo: var(--acento-claro);
        min-height: 132px;
        padding: 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        color: var(--texto);
        background: var(--panel);
        border: 1px solid var(--borde-suave);
        border-radius: 22px;
        box-shadow: var(--sombra);
        transform: none;
        filter: none;
    }
    html[data-tema] .tablero-accesos a:nth-child(1) { --ios-modulo: var(--coral); }
    html[data-tema] .tablero-accesos a:nth-child(2) { --ios-modulo: var(--acento-claro); }
    html[data-tema] .tablero-accesos a:nth-child(3) { --ios-modulo: var(--ok); }
    html[data-tema] .tablero-accesos a:hover {
        border-color: var(--acento-borde);
        transform: translateY(-2px);
        filter: none;
        box-shadow: var(--sombra-elevada);
    }
    html[data-tema] .tablero-acceso-icono {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        color: var(--ios-modulo);
        border: 0;
        background: color-mix(in srgb, var(--ios-modulo) 12%, var(--panel));
    }
    html[data-tema] .tablero-accesos small { color: var(--texto-2); opacity: 1; white-space: normal; }
    html[data-tema] .tablero-accesos a > b { position: absolute; top: 23px; right: 18px; color: var(--texto-3); }

    /* Superficies de datos: sin transparencias detrás de cifras o tablas. */
    html[data-tema] :is(.panel, .kpi-card, .suc-card, .gate-card) {
        min-width: 0;
        color: var(--texto);
        background: var(--panel);
        border-color: var(--borde-suave);
        border-radius: 22px;
        box-shadow: var(--sombra);
    }
    html[data-tema] .panel:not(.auditoria-panel) { padding: 24px; }
    html[data-tema] .central-vista-cabecera { margin: 0 0 28px; }
    html[data-tema] .central-vista-cabecera h2 { margin: 7px 0 8px; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.16; letter-spacing: -1.1px; font-weight: 700; }
    html[data-tema] .central-vista-cabecera p { margin: 0; color: var(--texto-2); font-size: 14px; }
    html[data-tema] body.modo-administracion .central-vista-cabecera { display: none; }
    html[data-tema] .panel-cabecera { padding-bottom: 16px; border-color: var(--borde-suave); }
    html[data-tema] .panel-cabecera h3 { color: var(--texto); font-size: 17px; letter-spacing: -.35px; font-weight: 650; }
    html[data-tema] .panel-cabecera .contador { color: var(--acento-claro); background: var(--acento-fondo); border-color: transparent; }
    html[data-tema] .kpi-card { padding: 20px; border-top-width: 1px; gap: 16px; flex-direction: column; align-items: flex-start; min-width: 0; }
    html[data-tema] .kpi-card > div:not(.kpi-icono) { min-width: 0; width: 100%; }
    html[data-tema] :is(.kpi-card, .suc-card)::after { content: none; }
    html[data-tema] :is(.kpi-card, .suc-card):hover { transform: translateY(-2px); border-color: var(--acento-borde); box-shadow: var(--sombra-elevada); }
    html[data-tema] .kpi-icono { border: 0; color: var(--acento-claro); background: var(--ios-icono-fondo); border-radius: 14px; }
    html[data-tema] .kpi-alerta .kpi-icono { color: var(--peligro); background: var(--ios-rojo-fondo); }
    html[data-tema] .kpi-card .lbl { color: var(--texto-2); text-transform: none; font-size: 12px; letter-spacing: 0; font-weight: 500; }
    html[data-tema] .kpi-card .val { color: var(--texto); font-size: clamp(21px, 1.65vw, 28px); line-height: 1.3; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    html[data-tema] .kpi-card .sub { color: var(--texto-3); }
    html[data-tema] .suc-card { padding: 22px; }
    html[data-tema] .suc-card .suc-nombre { font-size: 16px; margin-bottom: 20px; letter-spacing: -.2px; }
    html[data-tema] .suc-card .suc-nombre .punto.on { background: var(--ok); box-shadow: none; }
    html[data-tema] .suc-card .suc-nombre .punto.off { background: var(--peligro); }
    html[data-tema] .suc-card .suc-generado { color: var(--texto); margin: 4px 0 20px; font-size: 31px; font-weight: 650; letter-spacing: -1px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
    html[data-tema] .suc-card .suc-generado-rotulo { color: var(--texto-2); font-size: 12px; font-weight: 500; }
    html[data-tema] .suc-card .suc-hoy { padding-top: 16px; gap: 16px; }
    html[data-tema] .suc-card .suc-dato small { color: var(--texto-2); font-weight: 500; }
    html[data-tema] .suc-card .suc-dato b { font-weight: 600; font-variant-numeric: tabular-nums; }
    html[data-tema] .suc-card .suc-dato b:not(.suc-efectivo-valor) { color: var(--texto); }
    html[data-tema] .suc-card .suc-efectivo-valor { color: var(--acento-claro); }
    html[data-tema] .suc-card[data-efectivo="sobre-colchon"] { --estado-suc: var(--alerta); }
    html[data-tema] .suc-card[data-efectivo="doble-colchon"] { --estado-suc: var(--peligro); }
    html[data-tema] .suc-card:is([data-efectivo="sobre-colchon"], [data-efectivo="doble-colchon"]) { border-left: 3px solid var(--estado-suc); }
    html[data-tema] .suc-card:is([data-efectivo="sobre-colchon"], [data-efectivo="doble-colchon"]) .suc-efectivo-valor { color: var(--estado-suc); }
    html[data-tema] .suc-card[data-efectivo="sin-dato"] .suc-efectivo-valor { color: var(--texto-3); }

    /* Controles y selección: los estados activos, deshabilitados y el foco se conservan. */
    html[data-tema] :is(.btn, .btn-mini, .btn-peligro, .btn-nav, .btn-icono) { min-height: 40px; border-radius: 12px; transform: none; box-shadow: none; }
    html[data-tema] .btn { color: #fff; background: var(--acento); font-weight: 600; }
    html[data-tema] .btn:hover:not(:disabled) { background: var(--acento-oscuro); filter: none; box-shadow: none; }
    html[data-tema] .btn.btn-rojo { color: #fff; background: #bd2828; }
    html[data-tema] .btn.btn-rojo:hover:not(:disabled) { color: #fff; background: #a92323; }
    html[data-tema] :is(.btn-sec, .btn-mini, .btn-nav, .btn-icono, .nombres-nav, .nombres-page, .nombres-vistas button) { color: var(--texto); background: var(--hundido); border-color: var(--borde); }
    html[data-tema] :is(.btn-sec, .btn-mini, .btn-nav, .btn-icono):hover:not(:disabled) { color: var(--acento-claro); background: var(--acento-fondo); border-color: var(--acento-borde); transform: none; }
    html[data-tema] .btn-mini.marcado { color: var(--acento-claro); background: var(--acento-fondo); border-color: var(--acento-borde); }
    html[data-tema] .btn-peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 35%, var(--panel)); background: var(--ios-rojo-fondo); }
    html[data-tema] :is(.input-text, .input-fecha, .rango-barra input[type="date"], .admin-facturas-filtros input, .pp-select, .pp-importe, .orden-gasto-form input) {
        color-scheme: inherit;
        color: var(--texto);
        border-color: var(--borde);
        background: var(--hundido);
        border-radius: 12px;
        min-height: 42px;
        font-family: inherit;
    }
    html[data-tema] :is(input, textarea)::placeholder { color: var(--texto-3); }
    html[data-tema] .input-text:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fondo); }
    html[data-tema] :is(.btn, .btn-mini, .btn-peligro, .btn-nav, .btn-icono, .rail-modulo, .tab-btn, .catalogo-pestanas button):focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; }
    html[data-tema] .chip { color: var(--texto-2); background: var(--hundido); border-color: var(--borde-suave); box-shadow: none; }
    html[data-tema] .chip.en-linea { color: var(--ok); background: var(--ios-verde-fondo); border-color: transparent; }
    html[data-tema] .chip.en-linea .punto { background: var(--ok); box-shadow: none; animation: none; }
    html[data-tema] .chip.sin-linea { color: var(--peligro); background: var(--ios-rojo-fondo); border-color: transparent; }
    html[data-tema] .chip.modo { color: var(--acento-claro); background: var(--acento-fondo); border-color: transparent; }
    html[data-tema] :is(.tabs, .det-rail, .admin-local-nav, .catalogo-pestanas) { background: var(--hundido); border: 1px solid var(--borde-suave); border-radius: 16px; box-shadow: none; padding: 6px; }
    html[data-tema] .catalogo-pestanas { gap: 4px; margin: 0 0 18px; align-items: center; }
    html[data-tema] .catalogo-pestanas button { min-height: 40px; border: 0; border-radius: 11px; background: transparent; }
    html[data-tema] :is(.tab-btn.active, .admin-local-nav button.activa, .catalogo-pestanas button[aria-selected="true"]) { color: var(--acento-claro); background: var(--ios-seleccion); border-color: transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); border-radius: 11px; }
    html[data-tema] .catalogo-pestanas + .panel { border-radius: 22px; }
    html[data-tema] :is(.catalogo-guia, .nombres-acceso, .nombres-aplicar, .nombres-vistas button.activo) { color: var(--acento-claro); background: var(--acento-fondo); border-color: var(--acento-borde); }
    html[data-tema] .catalogo-guia b { color: var(--texto); }
    html[data-tema] :is(.nombres-scan, .nombres-modal-apply) { color: #fff; border-color: var(--acento); background: var(--acento); border-radius: 12px; }
    html[data-tema] :is(.nombres-scan, .nombres-modal-apply):hover:not(:disabled) { color: #fff; background: var(--acento-oscuro); }
    html[data-tema] :is(.categorias-bloque, .categoria-rubro, .categoria-familia, .admin-gestion-tarjeta, .admin-flujo, .tarjeta-pendiente, .admin-cuentas-grid article, .admin-orden, .cuenta-equipo-tarjeta, .cuenta-equipo-detalle, .flujo-total, .cierre-kpis > div, .pp-parte, .lista-check, .cierre-lista, .factura-foto, .informe-tipo, .informe-bienvenida, .informe-no-disponible, .informe-documento, .libro-iva-resumen, .libro-iva-detalle-dia, #filtrosInformes .rango-barra) { color: var(--texto); background: var(--tarjeta); border-color: var(--borde); }
    html[data-tema] :is(.nombres-motivo, .categorias-estado, .categoria-familia, .categorias-bloque label) { color: var(--texto-2); }
    html[data-tema] :is(.nombres-motivo.conflicto, .categoria-sync.pendiente) { color: var(--alerta); }
    html[data-tema] .categoria-sync { color: var(--ok); }
    html[data-tema] .categoria-baja { color: var(--peligro); border-color: var(--borde); background: var(--ios-rojo-fondo); }
    html[data-tema] .categoria-baja:hover:not(:disabled) { color: var(--peligro); border-color: var(--peligro); background: var(--ios-rojo-fondo); }
    html[data-tema] :is(.nombres-fuente a, #panelNombres .nota a, .libro-iva-dia-selector small) { color: var(--acento-claro); }
    html[data-tema] :is(.data-table th, .nombres-tabla td[data-label]::before) { color: var(--texto-2); }
    html[data-tema] .data-table th { background: var(--hundido); letter-spacing: .04em; }
    html[data-tema] .data-table td { border-color: var(--borde-suave); }
    html[data-tema] :is(.data-table tr:hover td, .auditoria-tabla tr:hover, .nombres-tabla tbody tr:hover) { background: var(--hundido); }
    html[data-tema] .nombres-tabla tr { border-color: var(--borde); background: var(--panel); }
    html[data-tema] .libro-iva-resumen .data-table tbody tr:not(.libro-iva-total):nth-child(even) { background: var(--hundido); }
    html[data-tema] .libro-iva-total { background: var(--hundido); }
    html[data-tema] .libro-iva-tabla .fila-nota-credito { background: var(--ios-rojo-fondo); }
    html[data-tema] .libro-iva-resumen-cabecera > span { color: var(--acento-claro); background: var(--acento-fondo); }
    html[data-tema] .auditoria-cabecera { background: var(--panel); }
    html[data-tema] .auditoria-flujo { background: var(--hundido); }
    html[data-tema] .auditoria-flujo > div > span { color: var(--acento-claro); background: var(--acento-fondo); }
    html[data-tema] :is(.banda-aviso, .banda-aviso.urgente, .auditoria-aviso, .auditoria-total) { color: var(--alerta); background: var(--ios-alerta-fondo); border-color: color-mix(in srgb, var(--alerta) 30%, var(--panel)); }
    html[data-tema] .sin-pendientes .auditoria-total { color: var(--ok); background: var(--ios-verde-fondo); border-color: transparent; }
    html[data-tema] .auditoria-total b { color: var(--texto); }

    /* Diálogos, acceso y mensajes usan la misma familia de superficies. */
    html[data-tema] :is(.modal-card, .orden-gasto-dialog, .pago-proveedor-dialog, .toast) { color: var(--texto); background: var(--panel); border-color: var(--borde); border-radius: 24px; box-shadow: var(--sombra-elevada); }
    html[data-tema] #gate { background: var(--fondo); }
    html[data-tema] .gate-card { padding: 36px; }
    html[data-tema] .gate-card h2 { font-size: 27px; font-weight: 650; letter-spacing: -.8px; }
    html[data-tema] .gate-card h2 span { color: var(--acento-claro); }
    html[data-tema] .topbar { background: var(--ios-vidrio); border-color: var(--borde); border-radius: 20px; box-shadow: var(--sombra); }
    html[data-tema] .hilo { background: var(--hundido); border-color: var(--borde); border-radius: 18px; }
    html[data-tema] .burbuja { border-radius: 17px; padding: 12px 15px; white-space: pre-line; }
    html[data-tema] .burbuja.nuestro { color: #fff; background: var(--acento); }
    html[data-tema] .burbuja.nuestro .meta { color: #fff; }
    html[data-tema] .burbuja.suyo { color: var(--texto); background: var(--ios-seleccion); }
    html[data-tema] .chat-item.activo { background: var(--acento-fondo); }
    html[data-tema] .zona-foto { border-radius: 20px; background: var(--hundido); }
}

@media screen and (min-width: 721px) and (max-width: 1080px) {
    html[data-tema] body.con-rail { padding-left: 102px; }
    html[data-tema] .rail { inset: 12px auto 12px 12px; width: 76px; align-items: center; padding: 16px 10px; }
    html[data-tema] .rail .rail-marca { justify-content: center; width: 54px; padding-inline: 0; }
    html[data-tema] .rail a.rail-modulo, html[data-tema] .rail button.rail-modulo { width: 54px; padding-inline: 0; justify-content: center; }
    html[data-tema] .rail-sesion { width: 54px; padding-inline: 0; }
    html[data-tema] .shell { padding: 28px 22px 44px; }
}

@media screen and (max-width: 720px) {
    html[data-tema] body.con-rail { padding-left: 0; padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
    html[data-tema] .shell { padding: 22px 16px 32px; }
    html[data-tema] .rail {
        inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;
        width: auto;
        height: 76px;
        padding: 6px;
        border: 1px solid var(--borde);
        border-radius: 26px;
        overflow: hidden;
        box-shadow: var(--sombra-elevada);
    }
    html[data-tema] .rail a.rail-modulo, html[data-tema] .rail button.rail-modulo {
        flex: 0 0 64px;
        width: 64px;
        min-height: 60px;
        padding: 6px 3px;
        gap: 4px;
        border-radius: 18px;
        font-size: 9px;
    }
    html[data-tema] .rail button.rail-tema { position: static; min-width: 0; margin: 0; box-shadow: none; flex-direction: column; }
    html[data-tema] .rail button.rail-tema .rail-etiqueta { display: block; }
    html[data-tema] .rail-sesion { flex: 0 0 64px; border-radius: 18px; background: transparent; }
    html[data-tema] .rail-sesion-datos b { font-size: 9px; }
    html[data-tema] :is(.tablero-portada, .admin-portada) { padding: 4px 0 18px; gap: 24px; }
    html[data-tema] :is(.tablero-portada h2, .admin-portada h2) { font-size: 30px; letter-spacing: -.9px; }
    html[data-tema] .tablero-accesos { grid-template-columns: 1fr; gap: 8px; }
    html[data-tema] .tablero-accesos a { min-height: 72px; padding: 14px 16px; flex-direction: row; align-items: center; gap: 13px; border-radius: 18px; }
    html[data-tema] .tablero-accesos a > b { position: static; }
    html[data-tema] .panel:not(.auditoria-panel) { padding: 20px 16px; border-radius: 20px; }
    html[data-tema] .panel-cabecera { flex-wrap: wrap; }
    html[data-tema] .panel-cabecera .a-derecha { flex-wrap: wrap; }
    html[data-tema] .sucursales-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    html[data-tema] .kpi-card { padding: 18px; flex-direction: row; align-items: center; }
    html[data-tema] .kpi-card .val { font-size: 26px; }
    html[data-tema] #kpisGlobal.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    html[data-tema] #kpisGlobal .kpi-card:first-child { grid-column: 1 / -1; }
    html[data-tema] #kpisGlobal .kpi-card:not(:first-child) { padding: 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
    html[data-tema] #kpisGlobal .kpi-card:not(:first-child) .kpi-icono { width: 32px; height: 32px; border-radius: 10px; }
    html[data-tema] #kpisGlobal .kpi-card:not(:first-child) .val { font-size: 22px; }
    html[data-tema] .suc-card { padding: 20px; }
    html[data-tema] .suc-card .suc-generado { font-size: 30px; }
    html[data-tema] :is(.btn, .btn-mini, .btn-nav, .btn-icono, .btn-peligro, .catalogo-pestanas button, .input-text) { min-height: 44px; }
    html[data-tema] .gate-card { padding: 28px 22px; }
    html[data-tema] .catalogo-pestanas { margin-inline: 0; }
}

@media screen and (prefers-reduced-transparency: reduce) {
    html[data-tema] :is(.rail, .topbar) { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media screen and (prefers-contrast: more) {
    html[data-tema] :is(.rail, .topbar) { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
    html[data-tema] :is(.panel, .kpi-card, .suc-card, .rail, .topbar, .input-text) { border-color: var(--texto-2); }
    html[data-tema] :is(.nota, .celda-suave, .kpi-card .sub, .suc-card .suc-dato small) { color: var(--texto); }
}
@media print {
    .central-vista-cabecera { display: none; }
}