/* Estúdio 24h: estilos do app (mobile first, tema claro e escuro automáticos). */

:root {
  color-scheme: light dark;

  /* Marca */
  --verde: #7FA84B;            /* verde MGBA: fundos e destaques */
  --verde-forte: #4A7320;      /* texto verde sobre fundo claro (contraste AA) */
  --verde-suave: #EEF5E5;
  --verde-borda: #B9D394;
  --sobre-verde: #10200A;      /* texto sobre o verde MGBA (contraste 7:1) */

  /* Base */
  --fundo: #F5F6F2;
  --superficie: #FFFFFF;
  --superficie-2: #ECEFE7;
  --texto: #1A1D17;
  --texto-suave: #575E50;
  --borda: #D9DED2;
  --foco: #2E5A0C;
  --sombra: 0 1px 2px rgba(20, 30, 10, .06), 0 6px 18px rgba(20, 30, 10, .06);

  /* Status */
  --azul: #1F5FBF;
  --azul-suave: #E6EEFB;
  --ambar: #8A5A00;
  --ambar-suave: #FFF3D6;
  --vermelho: #B42318;
  --vermelho-suave: #FDECEA;
  --cinza: #5B6157;
  --cinza-suave: #ECEEE9;

  /* Medidas */
  --raio: 14px;
  --raio-p: 10px;
  --alt-abas: 64px;
  --lateral-e: max(16px, env(safe-area-inset-left));
  --lateral-d: max(16px, env(safe-area-inset-right));
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --verde-forte: #A9D27A;
    --verde-suave: #1B2712;
    --verde-borda: #3F5A22;
    --sobre-verde: #0C1806;

    --fundo: #0F120D;
    --superficie: #171B14;
    --superficie-2: #20261C;
    --texto: #E7EBE2;
    --texto-suave: #A7AFA0;
    --borda: #2E3529;
    --foco: #B9E084;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25);

    --azul: #9CBEF7;
    --azul-suave: #17233A;
    --ambar: #F2C063;
    --ambar-suave: #2E2410;
    --vermelho: #F59A90;
    --vermelho-suave: #3A1714;
    --cinza: #A7AFA0;
    --cinza-suave: #23281F;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fundo);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, video { max-width: 100%; }

a { color: var(--verde-forte); text-underline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pular {
  position: absolute;
  left: var(--lateral-e);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--raio-p);
  background: var(--texto);
  color: var(--fundo);
  font-weight: 600;
}
.pular:focus { top: calc(env(safe-area-inset-top) + 8px); }

.noscript {
  margin: 24px var(--lateral-d) 24px var(--lateral-e);
  padding: 16px;
  border-radius: var(--raio);
  background: var(--vermelho-suave);
  color: var(--vermelho);
}

/* ---------- Topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 6px) var(--lateral-d) 6px var(--lateral-e);
  background: var(--fundo);
  background: color-mix(in srgb, var(--fundo) 90%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--borda);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 750;
  font-size: 18px;
  letter-spacing: -.01em;
}
.marca img { border-radius: 8px; display: block; }

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  touch-action: manipulation;
}
.btn-icone:hover { background: var(--superficie-2); }
.btn-icone.girando svg { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Conteúdo ---------- */

main {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px var(--lateral-d) calc(var(--alt-abas) + env(safe-area-inset-bottom) + 32px) var(--lateral-e);
  outline: none;
}

.titulo-tela {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 4px 0 16px;
  outline: none;
  overflow-wrap: anywhere;
}

.carregando {
  color: var(--texto-suave);
  padding: 40px 0;
  text-align: center;
}

.vazio {
  color: var(--texto-suave);
  margin: 0;
}

.estado-vazio {
  text-align: center;
  padding: 40px 16px;
  border: 1.5px dashed var(--borda);
  border-radius: var(--raio);
  color: var(--texto-suave);
}
.estado-vazio p { margin: 0 0 16px; }

.erro-tela {
  padding: 20px;
  border-radius: var(--raio);
  background: var(--vermelho-suave);
  color: var(--vermelho);
}
.erro-tela h1 { font-size: 20px; margin-bottom: 8px; }
.erro-tela p { margin: 0 0 16px; color: var(--texto); }

/* ---------- Abas (navegação inferior) ---------- */

.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px var(--lateral-d) calc(8px + env(safe-area-inset-bottom)) var(--lateral-e);
  background: var(--superficie);
  border-top: 1px solid var(--borda);
}
.pagina-login .abas { display: none; }

.abas a {
  position: relative;
  flex: 1 1 0;
  max-width: 260px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 12px;
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 650;
  touch-action: manipulation;
}
.abas a:hover { background: var(--superficie-2); }
.abas a[aria-current="page"] {
  color: var(--verde-forte);
  background: var(--verde-suave);
}

.contador {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--sobre-verde);
  font-size: 13px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter .15s, background-color .15s, border-color .15s;
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-primario { background: var(--verde); color: var(--sobre-verde); border-color: var(--verde); }
.btn-primario:not([disabled]):hover { filter: brightness(1.06); }
.btn-primario:not([disabled]):active { filter: brightness(.95); }

.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda); }
.btn-secundario:not([disabled]):hover { background: var(--superficie-2); }

.btn-perigo { background: transparent; color: var(--vermelho); border-color: var(--borda); }
.btn-perigo:not([disabled]):hover { background: var(--vermelho-suave); }

.btn-texto {
  background: transparent;
  border-color: transparent;
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-texto:not([disabled]):hover { color: var(--texto); }

.btn-bloco { width: 100%; }
.btn-grande { min-height: 56px; font-size: 17px; border-radius: 14px; }
.btn-pequeno { min-height: 44px; padding: 8px 14px; font-size: 15px; }

.ico { display: inline-flex; flex: none; }
.ico svg { display: block; }

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.botoes > .btn { flex: 1 1 140px; }

/* ---------- Banner de avisos ---------- */

.banner {
  margin: 0 0 20px;
  padding: 16px;
  border: 1.5px solid var(--verde-borda);
  border-radius: var(--raio);
  background: var(--verde-suave);
}
.banner h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  margin-bottom: 6px;
}
.banner p { margin: 0 0 12px; }
.banner ol { margin: 0 0 12px; padding-left: 22px; }
.banner li { margin-bottom: 4px; }
.banner.banner-alerta { border-color: var(--ambar); background: var(--ambar-suave); }

/* ---------- Fila ---------- */

.grupo { margin: 0 0 24px; }

.grupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  margin: 0 0 10px;
}
.grupo-titulo .qtd {
  min-width: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 13px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0;
}
.grupo-curadoria .grupo-titulo { color: var(--verde-forte); }
.grupo-curadoria .grupo-titulo .qtd { background: var(--verde); color: var(--sobre-verde); }

.cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.cartao {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: border-color .15s, transform .1s;
  touch-action: manipulation;
}
.cartao:hover { border-color: var(--verde-borda); }
.cartao:active { transform: scale(.995); }

.cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.cartao-tempo { color: var(--texto-suave); font-size: 14px; white-space: nowrap; }
.cartao-titulo {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.cartao-meta, .cartao-frase { margin: 0; font-size: 14px; color: var(--texto-suave); }
.cartao-frase { margin-top: 4px; }

.cartao-curadoria {
  border: 2px solid var(--verde);
  background: var(--verde-suave);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 14%, transparent), var(--sombra);
}
.cartao-curadoria .cartao-frase { color: var(--verde-forte); font-weight: 650; }
.cartao-erro { border-left: 5px solid var(--vermelho); }
.cartao-processando { border-left: 5px solid var(--azul); }
.cartao-na_fila { border-left: 5px solid var(--cinza); }
.cartao-recebido { border-style: dashed; }
.cartao-concluido, .cartao-cancelado { box-shadow: none; }

.grupo-fim summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.grupo-fim summary::-webkit-details-marker { display: none; }
.grupo-fim summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
  margin: 0 4px 0 2px;
}
.grupo-fim[open] summary::before { transform: rotate(45deg); }
.grupo-fim .cartoes { margin-top: 6px; }

/* ---------- Selos de status ---------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  line-height: 22px;
  white-space: nowrap;
  background: var(--cinza-suave);
  color: var(--texto);
}
.selo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.selo-curadoria { background: var(--verde); color: var(--sobre-verde); }
.selo-processando { background: var(--azul-suave); color: var(--azul); }
.selo-processando::before { animation: pulsar 1.4s ease-in-out infinite; }
.selo-na_fila { background: var(--cinza-suave); color: var(--texto); }
.selo-erro { background: var(--vermelho-suave); color: var(--vermelho); }
.selo-recebido { background: var(--ambar-suave); color: var(--ambar); }
.selo-concluido { background: var(--verde-suave); color: var(--verde-forte); }
.selo-cancelado { background: var(--cinza-suave); color: var(--cinza); }
@keyframes pulsar { 50% { opacity: .3; } }

/* ---------- Formulários ---------- */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.campo { margin: 0 0 20px; }

.rotulo, legend.rotulo {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  padding: 0;
}

.dica {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--texto-suave);
}

textarea, input[type="text"], input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 16px; /* evita o zoom automático do iPhone */
  line-height: 1.45;
}
textarea { min-height: 120px; resize: vertical; }
textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--verde);
  outline: 3px solid color-mix(in srgb, var(--verde) 35%, transparent);
  outline-offset: 0;
}
textarea:disabled, textarea[readonly] {
  color: var(--texto);
  background: var(--superficie-2);
  opacity: 1;
  -webkit-text-fill-color: var(--texto);
}

.erro-campo {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--raio-p);
  background: var(--vermelho-suave);
  color: var(--vermelho);
  font-weight: 600;
  font-size: 15px;
}

/* Chips (rádios com cara de pílula) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color .15s, border-color .15s;
}
.chip span:hover { border-color: var(--verde-borda); }
.chip input:checked + span {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--sobre-verde);
}
.chip input:checked + span::before { content: "\2713"; font-weight: 800; }
.chip input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.chip input:disabled + span { cursor: default; opacity: .7; }
.chip input:disabled:not(:checked) + span { opacity: .45; }

.pedido { margin-bottom: 4px; }
.pedido .grupo-chips { margin: 0 0 20px; }
.pedido .grupo-chips .dica { margin-top: 8px; }

/* Seletor de arquivos */
.secao-arquivos { margin: 0 0 20px; }
.entrada-arquivo {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.seletor { border-style: dashed; border-width: 2px; min-height: 64px; }
.entrada-arquivo:focus-visible + .seletor { outline: 3px solid var(--foco); outline-offset: 2px; }

.lista-arquivos {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.envio {
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
}
.envio-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.envio-nome {
  min-width: 0;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.envio-tamanho { flex: none; color: var(--texto-suave); font-size: 14px; }
.envio-estado { margin: 6px 0 0; font-size: 14px; color: var(--texto-suave); }
.envio-concluido .envio-estado { color: var(--verde-forte); font-weight: 650; }
.envio-erro { border-color: var(--vermelho); }
.envio-erro .envio-estado { color: var(--vermelho); font-weight: 600; }
.envio-tentando .envio-estado { color: var(--ambar); }
.envio-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.envio-servidor .envio-topo { margin-bottom: 0; }

progress {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--superficie-2);
  -webkit-appearance: none;
  appearance: none;
}
progress::-webkit-progress-bar { background: var(--superficie-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--verde); border-radius: 999px; transition: width .2s; }
progress::-moz-progress-bar { background: var(--verde); border-radius: 999px; }

.estado-envio {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--texto-suave);
  min-height: 1.5em;
}
.estado-envio.ok { color: var(--verde-forte); font-weight: 650; }

.rodape-form { display: grid; gap: 8px; margin-top: 8px; }

/* ---------- Detalhe do trabalho ---------- */

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-left: -6px;
  padding: 0 8px 0 2px;
  color: var(--texto-suave);
  font-weight: 650;
  text-decoration: none;
  border-radius: 10px;
}
.voltar:hover { color: var(--texto); }

.caixa-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.caixa-status p { margin: 0; flex: 1 1 200px; }
.caixa-curadoria { border: 2px solid var(--verde); background: var(--verde-suave); }
.caixa-erro { border-color: var(--vermelho); background: var(--vermelho-suave); }
.caixa-processando { border-color: var(--azul); }

.meta {
  margin: 0 0 20px;
  color: var(--texto-suave);
  font-size: 15px;
}

.bloco {
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}
.bloco > h2, .bloco > summary {
  font-size: 18px;
  font-weight: 750;
  margin: 0 0 12px;
}
.bloco > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -6px 0;
  cursor: pointer;
}
details.bloco[open] > summary { margin-bottom: 12px; }

.erro-detalhe {
  border-color: var(--vermelho);
  background: var(--vermelho-suave);
}
.erro-detalhe pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--fonte-mono);
  font-size: 14px;
  color: var(--texto);
}

.instrucao {
  margin: 0 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 14px;
}
.dados dt { color: var(--texto-suave); }
.dados dd { margin: 0; overflow-wrap: anywhere; }

.subtitulo { font-size: 16px; font-weight: 700; margin: 16px 0 8px; }

.lista-entrada {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.lista-entrada a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--texto);
  text-decoration: none;
}
.lista-entrada a:hover { background: var(--verde-suave); }
.lista-entrada .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lista-entrada .tam { flex: none; color: var(--texto-suave); font-size: 14px; }

/* Resultado */
.resultado.atual { border: 2px solid var(--verde-borda); }
.res-titulo { font-size: 20px; font-weight: 800; margin: 0 0 6px; overflow-wrap: anywhere; }
.res-resumo { margin: 0 0 16px; white-space: pre-line; }

.alerta {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--raio-p);
  background: var(--ambar-suave);
  color: var(--texto);
  border-left: 4px solid var(--ambar);
}

.itens { display: grid; gap: 16px; margin: 0 0 16px; }

.item {
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--fundo);
}
.item-rotulo { font-size: 16px; font-weight: 750; margin: 0 0 2px; overflow-wrap: anywhere; }
.item-desc { margin: 0 0 10px; color: var(--texto-suave); font-size: 15px; white-space: pre-line; }
.item-cab { margin-bottom: 10px; }
.item video {
  display: block;
  width: 100%;
  max-height: 72vh;
  background: #000;
  border-radius: 10px;
}
.item-imagem { display: block; }
.item-imagem img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72vh;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  background: var(--superficie-2);
}
.item-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}
.item-arquivo {
  min-width: 0;
  color: var(--texto-suave);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.perguntas, .proxima {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
}
.perguntas h3, .proxima h3 { font-size: 16px; margin: 0 0 6px; }
.perguntas ul { margin: 0; padding-left: 20px; }
.perguntas li { margin-bottom: 4px; }
.proxima p { margin: 0; }

/* Texto renderizado (markdown simples) */
.texto-md {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  overflow-wrap: anywhere;
}
.secao-md + .secao-md { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.secao-md-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.md p { margin: 0 0 10px; }
.md p:last-child { margin-bottom: 0; }
.md h3 { font-size: 18px; margin: 0; }
.md h4 { font-size: 16px; margin: 0; }
.md h5, .md h6 { font-size: 15px; margin: 0; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin-bottom: 2px; }
.md blockquote {
  margin: 0 0 10px;
  padding: 4px 12px;
  border-left: 3px solid var(--verde-borda);
  color: var(--texto-suave);
}
.md code {
  font-family: var(--fonte-mono);
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--superficie-2);
}
.md pre {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--superficie-2);
  overflow-x: auto;
}
.md pre code { padding: 0; background: none; }
.md hr { border: 0; border-top: 1px solid var(--borda); margin: 12px 0; }

/* Ações e painéis */
.acoes { position: relative; }

/* Barra de decisão (Aprovar / Pedir ajuste): logo depois do resultado e presa ao rodapé
   enquanto o resultado está na tela, para não precisar rolar até o fim. */
.barra-decisao {
  position: sticky;
  bottom: calc(var(--alt-abas) + env(safe-area-inset-bottom) + 8px);
  z-index: 15;
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
  padding: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.barra-decisao > .btn { flex: 1 1 0; min-width: 0; min-height: 56px; font-size: 17px; }
.painel-decisao { margin-bottom: 20px; }
.painel .campo-depois { margin: 14px 0 0; }
.painel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--superficie-2);
}
.painel p { margin: 0 0 12px; }
.painel .campo { margin-bottom: 12px; }
.painel-baixar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.painel-baixar a { justify-content: flex-start; width: 100%; }
.painel-baixar a span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Histórico */
.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linha-tempo li {
  position: relative;
  padding: 0 0 16px 26px;
}
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: -4px;
  width: 2px;
  background: var(--borda);
}
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo li::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--superficie);
  border: 3px solid var(--cinza);
}
.linha-tempo .ev-criado::after, .linha-tempo .ev-aprovado::after { border-color: var(--verde); }
.linha-tempo .ev-status::after { border-color: var(--azul); }
.linha-tempo .ev-feedback::after { border-color: var(--ambar); }
.linha-tempo .ev-aviso::after { border-color: var(--vermelho); }
.ev-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ev-tipo { font-weight: 700; }
.ev-quando { color: var(--texto-suave); font-size: 14px; }
.ev-texto { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.detalhes-tecnicos { margin-top: 16px; color: var(--texto-suave); }
.detalhes-tecnicos > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.detalhes-tecnicos .linha-tempo { margin-top: 8px; }
.ev-feedback .ev-texto, .ev-aprovado .ev-texto {
  padding: 8px 10px;
  margin-top: 6px;
  border-radius: 8px;
  background: var(--superficie-2);
}

/* ---------- Este aparelho ---------- */

.aparelho {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
}
.aparelho h2 { font-size: 18px; margin: 0 0 12px; }
.aparelho p { margin: 0 0 12px; color: var(--texto-suave); }
.aparelho .botoes { margin-bottom: 12px; }

/* ---------- Avisos rápidos (toasts) ---------- */

.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--alt-abas) + env(safe-area-inset-bottom) + 12px);
  z-index: 50;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 var(--lateral-d) 0 var(--lateral-e);
  pointer-events: none;
}
.pagina-login .toasts { bottom: calc(env(safe-area-inset-bottom) + 16px); }
.toast {
  max-width: 520px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--texto);
  color: var(--fundo);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  /* Não bloqueia toques nos botões de baixo enquanto aparece. */
  pointer-events: none;
  animation: entrar .2s ease-out;
}
.toast-erro { background: var(--vermelho); color: #fff; }
@media (prefers-color-scheme: dark) {
  .toast-erro { color: #1A0705; }
}
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Login ---------- */

.pagina-login main.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 24px) var(--lateral-d) calc(env(safe-area-inset-bottom) + 24px) var(--lateral-e);
}
.login-cartao {
  width: 100%;
  max-width: 400px;
  padding: 28px 22px;
  border: 1px solid var(--borda);
  border-radius: 20px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  text-align: center;
}
.login-icone { display: block; margin: 0 auto 12px; border-radius: 16px; }
.login-cartao h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.login-sub { margin: 6px 0 22px; color: var(--texto-suave); }
.login-cartao form { text-align: left; }
.campo-senha { position: relative; margin-bottom: 4px; }
.campo-senha input { padding-right: 96px; min-height: 52px; }
.btn-ver {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--verde-forte);
  font-weight: 700;
  cursor: pointer;
}
.btn-ver:hover { background: var(--superficie-2); }
.login-cartao .btn-grande { margin-top: 16px; }
.login-nota { margin: 18px 0 0; font-size: 14px; color: var(--texto-suave); }

/* ---------- Telas largas ---------- */

@media (min-width: 720px) {
  .titulo-tela { font-size: 30px; }
  .bloco { padding: 20px; }
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}