/* ============================================================
   NAR · Console Forge
   Aplica la estética dossier al panel admin y al portal cliente
   SIN reescribir sus templates. Vive encima de app.css.
   Actúa solo dentro de .theme-console (admin) y .layout-client.
   ============================================================ */

/* Serif editorial en títulos y encabezados de admin/cliente */
.theme-console h1, .theme-console h2, .theme-console h3, .theme-console h4,
.theme-console .admin-block h2, .theme-console .admin-block h3,
.theme-console .card__title, .theme-console .section__title,
.layout-client h1, .layout-client h2, .layout-client h3, .layout-client h4,
.layout-client .card__title, .layout-client .client-card h1,
.client-app h1, .client-app h2, .client-app h3 {
    font-family: "Iowan Old Style", "Charter", "Cambria", "Georgia", "Times New Roman", serif;
    letter-spacing: -0.01em;
    font-weight: 500;
    text-wrap: balance;
}

/* Cobre como acento en admin/cliente — reemplaza azul brand donde tenga sentido */
.theme-console .admin-topbar { border-bottom: 2px solid var(--copper, #C48435); }
.theme-console .admin-sidebar__brand,
.layout-client .brand__name { font-family: "Iowan Old Style", "Charter", "Cambria", serif; letter-spacing: 0.01em; }

/* Botón primary en modo consola — cobre en vez de azul-brand */
.theme-console .btn--primary,
.layout-client.theme-console .btn--primary {
    background: var(--copper, #C48435); color: #0A1526;
}
.theme-console .btn--primary:hover,
.layout-client.theme-console .btn--primary:hover {
    background: var(--copper-2, #E4A455); color: #0A1526;
}

/* Números tabulares en tablas de casos/clientes/usuarios */
.theme-console table,
.theme-console .admin-block table,
.layout-client table {
    font-variant-numeric: tabular-nums;
}

/* Etiquetas de estado con tratamiento "expediente" */
.theme-console .status-badge, .theme-console .badge,
.layout-client .status-badge, .layout-client .badge {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Códigos/TXIDs/emails monoespaciados por defecto */
.theme-console code, .theme-console .mono,
.layout-client code, .layout-client .mono {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* Eyebrows "§" en encabezados de sección admin */
.theme-console .admin-crumbs {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
}
.theme-console .admin-crumbs a { color: var(--copper, #C48435); }

/* Reveals suaves también en dashboard/tablas cuando el JS de dossier corre */
.theme-console .d-reveal, .layout-client .d-reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}
.theme-console .d-reveal.is-in, .layout-client .d-reveal.is-in { opacity: 1; transform: none; }

/* Cards del portal cliente con el tratamiento dossier */
.layout-client .client-hero,
.layout-client .client-info,
.layout-client .client-status,
.layout-client .client-docs {
    background: color-mix(in oklab, var(--ink-2, #0E1B32) 92%, transparent);
    border: 1px solid var(--grid, #17233B);
    border-radius: 3px;
}

/* KPIs / cifras destacadas — display serif tabular */
.theme-console .stat-value, .theme-console .kpi-value,
.layout-client .stat-value, .layout-client .kpi-value {
    font-family: "Iowan Old Style", "Charter", "Cambria", serif;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
}

/* Iconografía sutil de "§" ante títulos principales del admin */
.theme-console .admin-block > h2:first-child::before {
    content: "§ "; color: var(--copper, #C48435); font-family: "Charter", serif; font-weight: 400;
}

/* Sidebar admin: SVG icons (reemplazaron emojis). Alineación limpia + collapse. */
.theme-console .admin-sidebar__link { display: flex; align-items: center; gap: 12px; }
.theme-console svg.admin-sidebar__icon {
    width: 18px; height: 18px; flex-shrink: 0;
    color: var(--text-mute, #8F8875);
    transition: color .15s ease;
}
.theme-console .admin-sidebar__link:hover svg.admin-sidebar__icon,
.theme-console .admin-sidebar__link.is-active svg.admin-sidebar__icon { color: var(--copper, #C48435); }
.theme-console .admin-sidebar__label { flex: 1; }
/* Estado colapsado: ocultar labels, mantener icono centrado */
body.admin-nav-collapsed .admin-sidebar__label {
    opacity: 0; pointer-events: none; white-space: nowrap; overflow: hidden;
}

/* ============================================================
   CLIENT-FORGE — neutraliza gradientes/pastels de client-app.css
   Ejecuta ENCIMA de client-app.css cuando el body es .layout-client
   con .theme-console. Reemplaza fondos legacy por tokens dossier
   sin reescribir el archivo original.
   ============================================================ */

/* Navegación superior del portal cliente: fondo plano ink en vez del hero azul */
.layout-client.theme-console .client-nav__link.is-active,
.layout-client.theme-console .client-nav__link:hover {
    background: color-mix(in oklab, var(--copper, #C48435) 15%, transparent) !important;
    color: var(--copper, #C48435) !important;
}

/* Hero grande del portal (.ca-hero) — de gradiente azul a navy sólido con borde cobre */
.layout-client.theme-console .ca-hero {
    background: var(--surface, #0E1B32) !important;
    border: 1px solid var(--grid, #17233B) !important;
    border-left: 3px solid var(--copper, #C48435) !important;
    border-radius: 3px !important;
    color: var(--text, #ECE5D2) !important;
}
.layout-client.theme-console .ca-hero::before,
.layout-client.theme-console .ca-hero::after {
    background: transparent !important; display: none !important;
}

/* Cards con acento — de gradiente azul a fondo surface + borde cobre */
.layout-client.theme-console .ca-card--accent,
.layout-client.theme-console .ca-banner--accent {
    background: var(--surface, #0E1B32) !important;
    border: 1px solid var(--grid, #17233B) !important;
    border-left: 3px solid var(--copper, #C48435) !important;
    border-radius: 3px !important;
    color: var(--text, #ECE5D2) !important;
}

/* Estados: verde pastel → surface + border ok / amarillo pastel → surface + border cobre */
.layout-client.theme-console .ca-ok,
.layout-client.theme-console .success-box,
.layout-client.theme-console [class*="success"] {
    background: color-mix(in oklab, var(--ok, #6C9E7A) 10%, transparent) !important;
    border-left-color: var(--ok, #6C9E7A) !important;
    color: var(--text, #ECE5D2) !important;
}
.layout-client.theme-console .ca-warn {
    background: color-mix(in oklab, var(--copper, #C48435) 10%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--copper, #C48435) 40%, transparent) !important;
    color: var(--text, #ECE5D2) !important;
}
.layout-client.theme-console .ca-warn strong { color: var(--copper-2, #E4A455) !important; }

/* Timeline vertical — línea cobre (ya lo era en client-app.css, solo aseguramos tono) */
.layout-client.theme-console [class*="timeline"]::before {
    background: linear-gradient(180deg, var(--copper, #C48435), transparent) !important;
}

/* Mapa / bloque de trazabilidad — de degradado navy claro a ink más sobrio */
.layout-client.theme-console .ca-map,
.layout-client.theme-console .ca-map__frame {
    background: linear-gradient(160deg, var(--surface, #0E1B32), var(--bg, #0A1526)) !important;
    border: 1px solid var(--grid, #17233B) !important;
    border-radius: 3px !important;
}

/* Dots del mapa: cambio los azul-cielo (#5BC8FF) por el steel del sistema */
.layout-client.theme-console .ca-map__dot--exchange { background: var(--steel, #7B93B4) !important; box-shadow: 0 0 8px color-mix(in oklab, var(--steel, #7B93B4) 50%, transparent) !important; }
.layout-client.theme-console .recovery-bar__seg.is-frozen,
.layout-client.theme-console .recovery-cell.is-frozen { background: var(--steel, #7B93B4) !important; border-left-color: var(--steel, #7B93B4) !important; }

/* Finanzas — barras de segmentos: paleta unificada, sin degradados llamativos */
.layout-client.theme-console .ca-fin__big.is-net {
    background: var(--surface, #0E1B32) !important;
    border-left: 3px solid var(--copper, #C48435) !important;
    color: var(--text, #ECE5D2) !important;
    border-radius: 3px !important;
}
.layout-client.theme-console .ca-fin__bar-seg.is-received  { background: var(--ok, #6C9E7A) !important; }
.layout-client.theme-console .ca-fin__bar-seg.is-approved  { background: color-mix(in oklab, var(--ok, #6C9E7A) 70%, var(--copper, #C48435)) !important; }
.layout-client.theme-console .ca-fin__bar-seg.is-frozen    { background: var(--steel, #7B93B4) !important; }
.layout-client.theme-console .ca-fin__bar-seg.is-pending   { background: var(--copper, #C48435) !important; }
.layout-client.theme-console .ca-fin__bar-seg.is-tracking  { background: var(--grid-2, #1F2E4B) !important; }
.layout-client.theme-console .ca-fin__bar-seg.is-lost      { background: var(--risk, #B94540) !important; }
.layout-client.theme-console .ca-fin__legend .dot.is-received { background: var(--ok, #6C9E7A) !important; }

/* Radios "pastel large" a 3px para consistencia dossier */
.layout-client.theme-console .ca-card,
.layout-client.theme-console .ca-stat,
.layout-client.theme-console .ca-evstat,
.layout-client.theme-console .card,
.layout-client.theme-console .client-hero,
.layout-client.theme-console .client-info,
.layout-client.theme-console .client-status,
.layout-client.theme-console .client-docs {
    border-radius: 3px !important;
    background: var(--surface, #0E1B32) !important;
    border: 1px solid var(--grid, #17233B) !important;
    color: var(--text, #ECE5D2) !important;
}

/* Body del portal cliente — asegurar fondo ink cuando lleva theme-console */
.layout-client.theme-console { background: var(--bg, #0A1526) !important; color: var(--text, #ECE5D2) !important; }
.layout-client.theme-console .client-nav,
.layout-client.theme-console .client-topbar {
    background: color-mix(in oklab, var(--bg, #0A1526) 78%, transparent) !important;
    border-bottom: 1px solid var(--grid, #17233B) !important;
    backdrop-filter: saturate(1.2) blur(14px);
}

/* Enlaces del portal — texto legible */
.layout-client.theme-console a { color: var(--text-soft, #CFC7AF); }
.layout-client.theme-console a:hover { color: var(--copper, #C48435); }

/* Botones ghost en cliente: borde sobrio, hover cobre */
.layout-client.theme-console .btn--ghost {
    background: transparent !important;
    color: var(--text-soft, #CFC7AF) !important;
    border-color: var(--grid-2, #1F2E4B) !important;
}
.layout-client.theme-console .btn--ghost:hover {
    border-color: var(--copper, #C48435) !important;
    color: var(--copper, #C48435) !important;
}

/* Formularios en cliente: mismo tratamiento que d-form */
.layout-client.theme-console .field__input,
.layout-client.theme-console .field__label + input,
.layout-client.theme-console textarea.field__input {
    background: var(--surface, #0E1B32) !important;
    border-color: var(--grid-2, #1F2E4B) !important;
    color: var(--text, #ECE5D2) !important;
}
.layout-client.theme-console .field__input:focus {
    border-color: var(--copper, #C48435) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--copper, #C48435) 22%, transparent) !important;
    outline: none;
}
.layout-client.theme-console .field__label { color: var(--text-mute, #8F8875) !important; }

/* Chips/estados con fondo pastel legacy → paleta dossier */
.layout-client.theme-console .badge,
.layout-client.theme-console .chip,
.layout-client.theme-console .tag {
    background: color-mix(in oklab, var(--copper, #C48435) 15%, transparent) !important;
    color: var(--copper, #C48435) !important;
    border: 1px solid color-mix(in oklab, var(--copper, #C48435) 40%, transparent) !important;
    border-radius: 2px !important;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* ============================================================
   MODO CLARO — se activa cuando html tiene data-theme="light".
   Aplica al panel admin y al portal cliente. La web pública ya
   tiene su propio soporte para light theme en dossier.css.
   ============================================================ */

/* Body: fondo bone paper + tinta oscura */
:root[data-theme="light"] .theme-console,
:root[data-theme="light"] .layout-client.theme-console {
    background: #ECE5D2 !important;
    color: #0A1526 !important;
}

/* Sidebar admin — invertir a paper con tinta */
:root[data-theme="light"] .theme-console .admin-sidebar {
    background: #E9E1C7 !important;
    color: #2A3450 !important;
    border-right: 1px solid #D3C9AC !important;
}
:root[data-theme="light"] .theme-console .admin-sidebar__section {
    color: #6A6F80 !important;
}
:root[data-theme="light"] .theme-console .admin-sidebar__link {
    color: #2A3450 !important;
}
:root[data-theme="light"] .theme-console .admin-sidebar__link:hover,
:root[data-theme="light"] .theme-console .admin-sidebar__link.is-active {
    background: color-mix(in oklab, #9F681F 15%, transparent) !important;
    color: #9F681F !important;
}
:root[data-theme="light"] .theme-console svg.admin-sidebar__icon { color: #6A6F80; }
:root[data-theme="light"] .theme-console .admin-sidebar__link:hover svg.admin-sidebar__icon,
:root[data-theme="light"] .theme-console .admin-sidebar__link.is-active svg.admin-sidebar__icon { color: #9F681F; }
:root[data-theme="light"] .theme-console .admin-sidebar__brand img { filter: invert(1); }

/* Topbar admin — fondo claro con borde cobre profundo */
:root[data-theme="light"] .theme-console .admin-topbar,
:root[data-theme="light"] .theme-console .client-app__topbar {
    background: #F5EFDC !important;
    border-bottom: 2px solid #9F681F !important;
    color: #0A1526 !important;
}
:root[data-theme="light"] .theme-console .admin-topbar__role,
:root[data-theme="light"] .theme-console .admin-topbar__name,
:root[data-theme="light"] .theme-console .admin-topbar__title { color: #0A1526 !important; }

/* Bloques y cards del admin/cliente — surface claro */
:root[data-theme="light"] .theme-console .admin-block,
:root[data-theme="light"] .theme-console .card,
:root[data-theme="light"] .layout-client.theme-console .ca-card,
:root[data-theme="light"] .layout-client.theme-console .ca-hero,
:root[data-theme="light"] .layout-client.theme-console .ca-card--accent,
:root[data-theme="light"] .layout-client.theme-console .ca-banner--accent,
:root[data-theme="light"] .layout-client.theme-console .client-hero,
:root[data-theme="light"] .layout-client.theme-console .client-info,
:root[data-theme="light"] .layout-client.theme-console .client-status,
:root[data-theme="light"] .layout-client.theme-console .client-docs {
    background: #F5EFDC !important;
    border: 1px solid #D3C9AC !important;
    color: #0A1526 !important;
}
:root[data-theme="light"] .layout-client.theme-console .ca-hero,
:root[data-theme="light"] .layout-client.theme-console .ca-card--accent,
:root[data-theme="light"] .layout-client.theme-console .ca-banner--accent {
    border-left: 3px solid #9F681F !important;
}

/* Formularios en modo claro */
:root[data-theme="light"] .theme-console .field__input,
:root[data-theme="light"] .theme-console textarea.field__input,
:root[data-theme="light"] .theme-console select.field__input {
    background: #FFFFFF !important;
    border-color: #D3C9AC !important;
    color: #0A1526 !important;
}
:root[data-theme="light"] .theme-console .field__input:focus {
    border-color: #9F681F !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, #9F681F 22%, transparent) !important;
}
:root[data-theme="light"] .theme-console .field__label { color: #6A6F80 !important; }

/* Botón cobre en modo claro — mantiene cobre pero con tinta oscura como texto */
:root[data-theme="light"] .theme-console .btn--primary,
:root[data-theme="light"] .theme-console .d-btn--copper {
    background: #9F681F !important; color: #ECE5D2 !important;
}
:root[data-theme="light"] .theme-console .btn--primary:hover,
:root[data-theme="light"] .theme-console .d-btn--copper:hover {
    background: #C48435 !important; color: #FFFFFF !important;
}

/* Botón ghost en modo claro */
:root[data-theme="light"] .theme-console .btn--ghost {
    color: #2A3450 !important; border-color: #D3C9AC !important;
}
:root[data-theme="light"] .theme-console .btn--ghost:hover {
    color: #9F681F !important; border-color: #9F681F !important;
}

/* Toggle btn en modo claro */
:root[data-theme="light"] .theme-console .d-theme-toggle {
    color: #2A3450; border-color: #D3C9AC;
}
:root[data-theme="light"] .theme-console .d-theme-toggle:hover { color: #9F681F; border-color: #9F681F; }

/* Portal cliente client_app — topbar en modo claro con logo oscuro */
:root[data-theme="light"] .theme-console .client-app__topbar .brand__logo,
:root[data-theme="light"] .theme-console .admin-sidebar .brand__logo { filter: none; }

/* Texto general — asegurar contraste en modo claro */
:root[data-theme="light"] .theme-console h1,
:root[data-theme="light"] .theme-console h2,
:root[data-theme="light"] .theme-console h3,
:root[data-theme="light"] .theme-console h4 { color: #0A1526 !important; }
:root[data-theme="light"] .theme-console p,
:root[data-theme="light"] .theme-console td,
:root[data-theme="light"] .theme-console th,
:root[data-theme="light"] .theme-console li { color: #2A3450 !important; }
:root[data-theme="light"] .theme-console .muted { color: #6A6F80 !important; }

/* Alertas flash en modo claro */
:root[data-theme="light"] .theme-console .alert--warn { color: #78350f !important; }
:root[data-theme="light"] .theme-console .alert--ok { color: #065f46 !important; }