/* Flow-OS Design System
   Tipografía única: TT Interphases Pro
   (TypeType — commercial). Para producción, cargar los .woff2 con @font-face.
   Mantenemos un único stack en --serif / --sans / --mono para que TODO el
   producto use el mismo tipo. */

:root {
  --bg: #f6f4ee;
  --bg-card: #fbfaf6;
  --bg-elev: #ffffff;
  --ink: #0f0f0e;
  --ink-2: #2a2a28;
  --ink-3: #6b6b66;
  --ink-4: #a8a89f;
  --line: #e6e3da;
  --line-2: #d4d0c4;

  /* Semáforo */
  --red: #e1473d;
  --red-soft: #f4d4d1;
  --amber: #e8b53a;
  --amber-soft: #f5e6b8;
  --green: #2ea66a;
  --green-soft: #c8e8d4;
  --green-bright: #4fd693;

  /* Una sola familia: TT Interphases Pro.
     Si el navegador no la encuentra, cae a system-ui (mismas métricas neutras). */
  --serif: 'TT Interphases Pro', system-ui, sans-serif;
  --sans:  'TT Interphases Pro', system-ui, sans-serif;
  --mono:  'TT Interphases Pro', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); letter-spacing: -0.01em; }
.serif { font-family: var(--serif); }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }

/* Gauge tick visualisation */
.gauge-svg { display: block; }

/* Heatmap cells */
.heat-cell {
  border-radius: 3px;
  transition: transform 0.15s ease;
}
.heat-cell:hover { transform: scale(1.15); }

/* Subtle pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono);
  border: 1px solid var(--line);
  background: var(--bg-elev);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* Card baseline */
.fcard {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* Bar chart */
.bar { transition: opacity 0.15s; }

/* Subtle grid bg for canvas sections */
.grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  opacity: 0.4;
}

/* Marquee dashed */
.dashed-line {
  background-image: linear-gradient(90deg, var(--ink-4) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  height: 1px;
}

/* Hide AI lightbulb button in topnav (desktop only — mobile hides whole topnav) */
.topnav-ai-btn { display: flex !important; }
.topnav-mihai-btn img { border-radius: 11px; }

/* Hide mobile periodo block on desktop */
@media (min-width: 641px) { .mob-periodo-block { display: none !important; } }

/* HRV chart period change — fade + slide in */
.hrv-anim {
  animation: hrvFade 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hrvFade {
  0%   { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Mobile: shift dept delta arrow up 20px in mobile */
@media (max-width: 768px) {
  .dept-delta-span {
    transform: translateY(-20px) !important;
  }
}

/* Mobile: keep period filter pinned top-right; allow headline to wrap below it */
@media (max-width: 640px) {
  .hrv-card-head {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px;
  }
  .hrv-headline { white-space: nowrap !important; }
  .hrv-headline .mono { white-space: nowrap !important; }

  /* Department hero headline: reduce in mobile */
  .dept-hero-headline {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
  /* Note: dept-hero-card layout (flex order, button grid) is in Flow-OS-mobile.html */

  /* Recommendations page: reduce headline 50%, hide "Todas" filter */
  .recs-headline { font-size: 28px !important; }
  .recs-filter-all { display: none !important; }
}