@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Canvas palette */
  --bg:          #0f1117;
  --bg-2:        #161820;
  --bg-3:        #1e2029;
  --bg-4:        #252733;
  --border:      rgba(255,255,255,.07);
  --border-2:    rgba(255,255,255,.12);
  --text:        #e8eaf0;
  --text-2:      #8b8fa8;
  --text-3:      #555870;
  --accent:      #6366f1;
  --accent-2:    #818cf8;
  --accent-glow: rgba(99,102,241,.18);
  --green:       #34d399;
  --red:         #f87171;
  /* Page */
  --page-w:     140mm;
  --page-h:     210mm;
  --margin-top: 40mm;
  --margin-bot: 20mm;
  --margin-h:   10mm;
  /* Font */
  --font: 'Sora', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ─────────────────────────────────────── */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ─────────────────────────────────────── */
.sidebar {
  width: 268px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Head */
.sidebar-head {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.app-logo svg { flex-shrink: 0; }

/* Scroll */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-4) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 2px; }

/* Nav */
.nav-group { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 6px; }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
  font-family: var(--font); font-weight: 400;
  transition: background .12s, color .12s, border-color .12s;
  text-align: left;
}
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active {
  background: var(--accent-glow);
  border-color: rgba(99,102,241,.3);
  color: var(--accent-2);
  font-weight: 500;
}
.nav-sub { padding-left: 18px; font-size: 12px; }
.nav-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }
.nav-item.active .nav-icon { opacity: 1; }

/* Divider */
.divider { height: 1px; background: var(--border); margin: 8px 0; }

/* Section */
.section { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; }
.section-title {
  font-size: 10px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em; padding: 2px 0 2px 1px;
}
.subsec {
  font-size: 10px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: 6px; margin-bottom: 4px; padding: 0 1px;
}

/* Fields */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 10px; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.field input, .field textarea, .field select {
  width: 100%; font-size: 12px; padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text);
  font-family: var(--font);
  resize: vertical;
  transition: border-color .15s, background .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-4);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field textarea { min-height: 52px; line-height: 1.5; }
.field select { cursor: pointer; }
.field select option { background: var(--bg-3); }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.row-2 > div { display: flex; flex-direction: column; gap: 4px; }
.row-2 label {
  font-size: 10px; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.row-2 input {
  width: 100%; font-size: 12px; padding: 6px 9px;
  border-radius: 6px; border: 1px solid var(--border-2);
  background: var(--bg-3); color: var(--text); font-family: var(--font);
}
.row-2 input:focus { outline: none; border-color: var(--accent); background: var(--bg-4); }

/* Drug list */
.drug-item {
  border: 1px solid var(--border-2);
  border-radius: 8px; padding: 9px 10px; margin-bottom: 5px;
  background: var(--bg-3);
}
.drug-item-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 7px; gap: 6px;
}
.drug-info { flex: 1; }
.drug-item-name { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.35; }
.drug-item-pres { font-size: 10.5px; color: var(--text-2); line-height: 1.3; margin-top: 1px; }
.drug-placeholder { font-size: 11px; color: var(--text-3); font-style: italic; }
.drug-rm {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 15px; padding: 0 2px; line-height: 1;
  flex-shrink: 0; transition: color .12s;
}
.drug-rm:hover { color: var(--red); }

/* Autocomplete */
.ac-wrap { position: relative; margin-bottom: 6px; }
.ac-input {
  width: 100%; font-size: 11.5px; padding: 6px 9px;
  border-radius: 6px; border: 1px solid var(--border-2);
  background: var(--bg-4); color: var(--text); font-family: var(--font);
}
.ac-input:focus { outline: none; border-color: var(--accent); }
.ac-input::placeholder { color: var(--text-3); }
.ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 300;
  background: var(--bg-4);
  border: 1px solid var(--border-2);
  border-radius: 8px; max-height: 190px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.ac-list.hidden { display: none; }
.ac-opt {
  padding: 7px 10px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid var(--border); line-height: 1.4;
  transition: background .08s;
}
.ac-opt:last-child { border-bottom: none; }
.ac-opt:hover, .ac-opt.hi { background: var(--bg-3); }
.ac-opt-name { font-weight: 500; color: var(--text); }
.ac-opt-sub { font-size: 10px; color: var(--text-2); margin-top: 2px; }

/* Drug dose rows */
.drug-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.drug-row label {
  font-size: 10px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .06em; flex-shrink: 0; font-weight: 500;
}
.drug-row input {
  font-size: 11px; padding: 4px 6px; border-radius: 5px;
  border: 1px solid var(--border-2); background: var(--bg-4);
  color: var(--text); font-family: var(--font); width: 52px;
}
.drug-row input:focus { outline: none; border-color: var(--accent); }
.drug-row select {
  font-size: 11px; padding: 4px 6px; border-radius: 5px;
  border: 1px solid var(--border-2); background: var(--bg-4);
  color: var(--text); font-family: var(--font); max-width: 136px; cursor: pointer;
}
.drug-row select:focus { outline: none; border-color: var(--accent); }
.drug-row select option { background: var(--bg-3); }

.add-drug-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; margin-top: 4px;
  background: transparent; border: 1px dashed var(--border-2); border-radius: 7px;
  font-size: 12px; color: var(--text-2); cursor: pointer; font-family: var(--font);
  transition: background .12s, color .12s, border-color .12s;
}
.add-drug-btn:hover { background: var(--bg-3); color: var(--text); border-color: var(--accent); }

/* Footer buttons */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: background .12s, opacity .12s;
}
.btn-primary:hover { background: #4f52d8; }
.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 12px; background: var(--bg-3); color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: 8px;
  font-size: 12px; cursor: pointer; font-family: var(--font);
  transition: background .12s, color .12s, border-color .12s;
}
.btn-secondary:hover { background: var(--bg-4); color: var(--text); border-color: var(--border-2); }
.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 12px; background: transparent; color: var(--text-3);
  border: 1px solid transparent; border-radius: 8px;
  font-size: 11.5px; cursor: pointer; font-family: var(--font);
  transition: background .12s, color .12s;
}
.btn-ghost:hover { background: var(--bg-3); color: var(--text-2); }

.hidden { display: none !important; }

.info-hint {
  font-size: 10.5px; color: var(--text-3);
  padding: 5px 9px; margin-top: 4px;
  background: var(--bg-3); border-radius: 5px;
  border-left: 2px solid var(--accent);
  line-height: 1.4;
}
.info-hint em { color: var(--text-2); font-style: italic; }

/* ── CANVAS ──────────────────────────────────────── */
.canvas {
  flex: 1; display: flex; flex-direction: column;
  background: var(--bg); overflow: hidden;
}
.canvas-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.canvas-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-3); letter-spacing: .04em;
}
.canvas-hint {
  font-size: 10.5px; color: var(--text-3);
  font-family: var(--mono); letter-spacing: .03em;
}
.canvas-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 20px 40px;
  /* subtle dot grid like Figma/Canvas */
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.page-shadow {
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.55));
}

/* Page */
.page-wrap { position: relative; }
.margin-indicator {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--margin-top);
  border-bottom: 1px dashed rgba(99,102,241,.35);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 5px;
  pointer-events: none; z-index: 2;
}
.margin-indicator span {
  font-family: var(--mono); font-size: 8px;
  color: rgba(99,102,241,.5); letter-spacing: .1em; text-transform: uppercase;
}

.page-frame {
  background: #fff; color: #1a2a35;
  width: var(--page-w); min-height: var(--page-h);
  padding: var(--margin-top) var(--margin-h) var(--margin-bot);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-size: 8.5pt; line-height: 1.55;
  display: flex; flex-direction: column;
}
.page-frame.hc-mode {
  min-height: var(--page-h);
  height: auto;
}

/* Page contents (same as before, preserved) */
.pg-date{font-size:7.5pt;color:#8fa8b8;text-align:right;margin-bottom:3mm;flex-shrink:0}
.pg-patient-bar{background:#f0ede5;border:1px solid #d4cfc4;border-radius:3px;padding:1.5mm 3mm;display:flex;gap:5mm;flex-wrap:wrap;align-items:baseline;margin-bottom:5mm;flex-shrink:0}
.pg-pat-field{display:flex;flex-direction:column}
.pg-pat-lbl{font-size:5pt;letter-spacing:.10em;text-transform:uppercase;color:#7a8a95}
.pg-pat-val{font-size:8pt;font-weight:600;color:#1a2a35}
.pg-body{flex:1;display:flex;flex-direction:column}
.rx-symbol{font-family:Georgia,serif;font-size:20pt;font-weight:300;color:#2a9d8f;line-height:1;margin-bottom:2mm}
.rx-trat{font-size:8.5pt;line-height:1.85;color:#1a2a35;white-space:pre-wrap;border-left:2px solid #e0dbd0;padding-left:3mm;margin-bottom:3mm}
.rx-drug-block{margin-bottom:3.5mm;border-left:2px solid #e0dbd0;padding-left:3mm}
.rx-drug-name{font-size:9.5pt;font-weight:600;color:#0d1f2d;text-transform:uppercase;letter-spacing:.03em;line-height:1.3}
.rx-drug-pres{font-size:8pt;color:#5a7080;line-height:1.3;margin-top:.3mm}
.rx-drug-dose{font-size:8.5pt;color:#1a2a35;line-height:1.5;margin-top:.5mm}
.atb-badge{display:inline-block;background:rgba(220,100,80,.10);color:#933;border:1px solid rgba(220,100,80,.25);border-radius:3px;font-size:6pt;letter-spacing:.09em;text-transform:uppercase;padding:1mm 2mm;margin-bottom:3mm;font-weight:600}
.atb-table{width:100%;border-collapse:collapse}
.atb-table td{padding:1.2mm 0;vertical-align:top}
.atb-table td:first-child{font-size:6pt;letter-spacing:.09em;text-transform:uppercase;color:#7a8a95;width:26mm;padding-top:2mm}
.atb-table td:last-child{font-size:8.5pt;font-weight:500;border-bottom:1px solid #eee;padding-bottom:1.5mm}
.atb-table tr:last-child td:last-child{border-bottom:none}
.atb-dur-big{font-family:Georgia,serif;font-size:16pt;font-weight:600;color:#0d1f2d;line-height:1}
.atb-dur-sub{font-size:6.5pt;color:#5a7080;margin-top:.5mm}
.cert-title-block{text-align:center;margin-bottom:5mm}
.cert-title-h{font-family:Georgia,serif;font-size:10pt;font-weight:600;letter-spacing:.07em;color:#0d1f2d;text-transform:uppercase;border-bottom:1px solid #0d1f2d;display:inline-block;padding-bottom:1.5mm}
.cert-body-text{font-size:8.5pt;line-height:1.9;color:#1a2a35;text-align:justify;flex:1}
.cert-body-text ul{margin:2mm 0 0 5mm;line-height:2}
.obs-block{font-size:7.5pt;color:#5a7080;font-style:italic;margin-top:2mm;border-left:2px solid #e0dbd0;padding-left:2mm}
.farm-drug{margin-bottom:5mm;border-left:2px solid #e0dbd0;padding-left:3mm}
.farm-drug-name{font-size:11pt;font-weight:600;color:#0d1f2d;text-transform:uppercase;letter-spacing:.04em;line-height:1.3}
.farm-drug-pres{font-size:9pt;color:#5a7080;line-height:1.4;margin-top:.5mm}

/* Historia clínica abreviada */
.hc-title{font-family:Georgia,serif;font-size:11pt;font-weight:600;letter-spacing:.06em;color:#0d1f2d;text-transform:uppercase;text-align:center;border-bottom:1px solid #0d1f2d;padding-bottom:1.5mm;margin-bottom:4mm}
.hc-block{margin-bottom:3mm;page-break-inside:avoid}
.hc-label{font-size:6.5pt;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#0d1f2d;margin-bottom:1mm;border-bottom:.5px solid #d4cfc4;padding-bottom:.5mm}
.hc-text{font-size:8.5pt;line-height:1.55;color:#1a2a35;white-space:pre-wrap;text-align:justify;min-height:4mm}
.hc-empty{color:#bbb;font-style:italic}
.hc-filial{display:grid;grid-template-columns:1fr 1fr;gap:1mm 5mm;margin-bottom:3mm}
.hc-filial .hc-row{display:flex;gap:2mm;align-items:baseline;font-size:8pt;line-height:1.5}
.hc-filial .hc-row-lbl{font-size:6pt;letter-spacing:.08em;text-transform:uppercase;color:#7a8a95;flex-shrink:0}
.hc-filial .hc-row-val{font-weight:500;color:#0d1f2d}
.hc-indicaciones{margin-top:5mm;border-top:1.5px solid #0d1f2d;padding-top:3mm}
.hc-ind-title{font-family:Georgia,serif;font-size:10pt;font-weight:600;letter-spacing:.07em;color:#0d1f2d;text-transform:uppercase;text-align:center;margin-bottom:3mm}
.pg-firma{margin-top:auto;padding-top:4mm;text-align:center;flex-shrink:0}
.pg-firma-line{width:52mm;height:0;border-top:1px solid #1a2a35;margin:0 auto 2mm}
.pg-firma-name{font-family:Georgia,serif;font-size:9pt;font-weight:600;color:#0d1f2d;line-height:1.45}
.pg-firma-sub{font-size:6.5pt;color:#5a7080;letter-spacing:.06em;margin-top:.5mm}

/* ── PRINT ───────────────────────────────────────── */
@media print{
  html,body{height:auto;background:#fff}
  .app{display:block;height:auto;overflow:visible}
  .sidebar,.canvas-topbar,.canvas-body,.margin-indicator{display:none!important}
  .canvas{display:block;background:#fff}
  .canvas-body{display:block;padding:0;background:#fff}
  .page-shadow{filter:none}
  .page-wrap{position:static}
  .page-frame{box-shadow:none;width:var(--page-w);height:var(--page-h);margin:0;padding:var(--margin-top) var(--margin-h) var(--margin-bot)}
  @page{size:140mm 210mm;margin:0}
  *{color:#000!important;background:#fff!important;background-color:#fff!important;border-color:#ccc!important;box-shadow:none!important;text-shadow:none!important}
  .pg-patient-bar{background:#f5f5f5!important}
  .rx-symbol,.atb-dur-big,.cert-title-h{color:#000!important}
  .atb-badge{background:#f5f5f5!important;color:#000!important}
}