/* ==========================================================================
   Glucotypp — Portal Profesionales · Sistema de diseño
   Archivo compartido entre todas las pantallas del mockup
   ========================================================================== */

:root {
  /* Canvas & surfaces */
  --bg-canvas:#F8FAFC;
  --bg-surface:#FFFFFF;
  --bg-sunken:#F1F5F9;

  /* Foreground */
  --fg-primary:#0F172A;
  --fg-secondary:#475569;
  --fg-tertiary:#64748B;

  /* Borders */
  --border-subtle:#E2E8F0;
  --border-default:#CBD5E1;

  /* Layout */
  --sidebar-w:240px;
  --topbar-h:56px;

  /* Brand */
  --brand-50:#EEFBFC;  --brand-100:#D3F4F7; --brand-200:#AAEAEF;
  --brand-300:#74D9E3; --brand-400:#37BECE; --brand-500:#16A3B7;
  --brand-600:#0D839B; --brand-700:#0F687F; --brand-800:#135668;
  --brand-900:#144858; --brand-950:#07303D;

  /* Semantic clinical */
  --inrange:#10B981; --inrange-600:#059669; --inrange-700:#047857;
  --alert:#F59E0B;   --alert-600:#D97706;   --alert-700:#B45309;
  --outhi:#EF4444;   --outhi-600:#DC2626;   --outhi-700:#B91C1C;
  --outlo:#DB2777;   --outlo-600:#BE185D;
}

html, body { font-family:'Geist', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
body { background:var(--bg-canvas); color:var(--fg-primary); font-size:14px; line-height:1.5; }
.font-display { font-family:'Fraunces', Georgia, serif; font-weight:400; letter-spacing:-0.005em; font-variation-settings: "opsz" 96, "SOFT" 50; }
/* Numbers always render in sans (Geist) — Fraunces se reserva para titulares editoriales.
   Usar .num-display en cualquier número grande/medio (statcards, KPIs, contadores, hero counts). */
.num-display { font-family:'Geist', system-ui, sans-serif; font-weight:600; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; }
.tnum, .tabular-nums { font-variant-numeric: tabular-nums; }

/* ====== APP SHELL (desktop 1440) ====== */
.app-shell {
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height:100vh;
  background:var(--bg-sunken);
}
.app-shell > .sidebar {
  grid-area:sidebar;
  background:#07303D;
  color:#AAEAEF;
  display:flex;
  flex-direction:column;
  height:100vh;
  position:sticky;
  top:0;
}
.app-shell > .topbar {
  grid-area:topbar;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle);
  padding:0 24px;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:16px;
  position:sticky;
  top:0;
  z-index:30;
}
.app-shell > .main-canvas {
  grid-area:main;
  background:var(--bg-sunken);
  min-width:0;
}

/* ====== SIDEBAR ====== */
.app-shell .nav-btn {
  height:36px;
  padding:0 12px;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(211,244,247,0.7);
  font-size:13px;
  font-weight:500;
  transition:all 160ms;
  justify-content:flex-start;
}
.app-shell .nav-btn:hover { background:rgba(22,163,183,0.10); color:#fff; }
.app-shell .nav-btn.active {
  background:linear-gradient(90deg, rgba(22,163,183,0.22), rgba(22,163,183,0.08));
  color:#fff;
  position:relative;
}
.app-shell .nav-btn.active::before {
  content:'';
  position:absolute;
  left:-12px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:18px;
  background:#37BECE;
  border-radius:0 3px 3px 0;
}

/* ====== PATIENT HEADER ====== */
.patient-header {
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle);
  padding:20px 28px 0;
  position:sticky;
  top:var(--topbar-h);
  z-index:10;
}

/* ====== TABS ====== */
.tabs-row {
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--border-subtle);
  padding:0 28px;
  background:var(--bg-surface);
  position:sticky;
  top:calc(var(--topbar-h) + 140px);
  z-index:9;
  margin:0 -28px;
}
.tab {
  position:relative;
  padding:14px 16px;
  font-size:14px;
  font-weight:500;
  color:var(--fg-secondary);
  transition:color 160ms;
}
.tab:hover { color:var(--fg-primary); }
.tab.active { color:var(--fg-primary); }
.tab.active::after {
  content:'';
  position:absolute;
  left:16px;
  right:16px;
  bottom:-1px;
  height:2px;
  background:#0D839B;
  border-radius:2px 2px 0 0;
}
.tab-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  min-width:18px;
  padding:0 5px;
  font-size:10px;
  font-weight:500;
  background:#F1F5F9;
  color:#64748B;
  border-radius:9999px;
  margin-left:4px;
}
.tab.active .tab-count { background:#D3F4F7; color:#0F687F; }

/* ====== CONTENT ====== */
.content-area { padding:24px 28px 48px; }

/* ====== CARDS ====== */
.card {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.statcard {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  padding:20px 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  position:relative;
}
.statcard-dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:9999px;
  flex:none;
  margin-top:4px;
}

/* ====== CHIPS ====== */
.chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:24px;
  padding:0 10px;
  border-radius:9999px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
.chip-brand   { background:#D3F4F7; color:#0F687F; }
.chip-inrange { background:#D1FAE5; color:#047857; }
.chip-alert   { background:#FEF3C7; color:#B45309; }
.chip-outhi   { background:#FEE2E2; color:#B91C1C; }
.chip-outlo   { background:#FCE7F3; color:#BE185D; }
.chip-neutral { background:#F1F5F9; color:#334155; }

/* ====== BUTTONS ====== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:36px;
  padding:0 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  transition:all 160ms;
  border:1px solid transparent;
}
.btn-primary   { background:#0D839B; color:#fff; }
.btn-primary:hover { background:#0F687F; }
.btn-secondary { background:var(--bg-surface); color:var(--fg-primary); border-color:var(--border-default); }
.btn-secondary:hover { background:var(--bg-sunken); border-color:#94A3B8; }
.btn-ghost     { color:var(--fg-secondary); }
.btn-ghost:hover { background:var(--bg-sunken); color:var(--fg-primary); }
.btn-destructive-ghost { color:#B91C1C; }
.btn-destructive-ghost:hover { background:#FEE2E2; }
.btn-sm { height:28px; padding:0 10px; font-size:12px; }

/* ====== OVERLINE ====== */
.overline {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-tertiary);
}

/* ====== FOCUS ====== */
:focus-visible {
  outline:2px solid #16A3B7;
  outline-offset:2px;
  border-radius:6px;
}

/* ====== GLUCOSE BANDS ====== */
.glucose-band-lo { fill:#DB2777; fill-opacity:0.05; }
.glucose-band-in { fill:#10B981; fill-opacity:0.06; }
.glucose-band-hi { fill:#EF4444; fill-opacity:0.05; }

/* ====== TAILWIND SUPPORTERS (por si la CDN no alcanza algún token) ====== */
.bg-brand-600  { background-color:#0D839B; }
.text-brand-600 { color:#0D839B; }
.text-brand-700 { color:#0F687F; font-weight:600; }
.bg-brand-100  { background-color:#D3F4F7; }
.bg-brand-50   { background-color:#EEFBFC; }
.ring-brand-500 { --tw-ring-color:#16A3B7; }
kbd { font-family:'Geist Mono', monospace; }

/* ====== DARK MODE ====== */
.dark {
  --bg-canvas:#07090D; --bg-surface:#0E1219; --bg-sunken:#0A0E14;
  --fg-primary:#E6EAF2; --fg-secondary:#9CA6B8; --fg-tertiary:#6B7588;
  --border-subtle:#171C26; --border-default:#222834;
  background:var(--bg-canvas);
  color:var(--fg-primary);
}
.dark .card        { background:var(--bg-surface); border-color:var(--border-subtle); box-shadow:0 1px 3px rgba(0,0,0,0.4); }
.dark .statcard    { background:var(--bg-surface); border-color:var(--border-subtle); }
.dark .topbar      { background:var(--bg-surface); border-color:var(--border-subtle); }
.dark .patient-header { background:var(--bg-surface); border-color:var(--border-subtle); }
.dark .tabs-row    { background:var(--bg-surface); border-color:var(--border-subtle); }
.dark .chip-neutral{ background:#171C26; color:#9CA6B8; }
.dark .chip-brand  { background:rgba(22,163,183,0.15); color:#74D9E3; }
.dark .chip-inrange{ background:rgba(16,185,129,0.15); color:#34D399; }
.dark .chip-alert  { background:rgba(245,158,11,0.15); color:#FBBF24; }
.dark .chip-outhi  { background:rgba(239,68,68,0.15); color:#F87171; }
.dark .btn-secondary { background:var(--bg-sunken); border-color:var(--border-default); color:var(--fg-primary); }
.dark .btn-primary { background:#16A3B7; color:#07090D; }
.dark .btn-primary:hover { background:#37BECE; }
.dark .sidebar     { background:#04161C; border-right:1px solid #0A2630; }
.dark .tab         { color:#9CA6B8; }
.dark .tab.active  { color:#E6EAF2; }
.dark .tab.active::after { background:#37BECE; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .grid-3-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar { display:none; }
  .patient-header { padding:16px 16px 0; }
  .tabs-row { padding:0 16px; }
  .content-area { padding:16px; }
}

/* ====== SCROLLBAR ====== */
.scroll-slim::-webkit-scrollbar { height:8px; width:8px; }
.scroll-slim::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:4px; }
.scroll-slim::-webkit-scrollbar-track { background:transparent; }

/* ====== SHIMMER (para skeletons) ====== */
@keyframes shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
.skeleton { background:linear-gradient(90deg,#F1F5F9 0%,#E2E8F0 50%,#F1F5F9 100%); background-size:400px 100%; animation:shimmer 1.6s infinite linear; border-radius:6px; }