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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.entry{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:var(--surface)}
.entry .e-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.entry .e-date{font-size:12px;color:var(--ink-soft);font-weight:600}
.entry .e-body{font-size:13.5px;color:var(--ink-soft);white-space:pre-wrap;line-height:1.6}
.entry .e-actions{margin-left:auto;display:flex;gap:6px}
.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}

.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{
  body *{visibility:hidden}
  #print-area,#print-area *{visibility:visible}
  #print-area{display:block;position:absolute;left:0;top:0;width:100%}
  @page{margin:18mm}
}
.doc-sheet{font-family:var(--font);color:#111;max-width:720px;margin:0 auto;padding:8px}
.doc-header{display:flex;align-items:center;gap:18px;border-bottom:2.5px solid var(--teal);padding-bottom:16px;margin-bottom:8px}
.doc-header img{max-height:78px;max-width:150px;object-fit:contain}
.doc-header .h-name{font-family:var(--display);font-size:22px;font-weight:700;color:var(--teal-deep)}
.doc-header .h-sub{font-size:12.5px;color:#444;line-height:1.5;margin-top:3px}
.doc-meta{display:flex;justify-content:space-between;font-size:12.5px;color:#333;padding:14px 0;border-bottom:1px solid #ddd;margin-bottom:18px}
.doc-title{font-family:var(--display);font-size:17px;font-weight:600;margin:22px 0 10px;color:var(--teal-deep)}
.doc-body{font-size:13.5px;line-height:1.7;color:#222}
.doc-foot{margin-top:60px;border-top:1px solid #ddd;padding-top:10px;font-size:11.5px;color:#666;display:flex;justify-content:space-between}
.doc-sign{text-align:center;margin-top:48px}
.doc-sign .line{border-top:1.5px solid #333;width:240px;margin:0 auto 5px}
.doc-sign .nm{font-weight:600;font-size:13px}.doc-sign .ti{font-size:11.5px;color:#555}
.rx-print-item{padding:9px 0;border-bottom:1px dashed #ccc}
.rx-print-item .mname{font-weight:700;font-size:14px}.rx-print-item .mdose{font-size:13px;color:#333;margin-top:2px}