@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:        #12283B;
  --ink-2:      #1B3A52;
  --teal:       #0E6B63;
  --teal-dark:  #0A4F49;
  --teal-light: #E4F1EF;
  --paper:      #F7F5F1;
  --paper-line: #E4DFD3;
  --slate:      #29323C;
  --slate-soft: #5B6673;
  --amber:      #C97F1D;
  --amber-bg:   #FCEFDA;
  --red:        #B3432E;
  --red-bg:     #F8E4DE;
  --green:      #3F7D53;
  --green-bg:   #E4F0E7;
  --white:      #FFFFFF;
  --radius:     10px;
  --shadow:     0 2px 10px rgba(18,40,59,0.08);
  --shadow-lg:  0 12px 32px rgba(18,40,59,0.16);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter', sans-serif;
  background: var(--paper);
  color: var(--slate);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  color: var(--ink);
  margin:0 0 4px 0;
  letter-spacing:-0.01em;
}
a{ color: var(--teal); text-decoration:none; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ===================== LOGIN ===================== */
.login-shell{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 20% 20%, #163C55 0%, var(--ink) 55%, #0B1E2C 100%);
  padding:20px;
}
.login-card{
  background: var(--white);
  border-radius: 16px;
  width:100%; max-width:400px;
  padding:38px 34px 30px;
  box-shadow: var(--shadow-lg);
  text-align:center;
}
.login-card .brand-mark{
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px;
}
.login-card h1{ font-size:22px; }
.login-card p.sub{ color:var(--slate-soft); font-size:13.5px; margin:0 0 26px; }
.field{ text-align:left; margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--slate-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
input, select, textarea{
  width:100%; padding:11px 13px;
  border:1.5px solid var(--paper-line);
  border-radius: 8px;
  font-family:'Inter',sans-serif; font-size:14.5px;
  background:#fff; color:var(--slate);
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--teal); }
textarea{ resize:vertical; min-height:70px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:8px; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  transition: transform .08s, box-shadow .15s, background .15s;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--teal); color:#fff; }
.btn-primary:hover{ background: var(--teal-dark); }
.btn-block{ width:100%; }
.btn-ghost{ background:transparent; color:var(--teal); border:1.5px solid var(--teal); }
.btn-ghost:hover{ background: var(--teal-light); }
.btn-danger{ background: var(--red-bg); color: var(--red); }
.btn-danger:hover{ background:#f0cfc4; }
.btn-sm{ padding:7px 12px; font-size:13px; }
.error-msg{ background:var(--red-bg); color:var(--red); padding:10px 12px; border-radius:8px; font-size:13.5px; margin-bottom:14px; text-align:left; }

/* ===================== APP SHELL ===================== */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:230px; flex-shrink:0;
  background: linear-gradient(180deg, var(--ink) 0%, #0F2233 100%);
  color:#fff; padding:22px 16px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:0 6px 22px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:16px; flex-shrink:0; }
.sidebar .brand .mark{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:15px; }
.sidebar .brand .txt{ font-family:'Space Grotesk'; font-weight:700; font-size:15.5px; line-height:1.15; }
.sidebar .brand .txt small{ display:block; font-family:'Inter'; font-weight:400; font-size:10.5px; color:#9FB4C6; letter-spacing:.03em; }
.sidebar nav{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:2px; }
.sidebar nav::-webkit-scrollbar{ width:5px; }
.sidebar nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:3px; }
.nav-group{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#7C93A6; margin:16px 8px 8px; }
.nav-link{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px;
  color:#CBDAE5; font-size:14px; font-weight:500; margin-bottom:2px; cursor:pointer;
}
.nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background: var(--teal); color:#fff; }
.nav-link .ic{ width:18px; text-align:center; font-size:15px; }
.sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#7C93A6; flex-shrink:0; }
.sidebar-foot .user{ color:#fff; font-weight:600; margin-bottom:2px; }
.sidebar-foot .logout{ color:#E4A26B; cursor:pointer; margin-top:8px; display:inline-block; font-size:12.5px; }

.main{ flex:1; min-width:0; }
.topbar{
  background:#fff; border-bottom:1px solid var(--paper-line);
  padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:5;
}
.topbar h1{ font-size:19px; }
.topbar .crumb{ font-size:12.5px; color:var(--slate-soft); margin-top:2px; }
.content{ padding:24px 28px 60px; max-width:1180px; }

/* Banner de agenda (alerta visual, sin sonido) */
.agenda-banner{
  background: var(--amber-bg); border:1px solid #EBCB98; color:#7A5010;
  border-radius:10px; padding:13px 18px; margin-bottom:20px;
  display:flex; align-items:center; gap:12px; font-size:14px;
  animation: slideDown .25s ease;
}
.agenda-banner .ic{ font-size:19px; }
.agenda-banner b{ font-weight:700; }
.agenda-banner .dismiss{ margin-left:auto; cursor:pointer; color:#7A5010; font-weight:600; font-size:13px; opacity:.75;}
.agenda-banner .dismiss:hover{ opacity:1; }
@keyframes slideDown{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* Banner de aviso: el médico está llamando al paciente (Recepción) */
.espera-banner{
  background: var(--red-bg); border:1px solid #EBB9A9; color:#7A2E1B;
  border-radius:10px; padding:13px 18px; margin-bottom:20px;
  display:flex; align-items:center; gap:12px; font-size:14px;
  animation: slideDown .25s ease, pulseBorder 1.6s infinite;
}
.espera-banner .ic{ font-size:20px; }
.espera-banner b{ font-weight:700; }
.espera-banner .btn{ margin-left:auto; }
@keyframes pulseBorder{ 0%,100%{ box-shadow:0 0 0 0 rgba(179,67,46,.25); } 50%{ box-shadow:0 0 0 6px rgba(179,67,46,0); } }

/* Parpadeo fuerte: se usa mientras haya pacientes pendientes por atender
   (en espera / siendo llamados), hasta que se resuelvan todos. */
@keyframes parpadeoBanner{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.banner-parpadeo{ animation: slideDown .25s ease, parpadeoBanner 1s infinite; cursor:pointer; }
.banner-parpadeo:hover{ animation-play-state: running; filter:brightness(0.98); }

/* Lista de sala de espera */
.espera-item{
  display:flex; align-items:center; gap:14px; background:#fff; border-radius:10px;
  padding:13px 16px; margin-bottom:10px; box-shadow:var(--shadow); border-left:5px solid var(--red);
}
.espera-item.llamando{ border-left-color: var(--amber); background: var(--amber-bg); }
.espera-item .info b{ display:block; font-size:14.5px; color:var(--ink); }
.espera-item .info span{ font-size:12px; color:var(--slate-soft); }
.espera-item .acciones{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.pulse-count{
  background: var(--red); color:#fff; border-radius:20px; padding:2px 10px; font-size:12px; font-weight:800;
  animation: pulseBorder 1.6s infinite;
}

/* ===================== CARDS / GRID ===================== */
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); } }

.card{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding:20px; }
.menu-card{
  background:#fff; border-radius:14px; padding:20px; box-shadow:var(--shadow);
  cursor:pointer; transition: transform .12s, box-shadow .15s; border:1px solid transparent;
}
.menu-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal-light); }
.menu-card .ic{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:12px;
}
.menu-card h3{ font-size:15.5px; margin-bottom:3px; }
.menu-card p{ font-size:12.5px; color:var(--slate-soft); margin:0; line-height:1.4; }
.ic-teal{ background:var(--teal-light); color:var(--teal-dark); }
.ic-amber{ background:var(--amber-bg); color:var(--amber); }
.ic-red{ background:var(--red-bg); color:var(--red); }
.ic-green{ background:var(--green-bg); color:var(--green); }
.ic-ink{ background:#E7ECF0; color:var(--ink); }

/* ===================== TABLAS ===================== */
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--slate-soft); padding:9px 12px; border-bottom:2px solid var(--paper-line);
}
tbody td{ padding:11px 12px; border-bottom:1px solid var(--paper-line); vertical-align:middle; }
tbody tr:hover{ background: #FBFAF8; }
.table-wrap{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.table-wrap .table-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.tag{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }
.tag-teal{ background:var(--teal-light); color:var(--teal-dark); }
.tag-amber{ background:var(--amber-bg); color:var(--amber); }
.tag-green{ background:var(--green-bg); color:var(--green); }
.tag-red{ background:var(--red-bg); color:var(--red); }
.empty-state{ text-align:center; padding:50px 20px; color:var(--slate-soft); }
.empty-state .ic{ font-size:32px; margin-bottom:10px; opacity:.5; }

.search-box{ position:relative; max-width:320px; }
.search-box input{ padding-left:34px; }
.search-box .ic{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--slate-soft); font-size:14px; }

.form-row{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px 16px; }
.form-row.cols-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width:700px){ .form-row, .form-row.cols-3{ grid-template-columns: 1fr; } }
.form-actions{ display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }

.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-title h2{ font-size:16.5px; }
.badge-type{ padding:2px 9px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.badge-general{ background:var(--teal-light); color:var(--teal-dark); }
.badge-curacion{ background:var(--amber-bg); color:var(--amber); }
.badge-urgencia{ background:var(--red-bg); color:var(--red); }
.badge-lab{ background:#E7E4F6; color:#5B4B9E; }
.badge-rx{ background:#E0EEF6; color:#2B6E93; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(18,40,59,.45); display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
.modal{ background:#fff; border-radius:14px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal.wide{ max-width:760px; }
.modal-head{ padding:18px 22px; border-bottom:1px solid var(--paper-line); display:flex; align-items:center; justify-content:space-between; }
.modal-body{ padding:20px 22px; }
.modal-close{ cursor:pointer; color:var(--slate-soft); font-size:20px; line-height:1; }

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:9px; font-size:13.5px; box-shadow:var(--shadow-lg);
  z-index:100; animation: slideUp .2s ease; display:flex; align-items:center; gap:8px;
}
.toast.err{ background: var(--red); }
.toast.ok{ background: var(--teal-dark); }
@keyframes slideUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.item-row{ display:flex; gap:10px; align-items:flex-end; margin-bottom:10px; padding:12px; background:var(--paper); border-radius:8px; }
.item-row .col{ flex:1; }
.item-row .rm{ cursor:pointer; color:var(--red); font-size:18px; padding:0 6px; }
.total-line{ display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:10px; border-top:1.5px dashed var(--paper-line); font-family:'Space Grotesk'; font-weight:700; font-size:17px; color:var(--ink); }

/* ===================== DOCUMENTO IMPRIMIBLE ===================== */
.print-doc{
  background:#fff; border:1px solid var(--paper-line); border-radius:12px;
  padding:34px 38px; max-width:680px; margin:0 auto;
  box-shadow: var(--shadow);
}
.print-doc .doc-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--teal); padding-bottom:16px; margin-bottom:20px; }
.print-doc .doc-head .clinic{ font-family:'Space Grotesk'; font-weight:700; font-size:19px; color:var(--ink); }
.print-doc .doc-head .clinic small{ display:block; font-family:'Inter'; font-weight:400; font-size:11.5px; color:var(--slate-soft); margin-top:2px; }
.print-doc .doc-head .folio{ text-align:right; font-family:'IBM Plex Mono'; font-size:12px; color:var(--slate-soft); }
.print-doc .doc-head .folio b{ display:block; color:var(--ink); font-size:14px; }
.print-doc .doc-section{ margin-bottom:16px; }
.print-doc .doc-section .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-soft); font-weight:600; margin-bottom:3px; }
.print-doc .doc-section .val{ font-size:14.5px; color:var(--slate); }
.print-doc .doc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:18px; }
.print-doc .rx-item{ padding:10px 0; border-bottom:1px dashed var(--paper-line); }
.print-doc .rx-item b{ color:var(--ink); }
.print-doc .signature{ margin-top:46px; padding-top:10px; border-top:1px solid var(--slate); width:230px; font-size:12px; color:var(--slate-soft); text-align:center; }
.print-doc .doc-foot{ margin-top:30px; font-size:10.5px; color:var(--slate-soft); text-align:center; border-top:1px solid var(--paper-line); padding-top:12px; }

@media print{
  .sidebar, .topbar, .no-print{ display:none !important; }
  .main{ margin:0; }
  .content{ padding:0; max-width:100%; }
  body{ background:#fff; }
  .print-doc{ box-shadow:none; border:none; max-width:100%; }
}

.checklist{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:7px 13px; border-radius:20px; border:1.5px solid var(--paper-line); font-size:13px; cursor:pointer; background:#fff; user-select:none; }
.chip.active{ background: var(--teal); color:#fff; border-color:var(--teal); }

.avatar{ width:36px; height:36px; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px; font-family:'Space Grotesk'; }
.flex{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; }
.text-muted{ color:var(--slate-soft); font-size:13px; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}

/* ---------- Archivos clínicos (fotos, videos, documentos) ---------- */
.archivos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px; }
.archivo-card{ background:#fff; border:1px solid var(--paper-line); border-radius:10px; overflow:hidden; }
.archivo-thumb{ width:100%; height:120px; object-fit:cover; display:block; background:#000; cursor:pointer; }
.archivo-ic{ width:100%; height:120px; display:flex; align-items:center; justify-content:center; font-size:38px; background:var(--paper); }
.archivo-info{ padding:10px 12px; }
.archivo-nombre{ font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dropzone{ border:1.5px dashed var(--paper-line); border-radius:10px; padding:18px; text-align:center; cursor:pointer; color:var(--slate-soft); font-size:13.5px; transition:.15s; }
.dropzone:hover{ border-color:var(--teal); background:var(--teal-light); color:var(--teal-dark); }

/* ---------- Constructor de plantillas / formatos clínicos ---------- */
.plantilla-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:14px; }
.plantilla-card .head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.plantilla-card .head .ic{ font-size:22px; }
.plantilla-card .head h3{ font-size:15.5px; margin:0; flex:1; }
.campo-builder-row{ display:grid; grid-template-columns: 2fr 1.2fr 2fr auto; gap:8px; align-items:flex-start; margin-bottom:8px; padding:10px; background:var(--paper); border-radius:8px; }
.campo-builder-row .rm{ cursor:pointer; color:var(--red); font-size:16px; padding:6px; }
.campo-dinamico{ margin-bottom:14px; }
.campo-dinamico label{ display:block; font-size:12.5px; font-weight:600; color:var(--slate-soft); margin-bottom:6px; }
.si-no-toggle{ display:flex; gap:8px; }
.si-no-toggle .chip{ flex:1; text-align:center; }

/* ---------- Farmacia: badges de caducidad y POS ---------- */
.badge-caducado{ background:var(--red-bg); color:var(--red); }
.badge-porvencer{ background:var(--amber-bg); color:var(--amber); }
.badge-vigente{ background:var(--green-bg); color:var(--green); }
.scan-box{ position:relative; }
.scan-box input{ font-size:18px; padding:14px 16px 14px 40px; font-family:'IBM Plex Mono'; letter-spacing:.03em; }
.scan-box .ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:18px; }
.pos-cart-row{ display:grid; grid-template-columns:1fr 90px 110px 110px 30px; align-items:center; gap:8px; padding:10px 0; border-bottom:1px dashed var(--paper-line); }
.pos-cart-row input[type="number"]{ padding:6px 8px; text-align:center; }
.price-triplet{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }