: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)}

/* ============================================================
 * Buscador de pacientes (typeahead) — usado en el modal de "Nueva cita"
 * y potencialmente en otros formularios que necesiten seleccionar un
 * paciente sin depender de un <select> gigante. Reemplaza el dropdown
 * nativo del navegador, que en móvil se vuelve ilegible cuando hay
 * decenas o cientos de pacientes.
 * ============================================================ */
.patient-picker{position:relative}
.patient-picker .patient-picker-input{
  /* Hereda estilos base de .field input, no hay que repetirlos.
     Le agregamos un ícono de lupa a la izquierda via background-image. */
  padding-left:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23516461' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat;
  background-position:12px center;
}
.patient-picker-results{
  position:absolute; left:0; right:0; top:calc(100% + 4px);
  background:var(--surface); border:1.5px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.18);
  /* max-height alto para que quepan ~7-8 filas antes de scrollear. El
   * contenido puede tener hasta 30 pacientes; el scroll interno los expone
   * sin empujar los botones del modal fuera de pantalla. */
  max-height:400px; overflow-y:auto;
  z-index:1200; /* por encima del modal (z-index de .modal-body ~ 1000) */
  padding:4px;
  -webkit-overflow-scrolling:touch; /* scroll suave en iOS */
}
.patient-picker-results.hidden{display:none}
.patient-picker-row{
  display:block; width:100%; text-align:left;
  padding:10px 12px; border-radius:6px;
  background:transparent; border:none; color:var(--ink);
  font-size:14px; cursor:pointer; transition:background .1s;
}
.patient-picker-row:hover,
.patient-picker-row:focus{background:var(--teal-soft); outline:none}
.patient-picker-row + .patient-picker-row{margin-top:1px}
.patient-picker-name{font-weight:600; line-height:1.3}
.patient-picker-meta{font-size:12px; color:var(--ink-soft); margin-top:2px}
.patient-picker-empty{
  padding:14px 12px; text-align:center;
  color:var(--ink-soft); font-size:13px; font-style:italic;
}
@media (max-width: 640px){
  .patient-picker-results{max-height:340px}
  .patient-picker-row{padding:12px}   /* target táctil más grande en móvil */
}
.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;
    /* Octubre 2026: cuerpo de impresión en IBM Plex Sans (humanista
     * institucional de IBM, diseñada para contextos técnicos/médicos).
     * Más "tinta en papel" que Public Sans a 7.5–9pt — presencia sólida
     * en récipe, informes, resumen IA, historia clínica y solicitudes.
     * Fallback Public Sans por si falla la carga de Google Fonts (misma
     * familia visual, mismo métricas aprox.).
     * NO afecta la UI en pantalla — el override vive solo dentro de
     * @media print. Fraunces (`.vz-h-doc`, `.doc-title`, `.docreq-h-doc`,
     * ℞, nombres de clínica) y la Forma 15-779 (Arial oficial, su propia
     * regla `.f15-sheet`) mantienen sus familias intactas por tener
     * declaración directa de font-family (gana a la herencia). */
    font-family:'IBM Plex Sans','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}
/* Agosto 2026: logo más grande (era 64×130) para que ocupe la altura total
 * del encabezado. object-fit:contain preserva el aspect ratio del PNG. */
.doc-header img{max-height:90px;max-width:130px;object-fit:contain}
/* Agosto 2026: `.h-name` ahora corresponde al PROFESIONAL + ESPECIALIDAD
 * (línea grande verde). Se agregó `.h-clinic` para el nombre del
 * CONSULTORIO en la línea siguiente (tamaño menor, color oscuro). `.h-sub`
 * queda para MPPS/dirección/contacto como antes. */
.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-clinic{font-size:11.5px;color:#222;font-weight:600;margin-top:1px;line-height:1.2}
.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)}
/* Agosto 2026 (v5): text-align:justify en .doc-body — el cuerpo de
 * Historia clínica, Resumen IA e Informe genérico se alinea a ambos
 * márgenes (izquierdo y derecho), estilo documento profesional. Aplica
 * en preview del modal, impresión, PDF, Word y WhatsApp. `hyphens:auto`
 * reduce los "ríos" de espacios en blanco típicos del justify en
 * párrafos angostos. */
.doc-body{
  font-size:11px;
  line-height:1.4;
  color:#222;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* Agosto 2026 (v5): preview del modal de Resumen IA — misma justificación
 * que en el print para WYSIWYG (usa font-size mayor 13.5px inline). */
.report-view-body{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.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;
}
/* Mitad "vacía" — placeholder cuando el médico eligió imprimir SOLO la
 * mitad opuesta (checkboxes de páginas en el modal de Recipe). Preserva
 * el ancho del grid (1fr) para que la mitad seleccionada mantenga su
 * posición original — Rx a la izquierda, Indicaciones a la derecha —
 * como en un talonario clásico de 2 mitades donde una queda en blanco. */
.vz-half--empty{
  /* min-height heredado de .vz-half asegura que la perforación central se
   * extienda toda la altura de la hoja aunque el lado esté vacío. Sin
   * contenido interno explícito. */
}
.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;
}
/* Agosto 2026: logo del récipe un poco más ancho + más alto (era 32×32)
 * para que ocupe la altura completa del encabezado (2 líneas grandes + 2
 * pequeñas). Se mantiene compacto porque el récipe va a ½ hoja landscape
 * (ancho útil ≈ 118 mm por mitad), así que un logo demasiado ancho comería
 * el espacio del nombre del profesional. */
.vz-logo{ max-width:60px; max-height:50px; object-fit:contain; }
.vz-h-txt{ flex:1; min-width:0; }
/* Agosto 2026: intercambiados los estilos de `.vz-h-clinic` y `.vz-h-doc`.
 * Ahora la línea GRANDE (Fraunces 10.5pt bold verde) es la del PROFESIONAL
 * + ESPECIALIDAD, y la línea SECUNDARIA (8.5pt oscura) es la del
 * CONSULTORIO. El orden de los <div> también se invirtió en el HTML (ver
 * `buildRxFullHTML` en app.js). */
.vz-h-doc{ font-family:'Fraunces',serif; font-weight:700; font-size:10.5pt; color:#0c4a47; line-height:1.15; }
.vz-h-clinic{ font-size:8.5pt; color:#222; font-weight:600; margin-top:1px; }
.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;
}

/* ============================================================
 * 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);
}
/* Variante "header/divisor" del formulario en pantalla — misma idea que
 * `.docreq-sec-title--header` en el impreso: la línea decorativa se ajusta
 * al ancho del texto cuando la sección es solo título (sin checkboxes). */
.docs-sec-title--header{ border-bottom:none; padding-bottom:0; }
.docs-sec-title--header > span{
  display:inline-block;
  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;
}
/* Agosto 2026: logo un poco más ancho + más alto para que ocupe la altura
 * completa del encabezado (2 líneas grandes + 2 pequeñas ≈ 90-100px).
 * `object-fit:contain` preserva la relación de aspecto del PNG original;
 * los max-* solo definen el "sobre" máximo dentro del cual encaja. */
.docreq-logo{ max-width:120px; max-height:100px; object-fit:contain; }
.docreq-h-txt{ flex:1; min-width:0; }
/* Agosto 2026: se intercambiaron los estilos de `.docreq-h-clinic` y
 * `.docreq-h-doc`. Ahora la línea GRANDE (Fraunces 16pt bold verde) es la
 * del PROFESIONAL + ESPECIALIDAD, y la línea SECUNDARIA (11pt oscura) es
 * la del CONSULTORIO. El orden de los <div> también se invirtió en el HTML
 * (ver `buildDocRequestHTML` en app.js). */
.docreq-h-doc{ font-family:'Fraunces',serif; font-weight:700; font-size:16pt; color:#0c4a47; line-height:1.15; }
.docreq-h-clinic{ 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; }

/* Variante "header/divisor" — sección con título pero sin ítems debajo
 * (p.ej. "Radiologia" agrupando visualmente AP, Lateral, Oblicuas).
 * La línea decorativa se ajusta al ancho del texto en lugar de atravesar
 * las dos columnas, para que se vea como un encabezado natural y no como
 * un divisor vacío ancho. El truco: quitar el border del <div> exterior
 * (que ocupa todo el ancho por `column-span:all`) y ponérselo al <span>
 * interior que envuelve el texto. */
.docreq-sec-title--header{ border-bottom:none; padding-bottom:0; }
.docreq-sec-title--header > span{
  display:inline-block;
  padding-bottom:3px;
  border-bottom:0.5px solid rgba(12,74,71,.28);
}
.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;
}
/* Bloque de texto libre en modo "flow" — se imprime como párrafo corrido,
 * respetando saltos de línea internos, SIN checkmark ni viñeta. Atraviesa
 * las dos columnas para que el texto no quede partido en columnas estrechas
 * (que se lee mal si el médico escribió párrafos largos). */
.docreq-flow{
  column-span:all;
  -webkit-column-span:all;
  font-size:10pt;
  line-height:1.45;
  margin:4px 0 6px;
  padding:2px 0;
  break-inside:avoid;
  word-break:break-word;
  overflow-wrap:break-word;
  /* v19 (agosto 2026): pre-wrap para respetar espacios/sangrías que el
   * médico haya escrito con el editor rico (Tab inserta 4 espacios).
   * Antes era 'normal' — colapsaba espacios múltiples. */
  white-space:pre-wrap;
  /* Agosto 2026 (v5): texto libre de solicitudes justificado a ambos
   * márgenes (igual que Historia, Informe y Resumen IA). Aplica cuando
   * el template tiene "Escriba libremente lo que quiera incluir…". */
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.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;
  /* Agosto 2026 (v5): notas también justificadas para consistencia
   * visual con el bloque de texto libre. */
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* ============================================================
 * 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; }
/* Agosto 2026 (v4): text-align:justify en el cuerpo del Informe Médico —
 * el texto queda alineado a ambos márgenes (izquierdo y derecho), estilo
 * documento profesional. Aplica en la preview del modal, impresión, PDF,
 * Word y WhatsApp (todos los flujos que muestran `.report-entry`/
 * `.report-line`). Se puso a nivel de `.report-entry` para que todos los
 * hijos hereden. `hyphens:auto` reduce los "ríos" de espacios en blanco
 * que a veces produce el justify en párrafos angostos. */
.report-entry{
  margin:0 0 2px 0; padding:0; line-height:1.3;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.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;
  /* La cabecera de cada entrada (fecha + tipo) NO se justifica —
   * es un título corto y quedaría feo si el navegador estirase los espacios. */
  text-align:left;
}
.report-line{
  margin:0; padding:0; font-size:12.5px;
  text-align:justify;
}
.report-entry .vitals-display, .report-entry .vitals-print{
  margin:0; padding:1px 0;
  /* Los signos vitales tampoco se justifican — es una línea de datos
   * con separadores "·", no un párrafo de texto corrido. */
  text-align:left;
}
@media print {
  /* v23 (agosto 2026) — CORRECCIÓN de espacio en blanco al imprimir PDF.
   *
   * ANTES:  .report-entry { page-break-inside: avoid }
   *         → si una consulta no cabía entera en la página actual, el
   *           navegador la empujaba a la siguiente página completa,
   *           dejando un gran hueco vertical al pie de la página previa.
   *
   * AHORA:  se permite que una consulta larga se divida entre páginas
   *         (flujo continuo, sin huecos). Además `.report-date` se ata
   *         con `page-break-after:avoid` para evitar el caso feo donde
   *         la fecha/tipo de la consulta queda huérfana al pie de una
   *         página y su contenido comienza en la siguiente.
   *
   * ALCANCE: `.report-entry` solo se genera en buildMedicalReportBodyRaw
   * (Informe Médico) — verificado por grep en app.js. Ningún otro flujo
   * (historia individual, récipe, documento) se ve afectado.
   *
   * SOLO AFECTA IMPRESIÓN. Word (.doc con CSS embebido propio) y
   * WhatsApp/PDF (html2canvas → captura pantalla, no dispara @media
   * print) mantienen su comportamiento anterior intacto. */
  .report-entry{
    page-break-inside: auto;
    break-inside: auto;
    /* Un mínimo de líneas al principio/final del bloque para tipografía
     * decente cuando la consulta se parte entre 2 páginas. */
    orphans: 2;
    widows: 2;
  }
  .report-entry .report-date{
    page-break-after: avoid;
    break-after: avoid;
  }
}

/* ============================================================
 * v22 (agosto 2026) — INFORME MÉDICO EDITABLE (pantalla completa)
 * ------------------------------------------------------------
 * El modal del Informe Médico ahora es un editor rich text en
 * pantalla casi completa. La clase `.modal.fullscreen` amplía
 * el modal a todo el viewport (respetando el padding del backdrop)
 * y usa layout flex-column para que el editor ocupe toda la altura
 * disponible entre el head (título) y el foot (botones).
 *
 * El editor en sí reutiliza las mismas clases `.docs-flow-toolbar`
 * y `.docs-tb-*` que el editor de "Documentos" — consistencia visual
 * total y CERO CSS duplicado para la toolbar. Solo agregamos aquí
 * las clases específicas del contenedor y del área editable
 * (`.report-flow-editor`, `.report-custom-editable`) que difieren
 * del editor de docs en que crecen para llenar el modal fullscreen.
 * ============================================================ */
.modal.fullscreen{
  max-width: none;
  width: calc(100vw - 40px);   /* 20px + 20px de padding lateral del .modal-bg */
  height: calc(100vh - 80px);  /* 40px + 40px de padding vertical del .modal-bg */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.fullscreen .modal-head{
  flex-shrink: 0;
}
.modal.fullscreen .modal-body{
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.modal.fullscreen .modal-foot{
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* Contenedor del editor rico del Informe Médico. Layout flex-column
 * para que el área editable (flex:1) llene todo el espacio disponible
 * entre la toolbar y el borde inferior del modal-body. */
.report-editor-body{
  /* la clase se pone en el .modal-body para engancharse por si
   * quisiéramos overrides puntuales — hoy no hay nada específico
   * más allá de lo que .modal.fullscreen .modal-body ya define. */
}
.report-flow-editor{
  border: 1px dashed rgba(12,74,71,.28);
  border-radius: 6px;
  background: rgba(12,74,71,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.report-flow-editor:focus-within{
  border-color: #0c4a47;
  border-style: solid;
}
.report-flow-editor .docs-flow-toolbar{
  flex-shrink: 0;
}
/* El wrap de escala (.print-scale-wrap[data-scale-key="report"]) va
 * POR FUERA del contenteditable — flex:1 para que ocupe todo el alto.
 * Así setScale/setBold siguen actualizando el zoom en vivo sin que el
 * médico pueda borrarlo accidentalmente al editar.
 *
 * v24 (agosto 2026): ahora funciona como el "escritorio" en un procesador
 * de texto — fondo neutro que resalta la hoja tipo Carta centrada dentro.
 * Scroll interno para navegar por el documento. Antes usaba flex-column
 * (estiraba al editable a todo el ancho, muy ancho para lectura cómoda). */
.report-flow-editor .print-scale-wrap[data-scale-key="report"]{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px;
  background: #e8e2d0;   /* tono cream oscurecido — contrasta con la hoja */
}
/* Área editable — HOJA TIPO CARTA (216 × 279 mm portrait) centrada.
 * v24 (agosto 2026): antes ocupaba todo el ancho del modal fullscreen
 * (líneas de texto de 1000+ px, incómodas de leer). Ahora se comporta
 * como una hoja letter en Word/Google Docs:
 *   - `max-width: 216mm` limita el ancho al de una hoja Carta
 *   - `margin: 0 auto` la centra horizontalmente sobre el "escritorio"
 *   - `padding: 20mm 22mm` da márgenes tipográficos reales (equivalente
 *     al setting "Normal" de Word: ~1 pulgada)
 *   - `box-shadow` + `border-radius` la hacen parecer papel elevado
 *   - `min-height: 60vh` evita que se vea vacía cuando el informe es corto
 * El scroll ahora lo hace el wrap (contenedor gris) — así el pergamino
 * completo se desplaza como una unidad, no solo su contenido interno. */
.report-custom-editable{
  max-width: 216mm;         /* Carta portrait: 8.5" = 215.9mm */
  min-height: 60vh;
  margin: 0 auto;
  padding: 20mm 22mm;
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: #111;
  background: #fffdf6;
  border-radius: 4px;
  box-shadow: 0 3px 14px rgba(0,0,0,.10),
              0 1px 3px rgba(0,0,0,.06);
  outline: none;
  /* justify + hyphens para consistencia con el output impreso — el
   * médico ve durante la edición lo mismo que saldrá en el PDF. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* NO overflow:auto aquí — el wrap gris de arriba maneja el scroll
   * de toda la hoja. Doble scroll causaría scrollbars anidadas feas. */
}
.report-custom-editable:focus{
  background: #ffffff;
}
/* En móvil el modal aprovecha aún más espacio (padding interno reducido).
 * El ancho sigue siendo `100vw - 40px` porque .modal-bg mantiene 20px de
 * padding lateral en todas las resoluciones — el modal debe respetarlo
 * para no desbordar horizontalmente. La hoja Carta se contrae al ancho
 * disponible (max-width lo permite) y los márgenes internos se reducen. */
@media (max-width: 640px){
  .modal.fullscreen .modal-body{
    padding: 8px 10px;
  }
  .report-flow-editor .print-scale-wrap[data-scale-key="report"]{
    padding: 10px 6px;
  }
  .report-custom-editable{
    padding: 12mm 10mm;
    min-height: 55vh;
    font-size: 14px;  /* algo mayor para lectura en pantalla táctil */
  }
}

/* ============================================================
 * 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{
  /* v20b (agosto 2026): min-height subido de 130px a 320px para dar
   * espacio cómodo al médico al añadir notas adicionales en modo items.
   * El resize:vertical permite estirarlo aún más manualmente. */
  width:100%; min-height:320px; resize:vertical;
  font-family:inherit; font-size:14px; line-height:1.55;
  padding:12px 14px; border-radius:6px;
  background:rgba(12,74,71,.04);
  border:1px dashed rgba(12,74,71,.28);
  outline:none;
  /* v14 (agosto 2026): texto justificado también en pantalla para que el
   * médico vea el mismo acabado que tendrá al imprimir (el CSS del PDF
   * `.docreq-flow` ya usa text-align:justify desde v5). Coherencia visual
   * entre editor y salida. */
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.docs-custom-textarea:focus{ border-color:#0c4a47; border-style:solid; }
@media (max-width: 640px){
  .docs-custom-textarea{
    min-height:260px;
    font-size:15px;
  }
}

/* ============================================================
 * EDITOR RICO PARA TEXTO LIBRE — v19 (agosto 2026)
 * ------------------------------------------------------------
 * Toolbar tipo Word + <div contenteditable>. Reemplaza al textarea
 * plano en modo flow para permitir Negrita, Cursiva, Subrayado,
 * Fuente, Tamaño y Color al médico. Preserva espacios y sangrías
 * (white-space:pre-wrap + Tab intercept en JS).
 * ============================================================ */
.docs-flow-editor{
  border:1px dashed rgba(12,74,71,.28);
  border-radius:6px;
  background:rgba(12,74,71,.04);
  overflow:hidden;
}
.docs-flow-editor:focus-within{
  border-color:#0c4a47;
  border-style:solid;
}
.docs-flow-toolbar{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:6px 8px;
  background:rgba(12,74,71,.07);
  border-bottom:1px solid rgba(12,74,71,.15);
}
.docs-tb-sep{
  width:1px; align-self:stretch; margin:2px 4px;
  background:rgba(12,74,71,.20);
}
.docs-tb-btn{
  min-width:30px; height:28px;
  padding:0 8px;
  border:1px solid rgba(12,74,71,.20);
  background:white; color:#111;
  font-size:13px; line-height:1;
  cursor:pointer; border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit;
  transition:background .12s, color .12s, border-color .12s;
}
.docs-tb-btn:hover{
  background:#0c4a47; color:white; border-color:#0c4a47;
}
.docs-tb-btn:active{ transform:translateY(1px); }
.docs-tb-btn--wide{ font-size:11px; padding:0 10px; }
.docs-tb-btn b, .docs-tb-btn i, .docs-tb-btn u{
  font-style:normal; display:inline-block; line-height:1;
}
.docs-tb-btn i{ font-style:italic; }
.docs-tb-btn u{ text-decoration:underline; }
.docs-tb-btn b{ font-weight:800; }

.docs-tb-select{
  height:28px; padding:0 6px;
  font-size:12px; font-family:inherit;
  border:1px solid rgba(12,74,71,.20); border-radius:4px;
  background:white; color:#111;
  cursor:pointer;
}
.docs-tb-select:hover{ border-color:#0c4a47; }

.docs-tb-color-wrap{
  display:inline-flex; align-items:center;
  border:1px solid rgba(12,74,71,.20); border-radius:4px;
  background:white; padding:0 4px 0 8px;
  cursor:pointer; height:28px; gap:4px;
}
.docs-tb-color-wrap:hover{ border-color:#0c4a47; }
.docs-tb-color-a{
  font-weight:800; font-size:14px; color:#111;
  line-height:1;
  border-bottom:3px solid #000;
  padding-bottom:1px;
}
.docs-tb-color{
  width:22px; height:20px; border:none; padding:0;
  cursor:pointer; background:none;
}
.docs-tb-color::-webkit-color-swatch-wrapper{ padding:0; }
.docs-tb-color::-webkit-color-swatch{ border:none; border-radius:2px; }

/* Área editable — sustituye al textarea en modo flow. Mantiene el mismo
 * look & feel (fondo sutil, padding, tipografía) pero acepta formato.
 *
 * v20b (agosto 2026): AGRANDADO significativamente para permitir textos
 * largos (informes de reposo, constancias médicas, indicaciones extensas).
 * Antes: min-height 160px + max-height 60vh — insuficiente en móvil y en
 * pantallas grandes. Ahora: min-height 400px + max-height 80vh en desktop,
 * min-height 320px en móvil. El scroll interno sigue existiendo si el
 * médico escribe MUCHÍSIMO, pero el 95% de textos caben sin scroll. */
/* v20c (agosto 2026): editor de texto libre MUCHO más alto para que el
 * médico escriba informes largos completos sin scroll interno.
 * Antes: min-height 400px. Ahora: min-height 600px (una pantalla laptop
 * completa) + max-height 90vh (aprovecha pantallas grandes). El médico
 * puede además redimensionar manualmente arrastrando el borde inferior.
 * En móvil se mantiene proporción cómoda (500px mínimo). */
.docs-custom-editable{
  min-height:600px;
  padding:14px 16px;
  font-family:inherit; font-size:14px; line-height:1.55;
  color:#111;
  outline:none;
  /* Preservar espacios múltiples y sangrías que teclee el médico.
   * También aplica al justify y a los hyphens para coherencia con
   * el textarea original (v14). */
  white-space:pre-wrap;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  /* Scroll interno SOLO si el médico escribe MUCHÍSIMO. 90vh aprovecha
   * toda la altura disponible de pantallas grandes. El médico puede
   * arrastrar el borde inferior para ampliar aún más si lo necesita. */
  max-height:90vh; overflow-y:auto;
  resize:vertical;
}
.docs-custom-editable:focus{
  background:rgba(12,74,71,.02);
}
/* Placeholder para contenteditable — se muestra solo cuando está vacío
 * y sin foco. Usa el atributo data-placeholder del HTML. */
.docs-custom-editable:empty:not(:focus)::before{
  content: attr(data-placeholder);
  color:rgba(0,0,0,.42);
  pointer-events:none;
  display:block;
  font-style:italic;
}
/* v20c: en móviles el mínimo se reduce pero sigue siendo generoso
 * (500px = mucho más de una pantalla vertical de móvil). */
@media (max-width: 640px){
  .docs-custom-editable{
    min-height:500px;
    max-height:85vh;
    font-size:15px;   /* mayor para lectura cómoda en pantalla táctil */
  }
}

/* v20d (agosto 2026): editor rico DENTRO del editor de Templates.
 * El textarea del template define el TEXTO PREDETERMINADO que verá el
 * médico al usar el template. Debe ser tan grande como el del médico —
 * si el médico va a redactar informes de reposo médico completos, el
 * espacio para configurar el default también tiene que caber cómoda-
 * mente. Overrides específicos porque el editor de template puede
 * estar dentro de contenedores con altura restringida. */
.tpl-sec-editable-flow{
  min-height:500px !important;
  max-height:80vh;
  font-size:14px;
}
@media (max-width: 640px){
  .tpl-sec-editable-flow{
    min-height:450px !important;
  }
}

/* v20f (agosto 2026): layout VERTICAL de la toolbar en el editor de
 * TEMPLATES únicamente. Cada dropdown ocupa su propia fila (100% ancho)
 * con texto grande y visible; los botones B/I/U/Color/×Formato quedan
 * en su propia fila entre los dropdowns. El editor del médico (v19)
 * mantiene el layout horizontal compacto — este layout es específico
 * del template porque ahí el médico configura defaults con calma. */
.tpl-flow-toolbar{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:10px 12px;
}
.tpl-flow-toolbar .tpl-tb-full{
  width:100%;
  height:38px;
  font-size:13px;
  font-weight:600;
  padding:0 12px;
  cursor:pointer;
}
.tpl-flow-toolbar .tpl-tb-btnrow{
  display:flex;
  flex-direction:row;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.tpl-flow-toolbar .tpl-tb-btnrow .docs-tb-btn{
  height:34px;
  min-width:40px;
  font-size:14px;
}
.tpl-flow-toolbar .tpl-tb-btnrow .docs-tb-color-wrap{
  height:34px;
}

/* ============================================================
 * 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;
  }
}

/* ============================================================
 * CONTROL DE ESCALA DE FUENTE PARA IMPRESIÓN — Agosto 2026
 * ------------------------------------------------------------
 * Widget compacto que aparece en el modal-foot de Informe y IA,
 * en la barra de acciones de Solicitudes, y en Ajustes.
 * Sincronizado globalmente por App.printFontScale — cambiar uno
 * actualiza todos los inputs `.print-scale-input` en el DOM y
 * cualquier `.print-scale-wrap` visible (previews de modales).
 * ------------------------------------------------------------ */
.print-scale-ctrl{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:var(--ink);
  padding:5px 10px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px;
  line-height:1;
  /* En contenedores flex (modal-foot, form action row) el control se
   * empuja al extremo izquierdo, mientras que los botones quedan a la
   * derecha por defecto — coherente con la jerarquía visual habitual. */
  margin-right:auto;
}
/* Agosto 2026 (v2): variante inline dentro de `.e-actions` (fila de
 * acciones de cada entrada de historia). NO usa margin-right:auto porque
 * ahí el control es solo el primer ítem de la fila y los botones deben
 * ir pegados a su lado — el `auto` crearía un hueco horrible. También se
 * compacta (padding y tamaño de fuente reducidos) para calzar con los
 * `.btn.sm` que vienen a continuación. */
.e-actions .print-scale-ctrl{
  margin-right:0;
  padding:3px 8px;
  font-size:11px;
}
.e-actions .print-scale-input{
  width:44px; padding:2px 3px; font-size:11.5px;
}
.print-scale-ctrl .pscale-lbl,
.print-scale-ctrl .pscale-pct{
  color:var(--ink-soft); font-weight:500; font-size:11px;
  user-select:none;
}
.print-scale-input{
  width:48px;
  border:1px solid var(--line); border-radius:4px;
  padding:3px 4px; text-align:center;
  font-family:inherit; font-size:12px; font-weight:700;
  color:var(--ink); background:#fff;
  -moz-appearance:textfield;   /* Firefox: oculta spinners cuando no se hover */
}
.print-scale-input::-webkit-outer-spin-button,
.print-scale-input::-webkit-inner-spin-button{
  -webkit-appearance:auto; margin:0;
}
.print-scale-input:focus{
  outline:none; border-color:var(--teal, #0c4a47);
  box-shadow:0 0 0 2px rgba(12,74,71,.12);
}

/* En impresión: el control NUNCA debe aparecer en el papel. Doble seguro
 * porque `#print-area` no debería contener este elemento, pero en caso de
 * que algún día una preview del modal se filtre al área de impresión, esto
 * lo oculta. También el wrapper de escala debe imprimirse sin borde ni
 * padding — `zoom` solo altera el tamaño, no la caja. */
@media print{
  .print-scale-ctrl{ display:none !important; }
  .print-bold-ctrl { display:none !important; }
}

/* ============================================================
 * CONTROL "NEGRITA" AL IMPRIMIR — v17 (agosto 2026)
 * ------------------------------------------------------------
 * Mismo patrón visual que .print-scale-ctrl para consistencia UX.
 * Sincronizado globalmente por App.bolds — cambiar uno actualiza
 * todos los checkboxes .print-bold-input en el DOM y aplica/quita
 * la clase .print-bold del wrapper .print-scale-wrap correspondiente.
 *
 * El bold se aplica en cualquier salida que use el wrapper:
 * pantalla (preview), impresión, html2canvas (PDF WhatsApp) y Word.
 * ------------------------------------------------------------ */
.print-bold-ctrl{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:var(--ink);
  padding:5px 10px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px;
  line-height:1; cursor:pointer;
  user-select:none;
}
.print-bold-ctrl:hover{ border-color:var(--teal, #0c4a47); }
.print-bold-ctrl input[type="checkbox"]{
  margin:0; cursor:pointer;
  accent-color:var(--teal, #0c4a47);
}
/* Variante compacta cuando el control está dentro de .e-actions
 * (fila de acciones de cada entry — historia clínica, récipes).
 * Igual al scale ctrl para consistencia visual. */
.e-actions .print-bold-ctrl{
  padding:3px 8px; font-size:11px;
}

/* Aplicación del BOLD: la clase .print-bold se pone en el mismo wrapper
 * .print-scale-wrap que ya envuelve el contenido (récipe, informe,
 * historia entry, docs). Fuerza font-weight:700 en TODO el subárbol,
 * incluyendo elementos que originalmente eran de peso normal (400) o
 * ligero (300). Los que ya eran bold quedan igual, y los <mark>/<i>
 * conservan su estilo semántico (solo se afecta el peso).
 *
 * !important es necesario porque muchos elementos internos declaran
 * su propio font-weight inline o vía clases (h1/h2/label/etc.). Sin
 * !important la clase padre no gana por especificidad. */
.print-bold,
.print-bold *{
  font-weight:700 !important;
}

/* ============================================================
 * FIRMA AL PIE DE PÁGINA EN SOLICITUDES — Agosto 2026 (v2)
 * ------------------------------------------------------------
 * `.docreq-sheet` se vuelve un contenedor flex column con un
 * `min-height` seguro para caber en una página letter portrait
 * (279mm total − 15mm×2 de márgenes de @page − 8mm de padding
 * interno = ~241mm útiles). Usamos 230mm para tener buffer de
 * seguridad contra variaciones entre navegadores.
 *
 * La firma (`.vz-sign` como hijo directo) usa `margin-top:auto`
 * para caer al pie de la página, y `break-inside:avoid` para
 * que si por longitud del contenido la firma no cabe entera en
 * la página actual, el navegador mueva TODO el bloque de firma
 * a la siguiente página en vez de partirlo por la mitad. Esto
 * corrige el bug donde "Firma y sello" se cortaba y aparecía
 * en la segunda página aunque el contenido fuera pequeño.
 * ------------------------------------------------------------ */
.docreq-sheet{
  display:flex;
  flex-direction:column;
  /* Agosto 2026 (v5): subido de 215mm a 240mm — el usuario pidió que el
   * pie de página quede lo más abajo posible sin pasar a la segunda hoja.
   * Cálculo: letter portrait 279mm − 2×15mm de márgen del @page = 249mm
   * imprimibles − 8mm de padding del sheet = ~241mm útiles. 240mm da 1mm
   * de buffer contra el redondeo sub-píxel de los navegadores. Cuando el
   * contenido es corto (típico en solicitudes tipo Reposo Médico con 2-3
   * líneas), el margin-top:auto de la firma llena la diferencia y empuja
   * firma + pie al fondo absoluto de la hoja. Cuando el contenido es
   * largo, el contenedor crece y pagina normalmente. */
  min-height:240mm;
}
.docreq-sheet > .vz-sign{
  margin-top:auto;
  /* Agosto 2026 (v4): reducido de 14mm a 10mm para dejar más aire al
   * pie letterhead que ahora viene inmediatamente debajo de la firma. */
  padding-top:10mm;
  /* Evita que el bloque de la firma se parta entre 2 páginas —
   * si no cabe entero en la actual, se mueve completo a la siguiente. */
  page-break-inside:avoid;
  break-inside:avoid;
}

/* ============================================================
 * LAYOUT LETTERHEAD PARA INFORME / RESUMEN IA — Agosto 2026 (v3)
 * ------------------------------------------------------------
 * Cuando el usuario imprime, exporta o comparte un Informe Médico
 * o un Resumen IA, el layout es "letterhead" profesional:
 *   • Encabezado compacto: logo + nombre + especialidad + consultorio + MPPS.
 *   • Cuerpo del documento (Paciente, título, contenido).
 *   • Pie de página con la línea + dirección/teléfono/email al fondo
 *     de la hoja, seguido del nombre del consultorio y "Impreso: fecha".
 *
 * `.doc-sheet--letterhead` se convierte en flex column con min-height
 * calibrado para letter portrait, y `margin-top:auto` empuja el pie al
 * fondo. Si el contenido es corto queda un espacio blanco arriba del
 * pie; si es largo, se pagina normalmente.
 *
 * Historia clínica (que también usa `.doc-sheet`) NO recibe esta clase
 * modificadora, así que sigue con su layout original.
 * ------------------------------------------------------------ */
.doc-sheet--letterhead{
  display:flex;
  flex-direction:column;
  /* Letter portrait 279mm − 2×15mm margen (default) − pequeño buffer.
   * 240mm da espacio suficiente para que el pie no se corte y el
   * navegador tenga margen para paginar contenido largo. */
  min-height:240mm;
}
/* Estilos base del pie letterhead — se aplican en cualquier contexto:
 * Informe Médico / Resumen IA (dentro de `.doc-sheet--letterhead`) y
 * también Solicitudes de documentos (dentro de `.docreq-sheet`).
 * Agosto 2026 (v4): extraído aquí para que sea reusable. */
.doc-foot-letterhead{
  border-top:1px solid #ddd;
  padding-top:6px;
  font-size:9.5px;
  color:#666;
  /* Evita que el pie se parta entre 2 hojas si el contenido es largo. */
  page-break-inside:avoid;
  break-inside:avoid;
}
/* Solo dentro del sheet letterhead usamos margin-top:auto para empujar
 * el pie al fondo. En `.docreq-sheet` (Documentos), la firma ya tiene
 * margin-top:auto — el pie letterhead viene naturalmente justo debajo
 * de la firma, al fondo también. */
.doc-sheet--letterhead .doc-foot-letterhead{
  margin-top:auto;
}
/* En Documentos, el pie letterhead viene DESPUÉS de la firma. Le damos
 * un pequeño margin-top para separarlo visualmente de la firma. */
.docreq-sheet > .doc-foot-letterhead{
  margin-top:10mm;
}
.doc-foot-letterhead .dfl-row1{
  display:flex;
  justify-content:space-between;
  font-weight:600;
  color:#333;
}
.doc-foot-letterhead .dfl-row2{
  font-size:9px;
  color:#888;
  margin-top:3px;
  text-align:center;
  line-height:1.35;
}

/* ============================================================
 * FIRMA DIGITAL + PIE — cluster que va al fondo de la hoja
 * ------------------------------------------------------------
 * Agosto 2026 (v6): cuando el usuario acepta anexar la firma digital
 * al imprimir Historia clínica o Informe Médico, el bloque de firma
 * (`.vz-sign`) y el pie letterhead (`.doc-foot-letterhead`) van
 * agrupados en `.print-bottom-cluster`. Este cluster usa `margin-top:
 * auto` para caer al fondo de `.doc-sheet--letterhead` (flex column).
 *
 * Sin firma, el pie letterhead solo (fuera del cluster) usa su propio
 * `margin-top:auto` — comportamiento anterior sin cambios.
 * ------------------------------------------------------------ */
.doc-sheet--letterhead .print-bottom-cluster{
  margin-top:auto;
  page-break-inside:avoid;
  break-inside:avoid;
}
/* Dentro del cluster, la firma pierde su margin-top propio (el cluster
 * lo maneja) y se le agrega un pequeño margin-bottom para separarla del
 * pie letterhead que viene a continuación. */
.print-bottom-cluster .vz-sign{
  margin-top:0;
  margin-bottom:6mm;
}
/* El pie dentro del cluster NO necesita margin-top:auto (el cluster ya
 * lo tiene). Como es block layout dentro del cluster, auto = 0 igual. */

/* ============================================================
 * FORMA 15-779 — Ficha Farmacéutica IVSS Alto Costo
 * ------------------------------------------------------------
 * Agosto 2026 (v8): estilos del módulo opcional FORMA 15-779.
 *
 * Diseño con TABLAS HTML anidadas — deliberadamente sin flex/grid
 * para que buildForma15779HTML() genere output idéntico en 4 flujos:
 *   1. Pantalla   → styles.css (este bloque)
 *   2. Impresión  → styles.css (via @media print heredado)
 *   3. Word .doc  → duplicado inline en app.js (exportForma15779AsWord)
 *   4. PDF WA     → styles.css (html2canvas captura la pantalla)
 *
 * NO usar variables CSS (--teal, etc.) aquí — el flujo Word ignora
 * `:root` y solo respeta color literal. Colores en HEX explícito.
 * ============================================================ */

.f15-sheet{
  font-family:'Arial','Segoe UI',sans-serif;
  color:#000; background:#fff;
  padding:0; margin:0 auto;
  max-width:190mm;    /* letter portrait usable */
  box-sizing:border-box;
  font-size:8.5pt; line-height:1.15;
}

/* ---- Cabecera oficial IVSS ---- */
/* v10 (agosto 2026): fuentes reducidas ~15-20% + padding compacto para
 * que la forma quepa completa en UNA hoja letter portrait. Antes se
 * derramaba a 2ª página por el bloque de productos + pie de farmacia. */
.f15-head-tbl{
  width:100%; border-collapse:collapse; margin-bottom:3pt;
}
.f15-head-tbl .f15-head-l{ vertical-align:middle; padding-right:6pt; width:62%; }
.f15-head-tbl .f15-head-r{ vertical-align:top; width:38%; }
.f15-head-logo{ width:38pt; vertical-align:middle; }
/* v10c (agosto 2026): logo cambiado de SVG genérico de 3 figuras al PNG
 * oficial IVSS embebido como data URL (definido en app.js constante
 * _forma15779LogoDataURL). Ventaja: cero dependencias externas + se ve
 * igual en todos los flujos (pantalla, print, PDF WhatsApp, Word). */
.f15-logo-img{ display:block; width:36px; height:36px; object-fit:contain; }
.f15-min-l1{ font-size:6.5pt; font-weight:700; color:#000; line-height:1.05; }
.f15-min-l2{ font-size:8pt;   font-weight:700; color:#000; line-height:1.05; margin-top:1pt; }
.f15-min-l3{ font-size:6.5pt; font-weight:700; color:#000; line-height:1.05; }
.f15-forma-code{
  font-size:7pt; font-weight:700; text-align:right; margin-bottom:1pt;
}
.f15-hd-box{
  width:100%; border-collapse:collapse; border:0.75pt solid #000;
}
.f15-hd-lbl{
  font-size:5.5pt; font-weight:700; padding:0.5pt 2pt;
  border-bottom:0.5pt solid #000; text-align:center; background:#f2f2f2;
}
.f15-date-cell{
  width:33%; height:12pt; text-align:center; font-size:9pt;
  border-right:0.5pt solid #000; padding:1pt;
}
.f15-date-cell:last-child{ border-right:none; }
.f15-date-sublbl{
  font-size:5pt; text-align:center; padding:0.5pt;
  border-top:0.5pt solid #999; border-right:0.5pt solid #999;
  background:#f8f8f8;
}
.f15-date-sublbl:last-child{ border-right:none; }
.f15-histnum-cell{ height:12pt; text-align:center; font-size:9pt; padding:1pt; }

/* ---- Título y subtítulo ---- */
.f15-title{
  font-size:10.5pt; font-weight:700; text-align:center;
  color:#0c4a47; margin:2pt 0 0;
}
.f15-subtitle{ font-size:6.5pt; text-align:center; margin:0; color:#000; }
.f15-italic{ font-style:italic; }

/* ---- Encabezado de cada PARTE (I-VI) ---- */
.f15-part{
  font-size:7.5pt; font-weight:700; text-align:center;
  color:#fff; background:#666;
  padding:1pt 0; margin:3pt 0 0;
}

/* ---- Tabla base ---- */
.f15-tbl{
  width:100%; border-collapse:collapse;
  border:0.75pt solid #000; table-layout:fixed;
}
.f15-tbl td, .f15-tbl th{
  border:0.5pt solid #000; vertical-align:top; padding:0;
}

/* ---- Celda "campo" (etiqueta arriba con número, valor debajo) ---- */
.f15-fld{ padding:0; }
.f15-fld-lbl{
  font-size:5.5pt; font-weight:700; padding:0.5pt 2pt;
  background:#eee; border-bottom:0.5pt solid #999;
  line-height:1.1;
}
.f15-fld-val{
  font-size:8.5pt; padding:1.5pt 3pt; min-height:10pt;
  word-wrap:break-word; overflow-wrap:break-word;
}
.f15-fld-tall .f15-fld-val, .f15-fld-val--tall{
  min-height:13mm; white-space:pre-wrap;
}
.f15-fld-shortarea .f15-fld-val, .f15-fld-val--shortarea{
  min-height:7mm; white-space:pre-wrap;
}
.f15-fld-empty{ padding:0; border:0.5pt solid #000; }

/* ---- Anchos porcentuales de columnas ---- */
.f15-w12{width:12%} .f15-w14{width:14%} .f15-w15{width:15%} .f15-w16{width:16%}
.f15-w17{width:17%} .f15-w18{width:18%} .f15-w20{width:20%} .f15-w22{width:22%}
.f15-w25{width:25%} .f15-w28{width:28%} .f15-w30{width:30%} .f15-w32{width:32%}
.f15-w35{width:35%} .f15-w38{width:38%} .f15-w40{width:40%} .f15-w100{width:100%}

/* ---- Sub-tabla Cédula V/E ---- */
.f15-ci-inner{ width:100%; border-collapse:collapse; margin:0; }
.f15-ci-inner td{
  border:0.5pt solid #999; text-align:center;
  font-size:7pt; padding:0.5pt;
}
.f15-ci-mark{ width:12pt; font-weight:700; font-size:6.5pt; line-height:1; }
.f15-ci-x{ font-weight:700; font-size:8pt; color:#000; }
.f15-ci-num{ font-size:9pt; padding:2pt; font-weight:700; }
.f15-ci-num-empty{ padding:1pt; }

/* ---- Sub-tabla Sexo F/M ---- */
.f15-sex-inner{ width:100%; border-collapse:collapse; margin:0; }
.f15-sex-inner td{ border:0.5pt solid #999; padding:1pt; text-align:center; }
.f15-sex-lbl{
  width:14pt; font-weight:700; font-size:7pt; background:#f2f2f2;
}
.f15-sex-mark{ font-size:9pt; font-weight:700; }

/* ---- Mini-tabla Día/Mes/Año ---- */
.f15-mini-date{ width:100%; border-collapse:collapse; margin:0; }
.f15-mini-date td{
  border:0.5pt solid #999; text-align:center;
  font-size:8.5pt; padding:1pt;
}

/* ---- Sub-tabla Tipo de Prescripción ---- */
.f15-tp-inner{ width:100%; border-collapse:collapse; margin:0; }
.f15-tp-inner td{ border:0.5pt solid #999; text-align:center; padding:0.5pt; }
.f15-tp-cell{ font-size:8.5pt; font-weight:700; height:11pt; }
.f15-tp-lbl{ font-size:5.5pt; font-weight:700; background:#f2f2f2; }

/* ---- Tabla de productos farmacéuticos ---- */
.f15-prods-tbl{ margin-top:0; }
.f15-prods-hd{
  background:#e0e0e0; font-size:6pt; font-weight:700;
  padding:1pt 2pt; text-align:center; border:0.5pt solid #000;
}
.f15-prod-cell{
  height:11pt; padding:1pt 2pt; font-size:8pt;
  border:0.5pt solid #999;
}

/* ---- Cuadro Firma y Sello (cuadro 34 de la Parte V) ---- */
.f15-firma-cell{ padding:0; }
.f15-firma-box{
  height:15mm; text-align:center; padding:1pt;
  vertical-align:middle; display:table-cell;
}
.f15-sign-img{
  max-height:13mm; max-width:50mm; object-fit:contain;
  margin:0 auto; display:block;
}

/* ---- Encabezado Farmacia (Parte VI) ---- */
.f15-farm-hd{
  background:#e0e0e0; font-size:6pt; font-weight:700;
  padding:1.5pt; text-align:center; border:0.5pt solid #000;
}

/* ---- Formulario opcional del tab (inputs f15-in) ---- */
.f15-in{
  background:#fff; border:1.5px solid var(--line); border-radius:8px;
  padding:8px 10px; outline:none; width:100%;
  transition:border-color .15s, box-shadow .15s;
  font-size:13px; color:var(--ink);
}
.f15-in:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);
}
.f15-prod-in{
  background:#fff; border:1.5px solid var(--line); border-radius:6px;
  padding:6px 9px; outline:none; font-size:12.5px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.f15-prod-in:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);
}

/* ---- Vista en pantalla: contenedor de scroll horizontal en móvil ---- */
@media (max-width:720px){
  .f15-sheet{ font-size:9pt; }
  .f15-prod-row{
    grid-template-columns:1fr 1fr !important;
  }
  .f15-prod-row button{ grid-column:span 2; justify-self:end; }
}