@font-face{
  font-family:'Nohemi'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/Nohemi-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Nohemi'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/Nohemi-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Nohemi'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/Nohemi-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Nohemi'; font-weight:800; font-style:normal; font-display:swap;
  src:url('../fonts/Nohemi-ExtraBold.woff2') format('woff2');
}

:root{
  /* Identidad de marca — SUEROTERAPIA ACADEMY */
  --indigo:#160B4A;
  --violet:#5A2FA8;
  --cyan:#0FC4C4;
  --magenta:#E91766;
  --ice:#F5F4F9;
  --orange:#FF7A30;
  --grad-1: linear-gradient(135deg, var(--violet), var(--cyan));
  --grad-2: linear-gradient(120deg, var(--magenta), var(--orange));
  --grad-3: linear-gradient(135deg, var(--cyan), var(--magenta));

  /* Alias funcionales usados en toda la app (no cambiar nombres: los usa el JS/HTML) */
  --teal:var(--violet);
  --teal-dark:var(--indigo);
  --ink:var(--indigo);
  --muted:#6E66A0;
  --bg:var(--ice);
  --card:#ffffff;
  --border:rgba(22,11,74,.12);
  --danger:#dc2626;
  --radius:18px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Nohemi','Manrope',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
.app{max-width:640px;margin:0 auto;min-height:100vh;background:var(--card);
  box-shadow:0 0 40px rgba(22,11,74,.08);}
header{padding:16px 24px;
  background:rgba(245,244,249,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;white-space:nowrap;letter-spacing:-.01em;}
.brand .logo{width:32px;height:32px;flex:none;
  display:flex;align-items:center;justify-content:center;}
.brand .logo img{width:100%;height:100%;object-fit:contain;}
.brand span{letter-spacing:-.02em;}
.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.user-badge{border:1px solid var(--border);background:#fff;border-radius:100px;
  padding:6px 14px;font-size:11.5px;font-weight:700;color:var(--violet);white-space:nowrap;
  max-width:180px;overflow:hidden;text-overflow:ellipsis;}
#logoutBtn,#accountBtn{border:1.5px solid var(--border);background:#fff;border-radius:100px;
  width:34px;height:34px;flex:none;color:var(--muted);cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;}
#logoutBtn{border-color:#fecaca;background:#fef2f2;color:var(--danger);}
#logoutBtn:hover{background:#fee2e2;}
#accountBtn:hover{background:var(--bg);}
@media (max-width:420px){
  header{padding:12px 14px;}
  .brand{font-size:15px;}
  .brand .logo{width:28px;height:28px;}
  .user-badge{max-width:110px;font-size:10.5px;padding:5px 8px;}
  #logoutBtn,#accountBtn{width:36px;height:36px;font-size:16px;}
}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 16px 16px, rgba(255,255,255,.06) 2px, transparent 2px),
    linear-gradient(160deg, var(--indigo), #241266 55%, var(--violet));
  background-size:32px 32px, auto;
  padding:20px;}
.login-card{max-width:360px;width:100%;background:#fff;border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(22,11,74,.35);padding:32px 28px;text-align:center;}
.login-logo{width:64px;height:64px;border-radius:18px;background:var(--ice);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;padding:10px;}
.login-logo img{width:100%;height:100%;object-fit:contain;}
.login-title{font-size:22px;font-weight:800;letter-spacing:-.02em;}
.login-sub{font-size:13px;color:var(--muted);margin-bottom:20px;}
.login-card label{text-align:left;}
.login-btn{width:100%;margin-top:18px;}
.login-hint{margin-top:14px;font-size:11.5px;color:var(--muted);}
.login-error{background:#fdeef4;color:var(--magenta);font-size:13px;border-radius:10px;
  padding:9px 12px;margin-bottom:6px;text-align:left;font-weight:600;}
.login-ok{background:#eafdf7;color:#0f9d7f;font-size:13px;border-radius:10px;
  padding:9px 12px;margin-bottom:6px;text-align:left;font-weight:600;}
.login-links{display:flex;justify-content:space-between;margin-top:14px;font-size:12.5px;}
.login-links.center{justify-content:center;}
.login-links a{color:var(--violet);text-decoration:none;font-weight:700;}
.login-links a:hover{text-decoration:underline;}
.login-wrap{padding-top:40px;padding-bottom:40px;}

/* ===== NAV ===== */
.mainnav{display:flex;gap:6px;padding:10px 24px;background:rgba(245,244,249,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);overflow-x:auto;}
.navbtn{border:none;background:none;color:var(--muted);font-size:13px;font-weight:700;
  padding:9px 16px;border-radius:100px;cursor:pointer;white-space:nowrap;transition:.15s;}
.navbtn.active{background:var(--grad-2);color:#fff;box-shadow:0 6px 16px rgba(233,23,102,.25);}
.navbtn:hover:not(.active){background:#fff;color:var(--indigo);}

/* ===== MODO ADMINISTRADOR (visualmente distinto) =====
   Para que sea obvio a simple vista que se está en el panel de
   Administrador (solo Usuarios + resumen), en vez del panel normal
   de registro de pacientes: franja de navegación oscura y badge dorado. */
.mainnav.admin-mode{background:linear-gradient(135deg, #1b0f3d, #2d1660);
  border-bottom:1px solid #3a2270;}
.mainnav.admin-mode .navbtn{color:#c9b8f5;}
.mainnav.admin-mode .navbtn.active{background:linear-gradient(135deg,#f5b544,#e8912a);
  color:#2d1660;box-shadow:0 6px 16px rgba(232,145,42,.35);}
.mainnav.admin-mode .navbtn:hover:not(.active){background:rgba(255,255,255,.08);color:#fff;}
body.admin-mode .user-badge{background:linear-gradient(135deg,#f5b544,#e8912a);
  color:#2d1660;border-color:#e8912a;font-weight:800;}

/* ===== RESUMEN RÁPIDO (Administrador) ===== */
.admin-stats{display:flex;gap:10px;padding:14px 24px 0;}
.stat-box{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;
  padding:12px 10px;text-align:center;}
.stat-box b{display:block;font-size:20px;font-weight:800;color:var(--violet);letter-spacing:-.01em;}
.stat-box span{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px;
  text-transform:uppercase;letter-spacing:.02em;}
@media (max-width:420px){
  .admin-stats{padding:12px 14px 0;gap:8px;}
  .stat-box b{font-size:17px;}
  .stat-box span{font-size:9.5px;}
}

.tabs{display:flex;padding:14px 24px 0;gap:4px;overflow-x:auto;}
.tab{flex:1;text-align:center;font-size:12px;font-weight:700;letter-spacing:.03em;
  color:var(--muted);padding-bottom:10px;border-bottom:3px solid var(--border);
  white-space:nowrap;}
.tab.active{color:var(--magenta);border-color:var(--magenta);}
.tab.done{color:var(--cyan);border-color:var(--cyan);}
.progressbar{height:4px;border-radius:4px;background:var(--border);margin:0 24px;overflow:hidden;}
.progressbar-fill{height:100%;background:var(--grad-3);transition:width .25s;}

main{padding:24px;}
.view-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
button.excel-btn{white-space:nowrap;padding:10px 18px;font-size:13px;color:#0d9d95;border-color:#bdeee9;}
button.excel-btn:hover{background:#eafdfa;}
.step-title{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;
  letter-spacing:-.01em;margin:4px 0 20px;}
.step-title .ic{color:var(--magenta);}
.muted-sm{font-size:12.5px;color:var(--muted);}

label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px;}
input,select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;
  font-size:15px;background:var(--bg);color:var(--ink);font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--violet);outline-offset:1px;}
textarea{resize:vertical;min-height:90px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}

.vitals-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.vital-card{border:1.5px solid var(--border);border-radius:14px;padding:14px;background:var(--bg);}
.vital-card label{margin-top:0;}
.vital-card .unit{font-size:12px;color:var(--muted);}

/* ===== SIGNOS (Valoración objetiva) ===== */
.vitals-grid2{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:10px;
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:22px;
  box-shadow:0 6px 20px rgba(22,11,74,.06);}
.vitals-grid2 label{text-align:center;font-size:11.5px;letter-spacing:.04em;}
.underline-input{border:none;border-bottom:2px solid var(--magenta);border-radius:0;
  text-align:center;font-size:16px;background:transparent;padding:10px 4px;}
.underline-input:focus{outline:none;}
.imc-box{text-align:center;font-size:22px;font-weight:800;margin-top:18px;}
.imc-val{background:var(--grad-3);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ===== NOTA ===== */
.field-header{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.ai-btn{background:#f0eaff;color:var(--violet);border:none;border-radius:100px;padding:7px 14px;
  font-size:12.5px;font-weight:700;cursor:pointer;}
.ai-btn:hover{background:#e4d9ff;}

/* ===== PLAN ===== */
.copiloto-box{display:flex;align-items:center;gap:12px;background:#f0eaff;border:1.5px solid #d9c9ff;
  border-radius:var(--radius);padding:14px 16px;margin-bottom:20px;}
.copiloto-ic{font-size:20px;}
.copiloto-text{flex:1;}
.copiloto-text b{font-size:14px;}
.copiloto-btn{background:var(--grad-1);color:#fff;border:none;border-radius:12px;
  width:34px;height:34px;font-size:14px;cursor:pointer;}
.sesiones-q{border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.sesiones-q-label{font-size:14px;font-weight:700;margin-bottom:12px;}
.sesiones-btns{display:flex;gap:8px;}
.sesion-num-btn{flex:1;border:1.5px solid var(--border);background:#fff;border-radius:12px;
  padding:10px 0;font-weight:700;cursor:pointer;color:var(--ink);}
.sesion-num-btn.active{background:var(--grad-2);border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(233,23,102,.25);}

.sesion-card{border:1.5px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:14px;}
.sesion-card.today{border-color:var(--magenta);box-shadow:0 0 0 1px var(--magenta) inset;}
.sesion-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  flex-wrap:wrap;gap:8px;}
.sesion-card-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;flex:none;}
.sesion-num-badge{width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;
  font-size:11px;display:flex;align-items:center;justify-content:center;flex:none;}
.mezclar-select{width:auto;max-width:100%;font-size:12.5px;padding:6px 10px;border-radius:8px;cursor:pointer;
  font-family:'Manrope',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
@media (max-width:480px){
  .sesion-card-head{flex-direction:column;align-items:stretch;}
  .mezclar-select{width:100%;}
}
.sesion-mix{background:#fff7ec;border:1.5px solid #ffd9ab;border-radius:12px;padding:12px;
  min-height:70px;font-size:13px;color:#8a6a3d;}
.sesion-mix .chip{display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1.5px solid #ffd9ab;border-radius:100px;padding:4px 10px;margin:3px 4px 3px 0;
  font-size:12px;color:var(--ink);}
.sesion-mix .chip button{background:none;border:none;color:var(--orange);cursor:pointer;
  font-size:12px;padding:0;line-height:1;}
.sesion-mix .empty-mix{text-align:center;font-size:12px;color:var(--orange);margin-top:8px;}
.chip-block{display:block;margin:0 0 8px 0;}
.combo-info{font-size:11.5px;color:#8a6a3d;background:#fffaf1;border-left:3px solid var(--orange);
  border-radius:6px;padding:6px 9px;margin:4px 0 2px 4px;line-height:1.5;}
@media print{ .combo-info{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } }

/* ===== FIRMA / CONSENTIMIENTO ===== */
.consent-box{min-height:60px;font-size:13.5px;color:var(--muted);background:var(--bg);}
#signaturePad{border:1.5px dashed var(--border);border-radius:var(--radius);width:100%;height:180px;
  touch-action:none;background:var(--bg);}
.sig-actions{display:flex;justify-content:flex-end;margin-top:8px;}
.sig-actions button{background:none;border:none;color:var(--violet);font-size:13px;
  font-weight:700;cursor:pointer;}

.actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;}
button.primary{background:var(--grad-2);color:#fff;border:none;border-radius:100px;
  padding:13px 24px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(233,23,102,.25);}
button.primary:hover{filter:brightness(1.05);}
button.secondary{background:none;border:1.5px solid var(--border);color:var(--indigo);
  border-radius:100px;padding:13px 24px;font-size:15px;font-weight:600;cursor:pointer;}
button.secondary:hover{background:#fff;}
button.secondary:disabled{opacity:.4;cursor:not-allowed;}
#btnNext.finalizar{background:var(--grad-1);box-shadow:0 8px 20px rgba(90,47,168,.25);}

.summary-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;}
.summary-row b{color:var(--muted);font-weight:600;}

/* ===== ÉXITO / CORREO ===== */
.success-wrap{text-align:center;padding:10px 0 20px;}
.success-check{width:56px;height:56px;border-radius:50%;background:var(--grad-1);color:#fff;
  font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  box-shadow:0 10px 24px rgba(90,47,168,.3);}
.success-title{font-size:20px;font-weight:800;margin-bottom:20px;letter-spacing:-.01em;}
.email-preview{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;text-align:left;}
.email-preview-head{background:var(--indigo);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;padding:9px 14px;}
.email-preview-body{padding:16px;font-size:13px;line-height:1.6;max-height:340px;overflow-y:auto;
  white-space:pre-wrap;color:var(--ink);}
.success-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.success-actions button{flex:1;min-width:110px;}
.link-btn{background:none;border:none;color:var(--violet);font-weight:700;font-size:13.5px;
  margin-top:18px;cursor:pointer;}

button.whatsapp-btn{background:#25d366;color:#fff;border:none;border-radius:100px;
  padding:13px 14px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(37,211,102,.3);}
button.whatsapp-btn:hover{background:#1fb955;}

/* ===== BUSCADOR (Pacientes / Agenda) ===== */
.search-box{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);
  border-radius:100px;padding:10px 16px;margin-bottom:16px;background:#fff;}
.search-box .search-ic{font-size:14px;opacity:.6;}
.search-box input{border:none;outline:none;flex:1;font-size:14px;font-family:inherit;color:var(--ink);background:none;}
.search-box input::placeholder{color:var(--muted);}

/* ===== AGENDA ===== */
.agenda-group{margin-bottom:18px;}
.agenda-date{font-size:12.5px;font-weight:800;color:var(--violet);text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:8px;}
.agenda-item{display:flex;justify-content:space-between;align-items:center;border:1.5px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:.15s;}
.agenda-item:hover{background:var(--bg);border-color:var(--violet);}
.agenda-item b{font-size:14px;}
.agenda-item .muted-sm{margin-top:2px;}
.agenda-today{background:#fdeef4;border-color:var(--magenta);}
.today-badge{background:var(--grad-2);color:#fff;font-size:10px;font-weight:700;border-radius:100px;
  padding:3px 9px;}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(22,11,74,.55);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:16px;}
.modal-card{background:#fff;border-radius:24px;max-width:480px;width:100%;max-height:85vh;
  overflow-y:auto;padding:24px;position:relative;}
.modal-close{position:absolute;top:14px;right:14px;border:none;background:var(--bg);
  width:30px;height:30px;border-radius:100px;cursor:pointer;font-size:14px;color:var(--indigo);}
.modal-card h3{margin:0 0 4px;font-size:19px;letter-spacing:-.01em;}
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);
  font-size:13.5px;gap:12px;}
.detail-row b{color:var(--muted);font-weight:600;white-space:nowrap;}
.detail-row span{text-align:right;}
.detail-resend .success-actions button{min-width:0;font-size:13px;padding:11px 8px;}
button.danger-outline{width:100%;margin-top:10px;background:none;border:1.5px solid #fecaca;
  color:var(--danger);border-radius:100px;padding:11px 14px;font-size:13.5px;font-weight:700;cursor:pointer;}
button.danger-outline:hover{background:#fef2f2;}
button.edit-outline{width:100%;margin-top:10px;background:none;border:1.5px solid var(--border);
  color:var(--violet);border-radius:100px;padding:11px 14px;font-size:13.5px;font-weight:700;cursor:pointer;}
button.edit-outline:hover{background:var(--bg);}

/* ===== EDITAR PACIENTE ===== */
.edit-form label{margin-top:12px;}
.edit-form .grid2{margin-top:0;}
.edit-form .edit-actions{display:flex;gap:10px;margin-top:20px;}
.edit-form .edit-actions button{flex:1;}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--indigo);color:#fff;padding:12px 22px;border-radius:100px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:100;box-shadow:0 10px 30px rgba(22,11,74,.3);}
.toast.show{opacity:1;}

/* ===== USUARIOS (admin) ===== */
.user-add-box{border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:20px;background:var(--bg);}
.user-add-title{font-weight:700;font-size:14px;margin-bottom:4px;}
#usersTableWrap{overflow-x:auto;}
#usersTableWrap table{width:100%;min-width:480px;border-collapse:collapse;font-size:13px;}
#usersTableWrap th,#usersTableWrap td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
#usersTableWrap th{color:var(--muted);font-size:11px;text-transform:uppercase;}
.rol-badge{padding:4px 11px;border-radius:100px;font-size:11px;font-weight:700;}
.rol-Usuario{background:#e3ecff;color:var(--violet);}
.rol-Médico{background:#e3ecff;color:var(--violet);}
.rol-Enfermera{background:#e3ecff;color:var(--violet);}
.rol-Administrador{background:#fff0dd;color:var(--orange);}
.row-actions{display:flex;gap:6px;}
.row-actions button{border:1.5px solid var(--border);background:#fff;border-radius:8px;
  padding:5px 9px;font-size:11.5px;cursor:pointer;color:var(--ink);}
.row-actions button:hover{background:var(--bg);}
.row-actions button.danger{color:var(--danger);border-color:#fecaca;}

/* Arrastrar y soltar para reordenar (panel Preguntas del paciente) */
tr.drag-row{cursor:grab;}
tr.drag-row.dragging{opacity:.4;background:var(--bg);}
tr.drag-row.drag-locked{cursor:default;opacity:.7;}
.drag-handle{color:var(--muted);font-size:16px;cursor:grab;width:24px;text-align:center;user-select:none;}
tr.drag-row.drag-locked .drag-handle{cursor:default;}

/* Panel pacientes */
#adminTableWrap{overflow-x:auto;}
#adminView table{width:100%;min-width:420px;border-collapse:collapse;font-size:13px;margin-top:16px;}
#adminView th,#adminView td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
#adminView th{color:var(--muted);font-size:11px;text-transform:uppercase;}
#adminView tbody tr{cursor:pointer;}
#adminView tbody tr:hover{background:var(--bg);}
.badge{background:#dff8f6;color:#0d9d95;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;}
.empty{color:var(--muted);text-align:center;padding:40px 0;font-size:14px;}
#cfgBanner{display:none;background:#fff0dd;color:#8a5400;font-size:12px;padding:10px 24px;}

@media print{
  #cfgBanner,.mainnav,header,.actions,.success-actions,.link-btn{display:none !important;}
  body{background:#fff;}
  /* El recuadro de vista previa del correo tiene una altura fija con scroll
     para que quepa en pantalla — pero al imprimir eso recorta el texto que
     no entraba en esa cajita (por eso el PDF salía incompleto). Al imprimir,
     quitamos ese límite para que se vea el plan de tratamiento completo,
     pasando a una página siguiente si hace falta: */
  .email-preview{overflow:visible !important;}
  .email-preview-body{max-height:none !important;overflow:visible !important;
    max-width:100%;}
  /* Reimpresión de un paciente desde Agenda/Pacientes: solo el modal de detalle. */
  body.printing-detail > *:not(#detailModal){display:none !important;}
  body.printing-detail #detailModal{position:static;background:none;padding:0;display:block !important;}
  body.printing-detail .modal-card{max-width:none;max-height:none;box-shadow:none;overflow:visible;}
  body.printing-detail .modal-close,
  body.printing-detail .detail-resend{display:none !important;}
}