/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — Sistema de tema del Portal Dittore                (2026-09-02)

   Origen: anatomía del "CFO Command Center" (Lovable) leída del CSS computado:
   tokens oklch en dos temas, tipografía display / sans / mono, eyebrows en
   mono mayúsculas con tracking, KPI row con hairlines y deltas ▲/▼.

   Regla: se imita el SISTEMA, no la marca. El primario es el verde Dittore
   (#3baca2 / #2a8a82), no el índigo del template.

   Cómo funciona: define los tokens del template (--t-*) y los VUELCA en las
   variables que las cinco superficies ya usan (--ink, --paper, --card,
   --line, --cyan…). Así ninguna página tiene que reescribir su CSS para
   heredar ambos temas. El tema se elige con [data-theme="light"|"dark"] en
   <html>; sin atributo, sigue a prefers-color-scheme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía (Google Fonts ya está permitido por la CSP: Saira, JetBrains) ── */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Saira+Semi+Condensed:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* 2026-09-17 — Material Symbols: lo necesita el header común (softui.js) para el
   lanzador, la campana y el refrescar. Sin esta fuente los botones salen con la
   palabra del icono ('apps', 'notifications'). Las páginas sueltas ya la cargaban
   por su cuenta; las embebidas en el worker no. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');
.msy{font-family:'Material Symbols Outlined';line-height:1;-webkit-font-smoothing:antialiased}

/* Fuente INSTITUCIONAL en todas las páginas (Ricardo 3-sep): Saira, como la SPA de
   clientes. Del template solo se toma la anatomía, no su tipografía (Bricolage /
   Inter Tight quedaron fuera). Mono: JetBrains Mono para cifras y eyebrows. */
:root {
  --t-font-display: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-font-sans:    "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-font-cond:    "Saira Semi Condensed", "Saira", sans-serif;
  --t-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-radius: 12px;
  --t-radius-sm: 8px;
  --t-radius-lg: 18px;
  --t-radius-pill: 999px;
  --t-track: 0.06em;           /* tracking de los eyebrows mono */
}

/* ── TEMA CLARO (por defecto) ─────────────────────────────────────────────── */
:root, [data-theme="light"] {
  color-scheme: light;
  --t-bg:            oklch(97.7% 0.004 85);    /* crema muy suave, como el template */
  --t-surface:       oklch(100% 0 0);
  --t-surface-2:     oklch(98.2% 0.003 85);
  --t-surface-3:     oklch(95.8% 0.004 266);
  --t-fg:            oklch(21.5% 0.012 266);
  --t-fg-2:          oklch(32% 0.012 266);
  --t-muted:         oklch(52% 0.012 266);
  --t-muted-2:       oklch(66% 0.010 266);
  --t-hairline:      oklch(88.8% 0.006 266);
  --t-border:        oklch(91.2% 0.005 266);
  --t-border-strong: oklch(80% 0.008 266);
  --t-primary:       #2a8a82;                  /* verde Dittore profundo */
  --t-primary-soft:  #3baca2;
  --t-primary-tint:  #e2f1ef;
  --t-primary-fg:    #ffffff;
  --t-positive:      oklch(46% 0.15 150);   /* AA sobre su tint (medido) */
  --t-positive-tint: oklch(95% 0.05 150);
  --t-negative:      oklch(50% 0.18 40);    /* naranja-rojo del "net burn", oscurecido para AA */
  --t-negative-tint: oklch(95% 0.05 40);
  --t-warning:       oklch(50% 0.13 75);    /* AA sobre su tint (medido) */
  --t-warning-tint:  oklch(95% 0.06 85);
  --t-shadow: 0 1px 2px rgba(20,22,30,.04), 0 4px 14px -2px rgba(20,22,30,.06);
  /* Tarjeta invertida (la protagonista del resumen): en claro es tinta sobre crema */
  --t-inv-bg:     oklch(21.5% 0.012 266);
  --t-inv-fg:     #ffffff;
  --t-inv-muted:  rgba(255,255,255,.62);
  --t-inv-border: oklch(21.5% 0.012 266);
  --t-inv-accent: #a6c476;
  --t-inv-accent-tint: rgba(166,196,118,.14);
}

/* ── TEMA OSCURO ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --t-bg:            oklch(14.5% 0.012 268);
  --t-surface:       oklch(18.5% 0.013 267);
  --t-surface-2:     oklch(22.2% 0.015 266);
  --t-surface-3:     oklch(26% 0.016 266);
  --t-fg:            oklch(95.5% 0.004 260);
  --t-fg-2:          oklch(85% 0.006 260);
  --t-muted:         oklch(66% 0.014 262);
  --t-muted-2:       oklch(52% 0.013 262);
  --t-hairline:      oklch(32% 0.016 266);
  --t-border:        oklch(29% 0.015 266);
  --t-border-strong: oklch(40% 0.016 266);
  --t-primary:       #46bdb2;
  --t-primary-soft:  #63d2c7;
  --t-primary-tint:  #16322f;
  --t-primary-fg:    #0b1412;
  --t-positive:      oklch(72% 0.17 150);
  --t-positive-tint: oklch(28% 0.05 150);
  --t-negative:      oklch(72% 0.18 40);
  --t-negative-tint: oklch(28% 0.05 40);
  --t-warning:       oklch(78% 0.14 80);
  --t-warning-tint:  oklch(30% 0.05 85);
  --t-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px -2px rgba(0,0,0,.45);
  /* En oscuro la protagonista NO se vuelve blanca: es la superficie con tinte
     del primario, como la tarjeta destacada del template */
  --t-inv-bg:     oklch(24% 0.03 190);
  --t-inv-fg:     oklch(96% 0.004 260);
  --t-inv-muted:  oklch(72% 0.02 200);
  --t-inv-border: oklch(38% 0.05 190);
  --t-inv-accent: #63d2c7;
  --t-inv-accent-tint: rgba(99,210,199,.16);
}
/* Sin elección explícita: seguir al sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --t-bg: oklch(14.5% 0.012 268); --t-surface: oklch(18.5% 0.013 267); --t-surface-2: oklch(22.2% 0.015 266);
    --t-surface-3: oklch(26% 0.016 266); --t-fg: oklch(95.5% 0.004 260); --t-fg-2: oklch(85% 0.006 260);
    --t-muted: oklch(66% 0.014 262); --t-muted-2: oklch(52% 0.013 262); --t-hairline: oklch(32% 0.016 266);
    --t-border: oklch(29% 0.015 266); --t-border-strong: oklch(40% 0.016 266);
    --t-primary: #46bdb2; --t-primary-soft: #63d2c7; --t-primary-tint: #16322f; --t-primary-fg: #0b1412;
    --t-positive: oklch(72% 0.17 150); --t-positive-tint: oklch(28% 0.05 150);
    --t-negative: oklch(72% 0.18 40); --t-negative-tint: oklch(28% 0.05 40);
    --t-warning: oklch(78% 0.14 80); --t-warning-tint: oklch(30% 0.05 85);
    --t-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px -2px rgba(0,0,0,.45);
     --t-inv-bg: oklch(24% 0.03 190); --t-inv-fg: oklch(96% 0.004 260); --t-inv-muted: oklch(72% 0.02 200);
    --t-inv-border: oklch(38% 0.05 190); --t-inv-accent: #63d2c7; --t-inv-accent-tint: rgba(99,210,199,.16);
  }
}

/* ── PUENTE: los tokens se vuelcan en las variables que las páginas YA usan ── */
:root, [data-theme="light"], [data-theme="dark"] {
  --ink: var(--t-fg);            --ink-2: var(--t-fg-2);
  --muted: var(--t-muted);       --muted-2: var(--t-muted-2);   --muted-3: var(--t-border-strong);
  --paper: var(--t-bg);          --paper-2: var(--t-surface-2); --paper-3: var(--t-surface-3);
  --card: var(--t-surface);
  --line: var(--t-hairline);     --line-soft: var(--t-border);  --line-strong: var(--t-border-strong);
  --cyan: var(--t-primary-soft); --cyan-deep: var(--t-primary); --cyan-tint: var(--t-primary-tint);
  --green: var(--t-positive);    --green-deep: var(--t-positive); --green-tint: var(--t-positive-tint);
  --red: var(--t-negative);      --red-deep: var(--t-negative);   --red-tint: var(--t-negative-tint);
  --amber: var(--t-warning);     --amber-tint: var(--t-warning-tint);
  --brand: var(--t-primary);     --border: var(--t-hairline);   --hover: var(--t-surface-2);
  /* nombres de /reporte */
  --tinta: var(--t-fg); --teal: var(--t-primary); --gris: var(--t-muted); --linea: var(--t-hairline); --fondo: var(--t-bg);
  --crit: var(--t-negative); --ambar: var(--t-warning); --ok: var(--t-positive);
  --shadow-sm: var(--t-shadow); --shadow: var(--t-shadow);
}

/* ── Componentes del template (opt-in por clase; no tocan lo existente) ───── */
.t-eyebrow {
  font-family: var(--t-font-mono); font-size: 10.5px; letter-spacing: var(--t-track);
  text-transform: uppercase; color: var(--t-muted); display: flex; align-items: center; gap: 8px;
}
.t-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t-primary-soft); }
.t-eyebrow.plain::before { display: none; }
.t-display { font-family: var(--t-font-display); font-weight: 700; letter-spacing: -0.025em; color: var(--t-fg); line-height: 1.05; }
.t-sub { font-family: var(--t-font-sans); color: var(--t-muted); font-size: 13.5px; }
.t-mono { font-family: var(--t-font-mono); font-variant-numeric: tabular-nums; }

/* KPI row: tarjetas pegadas separadas por hairline, como el template */
.t-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
  background: transparent; border: 0; border-radius: 0; overflow: visible; }
.t-kpi { padding: 16px 18px; min-width: 0; background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); box-shadow: var(--t-elev-1); transition: box-shadow .2s, transform .12s; }
.t-kpi:hover { box-shadow: var(--t-elev-2); transform: translateY(-2px); }
.t-kpi:last-child { border-right: 1px solid var(--t-border); }
.t-kpi .k { font-family: var(--t-font-mono); font-size: 10.5px; letter-spacing: var(--t-track); text-transform: uppercase; color: var(--t-muted); }
.t-kpi .v { font-family: var(--t-font-mono); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; color: var(--t-fg); margin: 6px 0 4px; letter-spacing: -0.02em; white-space: nowrap; }
.t-kpi .v.pos { color: var(--t-positive); } .t-kpi .v.neg { color: var(--t-negative); }
/* Cifras largas ($19,277,762.76) no caben en 190 px al tamaño normal: se encogen en vez de encimarse con la tarjeta vecina */
.t-kpi .v.largo { font-size: clamp(17px, 1.55vw, 22px); letter-spacing: -0.01em; }
.t-kpi .v.xlargo { font-size: clamp(15px, 1.3vw, 19px); letter-spacing: 0; }
.t-kpi .d { font-family: var(--t-font-mono); font-size: 11px; color: var(--t-muted); line-height: 1.5; margin-top: 2px; }
.t-kpi .d .sube { color: var(--t-positive); } .t-kpi .d .baja { color: var(--t-negative); }
/* OJO: no usar .up/.dn/.back/.front aquí — COLAB_HTML ya tiene .up (bloque con fondo) y .back (botón Volver) y se encimaban (2-sep) */
.t-kpi .lee { font-family: var(--t-font-sans); font-size: 11.5px; color: var(--t-muted); line-height: 1.35; margin-top: 6px; }
@media (max-width: 640px) { .t-kpi { border-right: 0; border-bottom: 1px solid var(--t-hairline); } .t-kpi:last-child { border-bottom: 0; } }

/* Tarjeta de sección con eyebrow + título + descripción */
.t-card { background: var(--t-surface); border: 1px solid var(--t-hairline); border-radius: var(--t-radius); padding: 18px 20px; }
.t-card > .t-eyebrow { margin-bottom: 4px; }
.t-card > .t-title { font-family: var(--t-font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--t-fg); }
.t-card > .t-sub { margin-top: 2px; margin-bottom: 12px; }

/* Chips de periodo / segmentos, como la barra "PERIOD" del template */
.t-chips { display: inline-flex; gap: 2px; padding: 3px; background: var(--t-surface-2); border: 1px solid var(--t-hairline); border-radius: var(--t-radius-sm); }
.t-chips > button { font-family: var(--t-font-mono); font-size: 11.5px; padding: 6px 10px; border: 0; background: transparent; color: var(--t-muted); border-radius: 4px; cursor: pointer; min-height: 32px; }
.t-chips > button.on { background: var(--t-primary); color: var(--t-primary-fg); }
.t-chips > button:hover:not(.on) { background: var(--t-surface-3); color: var(--t-fg); }

/* Tabla: header mono uppercase, filas con hairline */
.t-table { width: 100%; border-collapse: collapse; font-family: var(--t-font-sans); font-size: 13.5px; }
.t-table th { font-family: var(--t-font-mono); font-size: 10.5px; letter-spacing: var(--t-track); text-transform: uppercase; color: var(--t-muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--t-hairline); }
.t-table td { padding: 10px; border-bottom: 1px solid var(--t-hairline); color: var(--t-fg); }
.t-table td.num, .t-table th.num { text-align: right; font-family: var(--t-font-mono); font-variant-numeric: tabular-nums; }

/* Chip de estado con punto, como CRITICAL / HIGH / WATCH */
.t-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--t-font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; border: 1px solid var(--t-hairline); background: var(--t-surface-2); color: var(--t-fg-2); }
.t-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.t-status.pos { color: var(--t-positive); background: var(--t-positive-tint); border-color: transparent; }
.t-status.neg { color: var(--t-negative); background: var(--t-negative-tint); border-color: transparent; }
.t-status.warn { color: var(--t-warning); background: var(--t-warning-tint); border-color: transparent; }

/* Toggle de tema: mismo botón redondo del template */
.t-theme { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--t-hairline); background: var(--t-surface); color: var(--t-fg);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.t-theme:hover { background: var(--t-surface-2); }
.t-theme svg { width: 16px; height: 16px; }
.t-theme .sun { display: none; } .t-theme .moon { display: block; }
[data-theme="dark"] .t-theme .sun { display: block; } [data-theme="dark"] .t-theme .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-theme .sun { display: block; } :root:not([data-theme="light"]) .t-theme .moon { display: none; } }

/* Footer mono muted, como el del template */
.t-foot { font-family: var(--t-font-mono); font-size: 11px; color: var(--t-muted-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--t-hairline); }


/* ── KPI que gira (2026-09-02): hover en escritorio, TAP en móvil ─────────── */
/* Regla de la casa (31-ago): "ni sirve el desglose al pasar el cursor". El
   giro por hover es un extra; el tap (clase .flip) es lo que garantiza que en
   el teléfono se pueda leer la cara de atrás. */
/* Las dos caras ocupan la MISMA celda de un grid: la tarjeta mide lo que mida
   la cara más alta y la fila de KPIs se estira con ella. Con position:absolute
   la cara de atrás se salía del cuadro cuando la lectura era larga (2-sep). */
.t-kpi.flipable { perspective: 900px; cursor: pointer; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 132px; overflow: hidden; }
.t-kpi.flipable .cara { grid-area: 1 / 1; min-width: 0; overflow-wrap: anywhere; padding: 16px 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.t-kpi.flipable .cara.atras { transform: rotateY(180deg); background: var(--t-surface-2); }
.t-kpi.flipable:hover .cara.frente, .t-kpi.flipable.flip .cara.frente { transform: rotateY(-180deg); }
.t-kpi.flipable:hover .cara.atras,  .t-kpi.flipable.flip .cara.atras  { transform: rotateY(0); }
@media (hover: none) { .t-kpi.flipable:hover .cara.frente { transform: none; } .t-kpi.flipable:hover .cara.atras { transform: rotateY(180deg); }
  .t-kpi.flipable.flip .cara.frente { transform: rotateY(-180deg); } .t-kpi.flipable.flip .cara.atras { transform: rotateY(0); } }
.t-kpi .cara.atras .k { color: var(--t-primary); }
.t-kpi .cara.atras .lee { font-size: 11.5px; color: var(--t-fg-2); margin-top: 6px; line-height: 1.4; }
.t-kpi .cara.atras .f { font-family: var(--t-font-mono); font-size: 10px; color: var(--t-muted); margin-top: 8px; line-height: 1.45; }
.t-kpi .d .prev { color: var(--t-muted-2); }

/* ── Barra de meses, como PERIOD del template ─────────────────────────────── */
.t-months { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-months .t-chips > button { padding: 6px 9px; min-width: 38px; }

/* ── Gráfico de tubería (Sankey) en SVG puro ──────────────────────────────── */
.t-sankey { width: 100%; height: auto; display: block; }
.t-sankey text { font-family: var(--t-font-sans); font-size: 12px; fill: var(--t-fg); }
.t-sankey text.m { font-family: var(--t-font-mono); font-size: 10.5px; fill: var(--t-muted); }
.t-sankey .ribbon { fill-opacity: .28; stroke: none; transition: fill-opacity .15s; }
.t-sankey .ribbon:hover, .t-sankey .ribbon.on { fill-opacity: .6; }
.t-sankey .node { fill: var(--t-primary); }
.t-sankey .node.gasto { fill: var(--t-negative); }
.t-sankey .node.util { fill: var(--t-positive); }
.t-sankey .node.neg { fill: var(--t-negative); }
.t-legend { display: flex; gap: 14px; font-family: var(--t-font-sans); font-size: 12px; color: var(--t-muted); flex-wrap: wrap; }
.t-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.t-legend .in::before { background: var(--t-primary); } .t-legend .out::before { background: var(--t-negative); } .t-legend .ut::before { background: var(--t-positive); }

/* ── Logo oficial por tema ──────────────────────────────────────────────────
   Dos PNG transparentes de IDENTIDAD GRAFICA (tinta / blanco). Se muestran
   ambos y el CSS apaga el que no toca; así funciona con el botón de tema Y
   siguiendo al sistema. Nunca un logo con fondo blanco sobre fondo oscuro. */
.logo-oscuro { display: none !important; }
[data-theme="dark"] .logo-oscuro { display: block !important; }
[data-theme="dark"] .logo-claro { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-oscuro { display: block !important; }
  :root:not([data-theme="light"]) .logo-claro { display: none !important; }
}

/* ── Menú del nombre (puertas de la sesión) en las páginas aparte ─────────── */
.t-nav { position: relative; display: inline-block; }
.t-nav-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--t-hairline); background: var(--t-surface); color: var(--t-fg); font: 500 13px var(--t-font-sans); cursor: pointer; }
.t-nav-chip:hover { border-color: var(--t-primary); }
.t-nav-ini { width: 24px; height: 24px; border-radius: 50%; background: var(--t-fg); color: var(--t-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.t-nav-caret { color: var(--t-muted); font-size: 11px; }
.t-nav-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; max-height: 70vh; overflow: auto; background: var(--t-surface); border: 1px solid var(--t-hairline); border-radius: 12px; box-shadow: var(--t-shadow); padding: 6px; z-index: 70; }
.t-nav-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--t-fg); text-decoration: none; font: 400 13.5px var(--t-font-sans); }
.t-nav-menu a:hover { background: var(--t-surface-2); }
.t-nav-menu a:first-child { font-weight: 600; border-bottom: 1px solid var(--t-hairline); border-radius: 8px 8px 0 0; margin-bottom: 4px; }


/* ═══ Fundaciones del sistema (Ricardo 4-sep): consistencia en TODAS las
   superficies — radios, elevación 1-5 y componentes. Anatomía del UI kit
   (clay/soft-UI claro); paleta = la de arriba (verde Dittore). En oscuro la
   sombra casi no se ve, así que la elevación añade también un borde. ═══ */
:root, [data-theme="light"] {
  --t-elev-1: 0 1px 2px rgba(20,22,30,.05), 0 3px 8px -3px rgba(20,22,30,.07);
  --t-elev-2: 0 2px 5px rgba(20,22,30,.06), 0 10px 22px -6px rgba(20,22,30,.10);
  --t-elev-3: 0 5px 12px rgba(20,22,30,.08), 0 18px 38px -8px rgba(20,22,30,.13);
  --t-elev-4: 0 10px 24px rgba(20,22,30,.11), 0 30px 64px -12px rgba(20,22,30,.20);
  --t-elev-5: 0 16px 38px rgba(20,22,30,.15), 0 48px 96px -16px rgba(20,22,30,.26);
  --t-elev-brd: transparent;
}
[data-theme="dark"] {
  --t-elev-1: 0 1px 2px rgba(0,0,0,.5), 0 3px 10px -3px rgba(0,0,0,.55);
  --t-elev-2: 0 3px 8px rgba(0,0,0,.5), 0 12px 26px -6px rgba(0,0,0,.6);
  --t-elev-3: 0 6px 16px rgba(0,0,0,.55), 0 20px 44px -8px rgba(0,0,0,.65);
  --t-elev-4: 0 12px 30px rgba(0,0,0,.6), 0 34px 72px -12px rgba(0,0,0,.72);
  --t-elev-5: 0 18px 44px rgba(0,0,0,.66), 0 54px 110px -16px rgba(0,0,0,.8);
  --t-elev-brd: var(--t-border);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --t-elev-1: 0 1px 2px rgba(0,0,0,.5), 0 3px 10px -3px rgba(0,0,0,.55);
  --t-elev-2: 0 3px 8px rgba(0,0,0,.5), 0 12px 26px -6px rgba(0,0,0,.6);
  --t-elev-3: 0 6px 16px rgba(0,0,0,.55), 0 20px 44px -8px rgba(0,0,0,.65);
  --t-elev-4: 0 12px 30px rgba(0,0,0,.6), 0 34px 72px -12px rgba(0,0,0,.72);
  --t-elev-5: 0 18px 44px rgba(0,0,0,.66), 0 54px 110px -16px rgba(0,0,0,.8);
  --t-elev-brd: var(--t-border);
} }

/* Botones — default / hover / disabled. Peso 500 (sin negrita dura). */
.t-btn { font-family: var(--t-font-sans); font-weight: 500; font-size: 13.5px; line-height: 1; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; border-radius: var(--t-radius-sm); border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-fg);
  cursor: pointer; transition: background .15s, box-shadow .15s, transform .05s, filter .15s; box-shadow: var(--t-elev-1); }
.t-btn:hover { background: var(--t-surface-2); }
.t-btn:active { transform: translateY(1px); }
.t-btn:disabled, .t-btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; background: var(--t-surface-2); }
.t-btn--primary { background: var(--t-primary); border-color: transparent; color: var(--t-primary-fg); }
.t-btn--primary:hover { background: var(--t-primary); filter: brightness(1.06); }
.t-btn--ghost { background: transparent; box-shadow: none; border-color: transparent; }
.t-btn--ghost:hover { background: var(--t-surface-2); }

/* Inputs con anillo de foco (verde Dittore) */
.t-input { font: inherit; font-family: var(--t-font-sans); width: 100%; padding: 10px 12px; border-radius: var(--t-radius-sm);
  border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-fg); transition: border-color .15s, box-shadow .15s; }
.t-input::placeholder { color: var(--t-muted-2); }
.t-input:focus { outline: 0; border-color: var(--t-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--t-primary) 26%, transparent); }
.t-field { display: block; } .t-field > label { display:block; font-family: var(--t-font-mono); font-size: 10.5px; letter-spacing: var(--t-track); text-transform: uppercase; color: var(--t-muted); margin-bottom: 5px; }

/* Chips: filtro / seleccionado / deshabilitado */
.t-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--t-font-sans); font-weight: 500; font-size: 12px;
  padding: 5px 11px; border-radius: var(--t-radius-pill); border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-fg-2); cursor: pointer; transition: background .12s, border-color .12s, transform .1s; }
.t-chip:hover { background: var(--t-surface-2); }
.t-chip.is-on { background: var(--t-primary-tint); border-color: transparent; color: var(--t-primary); }
.t-chip.is-on::before { content: "\2713"; font-weight: 600; }
.t-chip:disabled, .t-chip.is-disabled { opacity: .5; cursor: not-allowed; }

/* Tabs — dos variantes, deliberado: segmentado (.t-seg) para filtros/toggles
   cortos; subrayado (.t-tabline) para las secciones principales de una página.
   Distinta jerarquía, mismo lenguaje. */
.t-seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--t-surface-2); border: 1px solid var(--t-border); border-radius: var(--t-radius); }
.t-seg > button { font-family: var(--t-font-sans); font-weight: 500; font-size: 12.5px; padding: 8px 13px; border: 0; background: transparent; color: var(--t-muted); border-radius: var(--t-radius-sm); cursor: pointer; transition: background .15s, color .15s; }
.t-seg > button.is-on { background: var(--t-surface); color: var(--t-primary); box-shadow: var(--t-elev-1); }
.t-tabline { display: flex; gap: 22px; border-bottom: 1px solid var(--t-hairline); }
.t-tabline > button { font-family: var(--t-font-sans); font-weight: 500; font-size: 13.5px; padding: 10px 2px; border: 0; background: transparent; color: var(--t-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.t-tabline > button.is-on { color: var(--t-primary); border-bottom-color: var(--t-primary); }

/* Alertas full-width con icono — éxito / advertencia / error (molde de toasts) */
.t-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--t-radius); font-size: 13px; border: 1px solid transparent; }
.t-alert .ic { flex: 0 0 18px; margin-top: 1px; }
.t-alert--ok { background: var(--t-positive-tint); color: var(--t-positive); }
.t-alert--warn { background: var(--t-warning-tint); color: var(--t-warning); }
.t-alert--err { background: var(--t-negative-tint); color: var(--t-negative); }

/* Superficies elevadas: card (1), popover/menú (3), modal (4) */
.t-surface-card { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); box-shadow: var(--t-elev-1); }
.t-popover { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius); box-shadow: var(--t-elev-3); }
.t-modal { background: var(--t-surface); border: 1px solid var(--t-elev-brd); border-radius: var(--t-radius-lg); box-shadow: var(--t-elev-4); }
.t-scrim { position: fixed; inset: 0; background: rgba(15,20,25,.44); backdrop-filter: blur(2px); }


/* ── Encabezado institucional compartido (barra de marca + hero). Igual que
   colaboradores y el portal de pagos, para que TODOS los módulos lo usen. ── */
.topbar { background: var(--t-surface); border-bottom: 1px solid var(--t-hairline); padding: 12px 20px; position: sticky; top: 0; z-index: 30; }
.topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.topbar .brand { display: flex; align-items: center; }
.topbar .brand img { height: 30px; display: block; }
.brand-sep { width: 1px; height: 22px; background: var(--t-hairline); margin: 0 14px; }
.brand-sub { font-family: var(--t-font-cond); font-size: 12px; letter-spacing: .14em; color: var(--t-muted); font-weight: 600; white-space: nowrap; text-transform: uppercase; }
.tb-right { display: flex; align-items: center; gap: 12px; }
.tb-refresh { border: 1px solid var(--t-hairline); background: var(--t-surface); border-radius: 999px; width: 36px; height: 36px; cursor: pointer; font-size: 17px; color: var(--t-fg); font-family: inherit; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, transform .35s; }
.tb-refresh:hover { border-color: var(--t-primary); }
.tb-refresh:active { transform: rotate(180deg); }
.t-hero-title { font-family: var(--t-font-display); font-size: clamp(27px, 3.2vw, 38px); font-weight: 500; letter-spacing: -.025em; line-height: 1.03; color: var(--t-fg); margin: 10px 0 0; }
.t-hero-title em { font-style: italic; color: var(--t-primary); font-weight: 500; }
@media (max-width: 700px) { .brand-sep, .brand-sub { display: none; } }


/* ════════════════════════════════════════════════════════════════════════
   REGLA DE COLUMNAS — toda tabla o lista de renglones del portal   (2026-09-17)

   Ricardo: *"ordena bien esa columna, parece viborita toda chueca, toma eso
   como regla para todas las tablas que se generen"*.

   Causa: en una fila flex, si el importe y las etiquetas se dimensionan al
   ancho de su propio texto, el borde derecho de los importes se corre renglón
   a renglón según lo larga que sea la etiqueta que va después ("PAGADO" vs
   "EN REVISIÓN"). El ojo no baja en línea recta: serpentea.

   La regla:
     1. Solo la columna de TEXTO (nombre, concepto, cliente) es elástica.
     2. IMPORTES a la derecha, en mono, con `tabular-nums`, en ranura FIJA.
     3. ETIQUETAS de estado en ranura fija y CENTRADA, dimensionada por la
        etiqueta más larga del conjunto — no por la de cada fila.
     4. Iconos (caret, check) siempre a ancho fijo.
     5. En móvil (≤880px) se sueltan: ahí manda el wrap, no la rejilla.

   Úselas así:  <span class="col-num">$12,760.00</span>
                 <span class="tag tag-pag col-tag">Pagado</span>
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --col-monto:  140px;
  --col-tag:    124px;
  --col-tag-sm:  48px;
  --col-icon:    22px;
}
.col-num {
  flex: 0 0 var(--col-monto); width: var(--col-monto);
  text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.col-tag    { flex: 0 0 var(--col-tag);    width: var(--col-tag);    justify-content: center; }
.col-tag-sm { flex: 0 0 var(--col-tag-sm); width: var(--col-tag-sm); justify-content: center; }
.col-icon   { flex: 0 0 var(--col-icon);   width: var(--col-icon); }
/* Celdas numéricas en <table>: misma regla, sin flex. En una tabla real el
   ancho de columna ya lo comparten todas las celdas, así que basta con fijar
   alineación y cifras tabulares — la "viborita" solo aparece en filas flex. */
th.col-num, td.col-num { display: table-cell; width: var(--col-monto); text-align: right; }
td.num, th.num {
  text-align: right;
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
  white-space: nowrap;
}
@media (max-width: 880px) {
  .col-num, .col-tag, .col-tag-sm { flex: 0 0 auto; width: auto; }
}