/* ============================================================
   TELEMEDICINA — Kiosko Médico
   CSS pixel-exact, vanilla, responsive (min 1024x768)
   Colores exactos del diseño:
     #000000 - fondo negro panel derecho superior
     #00BCD4 - Cyan / botón Yes
     #FF9800 - Naranja / botón No
     #4CAF50 - Verde / signos vitales / activo
     #FFEB3B - Amarillo / alerta alergia
     #E0E0E0 - Gris claro / panel izquierdo
     #FFFFFF - Blanco / panel inferior
   ============================================================ */

/* ----------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  background: #111;
  color: #fff;
  min-width: 1024px;
  min-height: 768px;
}

/* ----------------------------------------------------------
   ROOT LAYOUT
   ---------------------------------------------------------- */
#kiosk-root {
  display: flex;
  width: 100%;
  height: 100vh;
}

/* ----------------------------------------------------------
   LEFT PANEL (~25%) — #E0E0E0 background
   ---------------------------------------------------------- */
#left-panel {
  width: 25%;
  min-width: 280px;
  max-width: 340px;
  background: #E0E0E0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  gap: 12px;
  color: #333;
  font-size: 12px;
  border-right: 2px solid #bbb;
}

/* Logo / Avatar */
#logo-area {
  display:flex; flex-direction:column; align-items:center; gap:4px; width:100%;
  justify-content:center; padding:10px 0 4px;
}
#assistant-avatar-wrap { position:relative; width:84px; height:84px; }
.doctor-avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:2px solid #00BCD4; box-shadow:0 0 20px rgba(0,188,212,.35); display:block; animation:float 4s ease-in-out infinite; }
.assistant-mouth { position:absolute; z-index:4; left:50%; bottom:32px; width:17px; height:4px; transform:translateX(-50%); background:#7b3038; box-shadow:0 0 3px rgba(255,255,255,.45); border-radius:0 0 12px 12px; opacity:.94; pointer-events:none; }
.assistant-mouth.talking { animation:assistantTalk 170ms ease-in-out infinite alternate; }
.assistant-presence { position:absolute; inset:-5px; border:1px solid rgba(0,188,212,.55); border-radius:50%; box-shadow:0 0 13px rgba(0,188,212,.45); pointer-events:none; animation:presencePulse 2s ease-in-out infinite; }
.assistant-presence.paused { border-color:#aaa; box-shadow:none; animation:none; opacity:.45; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes assistantTalk { 0%{height:3px;width:15px} 100%{height:11px;width:20px;border-radius:40% 40% 55% 55%} }
@keyframes presencePulse { 0%,100%{opacity:.45} 50%{opacity:1} }
.logo-text { font-weight:700; font-size:16px; color:#222; }
.logo-sub { font-size:10px; color:#666; }

#voice-controls { display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 6px; justify-content:center; }
.voice-btn { padding:4px 10px; border-radius:14px; border:1px solid #aaa; background:#fff; color:#333; cursor:pointer; font-size:11px; }
.voice-btn.active { background:#00BCD4; border-color:#00BCD4; color:#fff; }
.voice-btn:hover { opacity:.85; }
.logo-icon {
  font-size: 32px;
  color: #1565C0;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #1565C0;
  letter-spacing: 0.5px;
}

/* Video container */
#video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #555;
  border: 3px solid #888;
  border-radius: 4px;
  overflow: hidden;
}

#doctor-video {
  width: 100%;
  height: 100%;
  background: #0a1a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.video-expand{position:absolute;z-index:8;top:9px;right:9px;width:36px;height:36px;border:1px solid rgba(255,255,255,.65);border-radius:9px;background:rgba(0,0,0,.68);color:#fff;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.video-expand:hover{background:var(--cyan);color:#001f3f}
.video-placeholder {
  text-align: center;
  color: #aaa;
}

.video-placeholder-icon {
  font-size: 48px;
  margin-bottom: 4px;
}

.video-placeholder span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* PIP del paciente (abajo-derecha) */
#pip-patient {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 35%;
  aspect-ratio: 4 / 3;
  background: #444;
  border: 2px solid #00BCD4;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pip-placeholder {
  font-size: 10px;
  color: #00BCD4;
  text-align: center;
}

/* Volume controls */
#video-actions { display:grid; grid-template-columns:1fr; gap:8px; margin:10px 0 12px; }
#video-actions .voice-btn { width:100%; justify-content:center; }
.video-gate-status { font-size:11px; line-height:1.35; border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:8px 10px; color:#dff7ff; background:rgba(0,188,212,.08); }
.video-gate-status[data-tone='working'] { border-color: rgba(255,193,7,.5); color:#ffe29a; background: rgba(255,193,7,.12); animation: gatePulse var(--gate-pulse-duration, 1.6s) ease-in-out infinite; }
.video-gate-status[data-tone='ok'] { border-color: rgba(76,175,80,.5); color:#b8f5c5; background: rgba(76,175,80,.14); }
.video-gate-status[data-tone='error'] { border-color: rgba(244,67,54,.55); color:#000; background: rgba(255,190,190,.85); }
@keyframes gatePulse {
  0%, 100% { opacity: 1; transform: translateZ(0); }
  50% { opacity: .58; transform: translateZ(0); }
}
.video-gate-status[data-night='1'][data-tone='working'] { border-color: rgba(255,193,7,.32); color:#f2d89a; background: rgba(255,193,7,.07); }
.top-video-gate-status[data-night='1'][data-tone='working'] { border-color: rgba(255,193,7,.34); color:#f2d89a; background: rgba(255,193,7,.08); }

#volume-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.vol-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.vol-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #555;
  flex-shrink: 0;
  min-width: 100px;
}

.vol-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #4CAF50;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #4CAF50;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}

.vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #4CAF50;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}

.vol-status {
  font-size: 9px;
  color: #4CAF50;
  text-align: center;
  font-weight: 600;
  padding-top: 2px;
}

/* Steps area */
#steps-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

#step-indicator, #bottom-step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: #ccc;
  color: #888;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}

.step-dot.done {
  background: #4CAF50;
  color: #fff;
}

.step-dot.active {
  background: #00BCD4;
  color: #fff;
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
}

.step-line {
  width: 40px;
  height: 3px;
  background: #ccc;
  flex-shrink: 0;
}

.step-line.done {
  background: #4CAF50;
}

.step-line.active {
  background: #00BCD4;
}

#next-step-btn {
  padding: 10px 28px;
  background: #00BCD4;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.2s;
}

#next-step-btn:hover {
  background: #0097A7;
}

#next-step-btn:disabled {
  background: #999;
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   RIGHT PANEL (~75%)
   ---------------------------------------------------------- */
#right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ----------------------------------------------------------
   RIGHT TOP (black background, ~60%)
   ---------------------------------------------------------- */
#right-top {
  flex: 6;
  background: #000;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  overflow: hidden;
}

/* Top bar */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #333;
}

#start-over-btn {
  background: none;
  color: #aaa;
  border: 1px solid #555;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: color 0.2s, border-color 0.2s;
}

#start-over-btn:hover {
  color: #fff;
  border-color: #fff;
}

/* Language toggle */
#lang-toggle {
  display: flex;
  gap: 0;
}

.lang-btn {
  padding: 5px 16px;
  border: 1px solid #555;
  background: transparent;
  color: #aaa;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.lang-btn:first-child { border-radius: 4px 0 0 4px; }
.lang-btn:last-child { border-radius: 0 4px 4px 0; }

.lang-btn.active {
  background: #4CAF50;
  color: #fff;
  border-color: #4CAF50;
}

.lang-btn:hover:not(.active) {
  border-color: #888;
  color: #ddd;
}

/* Turn off button */
#turn-off-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  color: #aaa;
  border: 1px solid #555;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
}

.turn-off-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  flex-shrink: 0;
}

/* Patient info bar */
#patient-info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  background: #111;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 11px;
  flex-wrap: wrap;
  border-bottom: 1px solid #222;
}

#patient-info-bar strong {
  color: #4CAF50;
}

.info-sep {
  color: #444;
}

#timer-badge {
  margin-left: auto;
  background: #D32F2F;
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.top-video-gate-status {
  margin-left: 10px;
  font-size: 11px;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 3px 10px;
  color: #dff7ff;
  background: rgba(0,188,212,.08);
  white-space: nowrap;
}
.top-video-gate-status[data-tone='working'] { border-color: rgba(255,193,7,.55); color:#ffe29a; background: rgba(255,193,7,.14); animation: gatePulse var(--gate-pulse-duration, 1.6s) ease-in-out infinite; }
.top-video-gate-status[data-tone='ok'] { border-color: rgba(76,175,80,.6); color:#b8f5c5; background: rgba(76,175,80,.18); }
.top-video-gate-status[data-tone='error'] { border-color: rgba(244,67,54,.6); color:#000; background: rgba(255,190,190,.9); }

#timer-display {
  font-variant-numeric: tabular-nums;
  font-family: 'Courier New', monospace;
}

/* Chat médico */
#chat-area { flex:1; display:flex; flex-direction:column; min-height:0; }
#chat-messages { flex:1; overflow-y:auto; padding:12px 0; display:flex; flex-direction:column; gap:10px; min-height:120px; max-height:250px; }
.chat-msg { display:flex; gap:8px; align-items:flex-start; }
.chat-msg.user { flex-direction:row-reverse; }
.chat-msg.user .chat-text { background:var(--cyan); color:#000; }
.chat-msg.assistant .chat-text { background:rgba(255,255,255,.08); color:var(--white); }
.chat-avatar { font-size:22px; min-width:28px; }
.chat-text { padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.45; max-width:85%; }
#chat-input-row { display:flex; gap:6px; padding:8px 0; }
#chat-input { flex:1; padding:10px 14px; border-radius:20px; border:1px solid #aeb5bc; background:#e6e8eb; color:#000; font-size:14px; outline:none; }
#chat-input:focus { background:#f0f1f2; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,188,212,.18); }
#chat-input::placeholder { color:#333; }
#chat-send, #chat-wizard, #chat-voice { padding:8px 12px; border-radius:20px; border:none; cursor:pointer; font-size:14px; background:rgba(255,255,255,.1); color:var(--white); }
.chat-icon-btn{position:relative}
.chat-icon-btn::after{content:attr(title);position:absolute;z-index:50;right:0;bottom:calc(100% + 8px);width:max-content;max-width:190px;padding:7px 9px;border-radius:7px;background:#111;color:#fff;font-size:11px;line-height:1.25;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.chat-icon-btn:hover::after,.chat-icon-btn:focus-visible::after{opacity:1;transform:translateY(0)}
#chat-wizard.active { background:var(--cyan); color:#000; }
.video-popup[hidden]{display:none}.video-popup{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px}.video-popup-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}.video-popup-card{position:relative;z-index:1;width:min(1120px,96vw);max-height:92dvh;background:#061526;border:1px solid rgba(0,188,212,.55);border-radius:16px;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.62)}.video-popup-header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#fff;background:#001f3f}.video-popup-header button{width:38px;height:38px;border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font-size:19px;cursor:pointer}.video-popup-header button:hover{background:#d9534f}.video-popup-stage{display:grid;place-items:center;padding:12px;min-height:min(74dvh,760px)}.video-popup-stage #video-container{width:min(100%,1060px);max-width:none;aspect-ratio:16/9;box-shadow:0 0 0 1px rgba(255,255,255,.12)}.video-popup-stage #doctor-video{border-radius:8px}.video-popup-stage #doctor-video video{width:100%;height:100%;object-fit:cover}.video-popup-stage #pip-patient{z-index:12;top:28px;right:28px;bottom:auto;left:auto;width:24%;height:auto;aspect-ratio:16/9;border:3px solid #00bcd4;border-radius:14px;overflow:hidden;background:#101d2c;box-shadow:0 8px 28px rgba(0,0,0,.55)}.video-popup-stage #pip-patient video{width:100%;height:100%;object-fit:cover;border-radius:11px}
.wa-request-fab{position:fixed;z-index:4900;right:20px;bottom:20px;width:58px;height:58px;border:0;border-radius:50%;background:#25d366;color:#fff;font-size:33px;font-weight:900;cursor:pointer;box-shadow:0 7px 22px rgba(0,0,0,.35)}.wa-request-fab:hover{transform:scale(1.06)}.wa-request-popup[hidden]{display:none}.wa-request-popup{position:fixed;inset:0;z-index:5100;display:grid;place-items:center;padding:18px}.wa-request-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}.wa-request-card{position:relative;z-index:1;width:min(410px,94vw);background:#fff;color:#111;border-radius:18px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.5)}.wa-request-card h2{color:#075e54;margin:0 0 8px}.wa-request-card p{font-size:14px;line-height:1.4}.wa-request-close{position:absolute;top:10px;right:10px;border:0;background:transparent;font-size:20px;cursor:pointer}.wa-request-types{display:grid;gap:9px;margin:18px 0}.wa-request-types button,#wa-submit{border:0;border-radius:10px;padding:12px;background:#075e54;color:#fff;font-weight:700;cursor:pointer;text-align:left}.wa-request-types button:hover,#wa-submit:hover{background:#128c7e}#wa-request-form{display:grid;gap:9px}#wa-request-form input,#wa-request-form textarea{width:100%;padding:11px;border:1px solid #b8c0c6;border-radius:9px;font-size:15px;color:#000;background:#f0f2f3}#wa-request-form textarea{min-height:82px;resize:vertical}#wa-submit{text-align:center;background:#25d366}.wa-request-result{min-height:20px;margin-top:10px;font-weight:700;color:#075e54}

/* Checkup header */
#checkup-header {
  padding: 16px 0 8px;
}

#checkup-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

/* Triage area */
#triage-area {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#triage-question {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

#triage-buttons {
  display: flex;
  gap: 12px;
}

.triage-btn {
  padding: 10px 32px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: filter 0.2s, opacity 0.2s;
}

.triage-btn:hover {
  filter: brightness(1.15);
}

.triage-btn.prev {
  background: #555;
  color: #ccc;
}

.triage-btn.yes {
  background: #00BCD4;
  color: #000;
}

.triage-btn.no {
  background: #FF9800;
  color: #000;
}

/* Vitals panel */
#vitals-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 12px 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  margin-top: auto;
}

.vital-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.vital-label {
  font-size: 10px;
  color: #4CAF50;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vital-value {
  font-size: 16px;
  color: #4CAF50;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

/* Allergy alert */
#allergy-alert {
  color: #FFEB3B;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 0;
  text-shadow: 0 0 6px rgba(255, 235, 59, 0.4);
  letter-spacing: 1px;
}

#allergy-alert strong {
  font-size: 20px;
}

/* ----------------------------------------------------------
   RIGHT BOTTOM (white background, ~40%)
   ---------------------------------------------------------- */
#right-bottom {
  flex: 4;
  background: #FFFFFF;
  color: #222;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  gap: 8px;
}

/* Summary / SOAP notes */
#summary-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#summary-area h3 {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#soap-notes {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #444;
  overflow-y: auto;
  background: #fafafa;
  min-height: 80px;
}

#soap-notes p {
  margin: 4px 0;
}

/* Bottom steps */
#bottom-steps {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

/* Action buttons */
#action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: filter 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.action-btn:hover {
  filter: brightness(1.1);
}

.action-btn.end {
  background: #666;
  color: #fff;
}

.action-btn.ask {
  background: #4CAF50;
  color: #fff;
}

.action-btn.coupon {
  background: #FF9800;
  color: #000;
}

.action-btn.rx {
  background: #FF9800;
  color: #000;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ----------------------------------------------------------
   RESPONSIVE: tablet min 1024x768
   ---------------------------------------------------------- */
@media (max-width: 1100px) {
  #left-panel {
    min-width: 240px;
    max-width: 260px;
    padding: 10px 8px;
    gap: 8px;
  }

  #checkup-title {
    font-size: 22px;
  }

  #triage-question {
    font-size: 16px;
  }

  .triage-btn {
    padding: 8px 24px;
    font-size: 12px;
  }

  .vital-value {
    font-size: 14px;
  }

  #allergy-alert {
    font-size: 15px;
  }

  .action-btn {
    padding: 6px 12px;
    font-size: 10px;
  }
}

@media (max-width: 1024px) {
  #left-panel {
    min-width: 220px;
    max-width: 240px;
  }

  .logo-text {
    font-size: 15px;
  }

  #checkup-title {
    font-size: 20px;
  }

  .vol-label {
    min-width: 80px;
    font-size: 8px;
  }
}

/* ----------------------------------------------------------
   SCROLLBAR STYLING
   ---------------------------------------------------------- */
#soap-notes::-webkit-scrollbar {
  width: 6px;
}
#soap-notes::-webkit-scrollbar-track {
  background: #f0f0f0;
}
#soap-notes::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 3px;
}

/* Avatar 2D reutilizable Triadasana: visemas, estados y presencia. */
.triadasana-avatar-host { width:112px; height:128px; position:relative; }
.ta-avatar { width:112px; height:128px; position:relative; filter:drop-shadow(0 7px 10px rgba(0,65,84,.25)); }
.ta-avatar img { width:112px; height:128px; display:block; animation:taIdle 3.4s ease-in-out infinite; user-select:none; }
.ta-mouth { position:absolute; left:50%; top:84px; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:#22c55e; z-index:3; opacity:.45; box-shadow:0 0 5px rgba(34,197,94,.55); }
.ta-avatar[data-state="speaking"] .ta-mouth { animation:taVoiceIndicator .5s ease-in-out infinite alternate; }
@keyframes taVoiceIndicator { from { opacity:.35; transform:translateX(-50%) scale(.78); box-shadow:0 0 3px rgba(34,197,94,.45); } to { opacity:1; transform:translateX(-50%) scale(1.25); box-shadow:0 0 15px rgba(34,197,94,1); } }
.ta-pulse { position:absolute; inset:3px; border:2px solid rgba(0,188,212,.72); border-radius:36px; animation:taPulse 2s ease-in-out infinite; pointer-events:none; }
.ta-status { position:absolute; width:150px; left:50%; transform:translateX(-50%); bottom:-17px; text-align:center; font-size:10px; font-weight:700; color:#256274; }
.ta-avatar[data-state="listening"] .ta-pulse { border-color:#58bce7; animation-duration:.75s; }
.ta-avatar[data-state="thinking"] .ta-pulse { border-style:dashed; animation:taSpin 1.1s linear infinite; }
.ta-avatar[data-state="speaking"] .ta-pulse { border-color:#00aebf; box-shadow:0 0 16px rgba(0,188,212,.55); }
.ta-avatar[data-state="paused"] { filter:grayscale(.75); opacity:.65; }
.ta-avatar[data-state="paused"] .ta-pulse { animation:none; border-color:#8c9596; }
.ta-avatar[data-state="alert"] .ta-pulse { border-color:#e94a46; animation-duration:.55s; }
@keyframes taIdle { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }
@keyframes taPulse { 0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)} }
@keyframes taSpin { to { transform:rotate(360deg) } }

/* iPhone / pantallas táctiles: diseño vertical y desplazamiento seguro. */
@media (max-width: 767px) {
  html, body { min-width:0; min-height:0; height:auto; overflow-x:hidden; overflow-y:auto; font-size:15px; background:#111; -webkit-text-size-adjust:100%; }
  #kiosk-root { min-height:100dvh; height:auto; display:block; }
  #left-panel { width:100%; min-width:0; max-width:none; border-right:0; border-bottom:1px solid #b7b7b7; padding:calc(10px + env(safe-area-inset-top)) 12px 12px; gap:9px; display:grid; grid-template-columns:108px 1fr; align-items:center; }
  #logo-area { grid-row:span 2; padding:0; }
  .triadasana-avatar-host, .ta-avatar, .ta-avatar img { width:92px; height:106px; }
  .ta-mouth { top:65px; }
  .ta-status { font-size:9px; bottom:-13px; }
  #voice-controls { justify-content:flex-start; padding:0; gap:5px; }
  .voice-btn { min-height:36px; padding:6px 9px; font-size:11px; }
  #video-container { grid-column:2; grid-row:2; max-width:260px; width:100%; justify-self:start; aspect-ratio:16/9; }
  #volume-controls, #steps-area { display:none; }
  #right-panel { min-width:0; width:100%; display:block; }
  #right-top { min-height:0; padding:12px 12px 16px; }
  #top-bar { gap:7px; flex-wrap:wrap; align-items:center; }
  #top-bar > button, .lang-btn { min-height:36px; font-size:11px; }
  #patient-info-bar { gap:5px; line-height:1.35; flex-wrap:wrap; font-size:11px; }
  #info-datetime, .info-sep { display:none; }
  #top-video-gate-status { flex: 1 1 100%; margin-left:0; text-align:center; }
  #chat-area { min-height:230px; max-height:38dvh; }
  #chat-messages { padding:10px; }
  #chat-input-row { gap:6px; }
  #chat-input { min-width:0; min-height:44px; font-size:16px; }
  #chat-send, #chat-wizard, #chat-voice { min-width:44px; min-height:44px; font-size:17px; }
  #triage-area { padding:12px 0; }
  #triage-question { font-size:18px; line-height:1.35; }
  #triage-buttons { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  #btn-prev { grid-column:1 / -1; }
  .triage-btn { min-height:48px; padding:10px; font-size:15px; }
  #vitals-panel { grid-template-columns:repeat(3, 1fr); gap:6px; }
  .vital-item { min-width:0; padding:7px 4px; }
  #allergy-alert { font-size:14px; line-height:1.35; }
  #right-bottom { padding:14px 12px calc(18px + env(safe-area-inset-bottom)); }
  #summary-area { min-height:0; }
  #soap-notes { min-height:96px; max-height:28dvh; font-size:13px; }
  #bottom-steps { display:none; }
  #action-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .action-btn { min-height:46px; white-space:normal; padding:8px; font-size:11px; }
}
@media (max-width: 380px) {
  #left-panel { grid-template-columns:94px 1fr; padding-left:8px; padding-right:8px; }
  .triadasana-avatar-host, .ta-avatar, .ta-avatar img { width:82px; height:96px; }
  .ta-mouth { top:59px; }
  .voice-btn { padding:5px 7px; font-size:10px; }
  #video-container { max-width:210px; }
  #top-bar { justify-content:space-between; }
  #lang-toggle { display:flex; }
  .lang-btn { padding:6px 8px; }
}