/* ============================================================
   Sistema de diseño compartido — Portal de Paciente
   Tokens y componentes base comunes a los módulos (análisis,
   neumología…). El portal lo usa directamente; los módulos pueden
   migrar a él en el futuro (ahora tienen su propia copia).
   ============================================================ */
:root{
  --bg:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --ink:#16202e;
  --ink-soft:#4a5a6e;
  --ink-faint:#8a98ab;
  --line:#e2e8f1;
  --brand:#2f5fb3;          /* azul "portal" */
  --brand-d:#214a8f;
  --teal:#19b59c;
  --ok:#1fa971; --ok-bg:#e6f6ee;
  --warn:#d98a00; --warn-bg:#fdf2dc;
  --bad:#e0483b; --bad-bg:#fce8e6;
  --na:#8a98ab;
  /* acentos por especialidad */
  --esp-analisis:#c0392b;
  --esp-neumologia:#1f8fb3;
  --esp-alergologia:#7c4dbe;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,40,70,.05),0 6px 22px rgba(20,40,70,.07);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------------- Header ---------------- */
header.app{background:linear-gradient(120deg,var(--brand-d),var(--brand) 52%,var(--teal));color:#fff;padding:22px 28px 18px}
.app-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:14px}
.brand .logo{width:48px;height:48px;border-radius:13px;flex:none;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:25px;backdrop-filter:blur(4px)}
.brand h1{font-size:21px;margin:0;font-weight:700;letter-spacing:-.2px}
.brand p{margin:2px 0 0;font-size:13px;color:rgba(255,255,255,.82)}
.patient-card{text-align:right;font-size:13px;line-height:1.5;color:rgba(255,255,255,.92)}
.patient-card strong{font-size:15px;display:block;font-weight:600}
.patient-card .meta{color:rgba(255,255,255,.72);font-size:12px}

/* ---------------- Tabs ---------------- */
nav.tabs{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(20,40,70,.04)}
.tabs-inner{display:flex;gap:4px;max-width:1280px;margin:0 auto;padding:0 22px;overflow-x:auto}
.tab{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;color:var(--ink-faint);padding:14px 16px;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s}
.tab:hover{color:var(--ink-soft)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------------- Layout ---------------- */
main{max-width:1280px;margin:0 auto;padding:24px 22px 70px}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.section-title{display:flex;align-items:baseline;gap:10px;margin:22px 0 14px;flex-wrap:wrap}
.section-title:first-child{margin-top:4px}
.section-title h2{font-size:18px;margin:0;font-weight:700;letter-spacing:-.2px}
.section-title span{font-size:13px;color:var(--ink-faint)}

/* ---------------- KPIs ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:var(--surface);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.kpi .label{font-size:12.5px;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.kpi .val{font-size:30px;font-weight:700;margin-top:6px;line-height:1}
.kpi .sub{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.kpi.accent .val{color:var(--brand)}

/* ---------------- Card ---------------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.card h3{margin:0;padding:14px 16px;font-size:14px;font-weight:700;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .body{padding:14px 16px}

/* ---------------- Badges / dots ---------------- */
.badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;display:inline-block;white-space:nowrap}
.badge.consulta{background:#e7f1f6;color:#136881}
.badge.prueba,.badge.analitica{background:#eae7fb;color:#6a4fce}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)} .dot.na{background:var(--na);opacity:.5}
.tag{font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);padding:2px 9px;border-radius:20px}

/* ---------------- Legend / disclaimer ---------------- */
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);margin:6px 2px 0}
.legend i{margin-right:6px}
.disclaimer{margin-top:26px;font-size:12.5px;color:var(--ink-soft);background:var(--warn-bg);border:1px solid #f3dca0;border-radius:12px;padding:12px 15px;line-height:1.5}
.empty{color:var(--ink-faint);font-size:14px;padding:18px;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}