/* Identidade visual da Evoluccionare (evoluccionare.com.br): roxo #550570, laranja #ff6a00, Outfit nos títulos,
   Inter no texto, botões em pílula, cartões brancos sobre cinza claro. */
:root {
  --background: 0 0% 100%;
  --foreground: 285 91% 23%;
  --card: 0 0% 100%;
  --primary: 25 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 92%;
  --muted: 0 0% 96%;
  --muted-foreground: 285 30% 35%;
  --accent: 285 91% 23%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 45%;
  --border: 0 0% 88%;
  --input: 0 0% 58%;            /* borda de campo e interruptor: 3:1 sobre o branco (WCAG 1.4.11) */
  --ring: 25 100% 46%;
  --radius: 0.75rem;
  --yellow-500: 234 179 8;
  --yellow-600: 161 98 7;
  --sombra: 0 6px 24px -10px hsl(285 91% 23% / 0.12);
  --sombra-laranja: 0 18px 40px -12px hsl(25 100% 50% / 0.4);
  /* Claro: o cinza das seções claras do site, com o logo roxo */
  --fundo: hsl(0 0% 96%);
  --logo-claro: block; --logo-escuro: none; --ico-lua: block; --ico-sol: none;
}
/* Escuro: o roxo do topo do site em tudo, com cartões no roxo dos cartões das seções roxas dele (--purple-card) */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --background: 285 80% 17%;
  --foreground: 0 0% 100%;
  --card: 285 55% 28%;
  --secondary: 285 45% 38%;
  --muted: 285 70% 20%;
  --muted-foreground: 285 35% 85%;
  --accent: 0 0% 100%;
  --accent-foreground: 285 91% 23%;
  --destructive: 0 95% 82%;
  --ring: 25 100% 50%;
  --border: 285 40% 40%;
  --input: 285 35% 60%;
  --sombra: 0 14px 40px -16px hsl(0 0% 0% / 0.45);
  /* A abertura do site na tela inteira: roxo com o brilho laranja atrás do logo e um roxo mais claro embaixo, a um
     terço da largura (lá, dois círculos desfocados; aqui, gradientes radiais com o mesmo centro e a mesma força) */
  --fundo: radial-gradient(circle 400px at 100px 100px, hsl(25 100% 50% / 0.15) 45%, transparent) fixed,
    radial-gradient(circle 330px at calc(100% / 3 + 210px) calc(100% - 210px), hsl(285 50% 45% / 0.2) 45%, transparent) fixed,
    hsl(285 91% 23%);
  --logo-claro: none; --logo-escuro: block; --ico-lua: none; --ico-sol: block;
}

*, *::before, *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  color: hsl(var(--foreground));
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'rlig' 1, 'calt' 1;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: Outfit, Inter, system-ui, sans-serif; }
/* Texto corrido justificado, com hifenização (celulares a têm para o português: menos buracos entre as palavras).
   O que é centralizado (enunciado, dicas, avisos curtos) continua centralizado. */
p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
p.center, .center p, .caixa--q p { text-align: center; text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; }
/* Rótulos e textos curtos em coluna estreita, ao lado de um ícone: justificados, abririam buracos entre as palavras */
.dim-id p, .rec p, .perg p, .confirma p { text-align: left; }
.ref { text-align: left; overflow-wrap: anywhere; } /* referências: alinhadas à esquerda (ABNT), DOI longo quebra no celular */
@media (max-width: 559px) { .linha p { text-align: left; } }
button, input, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Sem barra no topo: o fundo ocupa a tela inteira. O logo fica no canto superior esquerdo da página, numa camada abaixo
   do conteúdo, e o botão de tema fica fixo no canto inferior esquerdo, os dois na borda da tela, não na coluna do texto */
.topo img { position: absolute; z-index: 1; top: 1.5rem; left: 1.5rem; height: 2.75rem; width: auto; } /* na margem: não cobre o conteúdo */
/* O logo é link para o site (nova aba); o contorno do teclado vai na imagem, porque o link em si não tem tamanho */
.logo:focus-visible { outline: none; }
.logo:focus-visible img { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; border-radius: 0.5rem; }
.logo-claro { display: var(--logo-claro); }
.logo-escuro { display: var(--logo-escuro); }
.tema {
  position: fixed; z-index: 10; left: 1.5rem; bottom: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
  border-radius: 9999px; border: 1px solid currentColor; background: transparent; color: hsl(var(--foreground)); transition: background-color 0.15s;
}
.tema:hover { background: hsl(var(--primary) / 0.15); }
.tema svg { width: 1.125rem; height: 1.125rem; }
.ico-lua { display: var(--ico-lua); }
.ico-sol { display: var(--ico-sol); }

/* Página */
.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.page--top { display: block; padding: 2rem 1rem; }
/* Tela sem margem ao lado do conteúdo para o logo (celular, tablet; no editor, mais largo, até 94rem): o conteúdo
   começa abaixo dele. No celular e no tablet ele fica na tela e, ao rolar (tema.js marca .rolou), encolhe numa
   bolinha colada à borda, como o botão de tema, que é menor: as opções e o Voltar começam depois da margem do cartão,
   então nenhum dos dois fica na frente deles. */
@media (max-width: 74.99rem) {
  .page { padding-block: 4.5rem; }
  .topo img {
    position: fixed; z-index: 10; top: 0.5rem; left: 0.5rem; padding: 0.5rem; border-radius: 1rem;
    box-sizing: content-box; transform-origin: top left; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
  }
  /* Rolado: só o símbolo (a parte esquerda da imagem), numa bolinha; o nome e a frase ficariam ilegíveis encolhidos */
  /* Do tamanho do botão de tema e na mesma faixa da borda: não cobre o texto, que começa depois da margem do cartão */
  .rolou .topo img { top: 0.25rem; left: 0.25rem; padding: 0.25rem; width: 2.75rem; object-fit: cover; object-position: left center; border-radius: 9999px; transform: scale(0.6); background: hsl(var(--background)); box-shadow: var(--sombra); }
  .tema { left: 0.375rem; bottom: 1rem; width: 2rem; height: 2rem; background: hsl(var(--card)); box-shadow: 0 0 0 3px hsl(var(--background) / 0.7), var(--sombra); }
}
@media (max-width: 93.99rem) {
  body:has(.ed, .tabela) .page { padding-block: 4.5rem; }
}
.wrap { width: 100%; max-width: 44rem; margin: 0 auto; animation: slide-up 0.5s ease-out forwards; }
.wrap--sm { max-width: 36rem; }
.stack > * + * { margin-top: 1.5rem; }
.stack--4 > * + * { margin-top: 1rem; }
.center { text-align: center; }
.muted { color: hsl(var(--muted-foreground)); }
.sm { font-size: 0.875rem; line-height: 1.25rem; }
.xs { font-size: 0.8125rem; line-height: 1.125rem; }
.h1 { font-size: 2rem; line-height: 1.15; font-weight: 300; letter-spacing: -0.02em; }

/* Cabeçalho das telas: o selo à esquerda e o título logo na frente */
.cabeca { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.cabeca .selo { flex: none; margin: 0; }
.cabeca > h1, .cabeca > h3 { text-align: left; }

/* Selo com gradiente (os quadrados laranja dos ícones do site) */
.selo { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, hsl(25 100% 50%), hsl(25 100% 60%)); box-shadow: var(--sombra-laranja); }
.selo--intro { width: 3.5rem; height: 3.5rem; border-radius: 1rem; margin-bottom: 1rem; }
.selo--intro svg { width: 1.75rem; height: 1.75rem; }
.selo--res { width: 4rem; height: 4rem; border-radius: 1rem; margin-bottom: 1rem; }
.selo--res svg { width: 2rem; height: 2rem; }
.selo--q { width: 3rem; height: 3rem; border-radius: 0.75rem; margin: 0 auto 0.75rem; }
.selo--q svg { width: 1.5rem; height: 1.5rem; }

/* Card */
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1.5rem; box-shadow: var(--sombra); }
.card--tint { background: hsl(var(--primary) / 0.05); }
.card-h { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem; }
.card-c { padding: 0 1.5rem 1.5rem; }
.card-t { font-family: Outfit, Inter, system-ui, sans-serif; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; font-size: 1.25rem; }
.card-t--xl { font-size: 1.5rem; line-height: 2rem; }
.card-d { font-size: 0.875rem; line-height: 1.625; color: hsl(var(--muted-foreground)); }

.caixa { padding: 1rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); line-height: 1.625; }
.caixa--q { min-height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; }
@media (max-width: 559px) { .caixa { padding-inline: 0.75rem; } } /* no celular, linha mais larga para o texto justificado */

/* Formulário */
.campo > * + * { margin-top: 0.5rem; }
.label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1; }
.input {
  display: flex; height: 2.5rem; width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem;
  border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); background: hsl(var(--background));
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
#nome:not(:placeholder-shown) { text-transform: capitalize; } /* máscara: "joão da silva" aparece "João Da Silva" */
.input:focus-visible, .btn:focus-visible, .opcao-in:focus-visible + .opcao, .check:focus-visible, .tema:focus-visible {
  outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}
.erro { font-size: 0.875rem; color: hsl(var(--destructive)); text-align: left; }

.consent { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; background: hsl(var(--primary) / 0.05); border: 1px solid hsl(var(--primary) / 0.2); border-radius: var(--radius); }
.consent-lista > * + * { margin-top: 0.5rem; }
.consent label { font-size: 0.875rem; line-height: 1.625; cursor: pointer; }
.check {
  appearance: none; flex-shrink: 0; width: 1rem; height: 1rem; margin: 0.2rem 0 0; cursor: pointer;
  border: 1px solid hsl(var(--primary)); border-radius: calc(var(--radius) - 4px);
}
.check:checked {
  background: hsl(var(--primary)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; cursor: pointer;
  height: 2.5rem; padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.025em;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: hsl(var(--primary) / 0.9); box-shadow: var(--sombra-laranja); }
a.btn { text-decoration: none; }
.btn:disabled { pointer-events: none; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); } /* cinza da tela, não laranja apagado */
[data-tema="escuro"] .btn:disabled:not(.btn--outline) { background: hsl(0 0% 100% / 0.08); color: hsl(0 0% 100% / 0.45); }
.btn--outline:disabled { background: transparent; opacity: 0.5; }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn--outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--foreground) / 0.35); }
.btn--outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); box-shadow: none; }
.btn--lg { height: 3rem; padding: 0 2rem; font-size: 1rem; }
.btn--sm { height: 2rem; padding: 0 0.875rem; font-size: 0.8125rem; }
.btn--full { width: 100%; }
.nav { display: flex; gap: 0.75rem; padding-top: 1rem; }
.nav .btn { flex: 1; }

/* Progresso */
.prog-top { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.barra { position: relative; height: 0.5rem; width: 100%; overflow: hidden; border-radius: 9999px; background: hsl(var(--secondary)); }
.barra > i { display: block; height: 100%; background: hsl(var(--primary)); transition: width 0.3s; }
.prog-pct { margin-top: 0.25rem; text-align: right; }
/* Etapas: uma bolinha por parte, ligadas por traços que enchem conforme se avança */
.etapas { display: flex; align-items: center; }
.etapa {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; transition: all 0.3s;
  color: hsl(var(--muted-foreground)); background: hsl(var(--background)); border: 2px solid hsl(var(--secondary));
}
.etapa--ok { color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.etapa--atual { box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2); }
.etapa-liga { flex: 1; height: 0.25rem; margin: 0 0.25rem; overflow: hidden; border-radius: 9999px; background: hsl(var(--secondary)); }
.etapa-liga > i { display: block; height: 100%; background: hsl(var(--primary)); transition: width 0.3s; }

/* Opções: lista de cartões, número e texto lado a lado. Duas opções (Sim/Não) ficam lado a lado a partir de 560px. A
   escala e as opções curtas viram, a partir do tablet, uma linha de cartões com o número em cima. */
.opcoes { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .opcoes--par { grid-template-columns: 1fr 1fr; }
  .opcoes--par .opcao { justify-content: center; text-align: center; }
}
@media (min-width: 768px) { .opcoes--escala:not(.opcoes--par) { grid-template-columns: repeat(var(--cols, 5), 1fr); } }
.opcao {
  display: flex; flex-direction: row; align-items: center; gap: 0.75rem; width: 100%; height: 100%; padding: 0.75rem 1rem; cursor: pointer;
  border: 2px solid hsl(var(--border)); border-radius: var(--radius); transition: all 0.15s;
}
/* Na linha de cartões, o número fica no topo e o texto centrado numa faixa de duas linhas: os números se alinham */
@media (min-width: 768px) {
  .opcoes--escala:not(.opcoes--par) .opcao { flex-direction: column; justify-content: flex-start; gap: 0.375rem; padding: 1rem 0.25rem; text-align: center; }
  .opcoes--escala:not(.opcoes--par) .opcao-l { min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
}
.opcao:hover { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--muted) / 0.5); }
.opcao-in:checked + .opcao { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); }
[data-tema="escuro"] .opcao-in:checked + .opcao { background: hsl(var(--primary) / 0.2); }
.opcao-n { font-size: 1rem; line-height: 1.25rem; font-weight: 600; min-width: 1.25rem; text-align: center; color: hsl(var(--muted-foreground)); } /* número discreto: a informação é o texto */
.opcao-in:checked + .opcao .opcao-n { color: hsl(var(--foreground)); font-weight: 700; }
.opcao-l { font-size: 1rem; line-height: 1.3; hyphens: auto; text-wrap: pretty; }
@media (min-width: 768px) { .opcoes--escala:not(.opcoes--par) .opcao-l { font-size: 0.875rem; } }

/* Resultado */
.anel { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; margin-bottom: 1rem; }
.anel svg { width: 8rem; height: 8rem; transform: rotate(-90deg); }
.anel circle { fill: none; stroke: currentColor; stroke-width: 12; }
.anel .fundo { color: hsl(var(--secondary)); }
.anel .frente { color: hsl(var(--primary)); transition: stroke-dasharray 1s; }
.anel-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anel-n { font-family: Outfit, Inter, system-ui, sans-serif; font-size: 2rem; line-height: 2.25rem; font-weight: 600; }

.badge { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid hsl(var(--border)); padding: 0.125rem 0.625rem; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; }
.badge--fill { border-color: transparent; background: hsl(var(--secondary)); font-size: 0.875rem; line-height: 1.25rem; padding: 0.25rem 1rem; }
.f-Crítico { color: rgb(185 28 28); }
.f-Regular { color: rgb(154 52 18); }
.f-Bom { color: rgb(22 101 52); }
.f-Excelente { color: rgb(20 83 45); }
/* No escuro, os tons claros das mesmas cores: os escuros somem no roxo */
[data-tema="escuro"] .f-Crítico { color: rgb(254 202 202); }
[data-tema="escuro"] .f-Regular { color: rgb(253 186 116); }
[data-tema="escuro"] .f-Bom { color: rgb(134 239 172); }
[data-tema="escuro"] .f-Excelente, [data-tema="escuro"] .status--ok { color: rgb(74 222 128); }
[data-tema="escuro"] .prio--media, [data-tema="escuro"] .rec--media .rec-ico { color: rgb(250 204 21); }
[data-tema="escuro"] .toast--erro { background: hsl(0 72% 42%); border-color: hsl(0 72% 42%); }
[data-tema="escuro"] .b-Crítico { background: rgb(248 113 113); }
[data-tema="escuro"] .b-Excelente { background: rgb(22 163 74); }

.dim > * + * { margin-top: 0.5rem; }
.dim-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* Resultado: sem espaço ao lado do nome (celular), a nota desce para a linha de baixo, à direita */
.dim-top:has(.dim-id) { flex-wrap: wrap; }
.dim-top > :last-child { margin-left: auto; }
.dim-id { display: flex; align-items: center; gap: 0.5rem; }
.ico-box { display: inline-flex; padding: 0.5rem; border-radius: var(--radius); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.ico-box svg { width: 1.25rem; height: 1.25rem; }
.ico-box--lg { padding: 0.75rem; border-radius: 0.75rem; }
.ico-box--lg svg { width: 1.5rem; height: 1.5rem; }
.dim-n { font-family: Outfit, Inter, system-ui, sans-serif; font-size: 1.25rem; font-weight: 600; margin-right: 0.5rem; }
.fw5 { font-weight: 500; }
.linha { display: flex; align-items: flex-start; gap: 1rem; }
.titulo-ico { display: flex; align-items: center; gap: 0.5rem; }
.titulo-ico svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); }

.prio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; }
.prio svg { width: 1rem; height: 1rem; }
.prio--alta { color: hsl(var(--destructive)); }
.prio--media { color: rgb(var(--yellow-600)); }
.rec { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius); border: 1px solid; }
.rec-ico { display: inline-flex; padding: 0.375rem; border-radius: 0.25rem; }
.rec-ico svg { width: 1rem; height: 1rem; }
.rec--alta { background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.2); }
.rec--alta .rec-ico { background: hsl(var(--destructive) / 0.2); color: hsl(var(--destructive)); }
.rec--media { background: rgb(var(--yellow-500) / 0.1); border-color: rgb(var(--yellow-500) / 0.2); }
.rec--media .rec-ico { background: rgb(var(--yellow-500) / 0.2); color: rgb(var(--yellow-600)); }
.lista > * + * { margin-top: 0.75rem; }

.aviso { padding: 1rem; border-radius: var(--radius); border: 1px solid hsl(var(--destructive) / 0.2); background: hsl(var(--destructive) / 0.1); }
.status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; }
.status svg { width: 1rem; height: 1rem; }
.status--ok { color: rgb(21 128 61); }
.status--erro { color: hsl(var(--destructive)); }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; color: inherit; }

/* Painel do admin */
.switch-l { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; cursor: pointer; }
.switch-l > .xs { grid-column: 2; }
.switch {
  appearance: none; grid-row: 1 / span 2; width: 2.75rem; height: 1.5rem; margin: 0; cursor: pointer; position: relative;
  border-radius: 9999px; background: hsl(var(--input)); transition: background-color 0.2s;
}
.switch::before { content: ''; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.2s; }
.switch:checked { background: hsl(var(--primary)); }
.switch:checked::before { transform: translateX(1.25rem); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.dim-top > span:last-child { white-space: nowrap; }
.area { height: auto; min-height: 2.5rem; field-sizing: content; resize: vertical; line-height: 1.5; } /* cresce com o texto */
/* Edição de textos: um cartão por bloco, uma bolha por pergunta; as respostas abrem ao lado dela (no celular, embaixo) */
.wrap:has(.ed, .tabela) { max-width: 64rem; } /* editor e lista de respostas: telas largas */
.ed { padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--muted) / 0.6); }
.ed:has([aria-invalid="true"]) { border-color: hsl(var(--destructive)); }
@media (min-width: 768px) { .ed { display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem; align-items: start; } }
@media (max-width: 767px) { .ed > details { margin-top: 0.75rem; } }
.ed summary { cursor: pointer; line-height: 1; }
.ed-op { display: grid; grid-template-columns: 1.25rem 1fr; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.input[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
/* Ações no fim da página, sem barra: salvar, voltar e restaurar (a confirmação abre para cima) */
.acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; }
.confirma { position: relative; }
.confirma > summary, .excluir > summary { list-style: none; }
.confirma > summary::-webkit-details-marker, .excluir > summary::-webkit-details-marker { display: none; }
/* Respostas linha a linha: no celular a tabela rola de lado dentro do cartão; "Excluir" abre a confirmação na própria linha */
.rolagem { position: relative; overflow-x: auto; } /* relative: o texto só para leitor de tela (sr-only) fica dentro da rolagem */
.tabela { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.875rem; text-align: left; }
.tabela th { padding: 0.5rem; font-weight: 600; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); }
.tabela td { padding: 0.625rem 0.5rem; vertical-align: top; overflow-wrap: break-word; border-bottom: 1px solid hsl(var(--border)); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td:last-child { width: 11rem; }
.tabela--auditoria { min-width: 48rem; }
.tabela--auditoria td:nth-child(4) { width: 40%; }
.nome-pessoa { text-transform: capitalize; }
.quando { white-space: nowrap; }
.excluir > form > * { margin-top: 0.5rem; text-align: left; }
.btn--perigo { background: hsl(var(--destructive)); color: hsl(var(--background)); }
.btn--perigo:hover { background: hsl(var(--destructive) / 0.9); box-shadow: none; }
.confirma > form { position: absolute; bottom: calc(100% + 0.5rem); left: 0; width: 16rem; padding: 0.75rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; box-shadow: var(--sombra); }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.dias { display: flex; align-items: flex-end; gap: 3px; height: 4rem; }
.dias > i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: hsl(var(--primary)); }
.perg + .perg { padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
.pilha { display: flex; height: 0.75rem; overflow: hidden; border-radius: 9999px; background: hsl(var(--secondary)); margin-top: 0.375rem; }
.pilha > i { display: block; height: 100%; }
.legenda { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; }
.legenda i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 9999px; margin-right: 0.375rem; }
.b-Crítico { background: rgb(239 68 68); }
.b-Regular { background: rgb(249 115 22); }
.b-Bom { background: rgb(34 197 94); }
.b-Excelente { background: rgb(21 128 61); }

/* Toast */
.toast {
  position: fixed; right: 1rem; bottom: 1rem; max-width: 24rem; padding: 1.5rem; z-index: 50;
  border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--border)); background: hsl(var(--background));
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: slide-up 0.3s ease-out;
}
.toast--erro { background: hsl(var(--destructive)); color: #fff; border-color: hsl(var(--destructive)); }

@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Relatório em PDF (impressão do navegador): o resultado, com cores e logo, sem botões nem escolhas */
.so-imprime { display: none; }
@media print {
  .so-imprime { display: block; }
  .nao-imprime, .tema, #toast, .status, #refazer { display: none !important; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page { min-height: 0; padding: 4.5rem 0 0; }
  .wrap { animation: none; }
  .topo img { position: absolute !important; top: 0 !important; left: 0 !important; width: auto !important; transform: none !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
  .card { box-shadow: none; break-inside: avoid; }
}