/* ============================================================
   ORFEO — Aspecto (1-11-2026)

   Capa de estilo por encima de app.css: más sobria y legible, sin tocar la maquetación.
   Es la única versión (se retiró el interruptor «Clásico»).

   PARA VOLVER ATRÁS: quitar el <link> de este archivo en Components/App.razor, o `git revert` de los commits
   «Aspecto nuevo»; el punto de partida anterior a todos los cambios es la etiqueta baseline-pre-estetica-2026-11-01
   en Gitea.

   Las reglas llevan el prefijo html:root: su especificidad (0,1,1) supera a :root (0,1,0) de app.css, por eso las
   variables se pueden redefinir aquí.
   ============================================================ */

/* ── 1) Colores de tablas e informes: cabecera clara en lugar de terracota, filas alternas neutras ───────── */
html:root {
    --orfeo-grid-head-bg: #eef1f5;
    --orfeo-grid-head-fg: #2f3a4a;
    --orfeo-grid-head-border: #cdd3dc;
    --orfeo-grid-sombreado: #f8f9fb;          /* antes crema amarillento #fff9e8 */
    --orfeo-report-thead-bg: #eef1f5;
    --orfeo-report-group-bg: #e4e9ef;
    --orfeo-report-subtotal-bg: #f1f3f6;
    --orfeo-report-row-alt: #f8f9fb;
}

/* ── 2) Cifras de ancho fijo: los decimales quedan alineados en columnas de importes ───────────────────── */
html:root .dxbl-grid td,
html:root .dxbl-grid th,
html:root table td,
html:root table th,
html:root input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* ── 3) Cinta: iconos en un solo tono neutro (los rojos de «eliminar/peligro» se conservan) ───────────────── */
html:root .rb-icon[style*="#4a7c59"],
html:root .rb-icon[style*="#3b8a3b"],
html:root .rb-icon[style*="#2c6f3d"],
html:root .rb-icon[style*="#7c3aed"],
html:root .rb-icon[style*="#0f766e"],
html:root .rb-icon[style*="#1d4ed8"] {
    color: #475569 !important;
}

/* ── 4) Rótulos de la cinta un poco mayores (10,08 → 10,6 px; con el zoom 0,9 de «Pequeño» eran ~9 px) ───── */
html:root .rb-btn-label {
    font-size: 10.6px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* ── 5) Texto en terracota sobre fondo claro: contraste 3,8:1 → 5,7:1 (WCAG AA) ──────────────────────────── */
html:root .mdi-tab-title {
    color: #a2442f;
}

/* ── 6) Una sola tipografía: tablas y ventanas usaban Segoe UI (cambia según el equipo) y la interfaz Jost ─────────── */
html:root {
    --dxbl-grid-font-family: var(--font-sans);
}
html:root .dxbl-grid,
html:root .dxbl-grid :is(td, th, input, select, textarea, span, div, a, button):not([class*="ph-"]):not([class^="ph"]),
html:root .popup-host-window [class*="-shell"],
html:root .popup-host-window [class*="-shell"] :is(input, select, textarea, button) {
    font-family: var(--font-sans) !important;
}

/* ── 7) Ceros atenuados en las tablas (los marca js/aspecto.js): el ojo se fija en los importes con valor ───────── */
html:root .orfeo-cero {
    color: #a3a9b3 !important;
}

/* ── 8) Pie del Diario: los atajos se separaban mal de los totales («acciones» + «TOTALES») ─────────────────────── */
html:root .diario-footer-atajos {
    color: #6b7280;
    margin-right: 24px;
}
html:root .diario-footer-totales {
    padding-left: 20px;
    border-left: 1px solid #c8c5be;
}