/* skin-glass.css — rediseño v3 «vidrio grafito» (14-oct-2026).
   Plan: ~/cerebro/dash-rediseno/PLAN.md (Mac). Va enlazada DESPUÉS de theme.css y enhance.css
   y re-valora sus tokens sin renombrar ninguno. Para volver al índigo v2 basta con quitar el
   <link> de base.html.

   Reglas que no se pueden romper:
   - --bg, --surface, --surface2 y los *-solid siguen siendo hex opacos: charts-theme.js los lee
     como color sólido y hay ~30 sitios con color:var(--bg) sobre el acento.
   - --accent, --accent2, --green, --red y --chart-* siguen en #rrggbb: varias gráficas les pegan
     una opacidad hex al final (var + 'cc').
   - El vidrio se aplica por selector con --glass-*, no volviendo translúcido --surface. */

/* ── Fase 1: tokens ───────────────────────────────────────────────────────── */

:root, :root[data-theme="dark"] {
    /* superficies grafito, un punto más cálidas que las v2 */
    --bg: #0b0b0d;
    --surface: #141417;
    --surface-solid: #141417;
    --surface2: #1c1c20;
    --surface2-solid: #1c1c20;
    --surface-3: #232328;
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.16);
    --border-strong: rgba(255,255,255,0.12);

    /* acento coral (los tres vídeos de referencia) */
    --accent: #f05a28;
    --accent2: #ff8a5c;
    --accent-glow: rgba(240,90,40,0.38);
    --accent-soft: rgba(240,90,40,0.14);
    --hover-glow: 0 0 0 1px rgba(240,90,40,0.22), 0 8px 28px rgba(240,90,40,0.10);

    /* el rojo de error se separa del coral; el azul queda para datos e información */
    --red: #f43f5e;
    --red-soft: rgba(244,63,94,0.14);
    --blue: #60a5fa;
    --blue-soft: rgba(96,165,250,0.14);
    --chart-1: #60a5fa;

    /* radios más redondos, sombras más hondas */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);

    /* vidrio */
    --glass-bg: rgba(var(--fg-rgb),0.05);
    --glass-border: rgba(var(--fg-rgb),0.10);
    --glass-blur: 22px;
    --orb-1: rgba(240,90,40,0.20);
    --orb-2: rgba(255,140,60,0.10);

    --focus-ring: 0 0 0 2px rgba(255,138,92,0.60);

    /* tokens nuevos v3 */
    --glass-highlight: rgba(255,255,255,0.16);
    --glass-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
    --accent-grad: linear-gradient(180deg, #ff6e3c, #e8462a);
    --pill: 999px;
}

:root[data-theme="light"] {
    --border-strong: #d0d0da;
    --accent: #d9481c;
    --accent2: #b23a14;          /* 4,5:1 sobre blanco: el que va como texto */
    --accent-glow: rgba(217,72,28,0.25);
    --accent-soft: rgba(217,72,28,0.10);
    --hover-glow: 0 0 0 1px rgba(217,72,28,0.22), 0 6px 22px rgba(217,72,28,0.10);
    --red: #c81e4b;
    --red-soft: rgba(200,30,75,0.10);
    --blue: #2563eb;
    --blue-soft: rgba(37,99,235,0.10);
    --chart-1: #2563eb;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --glass-bg: rgba(255,255,255,0.62);
    --glass-border: rgba(0,0,0,0.07);
    --orb-1: rgba(240,90,40,0.12);
    --orb-2: rgba(255,170,90,0.10);
    --focus-ring: 0 0 0 2px rgba(217,72,28,0.45);
    --glass-highlight: rgba(255,255,255,0.9);
    --glass-shadow: 0 12px 32px rgba(30,20,10,0.10), inset 0 1px 0 #fff;
    --accent-grad: linear-gradient(180deg, #ef5a2a, #d4421a);
}

/* índigo que estaba escrito a mano en theme.css */
.badge.academico { background: var(--accent-soft); color: var(--accent2); }
:root[data-theme="light"] .badge.academico { color: var(--accent2); }

/* ── Fase 2: fondo con textura y vidrio ──────────────────────────────────── */
/* Fondo en dos pseudo-elementos fijos detrás de todo (z-index:-1 en la pila raíz: body no crea
   contexto propio, así que se pintan encima del fondo de body, que se propaga al lienzo).
   ::before = placas de grafito + grano; ::after = brillo naranja. Van separados para que en
   claro la textura baje de opacidad sin apagar el brillo. Nada de background-attachment:fixed
   (iOS lo pinta mal). La home tiene además sus .orbs/.grid-bg (z-index:0), que quedan encima. */

:root, :root[data-theme="dark"] {
    --bg-glow-1: rgba(240,90,40,0.20);        /* abajo a la derecha, fuerte */
    --bg-glow-2: rgba(255,120,60,0.07);       /* arriba a la izquierda, suave */
    --bg-texture-opacity: 1;
    /* tarjeta de vidrio: humo oscuro con un velo claro arriba (lee bien sobre las aristas) */
    --glass-card: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018) 60%), rgba(17,17,21,0.48);
    --glass-bar: rgba(16,16,20,0.62);         /* barras pegajosas: el contenido pasa por debajo */
    --glass-card-mobile: rgba(24,24,28,0.78); /* ≤768px, sin blur */
    --glass-solid: rgba(20,20,24,0.94);       /* sin backdrop-filter o con transparencia reducida */
}
:root[data-theme="light"] {
    --bg-glow-1: rgba(240,90,40,0.10);
    --bg-glow-2: rgba(255,150,80,0.06);
    --bg-texture-opacity: 0.28;
    --glass-card: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.64));
    --glass-bar: rgba(255,255,255,0.72);
    --glass-card-mobile: rgba(255,255,255,0.86);
    --glass-solid: rgba(255,255,255,0.96);
}

body::before, body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
body::before {
    background-image: url("../img/noise.svg"), url("../img/graphite.svg");
    background-size: 220px 220px, 960px 640px;
    background-repeat: repeat;
    opacity: var(--bg-texture-opacity);
}
body::after {
    background:
        radial-gradient(ellipse 62% 58% at 100% 100%, var(--bg-glow-1), transparent 72%),
        radial-gradient(ellipse 48% 42% at 0% 0%, var(--bg-glow-2), transparent 70%);
}

/* Wrappers del shell: transparentes para que se vea el fondo */
.layout, .main-content { background: transparent; }

/* Vidrio en las piezas sueltas. Nunca en un panel dentro de otro (ver más abajo). */
.card, .m-card, .kpi, .stat, .adm .adm-card {
    background: var(--glass-card);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.header {
    background: var(--glass-bar);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
/* Modales, toasts y menús: opacos debajo para que se lean */
.modal-box {
    background: linear-gradient(180deg, rgba(var(--fg-rgb),0.035), transparent 45%), var(--surface-solid);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.toast {
    background: color-mix(in srgb, var(--surface2-solid) 90%, transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.esp-menu { background: var(--surface-solid); }

/* Anidados: sin blur (un backdrop-filter dentro de otro cuesta y emborrona doble) */
:is(.card, .m-card, .kpi, .stat, .adm .adm-card, .modal-box, .header, .sidebar)
    :is(.card, .m-card, .kpi, .stat, .adm .adm-card) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Barra superior móvil (mobile.css la pinta con html .mobile-topbar: aquí html body gana) */
@media (max-width: 768px) {
    html body .mobile-topbar {
        background: var(--glass-bar);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
        backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    }
    /* Tarjetas sin blur en móvil: el scroll con veinte backdrop-filter da tirones */
    .card, .m-card, .kpi, .stat, .adm .adm-card {
        background: var(--glass-card-mobile);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Sin soporte o con «reducir transparencia»: casi opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card, .m-card, .kpi, .stat, .adm .adm-card, .header, html body .mobile-topbar { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
    .card, .m-card, .kpi, .stat, .adm .adm-card, .header, .toast, html body .mobile-topbar {
        background: var(--glass-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ── Fase 3: shell ───────────────────────────────────────────────────────── */
/* Sidebar = tarjeta de vidrio flotante (V1). Se re-estila, no se renombra nada: base.html y
   app.js leen .sidebar, #sidebar-nav, .collapsed, .open, .active, [data-group], etc. */

.sidebar {
    margin: 12px 0 12px 12px;
    top: 12px;                                    /* sigue siendo sticky */
    height: calc(100vh - 24px);
    padding: 20px 0 10px;
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-highlight);
    border-radius: var(--radius-lg);
    background: var(--glass-card);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    transition: width 0.22s ease, padding 0.22s ease, margin 0.22s ease;
}
/* theme.css fija el fondo claro con :root[data-theme="light"] .sidebar (0,3,0) */
:root[data-theme="light"] .sidebar { background: var(--glass-card); }

/* Enlaces: filas redondeadas con margen lateral. El icono queda en x=20 como antes. */
.sidebar a {
    margin: 1px 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.sidebar a:hover { background: rgba(var(--fg-rgb),0.05); color: var(--text); }
.sidebar a.active {
    border-left: none;
    padding-left: 10px;
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
    color: var(--text-strong);
}
.sidebar a.active .sidebar-icon { color: var(--accent); opacity: 1; }
.sidebar-collapse-btn { margin: 1px 10px; padding: 7px 10px; width: calc(100% - 20px); border-radius: var(--radius-sm); }
.sidebar-footer { border-top-color: var(--glass-border); }

/* Plegada: ni margen ni borde ni sombra (ancho 0 de verdad) */
.sidebar.collapsed {
    width: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
    box-shadow: none;
}
/* Botón «Mostrar panel» (lo crea base.html con style.cssText: hace falta !important) */
#sidebar-expand-btn {
    left: 8px !important;
    padding: 10px 8px !important;
    border: 1px solid var(--glass-border) !important;
    border-top-color: var(--glass-highlight) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--glass-bar) !important;
    box-shadow: var(--glass-shadow) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
#sidebar-expand-btn:hover { color: var(--accent2) !important; }

/* Cabecera de módulo (.header): cápsula de vidrio pegajosa */
.header {
    margin: 12px 12px 0;
    top: 12px;
    padding: 12px 22px;
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-highlight);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
}

/* Entre 769 y 1100 px la sidebar baja a 170 (theme.css): margen algo menor */
@media (max-width: 1100px) and (min-width: 769px) {
    .sidebar { margin-left: 10px; }
    .sidebar a, .sidebar-collapse-btn { margin-left: 8px; margin-right: 8px; }
}

/* Móvil: cajón pegado al borde izquierdo con esquinas 0 20 20 0; barra superior en cápsula.
   mobile.css usa html .x (0,1,1) y va después: aquí html body .x (0,1,2) gana. */
@media (max-width: 768px) {
    html body .sidebar {
        top: 0;
        margin: 0;
        height: 100dvh;
        border-left: none;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        background: color-mix(in srgb, var(--surface-solid) 90%, transparent);
    }
    html body .sidebar.collapsed { border-width: 1px 1px 1px 0; box-shadow: var(--glass-shadow); }
    html body .sidebar a.active { padding-left: 10px; }

    html body .mobile-topbar {
        top: calc(var(--safe-top) + 8px);
        left: calc(var(--safe-left) + 8px);
        right: calc(var(--safe-right) + 8px);
        height: var(--topbar-h);
        padding: 0 14px 0 4px;
        border: 1px solid var(--glass-border);
        border-top-color: var(--glass-highlight);
        border-radius: var(--radius);
        box-shadow: var(--glass-shadow);
    }
    /* el contenido arranca bajo la cápsula: notch + 8 de aire + barra + 8 de aire */
    html body .main-content { padding-top: calc(var(--safe-top) + var(--topbar-h) + 16px); }
    html body .header {
        top: calc(var(--safe-top) + var(--topbar-h) + 16px);
        margin: 0 8px;
        padding: 12px 16px;
    }
    html body .toast-container { top: calc(var(--safe-top) + var(--topbar-h) + 22px); }
}

/* ── Fase 4: componentes ─────────────────────────────────────────────────── */

:root, :root[data-theme="dark"] {
    --card-shadow: 0 10px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
    --btn-glass: rgba(255,255,255,0.05);
    --btn-glass-hover: rgba(255,255,255,0.09);
    --seg-bg: rgba(255,255,255,0.04);
    --seg-on: rgba(255,255,255,0.10);
    --seg-on-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.35);
}
:root[data-theme="light"] {
    --card-shadow: 0 6px 18px rgba(30,20,10,0.06), inset 0 1px 0 #fff;
    --btn-glass: rgba(255,255,255,0.70);
    --btn-glass-hover: rgba(255,255,255,0.95);
    --seg-bg: rgba(0,0,0,0.035);
    --seg-on: #fff;
    --seg-on-shadow: 0 1px 3px rgba(30,20,10,0.12);
}

/* Tarjetas: vidrio, radio 16, filo superior claro y brillo coral al pasar el ratón */
.card, .m-card, .kpi, .stat, .adm .adm-card {
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-highlight);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover, .m-card:hover, .kpi:hover, .stat:hover, .adm .adm-card:hover {
    border-color: var(--border-hover);
    border-top-color: var(--glass-highlight);
    box-shadow: var(--card-shadow), var(--hover-glow);
}
:is(.card, .m-card, .kpi, .stat, .adm .adm-card, .modal-box) :is(.card, .m-card, .kpi, .stat, .adm .adm-card) {
    box-shadow: none;
}

/* KPI como en V1: etiqueta normal, cifra grande, variación en píldora, icono en cuadrado */
.kpi { padding: 16px 18px; position: relative; }
.kpi-label {
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    font-weight: 500;
}
.kpi-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 6px; }
.kpi--icon .kpi-label { padding-right: 44px; }
.kpi--icon > .icon-tile { position: absolute; top: 14px; right: 14px; }

/* Píldoras de variación: .kpi-delta.up/.down y la clase nueva .chip-delta */
.kpi-delta.up, .kpi-delta.down, .chip-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--pill);
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
}
.kpi-delta.up, .kpi-delta.down { margin-top: 8px; }
.chip-delta { color: var(--muted); background: rgba(var(--fg-rgb),0.05); }
.kpi-delta.up, .chip-delta.up { color: var(--green); background: var(--green-soft); }
.kpi-delta.down, .chip-delta.down { color: var(--red); background: var(--red-soft); }

/* Icono en cuadrado tintado (34px). Tono: --accent (defecto), --blue, --green, --red, --yellow, --violet */
.icon-tile {
    --tile: var(--accent2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: var(--tile);
    background: color-mix(in srgb, var(--tile) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tile) 28%, transparent);
}
.icon-tile--accent { --tile: var(--accent2); }
.icon-tile--blue   { --tile: var(--blue); }
.icon-tile--green  { --tile: var(--green); }
.icon-tile--red    { --tile: var(--red); }
.icon-tile--yellow { --tile: var(--yellow); }
.icon-tile--violet { --tile: var(--chart-6); }

/* Botones primarios: degradado coral con brillo y filo de luz */
.btn-primary, .btn-action, .chat-send, .star-btn.on {
    background: var(--accent-grad);
    border-color: transparent;
    color: var(--on-accent);
    box-shadow: 0 6px 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: box-shadow var(--transition), filter var(--transition);
}
.btn-primary:hover, .btn-action:hover:not(:disabled), .chat-send:hover:not(:disabled) {
    background: var(--accent-grad);
    border-color: transparent;
    opacity: 1;
    filter: brightness(1.07);
    box-shadow: 0 8px 26px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn-action, .chat-send { border-radius: var(--radius-sm); }
.btn-action:disabled, .chat-send:disabled { box-shadow: none; }

/* .btn y .btn-ghost en vidrio (sin blur: casi siempre van dentro de una tarjeta) */
.btn, .btn-ghost {
    background: var(--btn-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),0.05);
}
.btn:hover, .btn-ghost:hover { background: var(--btn-glass-hover); border-color: var(--border-hover); }
/* .btn-primary y .btn-danger también llevan .btn: recuperan su fondo */
.btn.btn-primary { background: var(--accent-grad); border-color: transparent; box-shadow: 0 6px 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn.btn-danger { background: var(--red); border-color: var(--red); color: #fff; box-shadow: none; }
.btn.btn-danger:hover { filter: brightness(1.08); }

/* Badges en píldora con borde del propio color */
.badge {
    border-radius: var(--pill);
    padding: 2px 9px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.live-badge {
    border-radius: var(--pill);
    background: var(--green-soft);
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* .tab-bar como control segmentado. En móvil mobile.css le da overflow-x:auto: se conserva. */
.tab-bar {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--glass-border);
    border-radius: var(--pill);
    background: var(--seg-bg);
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 0;
    border-radius: var(--pill);
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.tab-btn:hover { color: var(--text); background: rgba(var(--fg-rgb),0.04); }
.tab-btn.active {
    color: var(--text-strong);
    background: var(--seg-on);
    box-shadow: var(--seg-on-shadow);
}
@media (max-width: 768px) {
    html body .tab-bar { padding: 3px; }   /* las pestañas conservan los 44px táctiles de mobile.css */
}

/* Control segmentado genérico (no .seg, que es de ÓRBITA). Hijos <button> o <a>;
   el activo con .active, .on o aria-pressed="true". */
.seg-ctl {
    display: inline-flex;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--glass-border);
    border-radius: var(--pill);
    background: var(--seg-bg);
    overflow-x: auto;
    scrollbar-width: none;
}
.seg-ctl::-webkit-scrollbar { display: none; }
.seg-ctl > button, .seg-ctl > a {
    padding: 5px 14px;
    border: 0;
    border-radius: var(--pill);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.seg-ctl > :hover { color: var(--text); }
.seg-ctl > .active, .seg-ctl > .on, .seg-ctl > [aria-pressed="true"] {
    color: var(--text-strong);
    background: var(--seg-on);
    box-shadow: var(--seg-on-shadow);
}

/* Estado en píldora con borde tintado (tablas: Verified / Pending / Failed) */
.pill-status {
    --pill-c: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--pill);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--pill-c);
    background: color-mix(in srgb, var(--pill-c) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--pill-c) 35%, transparent);
}
.pill-status--ok   { --pill-c: var(--green); }
.pill-status--warn { --pill-c: var(--yellow); }
.pill-status--err  { --pill-c: var(--red); }
.pill-status--info { --pill-c: var(--blue); }

/* Barra fina de progreso: <div class="progress-thin"><i style="width:40%"></i></div> */
.progress-thin {
    height: 6px;
    border-radius: var(--pill);
    background: rgba(var(--fg-rgb),0.08);
    overflow: hidden;
}
.progress-thin > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent-grad);
    box-shadow: 0 0 10px var(--accent-glow);
}
.progress-thin--blue > i  { background: var(--blue); box-shadow: 0 0 10px color-mix(in srgb, var(--blue) 45%, transparent); }
.progress-thin--green > i { background: var(--green); box-shadow: 0 0 10px color-mix(in srgb, var(--green) 45%, transparent); }

/* Iniciales en cuadrado de color (tablas de clientes y pedidos). Color con style="--tile:var(--chart-3)" */
.avatar-tile {
    --tile: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tile);
    background: color-mix(in srgb, var(--tile) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--tile) 35%, transparent);
}

/* Input solo con línea inferior que se ilumina al enfocar (V3). Aditiva: .f-input f-input--line */
.f-input.f-input--line, .f-input--line {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-hover);
    border-radius: 0;
    padding: 9px 2px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.f-input.f-input--line:focus, input.f-input--line:focus, textarea.f-input--line:focus {
    border-bottom-color: var(--accent);
    box-shadow: 0 1px 0 0 var(--accent), 0 8px 14px -10px var(--accent-glow);
}

/* Punto vivo con halo (la animación la pone motion.css) */
.live-dot--pulse {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent),
                0 0 8px color-mix(in srgb, var(--green) 55%, transparent);
}

/* ── Paleta v3.1 (14-oct-2026): colores de datos y de estado armonizados con el grafito ──
   La paleta heredada (#3fb950, #d29922, #34d399, #22d3ee, #e879f9...) era de neón: luminosidad
   OKLCH 0,71-0,84, fuera de la banda que se lee bien sobre grafito, y cian/magenta se confundían
   con daltonismo. Esta pasa el validador de la skill dataviz en oscuro (sobre #18181b) y en claro
   (sobre #f7f6f4): banda de luz, croma, separación CVD >= 8 y >= 15 a vista normal entre vecinos.
   Orden fijo: 1 azul, 2 verde azulado, 3 ámbar, 4 rosa, 5 violeta, 6 salvia.
   Estado: verde = positivo, rojo = negativo, ámbar = aviso; texto >= 4,5:1 sobre el vidrio. */
:root, :root[data-theme="dark"] {
    --chart-1: #4f8fe0; --chart-2: #1fa88a; --chart-3: #c48526;
    --chart-4: #d9607f; --chart-5: #8f7fe6; --chart-6: #6fa35a;
    --blue: #4f8fe0;   --blue-soft: rgba(79,143,224,0.14);
    --green: #34c58a;  --green-soft: rgba(52,197,138,0.14);
    --red: #f65470;    --red-soft: rgba(246,84,112,0.14);
    --yellow: #e3a641; --yellow-soft: rgba(227,166,65,0.15);
}
:root[data-theme="light"] {
    --chart-1: #2f6fc4; --chart-2: #12876d; --chart-3: #b07418;
    --chart-4: #c2456a; --chart-5: #6a5acd; --chart-6: #4d8b34;
    --blue: #2f6fc4;   --blue-soft: rgba(47,111,196,0.10);
    --green: #0f7a4f;  --green-soft: rgba(15,122,79,0.10);
    --red: #c81e4b;    --red-soft: rgba(200,30,75,0.10);
    --yellow: #9a6700; --yellow-soft: rgba(154,103,0,0.12);
}
.icon-tile--violet { --tile: var(--chart-5); }

/* ── Color de identidad (14-oct-2026) ──
   Patrón de /finanzas (cuentas, préstamos, huchas, categorías) generalizado. Para elementos con
   identidad propia (una cuenta, una persona, un equipo, un frente, un proyecto), NUNCA para
   estados (ok/aviso/error van con --green/--yellow/--red y .pill-status). El color se pasa con
   --c, normalmente var(--chart-N) por orden fijo (loop.index0 % 6 + 1), sin ciclar a mitad.
   .id-card   tarjeta teñida: degradado de --c, borde teñido, filo de luz arriba (usa ::before;
              si el elemento ya usa ::before, añade .id-card--sin-filo) y brillo de --c al pasar.
   .id-ini    cuadrado con la inicial en --c (también vale con un icono dentro).
   .id-ini, .id-dot y .id-bar heredan --c del padre (una .id-card) y, si no hay, usan el acento.
   .id-dot    punto cuadrado de 10px con halo.
   .id-bar    barra en --c con brillo: <div class="id-bar"><i style="width:40%"></i></div>.
   .id-row    fila que se tiñe de --c al pasar el ratón (listas). */
.id-card { --c: var(--accent); position: relative; overflow: hidden;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, transparent) 0%,
                                color-mix(in srgb, var(--c) 4%, transparent) 55%, transparent 100%),
        var(--glass-card, var(--glass-bg));
    border: 1px solid color-mix(in srgb, var(--c) 28%, var(--glass-border)); }
.id-card:not(.id-card--sin-filo)::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c), transparent);
    box-shadow: 0 0 10px var(--c); opacity: .85; pointer-events: none; }
.id-card:hover { border-color: color-mix(in srgb, var(--c) 58%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent),
                0 10px 30px color-mix(in srgb, var(--c) 16%, transparent); }
:root[data-theme="light"] .id-card:not(.id-card--sin-filo)::before { box-shadow: none; }
.id-ini { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
    display: inline-grid; place-items: center; font-style: normal; font-size: .78rem; font-weight: 800;
    color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 40%, transparent),
                0 0 12px color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); }
.id-ini svg { width: 15px; height: 15px; }
.id-ini--sm { width: 22px; height: 22px; border-radius: 7px; font-size: .66rem; }
.id-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
    background: var(--c, var(--accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--c, var(--accent)) 55%, transparent); vertical-align: middle; }
.id-bar { height: 8px; border-radius: var(--pill); background: rgba(var(--fg-rgb), .07); overflow: hidden; }
.id-bar > i { display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--accent)) 60%, transparent), var(--c, var(--accent)));
    box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--accent)) 45%, transparent); }
.id-row { border-radius: 8px; transition: background var(--transition); }
.id-row:hover { background: color-mix(in srgb, var(--c, var(--accent)) 9%, transparent); }

/* ── Acento por usuario (14-oct-2026) ──
   base.html pone <html data-acento="…"> según la cuenta (mapa _ACENTOS al principio de base.html).
   "mar" = Rita, con los colores de su futura marca «De aguantar a elegir» (Método ELIGE):
   azul cielo profundo #2F6FB0, verde jade #2F9A74, cielo muy claro #EDF4FB. Su panel mapea su
   --azul a --accent y su --verde a --green. El rojo y el ámbar de estado no cambian.
   Además lleva una pista pequeña en la barra lateral (.sidebar-pista, solo para ella). */
:root[data-acento="mar"], :root[data-acento="mar"][data-theme="dark"] {
    --accent: #4f8ed6;
    --accent2: #7db0e8;
    --green: #3fbf93;
    --green-soft: rgba(63,191,147,0.14);
    --accent-glow: rgba(79,142,214,0.36);
    --accent-soft: rgba(79,142,214,0.14);
    --hover-glow: 0 0 0 1px rgba(79,142,214,0.22), 0 8px 28px rgba(47,154,116,0.12);
    --accent-grad: linear-gradient(180deg, #2f9a74, #2f6fb0);
    --focus-ring: 0 0 0 2px rgba(63,191,147,0.55);
    --orb-1: rgba(47,154,116,0.18);
    --orb-2: rgba(47,111,176,0.14);
    --bg-glow-1: rgba(47,154,116,0.18);
    --bg-glow-2: rgba(47,111,176,0.10);
    --marca-jade: #3fbf93;
}
:root[data-acento="mar"][data-theme="light"] {
    --accent: #2f6fb0;
    --accent2: #2f6fb0;
    --green: #24805f;
    --green-soft: rgba(47,154,116,0.12);
    --accent-glow: rgba(47,111,176,0.25);
    --accent-soft: #edf4fb;
    --hover-glow: 0 0 0 1px rgba(47,111,176,0.22), 0 6px 22px rgba(47,154,116,0.12);
    --accent-grad: linear-gradient(180deg, #2f9a74, #2f6fb0);
    --focus-ring: 0 0 0 2px rgba(47,111,176,0.45);
    --orb-1: rgba(47,154,116,0.10);
    --orb-2: rgba(47,111,176,0.10);
    --bg-glow-1: rgba(47,154,116,0.10);
    --bg-glow-2: rgba(47,111,176,0.07);
    --marca-jade: #2f9a74;
}
.sidebar-pista { margin: -4px 0 12px; padding: 0 20px; font-size: .7rem; letter-spacing: .01em;
    color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-pista b { font-weight: 700; color: var(--accent2); position: relative; }
.sidebar-pista b i { font-style: normal; position: relative; }
.sidebar-pista b i::after { content: ""; position: absolute; left: 50%; top: .02em; width: .36em; height: .36em;
    transform: translateX(-50%); border-radius: 50%; background: var(--marca-jade, var(--green));
    box-shadow: 0 0 6px color-mix(in srgb, var(--marca-jade, var(--green)) 60%, transparent); }
.sidebar.collapsed .sidebar-pista { display: none; }

/* ── Piel DAYA (15-oct-2026) ────────────────────────────────────────────────
   base.html pone data-acento="daya" en todo /daya/* y en el portal de DAYA, para Pablo y para
   Marcos: azul noche y naranja, Quicksand en títulos y Figtree en texto (las mismas que las
   presentaciones de DAYA). Las fuentes salen de Google Fonts solo en estas páginas (excepción
   a «0 CDNs»; si no cargan, cae a Nunito/sistema). Estado (verde/rojo/ámbar) y datos (--chart-*)
   no cambian. */
:root[data-acento="daya"], :root[data-acento="daya"][data-theme="dark"] {
    --bg: #0a1220;
    --surface: #111b2e;   --surface-solid: #111b2e;
    --surface2: #17233a;  --surface2-solid: #17233a;
    --surface-3: #1e2c46;
    --border: rgba(160,185,230,0.12);
    --border-hover: rgba(160,185,230,0.24);
    --border-strong: rgba(160,185,230,0.18);
    --text: #eef2f8;
    --muted: #97a3ba;
    --accent: #ff7f24;
    --accent2: #ff9d57;
    --accent-glow: rgba(255,127,36,0.36);
    --accent-soft: rgba(255,127,36,0.14);
    --hover-glow: 0 0 0 1px rgba(255,127,36,0.22), 0 8px 28px rgba(255,127,36,0.10);
    --accent-grad: linear-gradient(180deg, #ff8b3a, #e5620c);
    --focus-ring: 0 0 0 2px rgba(255,157,87,0.6);
    --orb-1: rgba(255,127,36,0.16);
    --orb-2: rgba(79,179,220,0.10);
    --bg-glow-1: rgba(255,127,36,0.13);
    --bg-glow-2: rgba(79,179,220,0.10);
    --glass-card: linear-gradient(180deg, rgba(160,190,255,0.06), rgba(160,190,255,0.02) 60%), rgba(17,27,46,0.72);
    --glass-bar: rgba(12,20,36,0.72);
    --glass-card-mobile: rgba(19,29,49,0.92);
    --glass-solid: rgba(17,27,46,0.97);
    --glass-highlight: rgba(190,210,255,0.14);
    --daya-flow: #4fb3dc;
    --daya-display: "Quicksand", "Nunito", "Varela Round", system-ui, sans-serif;
    --daya-body: "Figtree", "Inter", system-ui, -apple-system, sans-serif;
}
:root[data-acento="daya"][data-theme="light"] {
    --bg: #f5f6f9;
    --surface: #ffffff;   --surface-solid: #ffffff;
    --surface2: #eef1f6;  --surface2-solid: #eef1f6;
    --surface-3: #e4e9f1;
    --border: #d9dfe9;
    --border-hover: #c3ccdb;
    --border-strong: #c9d1de;
    --text: #0f1828;
    --muted: #5b677d;
    --accent: #e5620c;
    --accent2: #b84d06;
    --accent-glow: rgba(229,98,12,0.22);
    --accent-soft: #fdeee3;
    --hover-glow: 0 0 0 1px rgba(229,98,12,0.20), 0 6px 22px rgba(15,24,40,0.08);
    --accent-grad: linear-gradient(180deg, #f07222, #d95807);
    --focus-ring: 0 0 0 2px rgba(229,98,12,0.45);
    --bg-glow-1: rgba(229,98,12,0.06);
    --bg-glow-2: rgba(11,93,128,0.06);
    --glass-card: #ffffff;
    --glass-bar: rgba(245,246,249,0.86);
    --glass-card-mobile: #ffffff;
    --glass-solid: #ffffff;
    --glass-highlight: #ffffff;
    --daya-flow: #0b5d80;
}
:root[data-acento="daya"] body { font-family: var(--daya-body); }
:root[data-acento="daya"] body::before { background-image: none; }
:root[data-acento="daya"] h1, :root[data-acento="daya"] h2, :root[data-acento="daya"] h3,
:root[data-acento="daya"] .dy-display { font-family: var(--daya-display); letter-spacing: -.01em; }
/* La «y» de DAYA con su punto naranja, para cabeceras de las páginas Daya. */
.dy-logo { font-family: var(--daya-display); font-weight: 700; letter-spacing: .04em; line-height: 1; }
.dy-logo .y { position: relative; display: inline-block; }
.dy-logo .y::after { content: ""; position: absolute; left: 50%; bottom: -.22em; width: .22em; height: .22em;
    border-radius: 50%; background: var(--accent); transform: translateX(-50%); }