/* Cenincardio — sistema visual compartido.
   Paleta tomada de la marca: azul marino profundo, azul clínico para acciones
   y rojo cardiológico como acento (CTA "Agendar cita").
   Tokens heredados del sistema base: --teal = azul principal, --mint = azul muy claro,
   --coral = rojo de acento. */
:root{
  --bg:#F5F8FB; --bg-2:#E9EFF5; --card:#FFFFFF; --line:#DCE4ED; --line-2:#C6D2DF;
  --ink:#122231; --ink-2:#2C4053; --muted:#64778A;
  --teal:#1747C8; --teal-2:#0F359C; --mint:#E8EEFC; --leaf:#2E8A57; --leaf-soft:#E1F2E8;
  --coral:#D7262F; --coral-2:#B01C24; --coral-soft:#FBE8E9;
  --sun:#D9952C; --sun-soft:#FBF0DC; --lilac:#5B6FD6; --lilac-soft:#E9ECFB;
  --sky:#2F7FC1; --sky-soft:#E3F0FA;
  --navy:#0F2236;
  --ok:#2E8A57; --warn:#A8701D; --err:#C42A36;
  --glow-1:rgba(204,43,51,.16); --glow-2:rgba(28,83,148,.20);
  --shadow:0 1px 2px rgba(18,34,49,.06),0 10px 32px -14px rgba(20,63,115,.30);
  --r-l:22px; --r-m:14px; --r-s:10px;
  --f-display:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-hand:"Instrument Sans","Inter","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A1119; --bg-2:#101B26; --card:#111D29; --line:#1F2E3D; --line-2:#2C3E50;
  --ink:#E8EEF4; --ink-2:#C3CFDA; --muted:#8B9EB0;
  --teal:#86A8FF; --teal-2:#A9C1FF; --mint:#16263A; --leaf:#6FC594; --leaf-soft:#123024;
  --coral:#FF6A70; --coral-2:#FF8C90; --coral-soft:#3A1A1E;
  --sun:#F0C06A; --sun-soft:#352A18; --lilac:#9EABF5; --lilac-soft:#1D2344;
  --sky:#7DB9EA; --sky-soft:#13283B;
  --navy:#08131E;
  --ok:#6FC594; --warn:#F0C06A; --err:#FF8C90;
  --glow-1:rgba(255,90,100,.16); --glow-2:rgba(60,120,210,.26);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 36px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A1119; --bg-2:#101B26; --card:#111D29; --line:#1F2E3D; --line-2:#2C3E50;
  --ink:#E8EEF4; --ink-2:#C3CFDA; --muted:#8B9EB0;
  --teal:#86A8FF; --teal-2:#A9C1FF; --mint:#16263A; --leaf:#6FC594; --leaf-soft:#123024;
  --coral:#FF6A70; --coral-2:#FF8C90; --coral-soft:#3A1A1E;
  --sun:#F0C06A; --sun-soft:#352A18; --lilac:#9EABF5; --lilac-soft:#1D2344;
  --sky:#7DB9EA; --sky-soft:#13283B;
  --navy:#08131E;
  --ok:#6FC594; --warn:#F0C06A; --err:#FF8C90;
  --glow-1:rgba(255,90,100,.16); --glow-2:rgba(60,120,210,.26);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 36px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--teal)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.12;margin:0;letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.eyebrow{font:700 .74rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* Marca */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:38px;height:38px;flex:none}
.brand b{font:800 1.2rem/1 var(--f-display);letter-spacing:-.02em}
.brand b span{color:var(--coral)}
.brand small{display:block;font:600 .64rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* Botones */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;line-height:1.1;min-height:44px}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-2)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-2)}
:root[data-theme="dark"] .btn-teal,:root[data-theme="dark"] .btn-primary{color:#0A1119}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-teal,:root:not([data-theme="light"]) .btn-primary{color:#0A1119}}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal)}
.btn-wa{background:#1FA855;color:#fff}
.btn-wa:hover{background:#178A45}
.btn-sm{padding:8px 14px;min-height:36px;font-size:.88rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:active{transform:translateY(1px)}

/* Superficies */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--mint);color:var(--teal-2)}
.chip.coral{background:var(--coral-soft);color:var(--coral-2)}
.chip.leaf{background:var(--leaf-soft);color:var(--leaf)}
.chip.sun{background:var(--sun-soft);color:var(--warn)}
.chip.lilac{background:var(--lilac-soft);color:var(--lilac)}
.chip.sky{background:var(--sky-soft);color:var(--sky)}
.chip.gray{background:var(--bg-2);color:var(--muted)}

/* Formularios */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.82rem;font-weight:700;color:var(--ink-2)}
.input,.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line-2);background:var(--card);border-radius:var(--r-s);padding:11px 13px;min-height:46px;transition:border-color .15s}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:720px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grid2{grid-template-columns:1fr}}
.alert{padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;font-weight:600}
.alert.err{background:var(--coral-soft);color:var(--coral-2)}
.alert.ok{background:var(--leaf-soft);color:var(--ok)}
.alert.info{background:var(--sky-soft);color:var(--sky)}

/* Barra de app (acceso clínico) */
.appbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.appbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}
.appbar .who{display:flex;align-items:center;gap:10px;font-size:.9rem;min-width:0}
.appbar .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.app::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--card)}

/* KPIs */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi small{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi b{font:800 1.6rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.kpi b em{font-style:normal;font-size:.9rem;font-weight:600;color:var(--muted);margin-left:3px}
.kpi .delta{font-size:.82rem;font-weight:700}
.kpi .chip{align-self:flex-start}
.delta.down{color:var(--ok)}.delta.up{color:var(--coral-2)}.delta.flat{color:var(--muted)}

/* Tablas */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);background:var(--bg);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}

/* Gráfico */
.chart{width:100%;height:auto;display:block;max-width:760px;margin:0 auto}
.chart text{fill:var(--muted);font:600 11px var(--f-body)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .band{fill:var(--leaf);opacity:.08}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}

/* Diálogo */
.modal{position:fixed;inset:0;z-index:50;background:rgba(6,14,24,.55);display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal .box{background:var(--card);border-radius:var(--r-l);width:100%;max-width:660px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 32px);overflow-y:auto}
.modal .box header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.icon-btn{border:0;background:var(--bg-2);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}
.icon-btn svg{width:18px;height:18px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:700;font-size:.9rem;z-index:60;box-shadow:var(--shadow)}
.empty{padding:28px;text-align:center;color:var(--muted);border:1.5px dashed var(--line-2);border-radius:var(--r-m)}

.ital{font-family:var(--f-hand);font-style:italic;font-weight:500;letter-spacing:-.01em}
.theme-btn{border:0;background:var(--bg-2);color:var(--ink);width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;flex:none;transition:background .15s}
.theme-btn:hover{background:var(--mint);color:var(--teal)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:block}:root:not([data-theme="light"]) .theme-btn .moon{display:none}}
@media (max-width:480px){.appbar .brand > span:last-child{display:none}.appbar .wrap{gap:8px}.appbar .btn-sm{padding:8px 12px}}

/* Impresión de fichas: solo el contenido, con marca de Cenincardio */
.print-head,.print-foot{display:none}
@media print{
  :root{--bg:#fff;--card:#fff;--ink:#000;--ink-2:#222;--muted:#555;--line:#ccc;--line-2:#bbb}
  body{background:#fff;font-size:12px}
  .appbar,.no-print,.mainnav,.subnav,.modal,.toast,button,.btn{display:none!important}
  .print-head{display:flex!important;justify-content:space-between;align-items:center;border-bottom:2px solid #0F2236;padding-bottom:10px;margin-bottom:14px}
  .print-head img{height:46px;width:auto}
  .print-foot{display:block!important;margin-top:18px;border-top:1px solid #ccc;padding-top:8px;font-size:10px;color:#555;text-align:center}
  .card,.kpi,.tbl-wrap{break-inside:avoid;box-shadow:none}
  main{padding:0!important}
}

/* Logo oficial: versión a color en claro y blanca en oscuro o sobre fondos navy */
.brand .logo{height:48px;width:auto;display:block}
.brand .logo-d{display:none}
:root[data-theme="dark"] .brand .logo-l{display:none}:root[data-theme="dark"] .brand .logo-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-l{display:none}:root:not([data-theme="light"]) .brand .logo-d{display:block}}
.brand.on-dark .logo-l{display:none!important}.brand.on-dark .logo-d{display:block!important}
.brand .brand-tag{font:700 .66rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-left:1.5px solid var(--line-2);padding:4px 0 4px 10px}
.brand.on-dark .brand-tag{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.3)}
@media (max-width:560px){.brand .logo{height:32px}}
@media (max-width:420px){.appbar .brand .brand-tag{display:none}}
@media print{.brand .logo-l{display:block!important}.brand .logo-d{display:none!important}}