@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Paleta alineada con la de "Ficha de paciente" (assets/frontend.css), para
   que el Recetario se sienta parte de la misma interfaz. Sin modo oscuro
   automático a propósito: siempre fondo blanco, sea cual sea el sistema
   del profesional. */
:root{
  --blue-50:#F4F7FB;
  --blue-100:#E4ECF5;
  --blue-400:#2E86D1;
  --blue-600:#0E9C8C;
  --blue-700:#1E5D8F;
  --blue-900:#153A5B;
  --ink:#182233;
  --ink-soft:#5B6B80;
  --ink-faint:#8598a5;
  --bg:#ffffff;
  --bg-panel:#ffffff;
  --line:#DDE5EE;
  --line-soft:#EDF2F7;
  --danger:#c0392b;
  --danger-bg:#fbeae8;
  --ok:#0E9C8C;
  --shadow-sm: 0 1px 2px rgba(12,59,86,.06);
  --shadow-md: 0 10px 30px rgba(12,59,86,.10);
  --radius: 14px;
}

.talus-recetario-app{margin:0;}
.talus-recetario-app *{box-sizing:border-box;}
.talus-recetario-app{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:20px 0;
}
h1,h2,h3{font-family:'Poppins',ui-sans-serif,system-ui,sans-serif; margin:0;}

#app{max-width:1280px; margin:0 auto; padding:20px 24px 64px;}

/* ---------- top bar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 4px 22px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-icon{width:30px; height:auto; flex:none; display:block; object-fit:contain;}
.brand-text h1{font-size:19px; font-weight:700; color:var(--ink); letter-spacing:.2px;}
.brand-text p{margin:1px 0 0; font-size:12.5px; color:var(--ink-soft);}

.tabs{display:flex; gap:4px; background:var(--bg-panel); padding:4px; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-sm);}
.tab-btn{
  appearance:none; border:none; background:transparent; cursor:pointer;
  padding:8px 16px; border-radius:9px; font:600 13.5px 'Inter',sans-serif; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.tab-btn.active{background:var(--blue-600); color:#fff;}
.tab-btn:not(.active):hover{background:var(--blue-50); color:var(--blue-700);}

/* ---------- layout ---------- */
.view{display:none;}
.view.active{display:block;}

.new-grid{display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:24px; align-items:start;}
@media (max-width:920px){ .new-grid{grid-template-columns:1fr;} }

.panel{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px;
}
.panel h2{font-size:15px; font-weight:600; margin-bottom:2px;}
.panel .panel-sub{font-size:12.5px; color:var(--ink-soft); margin:0 0 18px;}

.field{margin-bottom:16px;}
.field label{display:block; font:600 12px 'Inter',sans-serif; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px;
  font:500 14px/1.45 'Inter',sans-serif; color:var(--ink); background:var(--bg-panel);
  font-variant-numeric:tabular-nums;
}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23516371' stroke-width='2'><path d='M5 7l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; background-size:14px; padding-right:32px;
}
.field select:invalid{color:var(--ink-faint);}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--blue-400); outline-offset:1px; border-color:var(--blue-400);}
.field textarea{resize:vertical; min-height:64px;}
.field.error input, .field.error textarea, .field.error select{border-color:var(--danger);}
.field .err-msg{display:none; color:var(--danger); font-size:12px; margin-top:5px; font-weight:600;}
.field.error .err-msg{display:block;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.field-group-title{font:700 11.5px 'Inter',sans-serif; color:var(--blue-700); text-transform:uppercase; letter-spacing:.06em; margin:22px 0 10px; padding-top:16px; border-top:1px solid var(--line-soft);}
.field-group-title:first-of-type{margin-top:0; padding-top:0; border-top:none;}

.actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.btn{
  appearance:none; border:none; cursor:pointer; border-radius:10px; font:600 14px 'Inter',sans-serif;
  padding:11px 18px; display:inline-flex; align-items:center; gap:8px; transition:filter .12s ease, transform .05s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue-600); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-ghost{background:var(--blue-50); color:var(--blue-700);}
.btn-ghost:hover{filter:brightness(0.97);}
.btn svg{width:16px; height:16px;}

.save-status{font-size:12px; color:var(--ink-faint); margin-top:10px; min-height:16px;}
.save-status.ok{color:var(--ok);}
.save-status.err{color:var(--danger);}

/* ---------- preview column ---------- */
.preview-col{display:flex; flex-direction:column; align-items:center; gap:14px;}
.preview-label{font:600 12px 'Inter',sans-serif; color:var(--ink-soft); align-self:flex-start; text-transform:uppercase; letter-spacing:.05em;}
.sheet-frame{background:var(--bg-panel); padding:14px; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow-md);}

/* ---------- the receta sheet (facsimile, fixed light-paper look) ---------- */
.receta-sheet{
  width:148mm; height:210mm; background:#ffffff; color:#152029;
  font-family:'Inter',ui-sans-serif,sans-serif; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.rs-header{
  background:linear-gradient(135deg,#1a76ab,#125d87); color:#fff;
  padding:7mm 9mm 6mm; display:flex; justify-content:space-between; align-items:flex-start; gap:6mm;
}
.rs-brand{display:flex; align-items:flex-start; flex:none;}
.rs-brand-logo{height:12mm; width:auto; max-width:none; display:block; object-fit:contain; align-self:flex-start; flex:none;}
.rs-contact{font-size:6.6pt; line-height:1.65; text-align:right; opacity:.95; flex:none;}
.rs-contact div{display:flex; align-items:center; justify-content:flex-end; gap:1.5mm;}
.rs-contact svg{width:2.6mm; height:2.6mm; flex:none;}

.rs-meta{padding:5.5mm 9mm 1mm; display:flex; flex-direction:column; gap:3.2mm;}
.rs-meta-grid{display:grid; gap:6mm;}
.rs-meta-grid.row1{grid-template-columns:2.1fr 1fr;}
.rs-meta-grid.row2{grid-template-columns:1fr 2.3fr;}
.rs-field{min-width:0;}
.rs-field-label{font:700 6.3pt 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:#1a76ab; margin-bottom:.9mm;}
.rs-field-value{
  font-size:8.5pt; font-weight:500; color:#1c2a33; border-bottom:.4pt solid #b9cddb;
  padding-bottom:1mm; min-height:4.2mm; line-height:1.35; word-break:break-word; overflow-wrap:break-word;
  font-variant-numeric:tabular-nums;
}
.rs-field-value:empty::before{content:'\00a0';}

.rs-body{flex:1; position:relative; padding:3mm 9mm 2mm; min-height:0;}
.rs-watermark{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74mm; height:auto; opacity:.06; z-index:0;}
.rs-indications{position:relative; z-index:1; font-size:9pt; line-height:1.7; white-space:pre-wrap; word-break:break-word; color:#1c2a33;}
.rs-indications:empty::before{content:'—'; color:#c3d0d8;}

.rs-footer{padding:0 9mm 9mm; display:flex; flex-direction:column; align-items:center; gap:1.5mm; text-align:center;}
.rs-sig-name{font-weight:700; font-size:9pt;}
.rs-sig-reg{font-size:7pt; color:#516371;}
.rs-sig-line{width:62mm; border-top:.5pt solid #9db3c2; margin-top:5mm; padding-top:1.5mm; font:700 7pt 'Inter',sans-serif; letter-spacing:.08em; color:#1a76ab; text-transform:uppercase;}

/* ---------- history ---------- */
.hist-grid{display:grid; grid-template-columns:360px 1fr; gap:24px; align-items:start;}
@media (max-width:920px){ .hist-grid{grid-template-columns:1fr;} }
.search-box{position:relative; margin-bottom:14px;}
.search-box svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-faint);}
.search-box input{width:100%; padding:10px 12px 10px 34px; border:1px solid var(--line); border-radius:10px; font:500 14px 'Inter',sans-serif; background:var(--bg-panel); color:var(--ink);}
.search-box input:focus{outline:2px solid var(--blue-400); outline-offset:1px;}

.hist-list{display:flex; flex-direction:column; gap:8px; max-height:640px; overflow:auto; padding-right:2px;}
.hist-row{
  border:1px solid var(--line); border-radius:11px; padding:12px 14px; cursor:pointer; background:var(--bg-panel);
  transition:border-color .12s ease, background .12s ease;
}
.hist-row:hover{border-color:var(--blue-400);}
.hist-row.selected{border-color:var(--blue-600); background:var(--blue-50);}
.hist-row-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline;}
.hist-row-name{font-weight:700; font-size:14px; color:var(--ink);}
.hist-row-date{font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:none;}
.hist-row-sub{font-size:12.5px; color:var(--ink-soft); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.empty-state{text-align:center; padding:40px 20px; color:var(--ink-faint); font-size:13.5px; line-height:1.6;}
.empty-state svg{width:36px; height:36px; color:var(--line); margin-bottom:10px;}

.detail-col{display:flex; flex-direction:column; align-items:center; gap:14px;}
.detail-actions{display:flex; gap:10px;}
.detail-placeholder{
  width:148mm; max-width:100%; height:210mm; border:1.5px dashed var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:13.5px; text-align:center; padding:20px;
}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--ink); color:#fff; padding:10px 18px; border-radius:10px; font:600 13px 'Inter',sans-serif; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:50;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--danger);}

#printStage{display:none;}

@media print{
  @page{ size:A5; margin:0; }
  html,body{margin:0; padding:0; background:#fff !important;}
  #app{display:none !important;}
  #printStage{display:block !important;}
  #printStage .receta-sheet{width:148mm; height:210mm; box-shadow:none;}
}

/* ---- Ajustes de integración con WordPress ---- */
.talus-rec-volver{max-width:1280px;margin:0 auto;padding:0 24px;}
.talus-rec-volver a{color:var(--blue-600);text-decoration:none;font:600 13px 'Inter',sans-serif;}
.talus-rec-volver a:hover{text-decoration:underline;}