:root {
  /* Institucional — azul-marinho do painel admin (Sorriso-MT) */
  --color-primary: #0e2a49;
  --color-on-primary: #ffffff;
  --color-primary-container: #e9eef3;
  --color-on-primary-container: #0e2a49;
  --color-secondary: #37474f;
  --color-surface: #ffffff;
  --color-bg: #f6f9fc;
  --color-text: #182738;
  --color-muted: #4b5c6e;
  --color-border: #e5e7eb;
  --color-outline: #757575;
  --color-focus: #0e2a49;
  --color-error: #c62828;
  --color-error-bg: #ffebee;
  --color-error-contrast: #ffffff;
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-warning: #bf360c;
  --color-warning-bg: #fff3e0;
  --color-info-bg: #e9eef3;
  --color-selected-bg: #e9eef3;
  --color-on-selected: #0e2a49;
  /* compat: o cabeçalho usa o "contraste" do primário */
  --color-primary-contrast: var(--color-on-primary);

  /* Foco (≥ 3:1 sobre a superfície) */
  --focus-ring-width: 2px;
  --focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 var(--focus-ring-outer, 5px) var(--color-focus);

  /* Tipografia por papel (TextRole), escalada por --text-scale */
  --text-scale: 1;
  --font-size-title: calc(1.375rem * var(--text-scale));
  --font-size-section: calc(1.125rem * var(--text-scale));
  --font-size-question: calc(1.25rem * var(--text-scale));
  --font-size-option: calc(1.125rem * var(--text-scale));
  --font-size-label: calc(1rem * var(--text-scale));
  --font-size-help: calc(1rem * var(--text-scale));
  --font-size-body: calc(1rem * var(--text-scale));
  --font-size-caption: calc(0.8125rem * var(--text-scale));

  /* Controles: 48/56/64 dp (≈ px na web) */
  --control-min-height: 3rem;
  --control-touch: 3rem;

  /* Escala de notas 1–5 (mesma rampa do mobile) */
  --rating-1-bg: #b71c1c; --rating-1-soft: #fbe3e3; --rating-1-border: #efa9a9; --rating-1-text: #8e1414;
  --rating-2-bg: #e65100; --rating-2-soft: #fdeadb; --rating-2-border: #f4b98a; --rating-2-text: #a63e00;
  --rating-3-bg: #a67c00; --rating-3-soft: #fff4d1; --rating-3-border: #e8ce6e; --rating-3-text: #7a5f00;
  --rating-4-bg: #7cb342; --rating-4-soft: #edf4e2; --rating-4-border: #bdd69a; --rating-4-text: #4e7a27;
  --rating-5-bg: #1b5e20; --rating-5-soft: #dff0e3; --rating-5-border: #9cc9a8; --rating-5-text: #0e4d1c;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --radius: 0.5rem;
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Texto: 3 camadas (Padrão/Grande/Extra grande) */
[data-text-size="large"] { --text-scale: 1.15; }
[data-text-size="extra_large"] { --text-scale: 1.3; }

/* Controles: 48/56/64 dp */
[data-control-size="large"] { --control-min-height: 3.5rem; --control-touch: 3.5rem; }
[data-control-size="extra_large"] { --control-min-height: 4rem; --control-touch: 4rem; }

/* Alto contraste: superfícies opacas, texto/bordas preto, foco azul escuro */
[data-contrast="high"] {
  --color-primary: #0b3d91;
  --color-on-primary: #ffffff;
  --color-primary-container: #ffffff;
  --color-on-primary-container: #000000;
  --color-surface: #ffffff;
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-muted: #1f1f1f;
  --color-border: #000000;
  --color-outline: #000000;
  --color-focus: #0b3d91;
  --color-error: #b00020;
  --color-error-bg: #ffffff;
  --color-success: #000000;
  --color-success-bg: #ffffff;
  --color-warning: #000000;
  --color-warning-bg: #ffffff;
  --color-selected-bg: #0b3d91;
  --color-on-selected: #ffffff;
  --focus-ring-outer: 6px;
}

/* Daltonismo: eixos seguros + reforço por forma (a seleção usa o primário) */
[data-color-vision="deuteranopia"],
[data-color-vision="protanopia"],
[data-color-vision="tritanopia"] {
  --color-selected-bg: var(--color-primary);
  --color-on-selected: #ffffff;
  --focus-ring-outer: 6px;
}

[data-color-vision="deuteranopia"] {
  --color-primary: #1a237e; --color-focus: #1a237e; --color-error: #8e0000;
  --color-success: #00695c; --color-warning: #6a1b9a; --color-border: #263238; --color-outline: #263238;
}

[data-color-vision="protanopia"] {
  --color-primary: #0d47a1; --color-focus: #0d47a1; --color-error: #8e0000;
  --color-success: #006064; --color-warning: #4e342e; --color-border: #212121; --color-outline: #212121;
}

[data-color-vision="tritanopia"] {
  --color-primary: #ad1457; --color-focus: #ad1457; --color-error: #b71c1c;
  --color-success: #1b5e20; --color-warning: #bf360c; --color-border: #212121; --color-outline: #212121;
}

/* Redução de movimento por preferência (além do sistema) */
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

* { box-sizing: border-box; }

/* `hidden` vence qualquer `display` de componente (modo simplificado). */
[hidden] { display: none !important; }

/* Foco programático (títulos com tabindex=-1) não desenha contorno azul. */
[tabindex="-1"]:focus { outline: none; }

/* Rolagem sem barra visível (a rolagem continua funcionando). */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-2);
}

.skip-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-header, .app-footer {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-3);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  max-width: 48rem;
  margin: 0 auto;
}

/* Header enxuto: Padrão/Totem e Acessibilidade dividem o espaço (50%/50%);
   se não couberem (ex.: 200% em tela estreita), quebram para a linha seguinte
   em vez de cortar o texto. */
.header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.header-controls > * { flex: 1 1 0; min-width: 0; }

/* Palavra única ("Acessibilidade") pode quebrar em telas estreitas com fonte
   grande, em vez de vazar/cortar. */
.header-controls .btn { overflow-wrap: anywhere; }

/* Dropdown do formato (Padrão/Totem): clique abre as opções; sem animação. */
.dropdown { position: relative; display: flex; width: 100%; }

.dropdown-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--control-min-height);
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--color-on-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-label);
  font-weight: 700;
  text-align: center;
  text-align-last: center;
  color-scheme: light;
  cursor: pointer;
}

.dropdown-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.app-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.app-nav a { color: var(--color-primary-contrast); }

.app-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.app-main {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  flex: 1 0 auto;
}

.app-footer {
  margin-top: auto;
  text-align: center;
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--color-surface);
}

.badge {
  border: 1px solid currentcolor;
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
}

.btn {
  font: inherit;
  font-size: var(--font-size-option);
  border-radius: var(--radius);
  border: 2px solid var(--color-primary);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  cursor: pointer;
  min-height: var(--control-min-height);
}

.btn--secondary { background: transparent; color: var(--color-primary); }

.btn--danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-error-contrast);
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn .spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: var(--space-1);
  vertical-align: -0.125em;
}

.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }

.field label { font-weight: 600; font-size: var(--font-size-label); }

.field .hint { color: var(--color-muted); font-size: var(--font-size-help); }

.field .error-text { color: var(--color-error); font-size: var(--font-size-help); }

.field input, .field textarea, .field select {
  font: inherit;
  font-size: var(--font-size-field, var(--font-size-body));
  padding: var(--space-2);
  min-height: var(--control-min-height);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  max-width: 100%;
}

.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--color-error);
}

.fieldset { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); overflow-wrap: anywhere; }

.question-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-question);
  font-weight: 700;
  color: var(--color-text);
}

/* Pergunta obrigatória pendente: contorno vermelho no card e no asterisco. */
.required-mark { color: inherit; }

.fieldset.is-invalid { border: 2px solid var(--color-error); }

.fieldset.is-invalid .required-mark { color: var(--color-error); }

/* Campo de texto longo (textarea) — reutilizável, claro e compatível. */
.field .field-textarea {
  width: 100%;
  min-height: 7rem;
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-field, var(--font-size-body));
  line-height: 1.5;
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
}

.field .field-textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.field .field-textarea::placeholder { color: var(--color-muted); }

/* Respiro entre a pergunta e o controle, e antes das ações. */
.fieldset .btn { margin-top: var(--space-2); }

.form-actions, .quick-form > .btn[type="submit"], .quick-form > .quick-nav { margin-top: var(--space-3); }

/* Notas 1–5 com a rampa de cores do mobile */
.rating-options { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.rating-options--stacked { flex-direction: column; }

.rating-option {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
}

.rating-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.rating-option-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 3rem;
  min-height: calc(var(--control-min-height) * 1.25);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--r-soft, var(--color-surface));
  color: var(--r-text, var(--color-text));
  border: 1px solid var(--r-border, var(--color-border));
  font-weight: 700;
  font-size: calc(var(--font-size-question) * 1.25);
}

.rating-option.is-selected .rating-option-chip {
  background: var(--r-bg);
  color: #ffffff;
  border: 2px solid var(--r-bg);
}

.rating-option:focus-within { outline: none; box-shadow: var(--focus-ring); }

/* "Número + emoji + texto": linha horizontal com chip, emoji, rótulo e check. */
.rating-options--stacked .rating-option {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.rating-options--stacked .rating-option.is-selected { border: 2px solid var(--color-focus); }

.rating-options--stacked .rating-option-chip {
  width: auto;
  min-width: 3.125rem;
  min-height: calc(var(--control-min-height) * 1.25);
}

.rating-option-emoji { font-size: 1.4em; line-height: 1; }

.rating-option-label { flex: 1 1 auto; text-align: left; }

.rating-option-check { width: 1.25rem; text-align: center; opacity: 0; color: var(--color-muted); }

.rating-option.is-selected .rating-option-check { opacity: 1; }

.rating-option-1 { --r-bg: var(--rating-1-bg); --r-soft: var(--rating-1-soft); --r-border: var(--rating-1-border); --r-text: var(--rating-1-text); }

.rating-option-2 { --r-bg: var(--rating-2-bg); --r-soft: var(--rating-2-soft); --r-border: var(--rating-2-border); --r-text: var(--rating-2-text); }

.rating-option-3 { --r-bg: var(--rating-3-bg); --r-soft: var(--rating-3-soft); --r-border: var(--rating-3-border); --r-text: var(--rating-3-text); }

.rating-option-4 { --r-bg: var(--rating-4-bg); --r-soft: var(--rating-4-soft); --r-border: var(--rating-4-border); --r-text: var(--rating-4-text); }

.rating-option-5 { --r-bg: var(--rating-5-bg); --r-soft: var(--rating-5-soft); --r-border: var(--rating-5-border); --r-text: var(--rating-5-text); }

/* Notas 1–5 adaptadas ao perfil de daltonismo (mesmos pares do mobile). O
   número/emoji/rótulo e a marca de seleção reforçam: nunca depende só da cor. */
[data-color-vision="deuteranopia"] {
  --rating-1-bg: #8e0000; --rating-1-soft: #eed9d9; --rating-1-border: #cc8c8c; --rating-1-text: #720000;
  --rating-2-bg: #6a1b9a; --rating-2-soft: #e9ddf0; --rating-2-border: #bc98d2; --rating-2-text: #55167b;
  --rating-3-bg: #3f51b5; --rating-3-soft: #e2e5f4; --rating-3-border: #a9b1de; --rating-3-text: #324191;
  --rating-4-bg: #00695c; --rating-4-soft: #d9e9e7; --rating-4-border: #8cbcb6; --rating-4-text: #00544a;
  --rating-5-bg: #004d40; --rating-5-soft: #d9e4e2; --rating-5-border: #8cafa9; --rating-5-text: #003e33;
}

[data-color-vision="protanopia"] {
  --rating-1-bg: #8e0000; --rating-1-soft: #eed9d9; --rating-1-border: #cc8c8c; --rating-1-text: #720000;
  --rating-2-bg: #4e342e; --rating-2-soft: #e4e1e0; --rating-2-border: #afa4a1; --rating-2-text: #3e2a25;
  --rating-3-bg: #455a64; --rating-3-soft: #e3e6e8; --rating-3-border: #abb5b9; --rating-3-text: #374850;
  --rating-4-bg: #006064; --rating-4-soft: #d9e7e8; --rating-4-border: #8cb7b9; --rating-4-text: #004d50;
  --rating-5-bg: #004d40; --rating-5-soft: #d9e4e2; --rating-5-border: #8cafa9; --rating-5-text: #003e33;
}

[data-color-vision="tritanopia"] {
  --rating-1-bg: #b71c1c; --rating-1-soft: #f4dddd; --rating-1-border: #df9999; --rating-1-text: #921616;
  --rating-2-bg: #bf360c; --rating-2-soft: #f5e1db; --rating-2-border: #e2a592; --rating-2-text: #992b0a;
  --rating-3-bg: #6a1b9a; --rating-3-soft: #e9ddf0; --rating-3-border: #bc98d2; --rating-3-text: #55167b;
  --rating-4-bg: #2e7d32; --rating-4-soft: #e0ece0; --rating-4-border: #a1c5a3; --rating-4-text: #256428;
  --rating-5-bg: #1b5e20; --rating-5-soft: #dde7de; --rating-5-border: #98b79b; --rating-5-text: #164b1a;
}

[data-contrast="high"] .rating-option-chip {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-contrast="high"] .rating-option.is-selected .rating-option-chip {
  background: var(--color-selected-bg);
  color: var(--color-on-selected);
  border-color: var(--color-border);
}

.radio-row, .check-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--control-min-height);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--font-size-option);
}

/* Botão "Ouvir pergunta": largura total, fundo azul claro com ícone. */
.btn--listen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border: 2px solid var(--color-primary);
}

.quick-help { width: 100%; margin-top: var(--space-3); }

/* Logomarca institucional acima do título, alinhada à largura dos campos. */
.quick-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-4);
}

.quick-form > .btn[type="submit"] { width: 100%; }

.char-counter {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-caption);
  color: var(--color-muted);
  text-align: right;
}

input[type="radio"], input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }

.alert { border-radius: var(--radius); padding: var(--space-3); border: 2px solid transparent; }

.alert--info { background: var(--color-info-bg); border-color: var(--color-border); }

.alert--success { background: var(--color-success-bg); border-color: var(--color-success); }

.alert--error { background: var(--color-error-bg); border-color: var(--color-error); }

.loading { display: flex; align-items: center; gap: var(--space-2); }

.empty { text-align: left; }

.network-banner { border-radius: var(--radius); padding: var(--space-2) var(--space-3); background: var(--color-info-bg); border: 2px dashed var(--color-border); }

dialog.app-modal { border: 2px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); max-width: min(28rem,  calc(100vw - 2rem)); }

dialog.app-modal::backdrop { background: rgb(0 0 0 / 0.5); }

.modal-illustration {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  margin: 0 0 var(--space-3);
}

/* Em PC/tablet o modal e o formulário ficam mais largos. */
@media (min-width: 768px) {
  dialog.app-modal { max-width: min(40rem, calc(100vw - 4rem)); }
  .a11y-panel { max-width: min(48rem, calc(100vw - 4rem)); }
  .app-main { max-width: 56rem; }
}

/* Botão fechar (×) do painel de acessibilidade, no topo à direita. */
.a11y-panel { position: relative; }

.a11y-panel-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 2px solid var(--color-error);
  background: var(--color-surface);
  color: var(--color-error);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: var(--radius);
}

.a11y-panel-close:hover { background: var(--color-error-bg); }

/* Painel de acessibilidade (PWA04) */
.header-inner .btn--secondary { color: var(--color-on-primary); border-color: var(--color-on-primary); }

.a11y-panel { max-height: min(90vh, 48rem); overflow: auto; }

.a11y-sections { display: grid; gap: var(--space-3); }

.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }

.gallery { display: grid; gap: var(--space-3); }

.gallery-section { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }

/* Formulário do cidadão (PWA05) */
.quick-nav { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

.quick-nav .btn { flex: 1 1 auto; }

.quick-progress { font-weight: 600; }

.rating-legend {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.rating-legend-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-section);
  font-weight: 700;
  text-align: center;
}

.rating-legend-items { display: flex; justify-content: space-between; gap: var(--space-1); flex-wrap: wrap; }

.rating-legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 0;
  min-width: 3rem;
}

.rating-legend-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--r-bg);
  color: #ffffff;
  font-weight: 700;
}

.rating-legend-label { font-size: var(--font-size-caption); text-align: center; }

.quick-receipt { display: grid; gap: var(--space-2); }

.quick-receipt-protocol { font-weight: 700; }

.quick-receipt-countdown { font-weight: 600; }

/* Totem (PWA07): mais densidade/alcance; um único link serve os dois formatos */
[data-usage-mode="totem"] {
  --control-min-height: 4rem;
  --control-touch: 4rem;
}

[data-usage-mode="totem"] .app-main { max-width: 56rem; }

[data-usage-mode="totem"] .radio-row,
[data-usage-mode="totem"] .check-row { padding: var(--space-2) 0; }

[data-usage-mode="totem"] .quick-nav .btn { font-size: var(--font-size-question); }

@media (max-width: 20rem) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .app-main { padding: var(--space-3) var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn .spinner { border-top-color: currentcolor; }
}