/* ============================================================
   FEDUCA · Tema "Cyan Feduca" (claro) — calcado de Presupuesto v2
   ------------------------------------------------------------
   Drop-in: redefine las MISMAS variables y clases que ya usa tu
   index.html. No cambia tu HTML. Apunta a tus selectores reales
   (.topbar, .kpi .val, tr.total, #grid, .field label, .estado…).

   Ya está enlazado en tu index.html (después del <style> base):
     <link rel="stylesheet" href="feduca-theme.css">
   Al ir después, gana la cascada y reescribe el look a v2.
   ============================================================ */

:root {
  /* --- Base neutra: off-white cálido + tinta navy --- */
  --bg:        #faf9f5;
  --card:      #ffffff;
  --ink:       #13233a;
  --ink2:      #5b6b7e;
  --muted:     #98a4b2;
  --line:      #ece9e2;

  /* --- Acento Cyan Feduca --- */
  --accent:      #0891b2;
  --accent-soft: #e6f6fa;

  /* --- Semánticos afinados al tema --- */
  --ok:   #0e9f6e;  --ok-soft:   #e3f6ee;
  --warn: #b5760f;  --warn-soft: #f9f0db;
  --crit: #d4453c;  --crit-soft: #fbecea;
  --inv:  #0e7490;  --inv-soft:  #e0f3f8;   /* capex → teal */

  /* --- Sombra en capas (sensación premium) --- */
  --shadow: 0 1px 2px rgba(20,33,58,.05), 0 6px 20px rgba(20,33,58,.05);

  /* tokens nuevos del tema */
  --cyan-bright: #22d3ee;
  --navy:        #0f2440;
}

/* ---- Tarjetas: radio más suave + sombra en capas ---- */
.card { border-radius: 16px; }

/* ---- KPIs: número grande en teal (la firma del estilo) ---- */
.kpi .val { color: var(--inv); letter-spacing: -.4px; }

/* ---- Topbar NAVY — la firma "v2 / salmonmind" ---- */
.topbar { background: var(--navy); border-bottom-color: rgba(255,255,255,.08); }
.topbar .field label { color: #7d93ad; }
.topbar select,
.topbar input { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); color: #eaf2fb; }
.topbar select:focus,
.topbar input:focus { border-color: var(--cyan-bright); box-shadow: 0 0 0 3px rgba(34,211,238,.25); }
.topbar .vdiv { background: rgba(255,255,255,.14); }
.topbar .iq { background: rgba(255,255,255,.16); color: #cfe0f0; }
.topbar button.ghost { background: rgba(255,255,255,.08); color: #cfe0f0; border-color: rgba(255,255,255,.16); }
.topbar button.ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
/* botón primario (Cargar/Crear, Aplicar) en cyan sólido sobre el navy */
.topbar button:not(.ghost) { background: var(--cyan-bright); color: #06283d; }
.topbar button:not(.ghost):hover { background: #67e3f5; filter: none; }
/* estado "Aprobado" legible sobre navy */
.topbar .estado { background: rgba(34,211,238,.18); color: #7ee3f5; }
.topbar .estado.APROBADO { background: rgba(46,204,134,.2); color: #6ee0a6; }
.topbar .salant-state.on { color: var(--cyan-bright); }
.topbar .switch input:checked + .slider { background: var(--cyan-bright); }

/* ---- Fila de TOTAL de la matriz en navy (no en negro) ---- */
#grid tr.total td { background: var(--navy); color: #fff; }
#cashflow tr.cftot td { background: var(--accent-soft); color: var(--inv); }

/* ---- Toast también en navy para combinar ---- */
#toast { background: var(--navy); }

/* ---- Foco accesible cyan en celdas editables ---- */
input.cell:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; }

/* ---- Delta "baja" ya venía cyan (#0891b2); lo alineamos al token ---- */
.deltadown { color: var(--accent); }

/* ---- Sidebar NAVY (combina con el topbar; chrome oscuro cohesivo) ---- */
.sidebar { background: var(--navy); border-right-color: rgba(255,255,255,.08); }
.sb-head { border-bottom-color: rgba(255,255,255,.10); }
.sb-brand { color: #eaf2fb; }
.sb-burger { color: #cfe0f0; }
.sb-burger:hover { background: rgba(255,255,255,.10); }
.sb-group { color: #708096; }
.sb-item { color: #b8c8da; }
.sb-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-item.active { background: rgba(34,211,238,.15); color: var(--cyan-bright); box-shadow: inset 3px 0 0 var(--cyan-bright); }
.powered { border-top-color: rgba(255,255,255,.08); color: #708096; }
.sb-foot { border-top-color: rgba(255,255,255,.08); }
.sb-foot .who .nm { color: #eaf2fb; }
.sb-foot .who .rl { color: #708096; }
.sb-foot .logout { color: #b8c8da; border-color: rgba(255,255,255,.14); }
.sb-foot .logout:hover { background: rgba(255,255,255,.10); color: #ff7a7a; }