:root{--bg:#f2f5f8;--card:#fff;--ink:#17212b;--muted:#6b7a89;--line:#dde4ea;--brand:#0b6e99;
--green:#1f9d55;--amber:#e08a00;--red:#d63a3a;--gray:#9aa7b3;--blue:#2b6cb0}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select{font:inherit}
button{cursor:pointer;border:0;border-radius:8px;padding:.5rem .8rem;background:var(--brand);color:#fff;font-weight:600}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost{background:#e6edf2;color:var(--ink)}
button.danger{background:var(--red)}
button.ok{background:var(--green)}
button.big{padding:1rem 1.4rem;font-size:1.25rem;border-radius:12px}
input,select{padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:100%}
header.bar{display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;background:var(--brand);color:#fff;flex-wrap:wrap}
header.bar h1{font-size:1.1rem;margin:0;flex:1}
header.bar button{background:rgba(255,255,255,.18)}
header.bar a{color:#fff;text-decoration:none;background:rgba(255,255,255,.18);padding:.45rem .8rem;border-radius:8px;font-weight:600}
.layout{display:grid;grid-template-columns:340px 1fr;gap:1rem;padding:1rem;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem}
.panel h2{margin:.1rem 0 .6rem;font-size:1rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.8rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem;text-align:center}
.stat b{display:block;font-size:1.5rem}.stat span{font-size:.75rem;color:var(--muted)}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem}
.card{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:.7rem;display:flex;flex-direction:column;gap:.45rem}
.card.available{border-color:var(--green)}
.card.notified{border-color:var(--amber);animation:pulse 1s infinite}
.card.notified.overdue{border-color:var(--red);animation:pulseRed .6s infinite}
.card.busy{border-color:var(--amber);background:#fff9ec}
.card.offline{opacity:.65}
@keyframes pulse{50%{background:#fff3d6}}
@keyframes pulseRed{50%{background:#ffd9d9}}
.who{display:flex;gap:.6rem;align-items:center}
.avatar{width:54px;height:54px;border-radius:50%;background:#cfe3ee;color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;object-fit:cover;flex:none}
.who b{display:block;line-height:1.15}
.who small{color:var(--muted)}
.chip{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;background:var(--gray)}
.chip.available{background:var(--green)}.chip.notified{background:var(--amber)}.chip.busy{background:var(--amber)}
.chip.overdue{background:var(--red)}
.row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content:space-between}
.actions{display:flex;gap:.4rem;flex-wrap:wrap}
.actions button{padding:.4rem .6rem;font-size:.85rem}
.timer{font-variant-numeric:tabular-nums;font-weight:700}
.q-item{border:1px solid var(--line);border-radius:10px;padding:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;gap:.3rem}
.q-item.urgent{border-color:var(--red);background:#fff1f1}
.q-num{font-size:1.3rem;font-weight:800}
.muted{color:var(--muted);font-size:.85rem}
.count{font-size:.8rem;color:var(--muted)}
.count b{color:var(--ink);font-size:1.05rem}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{border-bottom:1px solid var(--line);padding:.4rem .5rem;text-align:left}
th{background:#eef3f7}
.tabs{display:flex;gap:.4rem;padding:.8rem 1rem 0;flex-wrap:wrap}
.tabs button{background:#e6edf2;color:var(--ink)}.tabs button.on{background:var(--brand);color:#fff}
.wrap{padding:1rem}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;align-items:end;margin-bottom:1rem}
.form label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--muted)}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:#17212b;color:#fff;padding:.7rem 1.1rem;border-radius:10px;z-index:99;max-width:90vw}
.toast.err{background:var(--red)}
.login{max-width:360px;margin:12vh auto;background:var(--card);padding:1.5rem;border-radius:14px;border:1px solid var(--line);display:flex;flex-direction:column;gap:.8rem}
.login h1{margin:0;font-size:1.3rem;color:var(--brand)}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.modal .box{background:#fff;border-radius:12px;padding:1.2rem;max-width:420px;width:100%}
/* Medico */
.doc{max-width:480px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}
.hero{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:1.2rem;text-align:center}
.hero.available{border-color:var(--green)}.hero.busy{border-color:var(--amber);background:#fff9ec}
.hero .num{font-size:3rem;font-weight:800}
.alertfull{position:fixed;inset:0;background:#c62828;color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;gap:1rem;animation:flash 1s infinite}
@keyframes flash{50%{background:#ef5350}}
.alertfull h1{font-size:2rem;margin:0}.alertfull .num{font-size:4rem;font-weight:800}
.alertfull button{background:#fff;color:#c62828;font-size:1.6rem;padding:1.1rem 2.5rem;border-radius:16px}
/* TV */
.tv{padding:1.2rem;display:grid;grid-template-columns:420px 1fr;gap:1.2rem;min-height:100vh}
.tv .card{font-size:1.15rem}.tv .avatar{width:72px;height:72px}
.tv h2{font-size:1.5rem}.tv .q-num{font-size:2.4rem}