:root{
  --umbral:#0F2D5C; --turq:#12A594; --turq-btn:#0B7A6D; --turq-claro:#3FD0BE;
  --bruma:#E6F4F1; --papel:#F7F6F2; --grafito:#1F2933;
  --bs-primary:#0F2D5C; --bs-primary-rgb:15,45,92; --bs-body-bg:#F7F6F2; --bs-body-color:#1F2933;
  --bs-body-font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-border-radius:.5rem; --bs-border-radius-lg:1rem;
}
body{font-size:1.0625rem}
.skip{position:absolute;z-index:2000;background:#fff;padding:.5rem 1rem}
:focus-visible{outline:3px solid var(--turq-claro)!important;outline-offset:2px;box-shadow:0 0 0 5px rgba(15,45,92,.35)!important}
.btn{min-height:48px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-sm{min-height:40px}
.btn-umbral{background:var(--umbral);color:#fff;border-color:var(--umbral)}
.btn-umbral:hover{background:#0a2147;color:#fff}
.btn-turq{background:var(--turq-btn);color:#fff;border-color:var(--turq-btn)}
.btn-turq:hover{background:#08655a;color:#fff}
.btn-outline-umbral{border:1.5px solid var(--umbral);color:var(--umbral);background:transparent}
.btn-outline-umbral:hover{background:var(--bruma);color:var(--umbral)}
.form-control,.form-select{min-height:48px;border:1.5px solid #8aa0b0}
.form-label{font-weight:600}
.card{border:1px solid rgba(18,165,148,.18);border-radius:1rem;box-shadow:0 1px 3px rgba(15,45,92,.05)}
a{color:#0a5e9e}
/* demo banner */
.demo-bar{background:var(--umbral);color:#fff;font-size:.8125rem;padding:.35rem 1rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.demo-bar a,.demo-bar button{color:#fff}
.chip-demo{background:#FEF3C7;color:#7a3d00;border-radius:999px;padding:.1rem .6rem;font-weight:700;font-size:.75rem}
/* status chips: icon + text */
.st{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.2rem .7rem;font-weight:700;font-size:.8125rem;border:1px solid}
.st-waiting{background:#FEF3C7;color:#8a4300;border-color:#FDE68A}
.st-called{background:#E0F2FE;color:#035a87;border-color:#BAE6FD}
.st-attending{background:#D1FAE5;color:#036246;border-color:#A7F3D0}
.st-finished{background:#F1F5F9;color:#475569;border-color:#E2E8F0}
.st-absent{background:#FEE2E2;color:#9b1c1c;border-color:#FECACA}
.st-cancelled{background:#F1F5F9;color:#475569;border-color:#CBD5E1;text-decoration:line-through}
.st-ok{background:#D1FAE5;color:#036246;border-color:#A7F3D0}
.st-warn{background:#FEF3C7;color:#8a4300;border-color:#FDE68A}
.st-err{background:#FEE2E2;color:#9b1c1c;border-color:#FECACA}
.code{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.04em}
/* panel shell */
.shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 34px)}
.side{background:var(--umbral);color:#fff;padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.side a.nav-i{color:#dbe7f5;text-decoration:none;padding:.7rem .9rem;border-radius:.5rem;display:flex;gap:.7rem;align-items:center;min-height:48px;font-weight:600}
.side a.nav-i:hover{background:rgba(255,255,255,.1)}
.side a.nav-i.on{background:#fff;color:var(--umbral)}
.main{padding:1.5rem 2rem;min-width:0}
@media(max-width:991px){.shell{grid-template-columns:1fr}.side{flex-direction:row;overflow:auto;align-items:center}.side img{display:none}.main{padding:1rem}}
.room-card{border-left:5px solid var(--turq)}
.room-card .cur{font-size:2rem}
.tbl th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:#44525f}
.tbl td{vertical-align:middle}
.live-banner{background:var(--bruma);border:1px solid #bfe3dc;border-radius:.75rem;padding:.6rem 1rem}
.statusbar{display:flex;gap:.6rem;flex-wrap:wrap}
/* landing */
.hero{background:linear-gradient(180deg,#fff,var(--papel));}
.mock{border-radius:1rem;border:1px solid #cfd8e0;background:#fff;overflow:hidden;box-shadow:0 12px 32px -8px rgba(15,45,92,.18)}
.mock-tv{background:var(--umbral);color:#fff;aspect-ratio:16/9;display:grid;grid-template-columns:2fr 1fr}
.mock-phone{width:210px;border:8px solid var(--umbral);border-radius:28px;background:#fff;padding:.8rem;text-align:center}
/* TV */
body.tv{background:var(--umbral);color:#fff;overflow:hidden}
.tvwrap{height:100vh;width:100vw;display:grid;grid-template-rows:1fr auto;padding:2vh 2vw;gap:2vh;aspect-ratio:auto}
.tvgrid{display:grid;grid-template-columns:2.2fr 1fr;gap:2vw;min-height:0}
.tvplayer{background:#0a2147;border-radius:1.2vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid rgba(255,255,255,.15);padding:2vw}
.tvside{display:flex;flex-direction:column;gap:1.5vh;min-height:0}
.tvcall{background:#fff;color:var(--umbral);border-radius:1.2vw;padding:1.6vh 1.4vw;display:flex;justify-content:space-between;align-items:center;font-size:clamp(1.4rem,3.4vw,3.6rem);font-weight:800}
.tvcall small{font-size:.4em;font-weight:700;display:block;color:#33506f}
.tvcall.new{outline:.5vw solid var(--turq-claro);animation:pulse 1s ease-in-out 6}
.tvcall.stale{opacity:.45;filter:grayscale(1)}
@keyframes pulse{50%{transform:scale(1.03);background:#e3fbf7}}
@media(prefers-reduced-motion:reduce){.tvcall.new{animation:none}*{scroll-behavior:auto!important;transition:none!important}}
.tvbar{background:rgba(255,255,255,.08);border-radius:1vw;padding:1.4vh 2vw;font-size:clamp(1rem,2vw,2rem);display:flex;justify-content:space-between;gap:2vw;align-items:center}
.tvalert{background:#FEF3C7;color:#6b3500;border-radius:1vw;padding:1vh 1.5vw;font-weight:700;font-size:clamp(1rem,1.8vw,1.8rem)}
.tvqr{background:#fff;padding:6px;border-radius:8px;line-height:0}
/* patient */
body.pat{background:var(--papel)}
.phone-wrap{max-width:440px;margin:0 auto;padding:1rem}
.bigcode{font-size:5rem;line-height:1;color:var(--umbral)}
.pat-called{background:var(--umbral);color:#fff;border-radius:1rem;padding:1.5rem}
.pat-called .bigcode{color:var(--turq-claro)}
/* receipt print */
#receipt{display:none}
@media print{body *{visibility:hidden}#receipt,#receipt *{visibility:visible}#receipt{display:block;position:absolute;left:0;top:0;width:80mm;color:#000}}
.wa-prev{background:#DCFCE7;border:1px solid #86EFAC;border-radius:.75rem;padding:.6rem .9rem;color:#14532d}
.sim-tag{font-size:.7rem;background:#FEF3C7;color:#7a3d00;border-radius:4px;padding:0 .35rem;font-weight:700;vertical-align:middle}
.step{display:flex;gap:.6rem;align-items:center;padding:.5rem .7rem;border-radius:.5rem}
.step.on{background:var(--bruma);font-weight:700}
.step .n{width:28px;height:28px;border-radius:50%;background:#cbd5e1;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.step.on .n,.step.done .n{background:var(--turq-btn);color:#fff}
@media print{.no-print{display:none!important}}
/* modo conectado: barra distinta de la de demo para que nunca se confundan */
.demo-bar.conn{background:#064e3b}.chip-conn{background:#d1fae5;color:#064e3b;border-radius:999px;padding:.1rem .6rem;font-weight:700;font-size:.75rem}
.conn-error{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca;padding:.6rem 1rem;font-size:.9rem}
.tvyt{width:100%;height:100%;border:0;border-radius:1vw}
/* TV: videos propios. object-fit: contain conserva la proporción (barras negras si el video no es 16:9). */
.tvplayer.has-video{padding:0;background:#000;overflow:hidden;position:relative}
.tvvid{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.tvvidmsg{position:absolute;left:0;right:0;bottom:0;background:rgba(10,33,71,.92);color:#fff;font-size:clamp(.9rem,1.3vw,1.4rem);padding:1vh 1.5vw}
.tvsrc{font-size:clamp(.8rem,1.1vw,1.2rem);opacity:.85;white-space:nowrap}
.tvgrid{min-height:0}.tvplayer{min-height:0;min-width:0}
/* Avisos de la TV superpuestos: un llamado o "Reconectando" no desplaza ni redimensiona el video. */
#tvtop{position:fixed;top:2vh;left:2vw;right:2vw;z-index:20;display:flex;flex-direction:column;gap:1vh;pointer-events:none}
#tvtop:empty{display:none}
#tvtop .tvalert{box-shadow:0 .6vh 2vh rgba(0,0,0,.45)}
.tvplayer.has-video{aspect-ratio:16/9;align-self:center;width:100%;height:auto;max-height:100%}
#tvtop{right:35vw}   /* solo sobre la columna del video: la columna de turnos queda siempre visible */