:root{
  --paper:#F6F4EE;
  --card:#FFFFFF;
  --ink:#16302B;
  --ink-soft:#3E5852;
  --muted:#77796F;
  --line:#E3DFD1;
  --brass:#A6813C;
  --brass-deep:#8A6A2E;
  --brass-soft:#F1E6CC;
  --danger:#A6432F;
  --shadow: 0 1px 2px rgba(22,48,43,0.07), 0 10px 28px rgba(22,48,43,0.08);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; padding-bottom:calc(84px + var(--safe-bottom));
}
h1,h2,h3{font-family:'Source Serif 4', Georgia, serif; margin:0; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}

header.top{
  padding:calc(16px + var(--safe-top)) 18px 16px;
  background:linear-gradient(180deg, #1B3833 0%, var(--ink) 100%);
  color:var(--paper); position:sticky; top:0; z-index:20;
  border-bottom:1px solid rgba(166,129,60,0.55);
  box-shadow:0 2px 0 rgba(0,0,0,0.08);
}
header.top .row-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
header.top h1{ font-size:20px; color:#fff; font-weight:600; letter-spacing:-0.01em; }
header.top .sub{ font-size:12px; color:#A9C0B8; margin-top:4px; letter-spacing:0.01em; }
.drive-status{ font-size:11px; padding:6px 11px; border-radius:20px; background:rgba(255,255,255,0.1); color:#EDEAE0; border:1px solid rgba(255,255,255,0.14); font-weight:600; cursor:pointer; white-space:nowrap; }
.drive-status.connected{ background:var(--brass); color:#20180a; border-color:transparent; }
.logout-link{ background:none; border:none; color:#A9C0B8; font-size:10.5px; text-decoration:underline; cursor:pointer; padding:6px 2px 0; }
.logout-link:hover{ color:#fff; }

nav.tabs{ display:flex; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:19; }
nav.tabs button{ flex:1; padding:13px 8px 11px; border:none; background:transparent; font-size:12.5px; font-weight:600; letter-spacing:0.02em; color:var(--muted); border-bottom:2.5px solid transparent; cursor:pointer; transition:color .15s; }
nav.tabs button.active{ color:var(--ink); border-bottom-color:var(--brass); }

main{ padding:16px; max-width:640px; margin:0 auto; }
.view{ display:none; }
.view.active{ display:block; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:14px; box-shadow:var(--shadow); }
label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin:12px 0 5px; text-transform:uppercase; letter-spacing:0.04em; }
label:first-child{ margin-top:0; }
textarea, input[type=text], input[type=date], input[type=time], select{
  width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:7px;
  font-family:'IBM Plex Sans'; font-size:14.5px; color:var(--ink); background:#FCFBF8; resize:vertical;
}
textarea:focus, input:focus, select:focus{ outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass); }
textarea#dictado{ min-height:130px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:13px 16px; border-radius:9px; border:none; font-weight:600; font-size:14px; cursor:pointer; width:100%; margin-top:10px; transition:transform .08s, opacity .15s; }
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:disabled{ opacity:0.5; }
.btn-outline-small{ width:auto; padding:9px 13px; font-size:12.5px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); }
.btn-outline-small:active{ background:var(--paper); }
.btn-danger-outline{ color:var(--danger); border-color:var(--danger); }
.btn-danger-outline:hover{ background:#FBE9E5; }
.btn-ai{ background:#2B4A6F; color:#fff; }

.row{ display:flex; gap:8px; }
.row .btn{ margin-top:0; }
.hint{ font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5; }
.badge{ display:inline-block; font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; background:var(--brass-soft); color:#5C4519; padding:4px 9px; border-radius:20px; }

.patient-item{ display:flex; justify-content:space-between; align-items:center; padding:13px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.patient-item:last-child{ border-bottom:none; }
.patient-item .name{ font-weight:600; font-size:15px; }
.patient-item .meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.mini-trash{ background:none; border:none; font-size:15px; padding:4px; cursor:pointer; opacity:0.55; border-radius:6px; }
.mini-trash:hover{ opacity:1; background:#FBE9E5; }
.empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.empty h3{ color:var(--ink-soft); font-size:16px; margin-bottom:6px; }

.format-tabs{ display:flex; gap:7px; overflow-x:auto; padding:2px 2px 6px; margin-bottom:10px; -webkit-overflow-scrolling:touch; }
.format-tabs button{ flex:none; padding:9px 15px; border-radius:20px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s, border-color .15s; }
.format-tabs button.active{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 2px 8px rgba(22,48,43,0.25); }

.doc-paper{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--brass); border-radius:4px 4px 10px 10px; padding:22px 18px; white-space:pre-wrap; font-size:13.5px; line-height:1.7; color:#2A2E2B; font-family:'IBM Plex Sans'; }
@keyframes flashConfirm{
  0%{ background:var(--brass-soft); }
  100%{ background:#fff; }
}
.flash-confirm{ animation: flashConfirm 0.7s ease-out; }
.backlink{ background:none; border:none; color:var(--ink-soft); font-weight:600; font-size:13px; padding:0 0 12px; cursor:pointer; }
.loading{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); padding:8px 0; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--brass); animation:pulse 1s infinite ease-in-out; }
.dot:nth-child(2){ animation-delay:0.15s; } .dot:nth-child(3){ animation-delay:0.3s; }
@keyframes pulse{ 0%,80%,100%{opacity:0.25;} 40%{opacity:1;} }
.msg{ font-size:13px; padding:9px 11px; border-radius:7px; margin-top:10px; }
.msg.ok{ background:#E8F0EA; color:#2A5D42; }
.msg.err{ background:#FBE9E5; color:#8A3A28; }

.aviso-faltantes{ font-size:12.5px; padding:9px 11px; border-radius:7px; background:var(--brass-soft); color:#6B4E13; border:1px solid var(--brass); line-height:1.5; }
.campo-obligatorio-faltante{ border-color:var(--danger) !important; background:#FBE9E5 !important; }
.campo-sugerido-faltante{ border-color:var(--brass) !important; background:var(--brass-soft) !important; }
.section-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin:0 0 10px; }
.session-tab-strip{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.stamp{ font-family:'IBM Plex Mono'; font-size:11px; font-weight:600; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); padding:6px 10px 6px 8px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; }
.cita-icon-btn{ background:var(--brass-soft); border:none; border-radius:50%; width:18px; height:18px; font-size:10.5px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; margin-left:2px; }
.cita-icon-btn:hover{ background:var(--brass); }
.cita-info-panel{ margin-top:10px; background:var(--brass-soft); border-left:3px solid var(--brass); border-radius:0 8px 8px 0; padding:10px 14px; font-size:13px; color:#5C4519; font-weight:600; }
.stamp::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--brass); flex-shrink:0; }
.stamp-clickable{ cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.stamp-clickable:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.stamp-clickable:hover::before{ background:var(--brass); }

.gate{ padding:60px 24px; text-align:center; }
.gate h2{ font-size:20px; margin-bottom:10px; }
.gate p{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px; }
.gate button{ padding:13px 22px; }

/* ============================================================
   ESCENARIO DE DICTADO — pantalla de bienvenida a cada sesión
   ============================================================ */
.dictate-card{ text-align:center; padding-top:26px; }
.dictate-eyebrow{ font-family:'IBM Plex Mono'; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass-deep); margin:0 0 6px; }
.dictate-title{ font-size:22px; color:var(--ink); margin:0 0 22px; line-height:1.3; }

.mic-stage{ display:flex; flex-direction:column; align-items:center; margin-bottom:22px; }
.mic-fab{
  position:relative; width:96px; height:96px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 32% 28%, #C8A362, var(--brass) 70%);
  box-shadow:0 10px 24px rgba(166,129,60,0.35), inset 0 -4px 10px rgba(0,0,0,0.12);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s;
}
.mic-fab:active{ transform:scale(0.95); }
.mic-fab-icon{ font-size:36px; position:relative; z-index:2; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
.mic-fab-ring{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--brass);
  opacity:0; pointer-events:none;
}
.mic-fab.recording{ background:radial-gradient(circle at 32% 28%, #C96A55, var(--danger) 70%); box-shadow:0 10px 24px rgba(166,67,47,0.4), inset 0 -4px 10px rgba(0,0,0,0.15); }
.mic-fab.recording .mic-fab-ring{ border-color:var(--danger); animation:micPulse 1.8s ease-out infinite; }
.mic-fab.recording .mic-fab-ring-2{ animation-delay:0.6s; }
@keyframes micPulse{
  0%{ transform:scale(1); opacity:0.55; }
  100%{ transform:scale(1.7); opacity:0; }
}
.mic-fab-disabled{ opacity:0.45; cursor:not-allowed; }
.mic-status{ font-size:12.5px; color:var(--muted); margin:14px 0 0; min-height:18px; max-width:260px; line-height:1.5; }

.dictate-card textarea#dictado{
  background:var(--paper); border:1px dashed var(--line); font-size:13.5px; color:var(--ink-soft);
  min-height:110px; text-align:left;
}
.dictate-card textarea#dictado:focus{ background:#fff; }
.dictate-card .hint{ text-align:left; }