:root{
  --paper:#f7f5f0;--surface:#fff;--surface-2:#f2efe8;--ink:#192826;--ink-soft:#516461;
  --line:#e2ddd2;--teal:#0f5e57;--teal-deep:#0a3f3a;--teal-soft:#e4efed;--gold:#b5862f;
  --gold-soft:#f6edd9;--danger:#a8323f;--danger-soft:#f6e3e4;--ok:#2f7d4f;--radius:14px;
  --shadow:0 1px 2px rgba(25,40,38,.05),0 8px 24px -12px rgba(25,40,38,.18);
  --shadow-lg:0 24px 60px -24px rgba(10,63,58,.45);
  --font:'Public Sans',-apple-system,system-ui,sans-serif;--display:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% -10%,rgba(15,94,87,.06),transparent 40%),radial-gradient(circle at 100% 0%,rgba(181,134,47,.05),transparent 36%);background-attachment:fixed}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:600}
a{color:var(--teal)}
.hidden{display:none!important}
code{background:var(--surface-2);padding:2px 7px;border-radius:6px;font-size:13px}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-weight:600;color:var(--ink-soft);text-transform:uppercase;font-size:11px;letter-spacing:.02em}
.field input,.field select,.field textarea{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.field textarea{resize:vertical;min-height:80px;line-height:1.55}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
.row{display:flex;gap:16px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 18px;border-radius:10px;font-weight:600;font-size:13.5px;background:var(--teal);color:#fff;transition:transform .08s,filter .15s;box-shadow:0 2px 8px -2px rgba(15,94,87,.5)}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--teal);box-shadow:none;border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.gold{background:var(--gold);box-shadow:0 2px 8px -2px rgba(181,134,47,.5)}
.btn.danger{background:var(--danger);box-shadow:0 2px 8px -2px rgba(168,50,63,.45)}
.btn.sm{padding:7px 13px;font-size:12.5px}.btn.block{width:100%}
.btn svg{width:16px;height:16px}.btn:disabled{opacity:.6;cursor:wait}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--teal-soft);color:var(--teal-deep)}
.chip.gold{background:var(--gold-soft);color:var(--gold)}.chip.gray{background:var(--surface-2);color:var(--ink-soft)}


/* ============== LOGIN — Editorial "Carta clínica" ============== */
#login{
  position:relative; min-height:100dvh; min-height:100vh;
  display:grid; place-items:center; padding:32px 20px;
  background:#f3eee2;
  background-image:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(163,121,32,.08), transparent 60%),
    radial-gradient(ellipse 900px 500px at 50% 110%, rgba(12,74,71,.07), transparent 60%);
  color:#1a1916;
  overflow:hidden;
}
#login .grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;mix-blend-mode:multiply;z-index:0}
.lg-card{
  position:relative; z-index:1;
  width:100%; max-width:440px;
  padding:46px 44px 32px;
  background:linear-gradient(180deg,#fbf8ef,#f7f1e2);
  border:1px solid #e3d9c1;
  border-radius:6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 30px 60px -28px rgba(60,40,10,.35),
    0 60px 120px -40px rgba(60,40,10,.25);
  text-align:center;
  animation:lgIn .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.lg-mark{margin-bottom:22px;display:flex;flex-direction:column;align-items:center;gap:10px}
.lg-rx{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:64px; line-height:1; color:#a37920;
  letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  font-variation-settings:"opsz" 144;
}
.lg-eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#6e6357;
}
.lg-eyebrow span{color:#a37920;font-family:'JetBrains Mono',monospace;letter-spacing:.05em;font-weight:400;font-size:10px}

.lg-title{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:46px; line-height:1.02; letter-spacing:-.02em;
  margin:0 0 14px; color:#1a1916;
  font-variation-settings:"opsz" 144;
}
.lg-title em{font-style:italic;color:#0c4a47;font-weight:500}

.lg-sub{
  margin:0 auto 24px; max-width:320px;
  font-size:13.5px; line-height:1.55; color:#5e544a;
}

.lg-rule{
  width:54px; height:1px; background:#a37920; margin:0 auto 22px;
  position:relative;
}
.lg-rule::before,.lg-rule::after{
  content:""; position:absolute; top:50%; width:3px; height:3px; border-radius:50%;
  background:#a37920; transform:translateY(-50%);
}
.lg-rule::before{left:-9px}.lg-rule::after{right:-9px}

.lg-tabs{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:22px;
}
.lg-tabs button{
  background:none; border:none; padding:6px 2px; cursor:pointer;
  color:#9c8f7c; letter-spacing:inherit; font:inherit;
  border-bottom:1.5px solid transparent; transition:.18s;
}
.lg-tabs button.on{color:#0c4a47; border-color:#0c4a47}
.lg-tabs button:hover{color:#1a1916}
.lg-tabs-sep{color:#c9bca0}

.lg-err{
  margin:0 0 18px; padding:11px 14px;
  background:#fbe7e3; color:#8a2a25;
  border-left:3px solid #b54232; border-radius:4px;
  font-size:12.5px; font-weight:500; text-align:left;
  animation:errIn .25s ease;
}
@keyframes errIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.lg-form{display:flex;flex-direction:column;gap:18px;margin-bottom:22px;text-align:left}
.lg-field{display:flex;flex-direction:column;gap:6px}
.lg-field label{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#8a7d6c;
}
.lg-field input{
  background:transparent; border:none;
  border-bottom:1.5px solid #c9bca0;
  padding:6px 2px 8px; font-size:15px; color:#1a1916;
  font-family:inherit; outline:none;
  transition:border-color .18s;
}
.lg-field input:focus{border-color:#0c4a47}
.lg-field input:-webkit-autofill{
  -webkit-text-fill-color:#1a1916;
  transition:background-color 9999s ease-in-out 0s;
}

.lg-btn{
  width:100%; padding:13px 18px;
  background:#0c4a47; color:#f7f1e2;
  border:none; border-radius:4px;
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:.04em;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .08s, background .18s, box-shadow .18s;
  box-shadow:0 6px 20px -10px rgba(12,74,71,.7);
}
.lg-btn:hover{background:#0a3f3a;box-shadow:0 10px 28px -10px rgba(12,74,71,.7)}
.lg-btn:active{transform:translateY(1px)}
.lg-btn:disabled{opacity:.6;cursor:wait}
.lg-btn svg{width:16px;height:16px;transition:transform .2s}
.lg-btn:hover svg{transform:translateX(3px)}

.lg-hint{
  font-size:11.5px; color:#7a6e5e; line-height:1.6;
  padding:10px 14px; background:rgba(163,121,32,.08); border-radius:4px;
  border:1px dashed #d6c8a8;
}
.lg-hint code{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  background:#fff8e6; padding:2px 6px; border-radius:3px;
  color:#5a4316; border:1px solid #ead9b0;
}

.lg-foot{
  margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#9c8f7c;
}
.lg-foot .ekg{width:140px;height:14px;color:#0c4a47;opacity:.55}
.lg-foot span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

@media(max-width:480px){
  .lg-card{padding:36px 26px 24px}
  .lg-title{font-size:38px}
  .lg-rx{font-size:54px}
}

#app{display:flex;min-height:100vh}
.sidebar{width:248px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.sb-brand{padding:20px 20px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.sb-brand .mark{width:38px;height:38px;border-radius:10px;background:var(--teal);display:grid;place-items:center;flex-shrink:0}
.sb-brand .mark svg{width:21px;height:21px;color:#fff}
.sb-brand .t{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.1}
.sb-brand .s{font-size:11px;color:var(--ink-soft)}
.nav{padding:14px 12px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.nav .sect{font-size:10px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;padding:14px 12px 6px}
.nav button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;color:var(--ink-soft);font-weight:500;font-size:13.5px;text-align:left;transition:.13s}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button.on{background:var(--teal-soft);color:var(--teal-deep);font-weight:600}
.nav button svg{width:18px;height:18px;flex-shrink:0}
.sb-foot{padding:14px;border-top:1px solid var(--line)}
.sb-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sb-user .av{width:36px;height:36px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-weight:700;font-size:14px}
.sb-user .n{font-weight:600;font-size:13px}.sb-user .r{font-size:11px;color:var(--ink-soft)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{min-height:64px;display:flex;align-items:center;gap:16px;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(247,245,240,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}
.topbar h2{font-family:var(--display);font-size:20px;font-weight:600}
.topbar .crumb{font-size:12px;color:var(--ink-soft)}
.topbar .spacer{flex:1}
.menu-toggle{display:none;font-size:22px;color:var(--ink);width:38px;height:38px;border-radius:9px}
.content{padding:28px;max-width:1180px;width:100%;margin:0 auto}
.scrim{position:fixed;inset:0;background:rgba(10,30,28,.45);z-index:35}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:22px}
.card-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.card-head h3{font-size:15.5px;font-weight:600}.card-head .spacer{flex:1}
.section-title{font-family:var(--display);font-size:13px;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.section-title svg{width:16px;height:16px}

.split{display:grid;grid-template-columns:330px 1fr;gap:24px;align-items:start}
.search-box{position:relative;margin-bottom:14px}
.search-box input{padding-left:38px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding-top:10px;padding-bottom:10px;width:100%;outline:none}
.search-box input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-soft)}
.plist{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow-y:auto;padding-right:4px}
.plist-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;cursor:pointer;transition:.12s;border:1.5px solid transparent}
.plist-item:hover{background:var(--surface-2)}
.plist-item.on{background:var(--teal-soft);border-color:rgba(15,94,87,.2)}
.plist-item .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;color:#fff}
.plist-item .n{font-weight:600;font-size:13.5px;line-height:1.2}.plist-item .m{font-size:11.5px;color:var(--ink-soft)}

.empty{text-align:center;padding:48px 24px;color:var(--ink-soft)}
.empty svg{width:48px;height:48px;color:var(--line);margin-bottom:12px}
.empty h4{font-size:15px;color:var(--ink);margin-bottom:5px}
.empty p{font-size:13px;max-width:340px;margin:0 auto}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs button{padding:11px 15px;font-weight:600;font-size:13px;color:var(--ink-soft);border-bottom:2.5px solid transparent;white-space:nowrap;transition:.13s}
.tabs button:hover{color:var(--ink)}.tabs button.on{color:var(--teal);border-color:var(--teal)}

.entry{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:var(--surface)}
.entry .e-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.entry .e-date{font-size:12px;color:var(--ink-soft);font-weight:600}
.entry .e-body{font-size:13.5px;color:var(--ink-soft);white-space:pre-wrap;line-height:1.6}
.entry .e-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:13.5px}
.kv dt{color:var(--ink-soft);font-weight:600}.kv dd{margin:0;white-space:pre-wrap;word-break:break-word}

.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.img-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:pointer;transition:.13s}
.img-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.img-card img{width:100%;height:130px;object-fit:cover;display:block;background:var(--surface-2)}
.img-card .ph{width:100%;height:130px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-soft);font-size:12px}
.img-card .meta{padding:9px 11px}.img-card .meta .t{font-size:12.5px;font-weight:600;line-height:1.2}.img-card .meta .d{font-size:11px;color:var(--ink-soft);margin-top:2px}

.dropzone{border:2px dashed var(--line);border-radius:12px;padding:26px;text-align:center;color:var(--ink-soft);transition:.15s;cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--teal);background:var(--teal-soft)}
.dropzone svg{width:30px;height:30px;color:var(--teal);margin-bottom:8px}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700;padding:10px 12px;border-bottom:1.5px solid var(--line)}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line)}
table.tbl tr:hover td{background:var(--surface-2)}

.appt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--surface)}
.appt .when{text-align:center;flex-shrink:0;width:64px}
.appt .when .d{font-family:var(--display);font-size:22px;font-weight:600;color:var(--teal);line-height:1}
.appt .when .mo{font-size:11px;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.appt .when .ti{font-size:12px;color:var(--ink);margin-top:3px;font-weight:600}
.appt .info{flex:1;min-width:0}.appt .info .who{font-weight:600;font-size:14px}.appt .info .rs{font-size:12.5px;color:var(--ink-soft)}
.appt .acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}

.rx-meds{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.rx-med{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--surface-2);border-radius:9px}
.rx-med .num{width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.rx-med .mtxt{font-size:13px}.rx-med .mtxt b{font-size:13.5px}

.modal-bg{position:fixed;inset:0;background:rgba(10,30,28,.55);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal{background:var(--surface);border-radius:18px;width:100%;max-width:600px;box-shadow:var(--shadow-lg);animation:pop .2s ease}
.modal.wide{max-width:760px}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modal-head h3{font-family:var(--display);font-size:18px}
.modal-head .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft)}
.modal-head .x:hover{background:var(--surface-2)}
.modal-body{padding:24px;max-height:64vh;overflow-y:auto}
.modal-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(160%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:500;z-index:200;box-shadow:var(--shadow-lg);transition:transform .3s;display:flex;align-items:center;gap:10px;max-width:90vw}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast svg{width:18px;height:18px;flex-shrink:0}
#toast.ok svg{color:#7fe0a3}#toast.err svg{color:#ff9aa2}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.stat .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.stat .ic svg{width:20px;height:20px}
.stat .v{font-family:var(--display);font-size:28px;font-weight:600;line-height:1}
.stat .l{font-size:12.5px;color:var(--ink-soft);margin-top:3px}

.divider{height:1px;background:var(--line);margin:20px 0}
.note{font-size:12px;color:var(--ink-soft);background:var(--surface-2);padding:10px 13px;border-radius:9px;line-height:1.6;display:flex;gap:9px}
.note svg{width:16px;height:16px;flex-shrink:0;color:var(--gold);margin-top:1px}
.logo-prev{width:80px;height:80px;border-radius:12px;border:1.5px dashed var(--line);display:grid;place-items:center;overflow:hidden;background:var(--surface-2);flex-shrink:0}
.logo-prev img{width:100%;height:100%;object-fit:contain}.logo-prev svg{width:28px;height:28px;color:var(--ink-soft)}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:880px){
  .login-card{grid-template-columns:1fr}.login-art{display:none}
  .split{grid-template-columns:1fr}.grid-2,.grid-3{grid-template-columns:1fr}
  .menu-toggle{display:grid;place-items:center}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .content{padding:18px}.topbar{padding:0 16px}
}

#print-area{display:none}
@media print{
  /* Reset agresivo: html/body sin márgenes ni alturas heredadas */
  html, body{
    margin:0 !important; padding:0 !important;
    background:#fff !important; height:auto !important; min-height:0 !important;
  }
  /* CLAVE: display:none (no visibility:hidden) elimina el espacio fantasma
     que provocaba la 2ª página en blanco al imprimir historia y récipe. */
  body > *:not(#print-area){ display:none !important; }
  #print-area{
    display:block !important; position:static !important;
    width:100% !important; margin:0 !important; padding:0 !important;
    font-family:'Public Sans',sans-serif; color:#111;
  }
  /* Margen físico ajustado (era 14mm) — 10mm es el mínimo cómodo que
     aún cabe en el "área imprimible" de la mayoría de impresoras. */
  @page{ margin:10mm; }
}
/* -----------------------------------------------------------------
 * Impresión de historia clínica — tipografía y espaciado compactos.
 *
 * Estas clases se comparten con: printHistory, printSingleEntry, el PDF
 * por WhatsApp de historia (waSendHistoryEntry) y la preview de Ajustes.
 * NO las usa la receta (que tiene su propio set .vz-*) ni las solicitudes
 * de documentos (.docreq-*), así que cambios acá no afectan esos flujos.
 *
 * Diseño: fuentes ~15-25% más chicas y márgenes ~60% más chicos que la
 * versión anterior, para que una historia clínica típica quepa en menos
 * hojas y la información se lea agrupada sin cortes visuales innecesarios.
 * ----------------------------------------------------------------- */
.doc-sheet{font-family:var(--font);color:#111;max-width:720px;margin:0 auto;padding:0}
.doc-header{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--teal);padding-bottom:6px;margin-bottom:4px}
.doc-header img{max-height:64px;max-width:130px;object-fit:contain}
.doc-header .h-name{font-family:var(--display);font-size:18px;font-weight:700;color:var(--teal-deep);line-height:1.15}
.doc-header .h-sub{font-size:10.5px;color:#444;line-height:1.4;margin-top:2px}
.doc-meta{display:flex;justify-content:space-between;font-size:10.5px;color:#333;padding:5px 0;border-bottom:1px solid #ddd;margin-bottom:4px}
.doc-title{font-family:var(--display);font-size:14px;font-weight:600;margin:8px 0 4px;color:var(--teal-deep)}
.doc-body{font-size:11px;line-height:1.4;color:#222}
.doc-foot{margin-top:20px;border-top:1px solid #ddd;padding-top:6px;font-size:9.5px;color:#666;display:flex;justify-content:space-between}
.doc-sign{text-align:center;margin-top:36px}
.doc-sign .line{border-top:1.5px solid #333;width:220px;margin:0 auto 4px}
.doc-sign .nm{font-weight:600;font-size:12px}.doc-sign .ti{font-size:10.5px;color:#555}
.rx-print-item{padding:7px 0;border-bottom:1px dashed #ccc}
.rx-print-item .mname{font-weight:700;font-size:13px}.rx-print-item .mdose{font-size:12px;color:#333;margin-top:2px}

/* ============== Mejoras solicitadas (Venezuela) ============== */

/* Stats clickables en Inicio */
button.stat.clickable{
  cursor:pointer; font-family:inherit; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
button.stat.clickable:hover{ border-color:var(--teal); transform:translateY(-2px); box-shadow:0 6px 18px -10px rgba(15,94,87,.4); }
.stat-arrow{ color:var(--ink-soft); font-weight:400; margin-left:4px; transition:transform .15s, color .15s; display:inline-block; }
button.stat.clickable:hover .stat-arrow{ color:var(--teal); transform:translateX(3px); }

/* Botón de cerrar sesión en la topbar (visible solo en móvil) */
.topbar-logout{
  display:none;
  width:42px; height:42px; border-radius:10px;
  align-items:center; justify-content:center; color:var(--danger);
  background:var(--surface-2); border:1px solid var(--line);
}
.topbar-logout svg{ width:20px; height:20px; }
.topbar-logout:active{ background:var(--danger-soft); }

/* Scrim del drawer */
#sidebar-scrim{ display:none; }

/* Mobile: sidebar como drawer + correcciones de alto y safe-area */
@media (max-width: 880px){
  .topbar-logout{ display:flex; }

  /* En modo PWA (standalone), la barra superior del SO ocupa
   * env(safe-area-inset-top) píxeles. Sin este padding, el botón
   * "cerrar sesión" y los crumbs quedan tapados detrás del notch/
   * barra de estado del teléfono. */
  .topbar{
    padding-top:env(safe-area-inset-top, 0px);
    min-height:calc(64px + env(safe-area-inset-top, 0px));
  }

  #sidebar-scrim{
    display:block; position:fixed; inset:0;
    background:rgba(10,30,28,.45); z-index:35;
    animation:fadeIn .2s ease;
  }
  #sidebar-scrim.hidden{ display:none; }
  @keyframes fadeIn{ from{opacity:0} to{opacity:1} }

  .sidebar{
    height:100vh; height:100dvh;    /* dvh evita que se corte por el chrome del navegador */
    z-index:45;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sb-foot{
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  /* Botón de cerrar sesión grande y cómodo al tacto */
  #btn-logout{
    min-height:48px;
    padding:12px 16px;
    font-size:14px;
  }
}

/* ===== Récipe venezolano — formato apaisado con perforación central =====
 *  Las reglas de layout están FUERA de @media print porque también las
 *  necesita html2canvas al generar el PDF para WhatsApp. La visibilidad
 *  en pantalla la controla el contenedor padre (#print-area = display:none
 *  fuera de impresión; #pdf-render-area = opacity:0 pero visible al DOM).
 */
.vz-sheet{
  display:grid;
  grid-template-columns: 1fr 14px 1fr;
  column-gap:0;
  font-size:11pt;
  line-height:1.45;
  page-break-after:avoid;
  page-break-inside:avoid;
}
.vz-half{
  padding: 5mm 7mm;
  display:flex; flex-direction:column;
  /* min-height fuerza que cada media hoja ocupe todo el alto de la
     página landscape carta (215.9mm - márgenes). Sin esto, flex:1 sobre
     .vz-meds no expande y la firma queda pegada a la última medicina.
     Con min-height, la firma se ubica al pie de la hoja. */
  min-height: 195mm;
}
.vz-perfo{
  border-left:1.2px dashed #888;
  border-right:1.2px dashed #888;
  background:repeating-linear-gradient(180deg,transparent 0 6px,#aaa 6px 7px);
  position:relative;
}
.vz-perfo span{
  position:absolute; left:50%; top:8mm;
  transform:translateX(-50%);
  background:#fff; color:#aaa; font-size:9pt; padding:2px 0;
}
.vz-head{
  display:flex; gap:8px; align-items:center;
  padding-bottom:3px; border-bottom:1px solid #0c4a47;
  margin-bottom:5px;
}
.vz-logo{ max-width:32px; max-height:32px; object-fit:contain; }
.vz-h-txt{ flex:1; min-width:0; }
.vz-h-clinic{ font-family:'Fraunces',serif; font-weight:700; font-size:10.5pt; color:#0c4a47; line-height:1.15; }
.vz-h-doc{ font-size:8.5pt; color:#222; font-weight:600; }
.vz-h-line{ font-size:7.5pt; color:#444; line-height:1.3; }

.vz-pinfo{
  font-size:8.5pt; padding:3px 6px; background:#f7f3e8;
  border:0.5px solid #d6c8a8; border-radius:3px;
  margin-bottom:5px;
}
.vz-pinfo > div{ padding:0.5px 0; }
.vz-lbl{ font-weight:700; color:#5a4316; }

.vz-rp{
  font-family:'Fraunces',serif; font-size:26pt; font-weight:500;
  color:#a37920; line-height:0.9; margin:3px 0 2px;
  text-shadow:0 1px 0 rgba(0,0,0,.05);
}
/* flex:1 + min-height:0 hace que .vz-meds tome todo el espacio vertical
   sobrante dentro de .vz-half, empujando la firma al pie de la hoja. */
.vz-meds{ flex:1; min-height:0; }
.vz-med{ display:flex; gap:8px; padding:3px 0; border-bottom:0.5px dotted #ccc; page-break-inside:avoid; }
.vz-med-n{ font-weight:700; color:#0c4a47; min-width:16px; }
.vz-med-body{ flex:1; }
.vz-med-dci{ font-weight:700; font-size:9.5pt; color:#111; }
.vz-med-pres{ font-weight:400; color:#444; font-size:8.5pt; }
.vz-med-dose{ font-size:8.5pt; color:#333; margin-top:1px; font-style:italic; }

.vz-ind-title{
  font-family:'Fraunces',serif; font-weight:600; font-size:12pt;
  color:#0c4a47; margin:3px 0 4px; padding-bottom:3px;
  border-bottom:1px solid #d6c8a8;
}
.vz-ind-body{ flex:1; font-size:9pt; line-height:1.5; color:#222; white-space:pre-wrap; }
.vz-ind-empty{ flex:1; color:#999; font-style:italic; font-size:9pt; }

.vz-sign{
  margin-top:4mm; text-align:center;
}
.vz-sign-img{
  max-height:21.6mm; max-width:106mm;
  object-fit:contain; margin:0 auto 2mm;
  display:block;
}
.vz-sign-line{ border-top:1.2px solid #333; width:60mm; margin:0 auto 3px; }
.vz-sign-name{ font-weight:700; font-size:9pt; }
.vz-sign-info{ font-size:7.5pt; color:#555; }
.vz-sign-stamp{ font-size:7pt; color:#999; margin-top:2px; letter-spacing:.1em; text-transform:uppercase; }

.vz-cut-note{
  text-align:center; font-size:6.5pt; color:#aaa;
  letter-spacing:.15em; text-transform:uppercase; margin-top:3px;
}

.vz-footer-note{
  text-align:center; font-size:7.5pt; color:#666; font-style:italic;
  margin-top:2px; padding:0 3mm; line-height:1.3;
}

/* ============== Login — Aviso "Consultorio no configurado" ============== */
.lg-warn{
  margin:0 0 18px;padding:16px 18px;
  background:#fff8e1;color:#5a4316;
  border-left:3px solid #d4a017;border-radius:4px;
  font-size:13px;text-align:left;line-height:1.5;
  animation:errIn .25s ease;
}
.lg-warn strong{
  display:block;font-size:14px;margin-bottom:6px;
  color:#5a4316;font-weight:700;
}
.lg-warn p{margin:0}
.lg-warn a{
  color:#0c4a47;font-weight:700;text-decoration:underline;
}
.lg-warn a:hover{color:#0a3f3a}

/* ============== Pie del login: Sopca + Configuración ============== */
.lg-foot-row{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;
}
.lg-copy{color:#9c8f7c}
.lg-settings{
  color:#0c4a47;text-decoration:none;font-weight:600;
}
.lg-settings:hover{text-decoration:underline;color:#0a3f3a}

/* ============================================================
 * TABLERO LED — Pantalla de sala de espera (estilo Neon Board)
 * Usa VT323 (cargada dinámicamente) + glow via text-shadow.
 * ============================================================ */
.led-screen{
  position:relative;
  background:#070707;
  background-image:
    radial-gradient(ellipse at center, #1a1a1a 0%, #050505 75%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  border:2px solid #0e0e0e;
  border-radius:8px;
  padding:40px 30px;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.85),
    inset 0 0 8px rgba(0,0,0,.6),
    0 8px 30px -8px rgba(0,0,0,.5);
  overflow:hidden;
  isolation:isolate;
}
/* Scanlines y vignette por encima del texto */
.led-screen::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(
    180deg, transparent 0 3px, rgba(0,0,0,.32) 3px 4px
  );
}
.led-screen::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
.led-frame{
  position:relative; z-index:1; text-align:center;
  font-family:'VT323','Courier New',monospace;
}
.led-line{
  line-height:1.05; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden;
}
.led-l1{ font-size:64px; }
.led-l2{ font-size:48px; opacity:.92; margin-top:14px; }

/* --------- Colores (glow neón con múltiples text-shadow) --------- */
.led-amber  .led-line{ color:#ffb928;
  text-shadow:0 0 4px #ffb928,0 0 12px rgba(255,177,43,.85),0 0 26px rgba(255,140,0,.6),0 0 50px rgba(255,140,0,.35); }
.led-red    .led-line{ color:#ff3838;
  text-shadow:0 0 4px #ff3838,0 0 12px rgba(255,56,56,.85),0 0 26px rgba(255,40,40,.6),0 0 50px rgba(255,0,0,.35); }
.led-green  .led-line{ color:#34ff8e;
  text-shadow:0 0 4px #34ff8e,0 0 12px rgba(52,255,142,.85),0 0 26px rgba(0,255,120,.55),0 0 50px rgba(0,220,90,.3); }
.led-cyan   .led-line{ color:#3eefff;
  text-shadow:0 0 4px #3eefff,0 0 12px rgba(62,239,255,.85),0 0 26px rgba(0,200,240,.6),0 0 50px rgba(0,160,220,.35); }
.led-magenta .led-line{ color:#ff5cd6;
  text-shadow:0 0 4px #ff5cd6,0 0 12px rgba(255,92,214,.85),0 0 26px rgba(255,60,200,.55),0 0 50px rgba(220,40,180,.3); }
.led-white  .led-line{ color:#f8faff;
  text-shadow:0 0 4px #f8faff,0 0 12px rgba(248,250,255,.8),0 0 24px rgba(180,200,255,.55),0 0 50px rgba(120,160,240,.3); }

/* --------- Efectos --------- */
.led-fx-blink .led-line{ animation:led-blink 1.2s steps(1,end) infinite; }
.led-fx-blink .led-l2 { animation-delay:.6s; }
@keyframes led-blink{
  0%, 55%   { opacity:1; }
  55.01%, 100% { opacity:.12; }
}
.led-fx-scroll .led-line{ display:flex; justify-content:flex-start; }
.led-fx-scroll .led-line span{
  display:inline-block; padding-left:100%;
  animation:led-scroll 14s linear infinite;
}
.led-fx-scroll .led-l2 span{ animation-duration:11s; }
@keyframes led-scroll{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-200%); }
}

/* --------- Modo pantalla completa --------- */
#led-fullscreen{
  position:fixed; inset:0; z-index:9999;
  background:#000; cursor:pointer;
  display:grid; place-items:center;
}
.led-screen.led-fs{
  width:100%; height:100%;
  border:none; border-radius:0;
  padding:0; display:grid; place-items:center;
}
.led-fs .led-frame{ width:100%; }
.led-fs .led-l1{ font-size:clamp(48px, 13vw, 240px); }
.led-fs .led-l2{ font-size:clamp(36px,  9vw, 170px); margin-top:max(20px,3vw); }
.led-exit-hint{
  position:absolute; bottom:18px; right:24px; z-index:5;
  color:rgba(255,255,255,.22); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  font-family:'Public Sans',sans-serif; font-weight:600;
}

/* ============================================================
 * DICTADO POR VOZ — botones y indicador en historia clínica
 * ============================================================ */
.dict-controls{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:auto; flex-wrap:wrap;
}
.dict-btn-start{
  background:var(--teal); color:#fff; border:none;
  font-weight:600; gap:6px;
}
.dict-btn-start:hover{ background:var(--teal-deep); }
.dict-mic{ font-size:14px; line-height:1; }
.dict-btn-stop{
  background:#fff3f1 !important; color:var(--danger) !important;
  border:1px solid var(--danger) !important; font-weight:700;
  animation:dictPulse 1.4s ease-in-out infinite;
}
@keyframes dictPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(168,50,63,.55); }
  50%    { box-shadow:0 0 0 6px rgba(168,50,63,0);   }
}
.dict-status{
  font-size:11.5px; color:var(--ink-soft); font-weight:500;
  letter-spacing:.02em; text-transform:none;
  display:inline-flex; align-items:center; gap:6px;
}
.dict-status .dict-rec{
  width:9px; height:9px; border-radius:50%;
  background:#e23d3d; box-shadow:0 0 0 0 rgba(226,61,61,.6);
  animation:dictRec 1.1s ease-out infinite;
}
@keyframes dictRec{
  0%   { box-shadow:0 0 0 0 rgba(226,61,61,.6); }
  100% { box-shadow:0 0 0 9px rgba(226,61,61,0); }
}
.dict-done{ color:var(--ok); font-weight:600; }
.dict-interim{
  margin-top:6px; min-height:18px;
  font-size:12px; color:var(--ink-soft); font-style:italic;
  letter-spacing:.01em; padding:0 2px;
}

/* ============================================================
 * ASISTENTE DE IA — botón, panel de resultados y bloques
 * ============================================================ */
.check-row{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:500; user-select:none; }
.check-row input{ width:18px; height:18px; accent-color:var(--teal); }

.ai-section{
  margin:4px 0 14px; padding:14px;
  background:linear-gradient(180deg,#f6f5ff,#eef0fb);
  border:1px solid #d8dcf2; border-radius:6px;
  display:flex; flex-direction:column; gap:8px;
}
.ai-btn{
  background:linear-gradient(135deg,#5b21b6,#2563eb) !important;
  color:#fff !important; border:none !important;
  font-weight:700 !important; letter-spacing:.02em;
  align-self:flex-start;
  box-shadow:0 4px 14px -4px rgba(91,33,182,.5);
}
.ai-btn:hover{ filter:brightness(1.08); }
.ai-btn:disabled{ opacity:.7; cursor:wait; }
.ai-hint{ font-size:11.5px; color:#5e544a; font-style:italic; }

.ai-result{
  margin-top:6px; background:#fff; border:1px solid #d8dcf2;
  border-radius:6px; padding:14px 16px; animation:errIn .25s ease;
}
.ai-result.hidden{ display:none; }
.ai-result-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:#5b21b6; margin-bottom:10px;
  padding-bottom:8px; border-bottom:1px solid #eef0fb;
}
.x-sm{
  width:22px;height:22px;border:none;background:#f3f0ff;color:#5b21b6;
  border-radius:4px;cursor:pointer;font-weight:700;line-height:1;
}
.x-sm:hover{ background:#e4dffa; }

.ai-block{ margin-bottom:14px; }
.ai-block:last-of-type{ margin-bottom:6px; }
.ai-label{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:#7a6e5e; margin-bottom:6px;
}
.ai-dx{
  font-size:16px; font-weight:700; color:var(--teal-deep);
  font-family:'Fraunces',serif; line-height:1.3;
}
.ai-dx-detail{
  font-size:13px; color:#3a3a3a; margin-top:4px; line-height:1.55;
}
.ai-recipe{
  margin:0; padding-left:22px; font-size:13.5px; line-height:1.6;
}
.ai-recipe li{ margin-bottom:6px; }
.ai-recipe li em{ color:#5e544a; }

.ai-alert{
  background:#fef4ee; border-left:3px solid #d4a017;
  padding:10px 12px; border-radius:4px;
}
.ai-disclaimer{
  margin-top:10px; padding-top:8px; border-top:1px dashed #d8dcf2;
  font-size:11px; color:#7a6e5e; font-style:italic;
}

/* Indicador de cancelación de ruido activa durante el dictado */
.dict-shield{
  display:inline-block;
  margin-left:4px;
  padding:1px 6px;
  font-size:10.5px; font-weight:700;
  letter-spacing:.04em;
  color:#0c4a47;
  background:rgba(12,74,71,.08);
  border:1px solid rgba(12,74,71,.18);
  border-radius:8px;
}

/* Botones de dictado inline (al lado de un campo input pequeño) */
.dict-controls-inline{
  display:inline-flex; align-items:center; gap:6px;
}
.dict-controls-inline .btn.sm{
  padding:4px 10px; font-size:12px;
}

/* ============================================================
 * Banners PWA — instalación y actualización
 * Aparecen fixed en bottom (mobile-first), responsive a safe-area-inset
 * ============================================================ */
.pwa-banner{
  position:fixed; left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:#fffdf6;
  border:1.5px solid #c9bca0;
  border-radius:12px;
  box-shadow:0 18px 40px -10px rgba(40,30,10,.30), 0 6px 14px -6px rgba(40,30,10,.15);
  padding:14px 16px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  z-index:50;
  max-width:600px; margin:0 auto;
  animation:pwaSlideUp .35s cubic-bezier(.2,.7,.2,1);
}
.pwa-banner.hidden{ display:none; }
@keyframes pwaSlideUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }

.pwa-banner-icon{
  font-size:26px; line-height:1;
  background:rgba(12,74,71,.08);
  width:44px; height:44px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pwa-banner-text{ min-width:0; }
.pwa-banner-title{ font-weight:700; font-size:13.5px; color:#1a1916; line-height:1.2; }
.pwa-banner-sub{ font-size:11.5px; color:#7a6e5e; margin-top:3px; line-height:1.35; }
.pwa-banner-actions{ display:flex; gap:6px; flex-shrink:0; align-items:center; }

/* Variante de actualización */
.pwa-banner-update{ border-color:#b9a87a; background:linear-gradient(180deg,#fffdf6,#f8f1e0); }
.pwa-banner-update .pwa-banner-icon{ background:rgba(91,33,182,.08); color:#5b21b6; }

@media (max-width:520px){
  .pwa-banner{ grid-template-columns:auto 1fr; padding:12px; gap:10px; }
  .pwa-banner-actions{ grid-column:1/-1; justify-content:flex-end; gap:8px; }
  .pwa-banner-title{ font-size:12.5px; }
  .pwa-banner-sub{ font-size:11px; }
}

/* Versión en el pie del sidebar */
.sb-version{
  margin-top:10px;
  font-size:10.5px;
  letter-spacing:.05em;
  color:#9c8f7c;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  border-top:1px dashed rgba(156,143,124,.3);
  padding-top:8px;
}

/* ============================================================
 * Botón WhatsApp — color verde característico
 * ============================================================ */
.wa-btn{ position:relative; }
.wa-btn .wa-ico{
  display:inline-block;
  margin-right:2px;
  filter:hue-rotate(75deg) saturate(1.2);
}
.wa-btn:hover{
  border-color:#25D366 !important;
  color:#128C7E !important;
  background:rgba(37, 211, 102, .06) !important;
}

/* ============================================================
 * Solicitud de documentos — checkboxes en grid y formato impreso
 * ============================================================ */
.docs-sec-title{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:14px; color:#0c4a47;
  margin:14px 0 6px;
  padding-bottom:3px; border-bottom:1px solid rgba(12,74,71,.18);
}
.docs-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:4px 12px;
  margin-bottom:6px;
}
.docs-check{
  display:flex; align-items:center; gap:8px;
  padding:5px 6px; border-radius:4px;
  cursor:pointer; font-size:13px;
  transition:background .12s;
}
.docs-check:hover{ background:rgba(12,74,71,.05); }
.docs-check input{ accent-color:#0c4a47; flex-shrink:0; }
.docs-check span{ line-height:1.3; }

/* Formato impreso de la solicitud */
.docreq-sheet{
  font-family:var(--font);
  color:#111;
  padding:4mm 6mm;
  max-width:175mm;        /* letter portrait usable ≈ 191mm, margen extra */
  margin:0 auto;          /* centrar horizontalmente en la página */
  box-sizing:border-box;
  overflow:hidden;        /* nada se escapa por los bordes */
}
.docreq-head{
  display:flex; gap:14px; align-items:center;
  border-bottom:2px solid #0c4a47;
  padding-bottom:10px; margin-bottom:12px;
}
.docreq-logo{ max-width:75px; max-height:75px; object-fit:contain; }
.docreq-h-txt{ flex:1; min-width:0; }
.docreq-h-clinic{ font-family:'Fraunces',serif; font-weight:700; font-size:16pt; color:#0c4a47; line-height:1.15; }
.docreq-h-doc{ font-size:11pt; color:#222; font-weight:600; margin-top:2px; }
.docreq-h-line{ font-size:9.5pt; color:#444; line-height:1.4; }

.docreq-title{
  font-family:'Fraunces',serif; font-weight:600; font-size:18pt;
  color:#0c4a47; text-align:center;
  margin:10px 0 12px; padding-bottom:6px;
  border-bottom:1px solid #d6c8a8;
}
.docreq-pinfo{
  font-size:10.5pt; padding:8px 12px;
  background:#f7f3e8; border:0.5px solid #d6c8a8;
  border-radius:4px; margin-bottom:14px;
}
.docreq-pinfo > div{ padding:2px 0; }

.docreq-items{
  column-count:2;
  column-gap:14px;
  column-rule:0.5px dashed #ccc;
  margin:8px 0;
}
/* Título de sección dentro del impreso — atraviesa ambas columnas y se
 * mantiene "pegado" a sus items para no quedar huérfano al pie de una columna.
 * Aparece cuando el template define secciones con título (p. ej. laboratorio
 * completo con "Hematología", "Química Sanguínea", etc.). */
.docreq-sec-title{
  column-span:all;
  -webkit-column-span:all;
  font-family:'Fraunces',serif; font-weight:600;
  font-size:10.5pt; color:#0c4a47;
  margin:8px 0 3px;
  padding:2px 0 3px;
  border-bottom:0.5px solid rgba(12,74,71,.28);
  break-after:avoid;
  page-break-after:avoid;
  break-inside:avoid;
}
.docreq-sec-title:first-child{ margin-top:0; }
.docreq-item{
  font-size:9.5pt;
  padding:2px 0;
  break-inside:avoid;
  display:flex; align-items:flex-start; gap:5px;
  word-break:break-word;
  overflow-wrap:break-word;
}
.docreq-item svg{
  width:11px; height:11px; flex-shrink:0;
  color:#0c4a47; margin-top:2px;
}

.docreq-notes{
  margin-top:12px; padding:8px 12px;
  background:#fff8e1; border-left:3px solid #d4a017;
  border-radius:3px; font-size:10pt; line-height:1.5;
}

/* ============================================================
 * Login: selector de rol (Médico / Paciente)
 * ============================================================ */
#role-select { animation: rs-in .35s ease-out; }
@keyframes rs-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.lg-role-prompt{
  font-family:'Fraunces',serif; font-size:18px; font-weight:500;
  color:var(--ink); margin:6px 0 14px; text-align:center;
}
.lg-role-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.lg-role-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:22px 10px;
  background:#fffdf6; border:1px solid #d6c8a8; border-radius:8px;
  font-family:var(--font); color:var(--ink); cursor:pointer;
  transition:all .15s ease;
}
.lg-role-btn:hover{
  border-color:var(--teal); background:#fff;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(12,74,71,.12);
}
.lg-role-btn svg{ width:38px; height:38px; color:var(--teal); stroke-width:1.4; margin-bottom:2px; }
.lg-role-label{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--teal-deep); }
.lg-role-sub{ font-size:11.5px; color:var(--ink-soft); letter-spacing:.02em; }

#doctor-login, #patient-login { animation: rs-in .35s ease-out; }

.lg-back{
  display:inline-flex; align-items:center; gap:4px;
  background:transparent; border:none;
  font-family:var(--font); font-size:12px; color:var(--ink-soft);
  padding:4px 0; margin-bottom:10px; cursor:pointer;
}
.lg-back:hover{ color:var(--teal); }
.lg-back svg{ width:14px; height:14px; }

/* Indicaciones generales del récipe (apéndice debajo de la lista de meds del lado derecho) */
.vz-ind-extra{
  margin-top:14px; padding:8px 10px;
  background:#fffdf6; border:0.5px solid #d6c8a8;
  border-radius:4px;
  font-size:10pt; line-height:1.5;
}

/* Líneas libres del template de Radiodiagnóstico */
.docs-custom-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:4px;
  background:rgba(12,74,71,.04);
  border:1px dashed rgba(12,74,71,.18);
}
.docs-custom-mark{
  color:#0c4a47; font-weight:700; font-size:14px;
  width:18px; text-align:center; opacity:.5;
}
.docs-custom-input{
  flex:1; border:none; background:transparent;
  font-family:inherit; font-size:13px; padding:4px 0;
  outline:none; border-bottom:1px solid transparent;
}
.docs-custom-input:focus{ border-bottom-color:#0c4a47; }
.docs-custom-input:not(:placeholder-shown) + * ,
.docs-custom-row:has(.docs-custom-input:not(:placeholder-shown)) .docs-custom-mark{
  opacity:1;
}

/* ============================================================
 * Encabezados en azul para Antecedentes familiares (datos del paciente)
 * y signos vitales en historia clínica
 * ============================================================ */
.patient-notes-header{
  color:#1e6bd6; font-weight:600;
}

/* Bloque de signos vitales en la vista en pantalla */
.vitals-display{
  margin:6px 0 10px;
  padding:8px 12px;
  background:rgba(30,107,214,.06);
  border-left:3px solid #1e6bd6;
  border-radius:3px;
  color:#1e6bd6;
  font-weight:500;
  font-size:13.5px;
  line-height:1.5;
}
.vitals-display strong{ color:#143f87; margin-right:2px; }

/* Bloque de signos vitales en PDF impreso (más compacto) */
.vitals-print{
  margin:8px 0;
  padding:6px 10px;
  background:#f0f6ff;
  border-left:2.5px solid #1e6bd6;
  border-radius:3px;
  color:#1e6bd6;
  font-weight:500;
  font-size:10.5pt;
  line-height:1.5;
}
.vitals-print strong{ color:#143f87; }

/* Inputs compactos de signos vitales en el modal de historia */
.vitals-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px 10px;
}
.vitals-grid .field{ margin:0; }
.vitals-grid .field label{ font-size:11px; color:#1e6bd6; font-weight:600; }
.vitals-grid .field input{ font-size:13px; padding:5px 8px; }
/* Placeholder muy claro — referencia visual sin distraer */
.vitals-grid .field input::placeholder{ color:rgba(0,0,0,0.18); }
.vitals-grid .field input::-webkit-input-placeholder{ color:rgba(0,0,0,0.18); }
.vitals-grid .field input::-moz-placeholder{ color:rgba(0,0,0,0.18); opacity:1; }
@media (max-width:680px){ .vitals-grid{ grid-template-columns:repeat(2, 1fr); } }

/* Título "Exploración Clínica" arriba del bloque de vitales en PDF */
.vitals-print-title{
  margin:4px 0 2px;
  font-weight:700;
  color:#1e6bd6;
  font-size:9.5pt;
  letter-spacing:.02em;
}

/* Bloque de antecedentes del paciente al inicio de la PRIMERA historia */
.hx-antec-block{
  margin:0 0 4px;
  padding:6px 10px;
  background:rgba(30,107,214,.05);
  border-left:3px solid #1e6bd6;
  border-radius:3px;
  font-size:9.5pt;
  line-height:1.35;
}
.hx-antec-title{
  font-weight:700;
  color:#143f87;
  font-size:10pt;
  margin-bottom:3px;
  letter-spacing:.02em;
}
.hx-antec-body{ white-space:pre-wrap; color:#222; }
/* Reutiliza .patient-notes-header para los encabezados en azul dentro del bloque */

/* ============================================================
 * Áreas con scroll interno — para contenido largo en ficha
 * del paciente y en entradas de historia clínica
 * ============================================================ */

/* Antecedentes familiares scrollable (tab Datos del paciente) */
.kv dd.notes-scroll{
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 12px;
  border: 0.5px solid var(--line, #e8ddc2);
  border-radius: 5px;
  background: rgba(255, 253, 246, 0.4);
  /* Scrollbar sutil */
  scrollbar-width: thin;
  scrollbar-color: rgba(12, 74, 71, 0.35) transparent;
}
.kv dd.notes-scroll::-webkit-scrollbar { width: 7px; }
.kv dd.notes-scroll::-webkit-scrollbar-track { background: transparent; }
.kv dd.notes-scroll::-webkit-scrollbar-thumb {
  background: rgba(12, 74, 71, 0.35);
  border-radius: 4px;
}
.kv dd.notes-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 74, 71, 0.55);
}

/* Cuerpo de entrada de historia clínica — scroll vertical si la
 * evolución/notas es muy larga; mantiene la tarjeta compacta.
 * Aplica al médico (tab Historia) y al paciente (portal). */
.entry .e-body{
  max-height: 280px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(12, 74, 71, 0.35) transparent;
}
.entry .e-body::-webkit-scrollbar { width: 7px; }
.entry .e-body::-webkit-scrollbar-track { background: transparent; }
.entry .e-body::-webkit-scrollbar-thumb {
  background: rgba(12, 74, 71, 0.35);
  border-radius: 4px;
}
.entry .e-body::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 74, 71, 0.55);
}

/* ============================================================
 * INFORME MÉDICO (historia clínica unificada, solo lectura)
 * — compacto: sin espacios ni interlineados extra
 * ============================================================ */
.report-view{ max-height:70vh; overflow-y:auto; }
.report-entry{ margin:0 0 2px 0; padding:0; line-height:1.3; }
.report-date{
  font-weight:700; color:#0c4a47; font-size:12px;
  border-bottom:1px solid rgba(12,74,71,.25);
  margin:6px 0 1px 0; padding:0;
}
.report-line{ margin:0; padding:0; font-size:12.5px; }
.report-entry .vitals-display, .report-entry .vitals-print{ margin:0; padding:1px 0; }
@media print {
  .report-entry{ page-break-inside:avoid; }
}

/* ============================================================
 * RESALTADO de palabras en Evolución y Diagnóstico
 * ============================================================ */
.hl-controls{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.hl-color{
  width:28px; height:24px; padding:0; border:1px solid var(--line,#d6c8a8);
  border-radius:4px; background:transparent; cursor:pointer;
}
mark.hl-mark{
  padding:0 2px; border-radius:2px; color:inherit;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

/* Cuadro de texto libre grande — Solicitud de Radiodiagnóstico */
.docs-custom-textarea{
  width:100%; min-height:130px; resize:vertical;
  font-family:inherit; font-size:13px; line-height:1.5;
  padding:10px 12px; border-radius:6px;
  background:rgba(12,74,71,.04);
  border:1px dashed rgba(12,74,71,.28);
  outline:none;
}
.docs-custom-textarea:focus{ border-color:#0c4a47; border-style:solid; }

/* ============================================================
 * AUTOGUARDADO TEMPORAL (borradores) — banner e indicador
 * ============================================================ */
.draft-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fff8e1; border:1px solid #e6c860; border-radius:8px;
  padding:10px 14px; margin:0 0 14px 0;
  font-size:13px; color:#5c4a12; line-height:1.4;
  animation:draftIn .25s ease;
}
.draft-banner .draft-actions{ display:inline-flex; gap:8px; margin-left:auto; }
@keyframes draftIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.draft-ind{
  margin-right:auto; font-size:11.5px; color:var(--ink-soft,#6e7873);
  align-self:center; opacity:.85; user-select:none;
}

/* ============================================================
 * DIRECCIÓN ACTIVA (consultorios con 2 sedes)
 * ------------------------------------------------------------
 * Indicador en el sidebar (visible solo si hay 2 direcciones y
 * es médico) + modal de selección al iniciar sesión.
 * ============================================================ */

/* Indicador en el sidebar — se inserta justo debajo de .sb-brand */
.addr-indicator{
  display:flex; align-items:center; gap:8px;
  width:calc(100% - 24px);
  margin:10px 12px 0;
  padding:9px 11px;
  background:var(--gold-soft);
  border:1px solid rgba(181,134,47,.35);
  border-radius:10px;
  color:var(--ink);
  font-family:inherit;
  font-size:12px;
  text-align:left;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .06s;
  line-height:1.25;
}
.addr-indicator:hover{
  background:#f2e5c3;
  border-color:rgba(181,134,47,.55);
}
.addr-indicator:active{ transform:translateY(1px); }
.addr-indicator .addr-ind-badge{
  flex-shrink:0;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px; font-weight:700;
  color:var(--gold);
  background:#fff;
  border:1px solid rgba(181,134,47,.45);
  border-radius:5px;
  padding:2px 6px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.addr-indicator .addr-ind-txt{
  flex:1; min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-weight:500;
}
.addr-indicator .addr-ind-hint{
  flex-shrink:0;
  font-size:12px;
  color:var(--ink-soft);
  opacity:.75;
}

/* Modal — cartas de selección de dirección */
.addr-pick-list{
  display:flex; flex-direction:column; gap:10px;
}
.addr-pick-card{
  display:flex; flex-direction:column; gap:6px;
  width:100%;
  padding:14px 16px;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:12px;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.addr-pick-card:hover{
  border-color:var(--teal);
  background:var(--teal-soft);
}
.addr-pick-card.on{
  border-color:var(--teal);
  background:var(--teal-soft);
  box-shadow:0 0 0 3px rgba(15,94,87,.15);
}
.addr-pick-card .addr-pick-hd{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px;
}
.addr-pick-card .addr-pick-num{
  font-family:var(--display);
  font-weight:600;
  color:var(--teal);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
}
.addr-pick-card .addr-pick-badge{
  font-size:10.5px;
  font-weight:600;
  color:var(--gold);
  background:var(--gold-soft);
  border:1px solid rgba(181,134,47,.4);
  border-radius:4px;
  padding:1px 6px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.addr-pick-card .addr-pick-check{
  margin-left:auto;
  color:var(--teal);
  font-weight:700;
  font-size:16px;
  line-height:1;
}
.addr-pick-card .addr-pick-txt{
  color:var(--ink);
  font-size:13.5px;
  line-height:1.45;
  word-wrap:break-word;
}

/* Formulario de ajustes — grupo de radios "Dirección predeterminada" */
.addr-default-field .addr-default-choice{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:8px 0 0;
}

/* Responsive: en móvil el indicador del sidebar respeta el ancho útil */
@media (max-width:820px){
  .addr-indicator{
    width:calc(100% - 20px);
    margin:8px 10px 0;
    font-size:11.5px;
  }
}