:root{
  --primary:#0e7490;
  --primary-dark:#134e5e;
  --accent:#06b6d4;
  --accent-2:#22d3ee;
  --bg:#f0f5f7;
  --card:#ffffff;
  --border:#dbe6ea;
  --text:#0f2733;
  --text-muted:#5b7480;
  --success:#15803d; --success-bg:rgba(21,128,61,.1);
  --warning:#b45309; --warning-bg:rgba(180,83,9,.1);
  --danger:#b91c1c; --danger-bg:rgba(185,28,28,.08);
  /* Degradado azul → turquesa → verde, el mismo del ícono de Vitalis —
     se reutiliza en los elementos circulares/de marca (avatar, botón de
     grabar, spinner) para que se sientan parte del mismo ícono. */
  --gradient-vitalis: linear-gradient(135deg, #1a4f7a 0%, var(--primary) 50%, var(--success) 100%);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;}
.header{background:var(--card);padding:16px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;}
.header .brand{display:flex;align-items:center;gap:10px;}
.header .logo{width:36px;height:36px;object-fit:contain;}
.header h1{font-size:18px;color:var(--primary);}
.header p{font-size:12px;color:var(--text-muted);margin-top:2px;}
.header button{background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:8px;padding:6px 12px;font-size:12px;}
.wrap{max-width:480px;width:100%;margin:0 auto;padding:16px;flex:1;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:14px;box-shadow:0 1px 3px rgba(15,39,51,.05);}
label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;margin-top:14px;}
label:first-child{margin-top:0;}
input,select,textarea{width:100%;background:#f7fafb;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:11px;font-size:14px;font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);}
textarea{resize:vertical;}
button{font-family:inherit;}
button.primary{width:100%;background:var(--gradient-vitalis);color:#fff;border:none;border-radius:8px;padding:13px;font-size:15px;font-weight:600;margin-top:18px;transition:transform .1s ease,opacity .15s ease;}
button.primary:disabled{opacity:.5;}
button.primary:active:not(:disabled){transform:scale(.98);}
button.secondary{width:100%;background:#e6f3f6;border:1px solid var(--border);color:var(--primary);border-radius:8px;padding:12px;font-size:14px;margin-top:10px;font-weight:600;transition:transform .1s ease;}
button.secondary:active{transform:scale(.98);}
button.link{background:none;border:none;color:var(--primary);font-size:13px;margin-top:16px;width:100%;text-align:center;}
.error{background:var(--danger-bg);border:1px solid rgba(185,28,28,.25);color:var(--danger);border-radius:8px;padding:10px 12px;font-size:13px;margin-top:14px;}
.hint{font-size:12px;color:var(--text-muted);margin-top:8px;}
.item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(15,39,51,.05);cursor:pointer;}
.item .top{display:flex;justify-content:space-between;align-items:center;}
.item .nombre{font-size:15px;font-weight:600;}
.item .fecha{font-size:11px;color:var(--text-muted);margin-top:4px;}
.item .preview{font-size:12px;color:var(--text-muted);margin-top:6px;}
.badge{font-size:11px;padding:3px 9px;border-radius:12px;white-space:nowrap;font-weight:600;}
.badge-procesando{background:var(--warning-bg);color:var(--warning);}
.badge-completado{background:var(--success-bg);color:var(--success);}
.badge-error{background:var(--danger-bg);color:var(--danger);}
.empty{color:var(--text-muted);text-align:center;padding:50px 20px;font-size:13px;}
.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;color:var(--text-muted);font-size:13px;}
.spinner{width:38px;height:38px;border-radius:50%;background:conic-gradient(from 0deg,#1a4f7a,var(--primary),var(--success),var(--primary),#1a4f7a);animation:girar .9s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));}
@keyframes girar{to{transform:rotate(360deg);}}
.file-label{display:block;text-align:center;border:1px dashed var(--border);border-radius:8px;padding:14px;font-size:13px;color:var(--text-muted);margin-top:10px;cursor:pointer;}
.segmento{border-radius:12px;padding:10px 14px;margin-bottom:10px;max-width:88%;}
.segmento.h0{background:#e6f3f6;margin-right:auto;}
.segmento.h1{background:#eef2e6;margin-left:auto;}
.segmento .quien{font-size:11px;color:var(--text-muted);margin-bottom:4px;font-weight:600;}
.segmento .texto{font-size:14px;line-height:1.4;}
.back{background:none;border:none;color:var(--primary);font-size:13px;margin-bottom:14px;font-weight:600;}
.tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:16px;overflow-x:auto;}
.tab{flex:0 0 auto;background:none;border:none;padding:10px 14px;font-size:13px;font-weight:600;color:var(--text-muted);border-radius:7px;white-space:nowrap;transition:background .15s ease;}
.tab.activo{background:var(--gradient-vitalis);color:#fff;}
.seccion-titulo{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.4px;margin:20px 0 8px;}
.nota-titulo{font-size:13px;font-weight:700;color:var(--primary);margin-bottom:10px;}
.nota-campo{font-size:13px;line-height:1.5;margin-bottom:8px;}
.nota-campo b{color:var(--text);}
.paciente-info{font-size:13px;color:var(--text-muted);margin-top:4px;line-height:1.5;}
.avatar-card{text-align:center;}
.avatar{width:60px;height:60px;border-radius:50%;background:var(--gradient-vitalis);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 3px 10px rgba(14,116,144,.25);}
.stats-row{display:flex;gap:10px;margin-bottom:14px;}
.stat{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 8px;text-align:center;box-shadow:0 1px 3px rgba(15,39,51,.05);}
.stat-num{font-size:18px;font-weight:700;color:var(--primary);}
.stat-lbl{font-size:11px;color:var(--text-muted);margin-top:2px;}
.dato-row{font-size:14px;padding:9px 0;border-bottom:1px solid var(--border);}
.dato-row:last-child{border-bottom:none;}
.brief-card{background:linear-gradient(135deg,#e6f7fa,#f0f9fa);border:1px solid var(--accent-2);}
.brief-alerta{color:var(--danger);}

/* ─── Panel "escuchando" con onda de voz, estilo asistente clínico ────── */
.listen-panel{display:none;background:linear-gradient(160deg,var(--primary-dark),#0a2e38);border-radius:16px;padding:22px 18px;text-align:center;color:#fff;margin-bottom:16px;}
.listen-panel canvas{width:100%;height:70px;display:block;}
.listen-time{font-size:26px;font-family:ui-monospace,monospace;margin-top:6px;letter-spacing:1px;}
.listen-label{font-size:12px;opacity:.75;margin-top:2px;letter-spacing:.4px;}
.live-caption{font-size:14px;line-height:1.5;color:#fff;opacity:.92;margin-top:14px;text-align:left;min-height:20px;max-height:120px;overflow-y:auto;}
.rec-box{text-align:center;padding:6px 0;}
.rec-btn{width:80px;height:80px;border-radius:50%;border:none;background:var(--gradient-vitalis);color:#fff;font-size:28px;margin:6px auto;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(14,116,144,.35);transition:transform .15s ease;}
.rec-btn:active{transform:scale(.94);}
.rec-btn.recording{background:var(--danger);animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(185,28,28,.45);}70%{box-shadow:0 0 0 16px rgba(185,28,28,0);}100%{box-shadow:0 0 0 0 rgba(185,28,28,0);}}
.rec-status{font-size:13px;color:var(--text-muted);margin-top:8px;}

.footer{text-align:center;font-size:11px;color:var(--text-muted);padding:18px 16px 22px;}

/* ─── Transición de entrada: cada vez que se pinta una pantalla nueva
   (app.innerHTML = ...), estos son los bloques que se crean de cero, así
   que la animación se dispara sola en cada cambio de pantalla — sin tocar
   el JS de cada vista. ───────────────────────────────────────────────── */
@keyframes entrar{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.card,.item,.loading,.stat,.avatar-card,.empty,.error{animation:entrar .35s ease both;}

/* ─── Evolución clínica: chips de tipo + gráfico de tendencia ──────────── */
.chip-row{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px;}
.chip{flex:0 0 auto;background:var(--card);border:1px solid var(--border);color:var(--text-muted);border-radius:16px;padding:7px 14px;font-size:12px;font-weight:600;white-space:nowrap;}
.chip.activo{background:var(--primary);border-color:var(--primary);color:#fff;}
.chart-legend{display:flex;gap:14px;font-size:11px;color:var(--text-muted);margin-top:8px;}
.chart-legend span{display:inline-flex;align-items:center;gap:5px;}
.chart-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* ─── Memoria Clínica Conversacional: chat de preguntas sobre el paciente ── */
#memoriaChat{max-height:260px;overflow-y:auto;margin-bottom:12px;}
.memoria-pregunta{font-size:13px;font-weight:600;margin-top:12px;}
.memoria-respuesta{font-size:13px;color:var(--text-muted);line-height:1.5;margin-top:4px;padding-left:10px;border-left:2px solid var(--accent-2);}
.mic-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--primary);font-size:17px;display:flex;align-items:center;justify-content:center;}
.mic-btn:disabled{opacity:.4;}
.mic-btn.escuchando{background:var(--danger);border-color:var(--danger);color:#fff;animation:pulse 1.6s infinite;}

/* ─── Receta Digital ─────────────────────────────────────────────────── */
.rec-row{border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:10px;}
.rec-row .quitar-fila{background:none;border:none;color:var(--danger);font-size:12px;font-weight:600;margin-top:8px;}

@media print{
  .no-imprimir{display:none !important;}
  body{background:#fff;}
  .wrap{padding:0;max-width:100%;}
  #recetaHoja{box-shadow:none;border:none;padding:0 !important;}
}