@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* Estas variables son el "tema". En la Fase de temas, cada archivo en
   css/themes/*.css redefine este mismo set de variables.
   Rediseño (UI/UX v3): migra la paleta "dashboard SaaS" de antes al mismo
   sistema navy/cyan ya usado en index.html (landing) y pages/login.html --
   se mantienen los MISMOS nombres de variable (para no tocar cada archivo
   que ya las consume) pero los valores ahora salen de ese sistema, no se
   inventan. Ver el detalle de cada reasignación en el plan de esta fase.
   --paper es la única excepción deliberada: en la landing significa
   "superficie blanca pura", pero acá significa "fondo hundido/gris" (bg de
   inputs, hover de filas) -- ponerlo blanco puro haría esos estados
   invisibles contra las tarjetas blancas, así que usa un gris muy sutil ya
   aprobado en la landing (.browser-chrome) en vez del --paper de ahí. */
:root{
  --ink:#0E1B45;
  --paper:#F4F7FB;
  --paper-line:#E1E7F0;
  --ochre:#2EE2CE;
  --ochre-deep:#1C6F96;
  --teal:#0FA69C;
  --teal-deep:#1C6F96;
  --teal-soft:#E3FBF6;
  --coral:#C4544B;
  --coral-deep:#99423B;
  --blue:#1C6F96;
  --blue-soft:#DDEEF4;
  --green:#0C8E6B;
  --green-soft:#DFF4EC;
  --orange:#C98A3C;
  --orange-soft:#F8EAD4;
  --purple:#5B4FE0;
  --purple-soft:#EDEBFB;
  --muted:#4E5A78;
  --card-shadow: 0 1px 2px rgba(14,27,69,0.04), 0 8px 24px -12px rgba(14,27,69,0.18);

  --cyan:#2EE2CE;
  --danger:#C4544B;
  --font-display:'Bricolage Grotesque','Inter',sans-serif;
  --font-body:'Inter','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper);
  color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* Ícono de marca (assets/logo-icon.png). Lo usan el sidebar
   (components/sidebar.js, ver css/layout.css para el tamaño específico ahí),
   la columna de marketing de pages/login.html y pages/privacidad.html. */
.mark{ width:38px; height:38px; flex-shrink:0; object-fit:contain; border-radius:8px; display:block; }

.btn{ font-family:'Inter', sans-serif; font-size:13px; font-weight:600; padding:9px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-ochre{ background:var(--coral); color:#fff; }
.btn-ochre:hover{ background:var(--coral-deep); }
.btn-ochre:disabled{ opacity:0.6; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--paper); border-color:rgba(250,247,240,0.35); }
.btn-ghost:hover{ border-color:var(--paper); }
select.period{ background:transparent; color:var(--paper); border:1px solid rgba(250,247,240,0.35); border-radius:9px; padding:8px 10px; font-family:'Inter'; font-size:13px; }
.date-range{ display:flex; align-items:center; gap:8px; }
input.period{ background:transparent; color:var(--paper); border:1px solid rgba(250,247,240,0.35); border-radius:9px; padding:7px 8px; font-family:'Inter'; font-size:13px; color-scheme:dark; }
#fileInput{ display:none; }

main{ max-width:1180px; margin:0 auto; padding:32px; }
.hero{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--paper-line); }
.hero-figure .label{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.hero-figure .value{ font-size:56px; font-weight:700; line-height:1; margin-top:6px; }
.stamp{ display:inline-flex; align-items:center; gap:6px; border:1.5px dashed currentColor; border-radius:5px; padding:6px 12px; font-size:13px; font-weight:700; transform: rotate(-3deg); margin-top:14px; }
.stamp.up{ color:var(--teal); }
.stamp.down{ color:var(--coral); }
.stamp.neutral{ color:var(--muted); }
.hero-meta{ text-align:right; font-size:13px; color:var(--muted); max-width:280px; }

footer{ text-align:center; padding:26px 20px 40px; font-size:12px; color:var(--muted); }
footer b{ color:var(--ink); }
footer a{ color:var(--ink); font-weight:600; text-decoration:none; }
footer a:hover{ text-decoration:underline; }
.print-only{ display:none; }

@media (max-width: 820px){
  .hero-meta{ text-align:left; }
}
@media print{
  body{ background:var(--paper) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  header, .debug-panel, footer{ display:none !important; }
  .print-only{ display:block; padding:0 4px; margin-bottom:18px; }
  .print-only h1{ font-family:'Inter', sans-serif; font-weight:800; font-size:24px; margin:0 0 4px 0; color:var(--ink); }
  .print-only #printMeta{ font-size:12px; color:var(--muted); }
  main{ max-width:100%; padding:0 4px; }
  @page{ margin:14mm; }
}