/* ═══════════════════════════════════════════════════════════════════════════
   flujo-caja.css
   ───────────────────────────────────────────────────────────────────────────
   Estilos del apartado. Estaban DENTRO de flujo-caja.js, inyectados
   en un <style> desde JavaScript, y se movieron acá sin cambiar una línea.

   ⚠ El <link> va ÚLTIMO en el <head> de index.html, y no es un detalle: el
   <style> inyectado se agregaba en tiempo de ejecución, o sea después de todos
   los <link>. Moverlo antes cambiaría qué regla gana en los empates de
   especificidad, y eso no se ve en ningún error — se ve en la pantalla, torcida.

   ⚠ No se reformateó ni se reordenó nada a propósito. El objetivo del movimiento
   es que la pantalla NO se mueva; cualquier mejora de estilo va en un paso
   aparte, con su propia comparación.
   ═══════════════════════════════════════════════════════════════════════════ */
.fc-root { padding: 4px 0 40px; }
.fc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.fc-title { font-size:22px; font-weight:600; letter-spacing:-.3px; }
.fc-sub { font-size:12px; color:var(--text-3); margin-top:4px; }
.fc-org { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.2px;
          border:1px solid var(--border-2); border-radius:4px; padding:1px 6px; margin-right:5px;
          color:var(--text-2); }
/* ⚠ Eran colores escritos a mano (#0ca30c / #fab219), pensados para el fondo
   oscuro. En tema claro el fondo (una franja del mismo tinte) se vuelve casi
   blanco y ese verde/ámbar quedaba en 2,72:1 — por debajo del mínimo 4,5:1.
   `--green`/`--amber` sí siguen al tema, pero OJO: no alcanza con solo
   cambiar el color. Medido con el tinte de fondo puesto (incluso el más
   suave que se probó, `--green-bg`/`--amber-bg` al 10%): 4,27:1 y 4,10:1 en
   claro — sigue por debajo. El texto es de 10px, muy chico para el umbral de
   3:1 de "texto grande". Sin ningún tinte —el texto y el borde llevan el
   color, el fondo queda transparente— el texto mide contra la superficie de
   la página y ahí sí cumple en los cuatro casos: 7,42:1 / 8,77:1 en oscuro,
   4,88:1 / 4,66:1 en claro (verde/ámbar). */
.fc-org.ok   { color:var(--green); border-color:color-mix(in srgb, var(--green) 45%, transparent); }
.fc-org.warn { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 45%, transparent); }
.fc-legend-rp { display:flex; gap:8px; flex-wrap:wrap; }
.fc-chip { display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--text-2);
           background:var(--navy-2); border:1px solid var(--border); border-radius:999px; padding:5px 11px; }
.fc-chip .sw { width:13px; height:13px; border-radius:3px; display:inline-block; }
/* El azul de la primera serie, escrito literal. Es el valor de SLOT[0],
   que estas tres líneas interpolaban desde JavaScript — y lo interpolaban
   al lado de rgba(57,135,229,...), que es EL MISMO color escrito a mano.
   O sea la duplicación ya existía; resolverla acá no agrega ninguna.
   Anotado en Pendientes.md: el lugar correcto para el valor es un token
   CSS que el JS lea con mxColorTema, como ya hace vista-resumida.
   (Sin acentos graves en este comentario: uno solo cierra la plantilla
   de JavaScript y se lleva 102 reglas por delante. Ya pasó.) */
.fc-chip .sw.solid { background:#3987e5; }
.fc-chip .sw.hatch { background:
  repeating-linear-gradient(45deg, #3987e5 0 2px, rgba(57,135,229,0.22) 2px 5px); }
.fc-chip .sw.hatch2 { background:
  repeating-linear-gradient(135deg, #3987e5 0 2px, rgba(57,135,229,0.22) 2px 5px); }
/* El fondo del distintivo es el mismo tinte que la banda del gráfico. */
.fc-chip.t1 { background:rgba(88,141,209,0.15); border-color:rgba(88,141,209,0.38); }
.fc-chip.t2 { background:rgba(201,133,0,0.15);  border-color:rgba(201,133,0,0.40); }

.fc-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.fc-segs { display:inline-flex; background:var(--navy-2); border:1px solid var(--border); border-radius:8px; padding:3px; gap:2px; }
.fc-seg { background:transparent; border:0; color:var(--text-2); font-family:var(--font); font-size:11.5px;
          padding:6px 12px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.fc-seg:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.fc-seg.on { background:var(--blue); color:#fff; font-weight:500; }
/* Filtros que no aplican a la vista activa: visibles pero inertes, para
   no mover el layout al cambiar de vista. */
.fc-segs.dim { opacity:.35; pointer-events:none; }
.fc-actions { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.fc-btn { background:var(--navy-2); border:1px solid var(--border-2); color:var(--text-2);
          font-family:var(--font); font-size:11.5px; padding:8px 13px; border-radius:8px; cursor:pointer; }
.fc-btn:hover { color:var(--text); border-color:var(--border-2); background:var(--navy-3); }
.fc-btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:500; }
.fc-btn.primary:hover { background:var(--blue-light); }
.fc-btn.ghost { background:transparent; }

.fc-aviso { border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:12.5px;
            border:1px solid var(--border-2); background:var(--navy-2); }
.fc-aviso.ok    { border-color:rgba(12,163,12,0.4);  background:rgba(12,163,12,0.08); }
.fc-aviso.warn  { border-color:rgba(250,178,25,0.4); background:rgba(250,178,25,0.08); }
.fc-aviso.error { border-color:rgba(208,59,59,0.45); background:rgba(208,59,59,0.10); }
.fc-aviso-top { display:flex; gap:10px; align-items:flex-start; }
.fc-aviso-det { margin:6px 0 0 16px; color:var(--text-2); font-size:11.5px; line-height:1.7; }
.fc-x { margin-left:auto; background:transparent; border:0; color:var(--text-3); cursor:pointer; font-size:13px; }

.fc-hero { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius);
           padding:22px 24px; margin-bottom:14px; }
.fc-hero-l { font-size:12px; color:var(--text-2); }
.fc-hero-v { font-size:52px; font-weight:600; letter-spacing:-1.5px; line-height:1.1; margin:4px 0 2px; }
.fc-hero-v .u { font-size:15px; font-weight:500; color:var(--text-2); margin-left:10px; letter-spacing:0; }
.fc-hero-s { font-size:11.5px; color:var(--text-3); }
.fc-hero-x { font-size:12px; color:var(--text-2); line-height:1.55; margin-top:12px;
             padding-top:12px; border-top:1px solid var(--border); max-width:92ch; }
.fc-hero-x b { color:var(--text); font-weight:600; }
.fc-tile { cursor:help; }

.fc-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:14px; }
.fc-tile { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
.fc-tile-l { font-size:11.5px; color:var(--text-2); }
.fc-tile-v { font-size:25px; font-weight:600; letter-spacing:-.6px; margin:5px 0 3px; }
.fc-tile-s { font-size:10.5px; color:var(--text-3); }

.fc-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:14px; margin-bottom:14px; }
/* Columna con el lienzo anclado abajo: las tarjetas de una misma fila
   crecen igual (grid) y así los ejes X quedan alineados aunque las
   reseñas tengan distinto largo. */
.fc-card { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius);
           padding:18px 20px 14px; display:flex; flex-direction:column; }
.fc-card > .fc-canvas, .fc-card > .fc-empty { margin-top:auto; }
.fc-card h3 { font-size:13.5px; font-weight:600; }
.fc-desc { font-size:11.5px; color:var(--text-2); margin:4px 0 14px; line-height:1.5; }
.fc-ref  { color:var(--text-3); font-family:var(--mono); font-size:10px; white-space:nowrap;
           border:1px solid var(--border); border-radius:4px; padding:1px 6px; margin-left:4px; }
.fc-canvas { position:relative; width:100%; }

.fc-empty { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius);
            padding:36px; text-align:center; color:var(--text-3); font-size:13px; }
.fc-empty.inner { padding:60px 20px; }

.fc-note { display:flex; gap:10px; align-items:flex-start; background:var(--navy-2); border:1px solid var(--border);
           border-radius:var(--radius); padding:14px 16px; font-size:11.5px; color:var(--text-2); line-height:1.65; }

.fc-tblwrap { overflow-x:auto; max-height:70vh; border:1px solid var(--border); border-radius:8px; }
.fc-tbl { border-collapse:separate; border-spacing:0; font-size:11px; width:max-content; min-width:100%; }
.fc-tbl th, .fc-tbl td { padding:6px 10px; text-align:right; white-space:nowrap;
                         font-variant-numeric:tabular-nums; border-bottom:1px solid var(--border); }
.fc-tbl th { position:sticky; top:0; background:var(--navy-3); color:var(--text-2); font-weight:600;
             font-size:10px; z-index:2; }
.fc-tbl th span { display:block; font-weight:400; color:var(--text-3); font-size:9px; }
.fc-tbl th.proy, .fc-tbl td.proy { background:rgba(148,163,184,0.05); }
/* Separador punteado: dónde termina lo real y empieza la proyección. */
.fc-tbl th.cut, .fc-tbl td.cut { border-left:1px dashed rgba(148,163,184,0.45); }
.fc-tbl th.l, .fc-tbl td.l { text-align:left; position:sticky; left:0; background:var(--navy-2); z-index:1; }
.fc-tbl th.l { z-index:3; background:var(--navy-3); }
.fc-tbl td.l { color:var(--text); font-variant-numeric:normal; }
.fc-tbl td { color:var(--text-2); }
.fc-tbl td.neg { color:#f07a7a; }
.fc-tbl td.pos { color:#4ccb8f; }
.fc-tbl td.zero { color:var(--text-3); opacity:.55; }
/* Período en curso (semana o mes de hoy) — el "amarillo" del Excel. */
.fc-tbl th.now { background:rgba(250,178,25,0.16); color:#fbd989;
                 border-bottom:2px solid rgba(250,178,25,0.7); }
.fc-tbl th.now span { color:rgba(251,217,137,0.75); }
.fc-tbl td.now { background:rgba(250,178,25,0.06); }
.fc-tbl .tot { font-weight:600; color:var(--text); border-left:1px solid var(--border-2); }
.fc-tbl .tot.neg { color:#f07a7a; }
.fc-tbl .tot.pos { color:#4ccb8f; }
/* Encabezados de sección (Ingresos / Egresos / Inversiones / Saldos) */
.fc-tbl tr.fc-sec td { background:var(--navy-3); color:var(--text); font-weight:700; font-size:10.5px;
                       text-transform:uppercase; letter-spacing:.5px; cursor:pointer; user-select:none;
                       border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }
.fc-tbl tr.fc-sec:hover td { background:var(--navy-4); }
.fc-tbl tr.fc-sec-ing td { color:#5fd3a0; border-bottom-color:rgba(29,158,117,0.45); }
.fc-tbl tr.fc-sec-egr td { color:#f2938f; border-bottom-color:rgba(224,75,74,0.45); }
.fc-chev { display:inline-block; margin-right:8px; color:var(--text-3); font-size:10px;
           transition:transform .15s; }
.fc-chev.coll { transform:rotate(-90deg); }
.fc-hide { display:none; }
/* Jerarquía: detalle indentado y sub-detalle (Capex / Alimento) con guía. */
.fc-tbl tr.fc-sub1 td.l { padding-left:26px; }
.fc-tbl tr.fc-sub2 td.l { padding-left:44px; color:var(--text-2); font-size:10.5px; }
.fc-tbl tr.fc-sub2 td.l::before { content:"└ "; color:var(--text-3); }
.fc-tbl tr.fc-sub2 td { font-size:10.5px; }
/* Filas de total de bloque, teñidas según su tono (verde ingresos, rojo
   egresos, azul neutro). La 1ª columna es sticky: su fondo debe ser OPACO
   (gradiente sobre color sólido) o el contenido se ve a través al hacer
   scroll horizontal. */
.fc-tbl tr.fc-total td { background:rgba(57,135,229,0.07); color:var(--text); font-weight:700;
                         border-top:1px solid var(--border-2); }
.fc-tbl tr.fc-total td.l { background:linear-gradient(rgba(57,135,229,0.12),rgba(57,135,229,0.12)) var(--navy-2); }
.fc-tbl tr.fc-total td.neg { color:#f07a7a; }
.fc-tbl tr.fc-total-ing td { background:rgba(29,158,117,0.10); }
.fc-tbl tr.fc-total-ing td.l { background:linear-gradient(rgba(29,158,117,0.15),rgba(29,158,117,0.15)) var(--navy-2); }
.fc-tbl tr.fc-total-ing td.pos, .fc-tbl tr.fc-total-ing td.tot.pos { color:#6adfa9; }
.fc-tbl tr.fc-total-egr td { background:rgba(224,75,74,0.09); }
.fc-tbl tr.fc-total-egr td.l { background:linear-gradient(rgba(224,75,74,0.14),rgba(224,75,74,0.14)) var(--navy-2); }
/* Fila de saldo destacada (el rosado del Excel). */
.fc-tbl tr.fc-saldo td { background:rgba(212,83,126,0.08); color:var(--text); font-weight:600; }
.fc-tbl tr.fc-saldo td.l { background:linear-gradient(rgba(212,83,126,0.13),rgba(212,83,126,0.13)) var(--navy-2); }
/* Banda final: TOTAL CAJA CONSOLIDADA (equivalente a la banda oscura del Excel) */
.fc-tbl tr.fc-grand td { background:#0b1322; color:#f1f5f9; font-weight:700; font-size:11.5px;
                         border-top:2px solid var(--border-2); }
.fc-tbl tr.fc-grand td.l { background:#0b1322; }
.fc-tbl tr.fc-grand td.neg { color:#f28b8b; }
/* Tabla de desvíos: pocas columnas, así que ocupa el ancho disponible. */
.fc-tbl-d { width:100%; min-width:520px; }
.fc-tbl-d tbody .tot-row td { font-weight:600; color:var(--text); background:rgba(255,255,255,0.025); }
.fc-badge { display:inline-block; font-size:9px; font-weight:600; letter-spacing:.3px;
            text-transform:uppercase; color:var(--text-3); border:1px solid var(--border-2);
            border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.fc-tbl tbody tr:not(.fc-sec):not(.fc-total):not(.fc-grand):not(.fc-saldo):hover td { background:rgba(255,255,255,0.03); }
.fc-tbl tbody tr:not(.fc-sec):not(.fc-total):not(.fc-grand):not(.fc-saldo):hover td.l { background:var(--navy-3); }

@media (max-width: 900px) {
  .fc-grid-2 { grid-template-columns:1fr; }
  .fc-actions { margin-left:0; }
}
