/* Prontuário IA — mobile-first */

:root {
  --verde: #0f6e5c;
  --verde-escuro: #0a4d40;
  --fundo: #f2f5f4;
  --card: #ffffff;
  --texto: #1c2b28;
  --borda: #d5dedb;
  --alerta-fundo: #fff7dc;
  --alerta-borda: #e6c94c;
  --erro: #b3362b;
  --raio: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  padding-bottom: 40px;
}

.topbar {
  background: var(--verde);
  color: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 14px;
}
.topbar h1 { margin: 0; font-size: 1.25rem; }

.screen {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hidden { display: none !important; }

.card {
  background: var(--card);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card h2 { margin: 0 0 12px; font-size: 1rem; color: var(--verde-escuro); }
.card h2 small, .field span small { font-weight: 400; color: #6b7c78; font-size: 0.78rem; }

.card-warning {
  background: var(--alerta-fundo);
  border: 1.5px solid var(--alerta-borda);
}
.card-warning h2 { color: #7a6412; }

.row { display: flex; gap: 10px; }
.grow { flex: 1; }
.w-idade { width: 84px; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > span { font-size: 0.85rem; font-weight: 600; }

input[type='text'], input[type='tel'], textarea {
  font: inherit;
  padding: 12px;
  border: 1.5px solid #d5dedb;
  border-radius: 10px;
  background: #fbfdfc;
  width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
textarea { resize: vertical; line-height: 1.45; }

#out-prontuario {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86rem;
  text-transform: uppercase;
}

.sexo-toggle { display: flex; gap: 6px; }
.sexo-toggle label { position: relative; }
.sexo-toggle input { position: absolute; opacity: 0; }
.sexo-toggle span {
  display: inline-block;
  padding: 11px 18px;
  border: 1.5px solid #d5dedb;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.sexo-toggle input:checked + span {
  background: var(--verde);
  color: #fff;
  border-color: var(--verde);
}

.vitals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.vital { display: flex; flex-direction: column; gap: 4px; }
.vital span { font-size: 0.75rem; font-weight: 700; text-align: center; }
.vital input { padding: 10px 6px; text-align: center; font-size: 0.9rem; }

.btn-mic {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--verde);
  border: none;
  border-radius: var(--raio);
  margin-bottom: 12px;
  cursor: pointer;
}
.btn-mic.recording { background: var(--erro); animation: pulse 1.4s infinite; }
.btn-mic:disabled { opacity: 0.55; }
.mic-timer { font-variant-numeric: tabular-nums; opacity: 0.85; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 54, 43, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(179, 54, 43, 0); }
}

.btn-primary, .btn-secondary, .btn-ghost {
  font: inherit;
  font-weight: 700;
  padding: 16px;
  border-radius: var(--raio);
  border: none;
  cursor: pointer;
}
.btn-primary { background: var(--verde); color: #fff; font-size: 1.05rem; }
.btn-primary:disabled { opacity: 0.55; }
.btn-secondary { background: var(--verde-escuro); color: #fff; }
.btn-ghost { background: transparent; color: var(--verde-escuro); border: 1.5px solid var(--verde); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions .btn-primary { grid-column: 1 / -1; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-alert {
  background: #fff;
  border: 1.5px solid var(--alerta-borda);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #7a6412;
}

.disclaimer { font-size: 0.75rem; color: #6b7c78; text-align: center; margin: 4px 8px; }

.audio-debug {
  display: block;
  font-size: 0.78rem;
  color: #6b7c78;
  text-decoration: underline;
  margin: -4px 0 10px;
}

.busy {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(242, 245, 244, 0.88);
  font-weight: 700;
  z-index: 20;
}
.busy.visible { display: flex; }
.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #cfe0db;
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  background: var(--verde-escuro);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  max-width: 90vw;
  text-align: center;
  transition: transform 0.25s ease;
  z-index: 30;
}
.toast.visible { transform: translateX(-50%) translateY(0); }
.toast-error { background: var(--erro); }

@media (min-width: 480px) {
  .topbar h1 { text-align: center; }
}

#scores-modal.hidden { display: none; }
#scores-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
#scores-modal .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
#scores-modal .modal-card { position: relative; background: var(--fundo, #fff); max-width: 480px; width: 92%;
  max-height: 88vh; overflow-y: auto; border-radius: 14px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
#scores-modal .modal-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 20px; cursor: pointer; }
.score-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.score-item { text-align: left; padding: 14px 16px; border: 1px solid var(--borda, #d5dedb); border-radius: 10px;
  background: var(--fundo, #fff); font-size: 16px; cursor: pointer; }
.score-item:active { background: #eef4f2; }
.score-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.score-check input { width: 22px; height: 22px; margin-top: 2px; }
.score-field { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.score-field select, .score-field input { padding: 10px; font-size: 16px; border: 1px solid var(--borda, #d5dedb); border-radius: 8px; }
.score-result { margin: 14px 0; padding: 12px; background: #eef4f2; border-radius: 10px; }
.score-result strong { font-size: 20px; }
.score-actions { display: flex; gap: 10px; margin-top: 8px; }
.btn-escore { margin-top: 10px; width: 100%; padding: 12px; border: 1px dashed var(--borda, #d5dedb);
  border-radius: 10px; background: none; font-size: 15px; cursor: pointer; }