/* fotos-viagem: painel. Só cores de tokens.css (lista fechada de DESIGN.md). */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Sem a espera do toque duplo nos celulares que ainda a têm */
button, a, input, label, select, textarea, [role="tab"], [role="radio"] { touch-action: manipulation; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

.pular {
  position: fixed;
  top: var(--e-2);
  left: var(--e-2);
  z-index: var(--z-dica);
  padding: var(--e-3) var(--e-4);
  background: var(--cartao);
  color: var(--petroleo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  transform: translateY(-200%);
}
.pular:focus { transform: none; }
/* títulos recebem o foco na troca de tela só para o leitor de tela e o teclado saberem onde estão */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
/* utilitário: vence as regras de componente (ex.: o input escondido dentro de .caixa-texto) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Tipografia ───────────────────────────────────────────────── */
.titulo-1 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo-1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.titulo-2 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo-2);
  font-weight: 500;
  line-height: 1.15;
}
.titulo-3 {
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.3;
}
.titulo-4 {
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.4;
}
.apoio { color: var(--tinta-suave); max-width: 62ch; }
.pequeno { font-size: var(--t-pequeno); }
.endereco-painel { overflow-wrap: anywhere; }
.endereco-painel a { color: var(--petroleo-forte); font-weight: 600; }

/* ── Botões ───────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alvo);
  padding: 0 var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--raio-m);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-quick) var(--ease-out),
    border-color var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out),
    transform var(--duration-quick) var(--ease-smooth-out);
}
.botao:active { transform: scale(var(--scale-small)); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.botao[aria-busy="true"] { opacity: 1; cursor: progress; }
.botao-principal { background: var(--petroleo); color: var(--cartao); }
.botao-principal:active { background: var(--petroleo-forte); }
.botao-secundario { background: var(--cartao); color: var(--petroleo); border-color: var(--linha); }
.botao-secundario:active { border-color: var(--petroleo); }
.botao-texto { background: transparent; color: var(--petroleo); padding: 0 var(--e-3); }
.botao-perigo { background: var(--cartao); color: var(--perigo); border-color: var(--linha); }
.botao-perigo:active { border-color: var(--perigo); }
.botao-largo { width: 100%; }
.botao-grande { min-height: 52px; font-size: var(--t-sub); }
@media (hover: hover) {
  .botao-principal:hover:not(:disabled) { background: var(--petroleo-forte); }
  .botao-secundario:hover:not(:disabled) { border-color: var(--petroleo); }
  .botao-perigo:hover:not(:disabled) { border-color: var(--perigo); }
  .botao-texto:hover:not(:disabled) { color: var(--petroleo-forte); text-decoration: underline; text-underline-offset: 3px; }
}

/* ── Campos ───────────────────────────────────────────────────── */
.campo { display: grid; gap: var(--e-2); }
.campo label, .campo-rotulo { font-size: var(--t-pequeno); font-weight: 600; }
.caixa-texto {
  background: var(--cartao);
  border: 1px solid var(--tinta-suave);
  border-radius: var(--raio-m);
  transition: border-color var(--duration-quick) var(--ease-out);
}
.caixa-texto:focus-within { border-color: var(--petroleo); outline: 2px solid var(--petroleo); outline-offset: 1px; }
.caixa-texto input, .caixa-texto textarea {
  display: block;
  width: 100%;
  min-height: var(--alvo);
  padding: var(--e-2) var(--e-4);
  border: 0;
  background: transparent;
  font-size: var(--t-corpo);
  outline: none;
}
.caixa-texto input::placeholder, .caixa-texto textarea::placeholder { color: var(--tinta-suave); opacity: 1; }
.caixa-area textarea { resize: vertical; min-height: 112px; line-height: 1.5; padding: var(--e-3) var(--e-4); }
.caixa-texto input[type="date"] { min-width: 0; }
.erro-campo { color: var(--perigo); font-size: var(--t-pequeno); font-weight: 500; min-height: 0; }
.erro-campo:empty { display: none; }
.t-input.is-error .caixa-texto, .t-input-wrap.is-error .caixa-texto.com-erro { border-color: var(--perigo); }
.contador { font-size: var(--t-legenda); color: var(--tinta-suave); text-align: right; margin-top: var(--e-2); }

/* ── Casca: celular primeiro ──────────────────────────────────── */
.casca { min-height: 100dvh; }
.conteudo {
  padding:
    max(env(safe-area-inset-top), var(--e-5))
    max(env(safe-area-inset-right), var(--e-4))
    calc(var(--nav-altura) + env(safe-area-inset-bottom) + var(--e-6))
    max(env(safe-area-inset-left), var(--e-4));
  outline: none;
}
.nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-nav);
  background: var(--cartao);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.nav-marca, .nav-sair { display: none; }
.nav-itens {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--nav-altura);
  padding-inline: var(--e-2);
}
.nav-item {
  position: relative;
  z-index: var(--z-acima);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--alvo);
  color: var(--tinta-suave);
  font-size: var(--t-legenda);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.nav-item svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item[aria-current="page"] { color: var(--tinta); }
.nav-item:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .nav-item:not([aria-current="page"]):hover { color: var(--tinta); }
  .acordeao-cabeca:hover { color: var(--petroleo-forte); }
}
.nav-item[aria-current="page"] svg { stroke: var(--petroleo); }
.nav-indicador {
  position: absolute;
  top: 8px;
  left: 0;
  width: 56px;
  height: 30px;
  border-radius: var(--raio-pilula);
  background: var(--petroleo-nevoa);
  transform: translate(0, 0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease),
    height var(--tabs-dur) var(--tabs-ease);
  will-change: transform;
  pointer-events: none;
}
/* 03 Notification badge: .nav-contagem é o .t-badge (posição), o ponto é o .t-badge-dot */
.nav-contagem {
  position: absolute;
  top: var(--e-2);
  right: auto;
  left: calc(50% + 8px);
}
.nav-contagem .t-badge-dot {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  background: var(--alerta);
  color: var(--cartao);
  font-size: var(--t-legenda);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.sair-celular { margin-top: var(--e-7); }
/* 15 Shimmer text: a fase segue o relógio (o JS grava --shimmer-fase), então a linha
   remontada a cada leitura do iCloud continua a varredura sem pular para o começo. */
.t-shimmer::before { animation-delay: var(--shimmer-fase, 0ms); }
/* 34 Text swap soft: durante a troca o texto fica numa linha só; nunca passa da coluna. */
.cabeca-periodo .t-text-soft { max-width: 100%; }
/* 18 Texts reveal: o botão do vazio mantém o aperto (a regra do degrau é mais específica que .botao:active). */
.t-stagger.is-shown .botao.t-stagger-line:active { transform: scale(var(--scale-small)); }

/* revisando no celular: a barra inferior sai do caminho */
body.revisando-celular .nav { transform: translateY(100%); }
.nav { transition: transform var(--duration-fast) var(--ease-smooth-out); }
body.revisando-celular .conteudo { padding-bottom: 0; }
/* foco nunca fica debaixo das barras fixas */
/* celular: a barra inferior fixa é descontada na rolagem do foco e do scrollIntoView */
@media (max-width: 1023.98px) { html { scroll-padding-bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom) + var(--e-4)); } }
html:has(> body.revisando-celular) { scroll-padding-bottom: calc(var(--altura-acoes, 140px) + var(--e-5) + var(--e-3)); }
.foto-botao, .mini { scroll-margin-top: calc(var(--alvo) + var(--e-6)); }

/* ── Telas ────────────────────────────────────────────────────── */
.tela { max-width: 1640px; margin: 0 auto; }
.tela.entrando, .revela { animation: tela-entra var(--duration-fast) var(--ease-smooth-out) both; }
@keyframes tela-entra {
  from { opacity: 0; transform: translateY(var(--distance-base)); filter: blur(var(--blur-medium)); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.cabeca-tela { display: grid; gap: var(--e-2); margin-bottom: var(--e-7); }
.bloco { margin-top: var(--e-7); }
.bloco-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); }

/* ── Fotos ────────────────────────────────────────────────────── */
.cabeca-fotos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}
.cabeca-texto { display: grid; gap: var(--e-1); min-width: 0; }
.cabeca-periodo { color: var(--tinta-suave); }
#botao-revisar .t-digit-group { font-variant-numeric: tabular-nums; }

.filtros-faixa {
  position: sticky;
  top: 0;
  z-index: var(--z-fixo);
  margin: 0 calc(max(env(safe-area-inset-right), var(--e-4)) * -1) 0 calc(max(env(safe-area-inset-left), var(--e-4)) * -1);
  padding: var(--e-2) max(env(safe-area-inset-right), var(--e-4)) var(--e-2) max(env(safe-area-inset-left), var(--e-4));
  background: var(--papel);
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros-faixa::-webkit-scrollbar { display: none; }

/* 16 Tabs sliding */
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--raio-pilula);
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  z-index: var(--z-acima);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  appearance: none;
  border: 0;
  background: transparent;
  min-height: var(--alvo);
  padding: 0 var(--e-4);
  border-radius: var(--raio-pilula);
  color: var(--tabs-text-muted);
  font-size: var(--t-pequeno);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab[aria-selected="true"], .t-tab[aria-checked="true"] { color: var(--tabs-text-active); }
@media (hover: hover) { .t-tab:not([aria-selected="true"]):not([aria-checked="true"]):hover { color: var(--tabs-text-active); } }
.t-tab:focus-visible { outline-offset: -2px; border-radius: var(--raio-pilula); }
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: var(--alvo);
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: var(--raio-pilula);
  box-shadow: inset 0 0 0 2px var(--petroleo), 0 1px 3px var(--sombra);
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease),
    opacity var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: var(--z-base);
  pointer-events: none;
}
.t-tabs-pill.sem-selecao { opacity: 0; }
.contagem { color: var(--tinta-suave); font-variant-numeric: tabular-nums; font-weight: 500; }
.t-tab[aria-selected="true"] .contagem { color: var(--petroleo); }

/* 02 Number pop-in */
@keyframes t-digit-pop-in {
  0% {
    transform: translate(calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)));
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }
.t-digit-group.is-animating .t-digit[data-same] { animation: none; }

/* 14 Skeleton loader and reveal (em grade: a altura acompanha o conteúdo) */
.carregando-troca { display: grid; margin-top: var(--e-4); }
.carregando-troca > * { grid-area: 1 / 1; min-width: 0; }
.esqueleto {
  z-index: var(--z-acima);
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.fotos-lista {
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.carregando-troca.is-revealed .esqueleto { opacity: 0; filter: blur(var(--reveal-blur)); pointer-events: none; }
.carregando-troca.is-revealed .fotos-lista { opacity: 1; filter: blur(0); }
.esqueleto > * > :not(.t-oshimmer-tile), .esq-dia { animation: t-skel-pulse var(--pulse-dur) var(--ease-in-out) var(--pulse-count); }
@keyframes t-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: var(--pulse-min); } }
.esq-linha { height: 22px; width: 40%; border-radius: var(--raio-p); background: var(--linha); margin: 0 0 var(--e-4); }
.esq-grade { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.esq-foto { aspect-ratio: 4 / 5; border-radius: var(--raio-m); background: var(--linha); }
.esq-larga { grid-column: span 2; }
/* Fotos do esqueleto: receita pro organic-shimmer (transicoes-pro.css) no lugar do pulso.
   A receita traz o ladrilho com 142px; aqui ele segue a grade, e a escala acompanha. */
.esq-foto.t-oshimmer-tile { width: auto; height: auto; --oshimmer-scale: 1.2; }

/* Dia, momento e grupo */
.dia { padding-top: var(--e-6); content-visibility: auto; contain-intrinsic-size: auto 720px; }
.dia + .dia { margin-top: var(--e-5); border-top: 1px solid var(--linha); }
.fotos-lista > .dia:first-child { padding-top: 0; }
.dia-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); }
.dia-titulo { font-family: var(--fonte-titulo); font-size: var(--t-titulo-3); font-weight: 500; line-height: 1.2; }
.dia-titulo::first-letter { text-transform: uppercase; }
.dia-total { color: var(--tinta-suave); font-size: var(--t-pequeno); white-space: nowrap; }
.momento { margin-top: var(--e-5); }
.momento-cabeca { color: var(--tinta-suave); font-size: var(--t-pequeno); margin-bottom: var(--e-3); }
.momento-grade {
  display: grid;
  gap: var(--e-5) var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: start;
}
.grupo-multiplo { grid-column: span 2; display: flex; flex-direction: column; gap: var(--e-2); }
/* no grupo, o respiro entre foto, texto e miniaturas é o gap acima; o texto agrupa situação e escolha */
.grupo-multiplo > .foto-texto { display: grid; gap: var(--e-1); }
.grupo-multiplo .foto-legenda { padding-top: 0; }
.grupo-multiplo .foto-escolha, .grupo-multiplo > .grupo-outras { margin-top: 0; }
/* abaixo de 360px só cabe uma coluna: nada ocupa duas, senão a grade cria uma coluna fantasma */
@media (max-width: 359px) { .grupo-multiplo, .esq-larga { grid-column: auto; } }

.foto { position: relative; min-width: 0; container-type: inline-size; }
.foto-botao {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  border-radius: var(--raio-m);
}
.foto-quadro {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-m);
  overflow: hidden;
  background: var(--papel-recuado);
  isolation: isolate;
}
.foto-quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transform: scale(1.01);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease),
    transform var(--duration-slow) var(--ease-smooth-out);
}
.foto-quadro img.carregou { opacity: 1; filter: blur(0); transform: none; }
.foto-botao:active .foto-quadro img.carregou { transform: scale(var(--scale-tiny)); }
/* hover: entra em 250ms; a saída usa os 400ms suaves da regra base */
@media (hover: hover) {
  .foto-botao:hover .foto-quadro img.carregou {
    transform: scale(1.02);
    transition:
      opacity var(--reveal-dur) var(--reveal-ease),
      filter var(--reveal-dur) var(--reveal-ease),
      transform var(--duration-fast) var(--ease-smooth-out);
  }
}
.foto-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-1) var(--e-2);
  padding-top: var(--e-2);
  font-size: var(--t-legenda);
}
.foto-hora { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* foto estreita: situação e hora sempre empilhadas, igual em todas (sem quebra pela metade) */
@container (max-width: 200px) {
  .foto-legenda { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
}
.foto-escolha { color: var(--tinta-suave); font-size: var(--t-legenda); margin-top: var(--e-1); }
.foto.saindo { animation: foto-sai var(--duration-medium) var(--ease-smooth-out) forwards; pointer-events: none; }
@keyframes foto-sai { to { opacity: 0; transform: scale(var(--scale-large)); filter: blur(var(--blur-small)); } }

/* Situação: ponto colorido + texto em tinta (contraste garantido) */
.situacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta);
  font-size: var(--t-legenda);
  font-weight: 600;
  white-space: nowrap;
  --cor-situacao: var(--tinta-suave);
}
.situacao::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-situacao);
  flex: none;
}
.situacao[data-grupo="esperando"] { --cor-situacao: var(--alerta); }
.situacao[data-grupo="aprovadas"] { --cor-situacao: var(--sucesso); }
.situacao[data-grupo="tratando"] { --cor-situacao: var(--petroleo); }
.situacao[data-grupo="problema"] { --cor-situacao: var(--perigo); }

/* Outras fotos do grupo */
.grupo-outras { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.mini-item { display: block; }
.mini {
  display: block;
  width: 56px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--raio-p);
}
.mini .foto-quadro { border-radius: var(--raio-p); }
.mini .foto-quadro img.carregou { opacity: 0.6; }
.mini[data-grupo="esperando"] .foto-quadro img.carregou,
.mini[data-grupo="aprovadas"] .foto-quadro img.carregou { opacity: 1; }

/* Foto que a IA está tratando: receita pro image-gen-placeholder (transicoes-pro.css),
   grade de pontos que respira sobre a miniatura escurecida. A receita traz o cartão
   com 142px; aqui ele tem o tamanho da foto. */
.foto-quadro.t-imgen, .comparador.t-imgen { width: auto; height: auto; }
.comparador.t-imgen { width: min(100%, calc(var(--altura-max, 64dvh) * var(--proporcao, 0.8))); }
.foto-quadro.tratando { background: var(--tinta); }
.foto-quadro.tratando img.carregou { opacity: 0.4; filter: blur(var(--blur-small)); }
.comparador.t-imgen { background: var(--tinta); }
.comparador.t-imgen img { opacity: 0.4; filter: blur(var(--blur-small)); transition: opacity var(--duration-slow) var(--ease-smooth-out), filter var(--duration-slow) var(--ease-smooth-out); }

/* Miniatura que não carregou */
.foto-quadro.sem-previa { display: grid; place-items: center; }
.sem-previa-conteudo { display: grid; justify-items: center; gap: var(--e-1); color: var(--tinta-suave); font-size: var(--t-legenda); }
.sem-previa-conteudo svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mini .sem-previa-conteudo svg { width: 20px; height: 20px; }
.foto-quadro.tratando .sem-previa-conteudo { color: var(--petroleo-nevoa); }

/* Vazio que ensina */
.vazio {
  display: grid;
  gap: var(--e-3);
  justify-items: start;
  margin-top: var(--e-5);
  padding: var(--e-6) var(--e-5);
  border-radius: var(--raio-g);
  background: var(--papel-recuado);
}
.vazio .apoio { max-width: 48ch; }
.vazio .botao { margin-top: var(--e-2); }
.vazio-icloud { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-pequeno); }

/* ── 08 Page side-by-side (lista e revisão) ───────────────────── */
.t-page-slide { position: relative; overflow-x: clip; }
.t-page-slide .t-page[data-page-id="1"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }
.t-page-slide .t-page[data-page-id="2"] { --t-page-from-x: var(--page-slide-distance); }
.t-page-slide .t-page {
  position: absolute;
  inset: 0 0 auto 0;
  max-height: 100dvh;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:
    opacity var(--page-fade-dur) var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter var(--page-slide-dur) var(--page-slide-ease),
    visibility 0s linear var(--page-fade-dur);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  position: relative;
  max-height: none;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger), var(--page-stagger), var(--page-stagger), 0s;
}

/* ── Revisar ──────────────────────────────────────────────────── */
.revisar { display: grid; gap: var(--e-4); }
.revisar.entrando { animation: revisar-entra var(--page-slide-dur) var(--page-slide-ease) both; }
@keyframes revisar-entra {
  from { opacity: 0; transform: translateX(var(--page-slide-distance)); filter: blur(var(--page-blur)); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.revisar.saindo { animation: revisar-sai var(--page-slide-dur) var(--page-slide-ease) both; }
@keyframes revisar-sai {
  to { opacity: 0; transform: translateX(calc(var(--page-slide-distance) * -1)); filter: blur(var(--page-blur)); }
}
.revisar-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin: calc(var(--e-3) * -1) calc(var(--e-2) * -1) 0;
}
.revisar-voltar { padding-left: var(--e-2); }
.revisar-voltar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.revisar-posicao { color: var(--tinta-suave); font-size: var(--t-pequeno); padding-right: var(--e-2); text-align: right; }
.revisar-corpo { display: grid; gap: var(--e-5); }
.revisar-palco {
  display: grid;
  gap: var(--e-2);
  justify-items: center;
  min-width: 0;
  /* 160px = topo da revisão (72) + dica, vãos e a 1ª linha da situação (~81), com folga; e desconta o
     esmaecimento acima da barra de ações (e-5): a linha logo abaixo da foto termina acima dele */
  --altura-max: min(64dvh, calc(100dvh - var(--altura-acoes, 140px) - 160px - var(--e-5)));
}
.revisar-palco > .refazer-acordeao { justify-self: stretch; width: 100%; }
.refazer-corpo { padding: var(--e-3) var(--e-1) var(--e-1); }
.revisar-dica { color: var(--tinta-suave); font-size: var(--t-legenda); }
.revisar-lado { display: grid; gap: var(--e-5); align-content: start; min-width: 0; }
.revisar-situacao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.revisar-quando { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.revisar-secao { display: grid; gap: var(--e-2); }
.revisar-secao + .revisar-secao { padding-top: var(--e-5); border-top: 1px solid var(--linha); }
.revisar-motivo { max-width: 60ch; }
.revisar-aviso { color: var(--tinta-suave); font-size: var(--t-pequeno); }

/* Comparador antes e depois */
.comparador {
  --pos: 50;
  position: relative;
  width: min(100%, calc(var(--altura-max, 64dvh) * var(--proporcao, 0.8)));
  aspect-ratio: var(--proporcao, 0.8);
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--tinta);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
  isolation: isolate;
  container: comparador / inline-size;
}
.comparador:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 3px; border-radius: var(--raio-g); }
.comparador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.comparador .depois { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }
.comparador.sem-editada { cursor: default; }
.comparador-linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  z-index: var(--z-acima);
  width: 2px;
  margin-left: -1px;
  background: var(--cartao);
  pointer-events: none;
}
.comparador-alca {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--alvo);
  height: var(--alvo);
  margin: calc(var(--alvo) / -2) 0 0 calc(var(--alvo) / -2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cartao);
  color: var(--petroleo);
  box-shadow: 0 2px 8px var(--sombra);
}
.comparador-alca svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.comparador.arrastando .comparador-alca { transform: scale(1.06); }
.comparador-alca { transition: transform var(--duration-quick) var(--ease-smooth-out); }
.rotulo-foto {
  position: absolute;
  top: var(--e-3);
  z-index: var(--z-acima);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--raio-pilula);
  background: var(--cartao);
  color: var(--tinta);
  font-size: var(--t-legenda);
  font-weight: 600;
  pointer-events: none;
  transition: opacity var(--duration-quick) var(--ease-out);
}
.rotulo-antes { left: var(--e-3); }
.rotulo-depois { right: var(--e-3); }
.comparador[data-lado="depois"] .rotulo-antes,
.comparador[data-lado="antes"] .rotulo-depois { opacity: 0; }
/* Foto estreita (celular pequeno): os dois rótulos não cabem lado a lado, "Editada" desce para o pé. */
@container comparador (max-width: 240px) {
  .rotulo-depois { top: auto; bottom: var(--e-3); }
}


/* Abrir a revisão: receita pro image-open-tilt no comparador (transicoes-pro.css).
   O tamanho, o recorte e o fundo continuam os do comparador; a receita só põe o voo. */
.comparador.t-opentilt-card { width: min(100%, calc(var(--altura-max, 64dvh) * var(--proporcao, 0.8))); height: auto; overflow: hidden; background: var(--tinta); cursor: ew-resize; box-shadow: none; }
.comparador.sem-editada.t-opentilt-card { cursor: default; }
.comparador.t-opentilt-card { border-radius: var(--opentilt-r-closed); }
.comparador.t-opentilt-card.is-open { border-radius: var(--opentilt-r-open); }
.comparador.is-bending > :not(.t-opentilt-canvas) { visibility: hidden; }
.comparador.is-bending { overflow: visible; }

/* Notas da juíza */
.notas { display: grid; gap: var(--e-3); }
.nota { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); align-items: center; font-size: var(--t-pequeno); }
.nota-barra { grid-column: 1 / -1; height: 6px; border-radius: var(--raio-pilula); background: var(--linha); overflow: hidden; }
.nota-barra span {
  display: block;
  height: 100%;
  width: calc(var(--nota) * 10%);
  border-radius: inherit;
  background: var(--petroleo);
  transform-origin: left;
  animation: nota-cresce var(--duration-very-slow) var(--ease-smooth-out) both;
}
@keyframes nota-cresce { from { transform: scaleX(0); } }
.nota-valor { font-variant-numeric: tabular-nums; font-weight: 600; }
.lista-itens { display: grid; gap: var(--e-2); }
.lista-itens li { display: flex; gap: var(--e-2); align-items: baseline; }
.lista-itens li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-suave); transform: translateY(-2px); }
.lista-itens.removidos li::before { background: var(--petroleo); }

/* Ações */
.revisar-acoes {
  display: grid;
  gap: var(--e-3);
  position: sticky;
  bottom: 0;
  z-index: var(--z-fixo);
  margin: 0 calc(max(env(safe-area-inset-right), var(--e-4)) * -1) 0 calc(max(env(safe-area-inset-left), var(--e-4)) * -1);
  padding: var(--e-3) max(env(safe-area-inset-right), var(--e-4)) calc(var(--e-3) + env(safe-area-inset-bottom)) max(env(safe-area-inset-left), var(--e-4));
  background: var(--papel);
  border-top: 1px solid var(--linha);
}
/* esmaecimento acima da barra, da altura do respiro de cada seção: o texto e as linhas das seções
   que passam por baixo somem aos poucos, sem um corte seco que pareça texto truncado */
.revisar-acoes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--e-5);
  margin-bottom: 1px;
  background: linear-gradient(to top, var(--papel), transparent);
  pointer-events: none;
}
.revisar > .revisar-acoes { margin-top: var(--e-2); }
.acoes-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.acao-erro { color: var(--perigo); font-size: var(--t-pequeno); font-weight: 500; }
.acao-erro:empty { display: none; }
.botao-aprovar.aprovada { background: var(--sucesso); }
.botao-aprovar .rotulo-troca { display: inline-flex; align-items: center; gap: var(--e-2); }

/* 10 Success check */
.t-success-check { display: inline-block; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.t-success-check[data-state="in"] {
  animation:
    t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,
    t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards,
    t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards;
}
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }


/* 21 Accordion */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(var(--blur-small)); visibility: hidden; transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease), visibility 0s linear var(--acc-collapse); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); visibility: visible; transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease), visibility 0s; }
.t-acc-chevron { display: inline-flex; transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
.acordeao { border-top: 1px solid var(--linha); margin-top: var(--e-6); }
.acordeao-cabeca {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--petroleo);
  font-weight: 600;
  text-align: left;
}
.texto-ia { display: grid; gap: var(--e-3); padding: var(--e-2) 0 var(--e-4); }
.texto-ia pre {
  margin: 0 0 var(--e-3);
  padding: var(--e-4);
  border-radius: var(--raio-m);
  background: var(--papel-recuado);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-pequeno);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tinta);
}
.refazer-corpo { display: grid; gap: var(--e-3); }

/* ── 07 Panel reveal ──────────────────────────────────────────── */
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}

/* ── 12 Error state shake ─────────────────────────────────────── */
.t-input { transition: border-color var(--duration-quick) var(--ease-out); will-change: transform; }
.t-error-msg { opacity: 0; visibility: hidden; transition: opacity var(--revert-dur) var(--ease-out), visibility 0s linear var(--revert-dur); }
.t-input-wrap.is-error .t-error-msg { opacity: 1; visibility: visible; transition: opacity var(--revert-dur) var(--ease-out), visibility 0s linear 0s; }
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100% { transform: translateX(0); }
}

/* ── 27 Toggle ────────────────────────────────────────────────── */
.toggle {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--tinta-suave);
}
.toggle::after { content: ""; position: absolute; inset: -9px -4px; }
.toggle[data-on="true"] { background: var(--petroleo); }
.t-toggle { transition: background var(--toggle-track) var(--toggle-ease); }
.t-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cartao);
  box-shadow: 0 1px 2px var(--sombra);
  translate: 0 0;
  will-change: translate;
}
.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
.t-toggle.is-init[data-on="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
.t-toggle.is-init[data-on="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes t-toggle-on {
  0% { translate: 0 0; }
  55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
  80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
  100% { translate: var(--toggle-travel) 0; }
}
@keyframes t-toggle-off {
  0% { translate: var(--toggle-travel) 0; }
  55% { translate: calc(0px - var(--toggle-ov1)) 0; }
  80% { translate: var(--toggle-ov2) 0; }
  100% { translate: 0 0; }
}
.toggle:disabled, .toggle[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.linha-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 64px;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linha);
}
.linha-toggle-texto { display: grid; gap: 2px; min-width: 0; }
.linha-toggle-titulo { font-weight: 600; }
.linha-toggle-apoio { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.linha-toggle-destaque { border-top: 1px solid var(--linha); }

/* ── 22 Toast ─────────────────────────────────────────────────── */
.toasts {
  position: fixed;
  left: max(env(safe-area-inset-left), var(--e-4));
  right: max(env(safe-area-inset-right), var(--e-4));
  bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom) + var(--e-3));
  z-index: var(--z-toast);
  display: grid;
  gap: var(--e-2);
  pointer-events: none;
}
body.revisando-celular .toasts { bottom: calc(var(--altura-acoes, 150px) + var(--e-3)); }
.toast {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  min-height: 52px;
  border-radius: var(--raio-m);
  background: var(--tinta);
  color: var(--cartao);
  box-shadow: 0 6px 20px var(--sombra);
  font-size: var(--t-pequeno);
  pointer-events: auto;
}
.toast-texto { flex: 1; min-width: 0; }
.toast .botao-texto { color: var(--petroleo-nevoa); flex: none; }
@media (hover: hover) { .toast .botao-texto:hover:not(:disabled) { color: var(--cartao); } }
.toast :focus-visible { outline-color: var(--petroleo-nevoa); }
.toast[data-tipo="erro"] .toast-texto::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--perigo); margin-right: var(--e-2); }
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition: opacity var(--toast-close) var(--toast-ease), transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity var(--toast-open) var(--toast-ease), transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease);
}

/* ── 33 Text morph ────────────────────────────────────────────── */
.t-morph { white-space: nowrap; }
.t-morph-swap { display: inline-grid; vertical-align: bottom; justify-items: start; transition: width var(--text-morph-resize-dur) var(--text-morph-ease); }
.t-morph-swap > span { grid-area: 1 / 1; white-space: pre; transition: opacity var(--text-morph-dur) var(--text-morph-ease), filter var(--text-morph-dur) var(--text-morph-ease); }
.t-morph-new { opacity: 0; filter: blur(var(--text-morph-blur)); }
.t-morph-swap.is-morphing .t-morph-old { opacity: 0; filter: blur(var(--text-morph-blur)); }
.t-morph-swap.is-morphing .t-morph-new { opacity: 1; filter: blur(0); }

/* ── Viagem ───────────────────────────────────────────────────── */
.viagem-ativa {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--cartao);
}
.viagem-ativa-rotulo { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--sucesso); font-size: var(--t-pequeno); font-weight: 600; }
.viagem-ativa-rotulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sucesso); }
.viagem-ativa-periodo { font-size: var(--t-sub); }
.viagem-ativa-dias { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.viagem-ativa-info, .viagem-ativa-acoes { display: grid; gap: var(--e-2); }
.periodo-form { display: grid; gap: var(--e-4); padding: var(--e-2) 0 var(--e-2); }
.campos-datas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.periodo-previa { color: var(--tinta); font-weight: 500; min-height: 1.5em; }
.periodo-previa.invalido { color: var(--perigo); }
.form-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.painel-revela {
  margin-bottom: var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--cartao);
}
.form-viagem { display: grid; gap: var(--e-4); }
.form-viagem .linha-toggle { border-bottom: 0; padding: 0; min-height: 0; }
.lista-viagens li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--linha);
}
.lista-viagens li:last-child { border-bottom: 1px solid var(--linha); }
.viagem-linha-texto { display: grid; gap: 2px; min-width: 0; }
.viagem-linha-nome { font-weight: 600; overflow-wrap: anywhere; }
.viagem-ativa .titulo-2, .cabeca-texto .titulo-1, .nav-marca-viagem, .estado-detalhes dd, .estado-linha { overflow-wrap: anywhere; }
.viagem-linha-periodo { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.lista-viagens .vazio-linha { color: var(--tinta-suave); font-size: var(--t-pequeno); }

/* ── Tratamento ───────────────────────────────────────────────── */
.form-tratamento { max-width: 720px; }
.grupo-opcoes { margin: 0 0 var(--e-6); padding: 0; border: 0; min-width: 0; }
.grupo-opcoes legend { padding: 0; margin-bottom: var(--e-2); }
.grupo-opcoes > .apoio { margin-bottom: var(--e-2); }
.grupo-linhas > legend { margin-bottom: 0; }
.segmentado { display: flex; width: 100%; margin-bottom: var(--e-2); }
.segmentado .t-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--e-2);
  font-size: var(--t-pequeno);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
@media (min-width: 480px) { .segmentado .t-tab { font-size: var(--t-corpo); } }
.opcao-tri { display: grid; gap: var(--e-2); padding: var(--e-4) 0; border-bottom: 1px solid var(--linha); }
.opcao-tri .segmentado, .opcao-tri .apoio { margin: 0; }
.barra-salvar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.barra-salvar .botao { min-width: 132px; }

/* ── iCloud ───────────────────────────────────────────────────── */
.estado-icloud {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--cartao);
}
.estado-linha { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-sub); font-weight: 500; }
.estado-ponto { flex: none; width: 10px; height: 10px; margin-top: 0.55em; border-radius: 50%; background: var(--tinta-suave); }
.estado-ponto[data-cor="ok"] { background: var(--sucesso); }
.estado-ponto[data-cor="alerta"] { background: var(--alerta); }
.estado-ponto[data-cor="perigo"] { background: var(--perigo); }
.estado-ponto[data-cor="vivo"] { background: var(--petroleo); }
.estado-detalhes { display: grid; gap: var(--e-3); color: var(--tinta-suave); font-size: var(--t-pequeno); }
.estado-par { display: grid; gap: var(--e-1); }
.estado-detalhes dt { font-weight: 600; color: var(--tinta); }
.estado-detalhes dd { margin: 0; }
#form-codigo, #form-icloud { display: grid; gap: var(--e-3); max-width: 520px; }
#form-codigo[hidden] { display: none !important; }
#form-codigo .botao-texto, #form-icloud .botao-texto { justify-self: start; padding-left: 0; }
/* A linha do acordeão ocupa a coluna inteira, como as linhas da coleta e dos álbuns; o formulário dentro fica em 520px. */
.conta-acordeao:has(> .acordeao-cabeca:not([hidden])) { border-top: 1px solid var(--linha); }
.conta-acordeao .t-acc-panel-inner > form { padding: var(--e-1); }
.conta-acordeao:has(> .acordeao-cabeca:not([hidden])) .t-acc-panel-inner > form { padding-top: var(--e-2); padding-bottom: var(--e-4); }
.linha-campo { display: flex; gap: var(--e-2); }
.caixa-codigo { width: 10.5ch; flex: none; }
.caixa-codigo input { font-size: var(--t-titulo-3); letter-spacing: 0.25em; font-variant-numeric: tabular-nums; padding: 0 var(--e-3); }
#form-codigo.destaque { padding: var(--e-5); border-radius: var(--raio-g); background: var(--petroleo-nevoa); max-width: 560px; }

/* ── Entrar ───────────────────────────────────────────────────── */
.entrar {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(env(safe-area-inset-top), var(--e-5)) var(--e-4) max(env(safe-area-inset-bottom), var(--e-5));
}
.entrar-caixa { width: 100%; max-width: 400px; display: grid; gap: var(--e-5); }
.entrar-cabeca { display: grid; gap: var(--e-3); }

/* ── Revisar no computador: janela (06 Modal) ─────────────────── */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: var(--z-fundo-modal);
  background: var(--papel-recuado);
  opacity: 0;
  transition: opacity var(--modal-open-dur) var(--modal-ease);
}
.modal-fundo.is-open { opacity: 1; }
.modal-fundo.is-closing { opacity: 0; transition-duration: var(--modal-close-dur); }
.modal {
  position: fixed;
  inset: var(--e-5);
  z-index: var(--z-modal);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--e-5) var(--e-6);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--cartao);
  box-shadow: 0 12px 40px var(--sombra);
}
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing { transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none; transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease); }
.modal .revisar-topo { margin: 0; }
.modal .revisar-acoes { position: static; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.modal .revisar-acoes::before { content: none; }
body.modal-aberto { overflow: hidden; }

/* ── Tablet ───────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .momento-grade, .esq-grade { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--e-5) var(--e-4); }
  .vazio { padding: var(--e-7) var(--e-6); }
  .toasts { left: auto; width: 400px; }
}

/* ── Computador: barra lateral ────────────────────────────────── */
@media (min-width: 1024px) {
  .casca { display: grid; grid-template-columns: var(--lateral-largura) minmax(0, 1fr); }
  .nav {
    position: sticky;
    inset: 0 auto auto auto;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: var(--e-6);
    padding: var(--e-6) var(--e-4) var(--e-5);
    background: var(--papel-recuado);
    border-top: 0;
    border-right: 1px solid var(--linha);
  }
  .nav-marca { display: grid; gap: var(--e-1); padding: 0 var(--e-3); }
  .nav-marca-nome { font-family: var(--fonte-titulo); font-size: var(--t-titulo-3); font-weight: 500; line-height: 1.2; }
  .nav-marca-viagem { color: var(--tinta-suave); font-size: var(--t-pequeno); }
  .nav-itens { display: flex; flex-direction: column; gap: var(--e-1); height: auto; padding-inline: 0; }
  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--e-3);
    min-height: var(--alvo);
    padding: 0 var(--e-3);
    font-size: var(--t-corpo);
    border-radius: var(--raio-m);
  }
  .nav-item svg { width: 22px; height: 22px; }
  .nav-indicador { top: 0; left: 0; border-radius: var(--raio-m); }
  .nav-contagem { position: static; margin-left: auto; }
  .nav-sair { display: inline-flex; margin-top: auto; justify-content: flex-start; }
  .sair-celular { display: none; }
  .conteudo { padding: var(--e-7) var(--e-7) var(--e-8); }
  .toasts { bottom: var(--e-5); right: var(--e-5); }
  body.revisando-celular .nav { transform: none; }
  .filtros-faixa { margin: 0; padding: var(--e-2) 0; }
  .momento-grade, .esq-grade { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .viagem-ativa, .estado-icloud { max-width: 720px; }
  .tela[data-tela="viagem"] .bloco { max-width: 720px; }

  /* janela de revisão: foto grande à esquerda, decisão à direita */
  .modal .revisar { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .modal .revisar-corpo { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--e-6); min-height: 0; }
  .modal .revisar-palco { --altura-max: calc(100dvh - 200px); align-content: center; }
  .modal .refazer-acordeao .refazer-corpo { padding-left: 0; padding-right: 0; }
  .modal .revisar-lado { overflow: auto; padding-right: var(--e-2); }
}
@media (min-width: 1800px) {
  .conteudo { padding-left: var(--e-8); padding-right: var(--e-8); }
  .modal { inset: var(--e-6) max(var(--e-6), calc((100vw - 1760px) / 2)); }
  .modal .revisar-corpo { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* ── Menos movimento: tudo vira troca direta ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .t-digit-group .t-digit, .t-input, .t-toggle-thumb, .esqueleto > * > *, .esq-dia { animation: none !important; }
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .t-page-slide .t-page, .t-modal, .t-toast, .t-panel-slide, .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron,
  .t-tabs-pill, .t-tab, .nav-indicador, .t-morph-swap, .t-morph-swap > span, .foto-quadro img { transition: none !important; filter: none !important; }
}

/* ── Ajustes vistos nas capturas ──────────────────────────────── */
#botao-revisar { gap: 0.3em; }
.botao-aprovar.aprovada:disabled, .botao-aprovar.aprovada[aria-disabled="true"] { opacity: 1; }
.revisar-acoes .botao-secundario[aria-expanded="true"] { background: var(--petroleo-nevoa); border-color: var(--petroleo); }
.campos-datas > .campo { min-width: 0; }
.caixa-texto input[type="date"] { width: 100%; }
.filtros-faixa.sem-fotos { display: none; }
@media (min-width: 1024px) {
  .modal .revisar-slot { height: 100%; }
  .modal .revisar-corpo { height: 100%; }
  .modal .revisar-palco { align-self: center; }
}
@media (min-width: 1024px) {
  .nav { align-self: start; }
  /* Fotos: cabeçalho, filtros e grade na mesma largura (4 colunas no máximo), a foto escolhida
     do grupo fica em 2x2 dessas colunas e não cresce com a tela */
  #pagina-lista { max-width: var(--fotos-largura-max); }
  .tela[data-tela="icloud"] .bloco { max-width: 720px; }
}
.foto-quadro img.ja-vista { transition: none; }
.campos-datas { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Revisar em tela baixa (até 700px de altura, fora da janela do computador): a barra fixa de ações
   deixava a foto com menos da metade da largura. Aqui a foto ocupa a largura e só para no teto de
   altura (o topo da revisão e a dica cabem na 1ª tela); as ações entram no fluxo logo abaixo da
   situação (posicionarAcoes no JS), a uma rolada. Sem barra fixa, nada mais precisa ser descontado
   do pé: a rolagem do foco, o fim da página e os avisos voltam a contar só a borda segura. */
@media (max-width: 1023.98px) and (max-height: 700px) {
  .revisar-palco { --altura-max: calc(100dvh - 104px); }
  .revisar-lado > .revisar-acoes { position: static; margin: 0; padding: 0; border: 0; background: none; }
  .revisar-lado > .revisar-acoes::before { content: none; }
  html:has(> body.revisando-celular) { scroll-padding-bottom: calc(env(safe-area-inset-bottom) + var(--e-4)); }
  body.revisando-celular .conteudo { padding-bottom: calc(env(safe-area-inset-bottom) + var(--e-6)); }
  body.revisando-celular .toasts { bottom: calc(env(safe-area-inset-bottom) + var(--e-3)); }
}

/* ── iCloud: coleta, conta travada, álbuns e confirmação (2026-10-30) ── */
.coleta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding-top: var(--e-3); }
.coleta-acoes[hidden], .aviso-travada[hidden], .sair-conta[hidden] { display: none !important; }
.estado-coleta { display: grid; gap: var(--e-1); padding-top: var(--e-3); border-top: 1px solid var(--linha); color: var(--tinta-suave); font-size: var(--t-pequeno); }
.estado-coleta strong { color: var(--tinta); font-weight: 600; }
.estado-coleta .erro-coleta { color: var(--perigo); }
.aviso-travada { display: grid; gap: var(--e-3); max-width: 560px; padding: var(--e-5); border: 1px solid var(--perigo); border-radius: var(--raio-g); background: var(--cartao); }
.aviso-travada .titulo-3 { color: var(--perigo); }
.sair-conta { display: grid; gap: var(--e-2); justify-items: start; padding: var(--e-4) var(--e-1) var(--e-2); border-top: 1px solid var(--linha); }

.lista-albuns { margin: var(--e-4) 0; }   /* 16px antes e depois: o mesmo vão do título, do texto de apoio e do formulário */
.lista-albuns > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  min-height: calc(var(--alvo) + var(--e-4));
  padding: var(--e-3) 0;
  border-top: 1px solid var(--linha);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.lista-albuns > li:last-child { border-bottom: 1px solid var(--linha); }
.lista-albuns > li.saindo { opacity: 0; }
.lista-albuns > li.entrando { animation: album-entra var(--duration-fast) var(--ease-smooth-out); }
@keyframes album-entra { from { opacity: 0; transform: translateY(var(--distance-small)); } to { opacity: 1; transform: none; } }
.album-texto { display: grid; gap: 2px; min-width: 0; flex: 1 1 12rem; }
.album-nome { font-weight: 600; overflow-wrap: anywhere; }
.album-quantidade { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.album-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.lista-albuns > li { container: linha-album / inline-size; }
/* Linha estreita: os botões descem para baixo do nome (12rem do texto + gap + ~210px dos dois botões).
   Ali o "Renomear" sem preenchimento à esquerda alinha o rótulo com o nome do álbum. */
@container linha-album (max-width: 26.125rem) { .album-acoes .botao-texto { padding-left: 0; } }
.album-renomear { display: grid; gap: var(--e-2); flex: 1 1 100%; min-width: 0; }
.album-renomear .linha-campo { flex-wrap: wrap; }
.album-renomear .caixa-texto { flex: 1 1 14rem; min-width: 0; }
.lista-albuns .vazio-linha, .lista-albuns .lendo-linha { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.form-album { display: grid; gap: var(--e-2); max-width: 560px; }
.form-album .linha-campo { flex-wrap: wrap; }
.form-album .caixa-texto { flex: 1 1 14rem; min-width: 0; }

.album-viagem { display: grid; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.album-viagem .form-acoes .botao-texto { padding-left: 0; }
.album-resultado { color: var(--tinta); font-size: var(--t-pequeno); }
.album-resultado-apoio { color: var(--tinta-suave); font-size: var(--t-pequeno); }

dialog.confirmar {
  width: min(440px, calc(100vw - 2 * var(--e-4)));
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--cartao);
  color: var(--tinta);
  box-shadow: 0 12px 40px var(--sombra);
}
dialog.confirmar::backdrop { background: var(--sombra); }
dialog.confirmar[open] { animation: confirmar-abre var(--modal-open-dur) var(--modal-ease); }
@keyframes confirmar-abre { from { opacity: 0; transform: scale(var(--modal-scale)); } to { opacity: 1; transform: none; } }
.confirmar-corpo { display: grid; gap: var(--e-3); padding: var(--e-5); }
.confirmar-acoes { justify-content: flex-end; padding-top: var(--e-2); }
@media (prefers-reduced-motion: reduce) {
  dialog.confirmar[open], .lista-albuns > li.entrando { animation: none; }
}

/* ── Organizar: plano Dia › Momento › Tipo e escolhas (2026-10-30) ── */
.org-corpo { display: grid; gap: var(--e-7); max-width: 1240px; }
.org-principal { display: grid; align-content: start; min-width: 0; }
.org-principal > .bloco { margin-top: var(--e-6); }

.org-situacao { display: grid; gap: var(--e-3); padding: var(--e-5) 0; border-block: 1px solid var(--linha); }
.org-frase { min-width: 0; }
.org-progresso { display: grid; gap: var(--e-2); max-width: 560px; }
.org-progresso-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); color: var(--tinta-suave); font-size: var(--t-pequeno); }
.org-percentual {
  display: inline-flex;
  align-items: baseline;
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo-2);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.org-barra { height: 6px; border-radius: var(--raio-pilula); background: var(--linha); overflow: hidden; }
.org-barra > span {
  display: block;
  height: 100%;
  background: var(--petroleo);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-smooth-out);
}
.org-linha { color: var(--tinta-suave); font-size: var(--t-pequeno); max-width: 72ch; overflow-wrap: anywhere; }
.org-linha strong { color: var(--tinta); font-weight: 600; }
.org-alerta, .org-apoio-alerta { color: var(--alerta); font-weight: 500; }
.org-apoio-alerta { display: block; margin-top: var(--e-1); }
.org-erro { color: var(--perigo); font-weight: 500; }
.org-acoes { padding-top: var(--e-1); }
.org-acoes .botao-texto { padding-left: var(--e-2); }

.org-plano-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-4); }
.org-plano-resumo { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.org-arvore { margin-top: var(--e-3); }
.org-arvore > .vazio { margin-top: var(--e-2); }

.org-dia { padding: var(--e-5) 0 var(--e-4); border-top: 1px solid var(--linha); }
.org-dia:first-child { border-top: 0; padding-top: var(--e-2); }
.org-dia-cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-1) var(--e-4); }
.org-dia-texto { display: grid; gap: var(--e-1); min-width: 0; flex: 1 1 14rem; }
.org-dia-titulo { font-family: var(--fonte-titulo); font-size: var(--t-titulo-3); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.org-dia-sub { color: var(--tinta-suave); font-size: var(--t-pequeno); }
/* O texto do botão encosta no fim da coluna, como o resumo acima, sem a caixa passar da borda */
.org-dia-cabeca > .botao-texto, .org-momento-cabeca > .botao-texto { flex: none; padding-right: 0; }

.org-momentos { display: grid; margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.org-momento { padding: var(--e-4) 0; min-width: 0; }
.org-momento + .org-momento { border-top: 1px solid var(--linha); }
.org-momento-cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-1) var(--e-3); }
.org-momento-texto { display: grid; gap: 2px; min-width: 0; flex: 1 1 12rem; }
.org-momento-nome { font-size: var(--t-sub); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.org-momento-sub { color: var(--tinta-suave); font-size: var(--t-pequeno); font-variant-numeric: tabular-nums; }

.org-tipos { display: grid; gap: var(--e-3); margin-top: var(--e-3); }
.org-tipo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3); align-items: center; }
.org-minis { display: flex; min-width: calc(var(--alvo) * 2 - var(--e-3)); }
.org-mini, .org-item-mini {
  width: var(--alvo);
  height: var(--alvo);
  flex: none;
  border-radius: var(--raio-p);
  object-fit: cover;
  background: var(--papel-recuado);
}
.org-mini + .org-mini { margin-left: calc(var(--e-3) * -1); box-shadow: 0 0 0 2px var(--papel); }
.org-mini.sem-imagem, .org-item-mini.sem-imagem { visibility: hidden; }
.org-tipo-texto { display: grid; gap: 2px; min-width: 0; }
.org-tipo-nome { font-size: var(--t-pequeno); font-weight: 600; }
.org-exemplo { color: var(--tinta-suave); font-size: var(--t-legenda); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.org-album { display: flex; align-items: flex-start; gap: var(--e-2); margin-top: var(--e-3); color: var(--tinta-suave); font-size: var(--t-pequeno); }
.org-album .estado-ponto { width: 8px; height: 8px; margin-top: 0.5em; }
.org-album strong { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }

/* Sem margem: a cabeça do acordeão tem 44px de alvo e o texto de 14px já traz ~12px de folga invisível em cima, que faz o vão visível igual ao de cima das pastas */
.org-itens-acc { margin-top: 0; }
.org-itens-cabeca { min-height: var(--alvo); justify-content: flex-start; font-size: var(--t-pequeno); }
.org-itens { padding-bottom: var(--e-2); }
.org-itens > .botao { margin-top: var(--e-3); }
.org-itens .lendo-linha { color: var(--tinta-suave); font-size: var(--t-pequeno); padding: var(--e-2) 0; }
.org-itens-lista > li {
  display: grid;
  grid-template-columns: var(--alvo) minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-3);
  align-items: start;
  padding: var(--e-3) 0;
  border-top: 1px solid var(--linha);
}
.org-item-texto { display: grid; gap: 2px; min-width: 0; }
.org-item-nome { font-size: var(--t-pequeno); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.org-item-sub, .org-item-fala { color: var(--tinta-suave); font-size: var(--t-legenda); overflow-wrap: anywhere; }
.org-item-aviso { color: var(--alerta); font-size: var(--t-legenda); font-weight: 500; }
.org-itens-lista > li > .botao-texto { padding-right: 0; }   /* dentro do acordeão, que recorta: a caixa não passa da borda */

.org-editar { display: grid; gap: var(--e-2); grid-column: 1 / -1; margin-top: var(--e-3); max-width: 560px; animation: org-editar-entra var(--duration-fast) var(--ease-smooth-out); }
@keyframes org-editar-entra { from { opacity: 0; transform: translateY(calc(var(--distance-small) * -1)); } to { opacity: 1; transform: none; } }
.org-editar .linha-campo { flex-wrap: wrap; }
.org-editar .caixa-texto { flex: 1 1 14rem; min-width: 0; }
.org-editar .segmentado { margin: 0; }
.org-editar .form-acoes .botao-texto, .org-pasta-form .form-acoes .botao-texto { padding-left: var(--e-2); }

.org-avisos-lista { margin-top: var(--e-3); }
.org-avisos-lista > li { padding: var(--e-3) 0; border-top: 1px solid var(--linha); font-size: var(--t-pequeno); max-width: 72ch; }
.org-avisos-lista > li.org-aviso-info { color: var(--tinta-suave); }
.org-avisos-lista > li.org-avisos-mais { padding: var(--e-1) 0 0; }
.org-avisos-lista .botao-texto { padding-left: 0; }

/* Um vão só entre os blocos (16px): a opção não soma o próprio padding de cima ao vão */
.org-escolhas { display: grid; gap: var(--e-4); align-content: start; min-width: 0; }
.org-escolhas > .opcao-tri { padding-top: 0; }
.org-escolhas-intro { flex-basis: 100%; max-width: none; }   /* linha própria: com o teto de 62ch do .apoio ela subia ao lado do título */
.org-escolhas-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3); }
.org-difere { padding: var(--e-3) var(--e-4); border-radius: var(--raio-m); background: var(--petroleo-nevoa); color: var(--tinta); font-size: var(--t-pequeno); }
.org-escolhas .opcao-tri:last-child { border-bottom: 0; }
.org-pasta-valor, .org-desfazer-valor { font-weight: 600; overflow-wrap: anywhere; }
.org-pasta-valor { font-size: var(--t-pequeno); font-variant-numeric: tabular-nums; }
/* O alvo de 44px tem folga invisível em cima do texto: sobe a mesma folga para o vão ao texto de cima ficar igual ao de baixo */
.org-pasta-acc { margin-top: calc(var(--e-3) * -1); }
.org-pasta-acc .acordeao-cabeca { min-height: var(--alvo); justify-content: flex-start; font-size: var(--t-pequeno); }
.org-pasta-form { display: grid; gap: var(--e-3); padding: var(--e-1) var(--e-1) var(--e-3); }

@media (min-width: 640px) {
  .org-momentos { padding-left: var(--e-5); }
}
@media (min-width: 1280px) {
  /* Sem sticky: a coluna das Escolhas passa da altura da tela (1358px medidos), e presa ela esconderia
     opções com foco abaixo da borda (WCAG 2.4.11). */
  .org-corpo { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-8); align-items: start; }
}
/* Celular: o "Mudar" de cada arquivo desce para baixo do nome, que fica com a largura toda */
@media (max-width: 479.98px) {
  .org-itens-lista > li { grid-template-columns: var(--alvo) minmax(0, 1fr); }
  .org-itens-lista > li > .botao-texto { grid-column: 2; justify-self: start; margin-left: calc(var(--e-3) * -1); }
}
/* Celular estreito: cinco rótulos cabem sem encostar no vizinho ("Tratamento" tem 68px a 13px) */
@media (max-width: 379.98px) {
  .nav-itens { padding-inline: 0; }
  .nav-item { font-size: var(--t-micro); }
}
@media (prefers-reduced-motion: reduce) {
  .org-barra > span { transition: none; }
  .org-editar { animation: none; }
}

/* ── Rodar tudo (tela Fotos) ──────────────────────────────────── */
.cabeca-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.rodar { display: grid; gap: var(--e-3); padding: var(--e-4) 0; margin-bottom: var(--e-4); border-block: 1px solid var(--linha); }
.rodar-frase { min-width: 0; text-wrap: pretty; }
.rodar-andamento { display: grid; gap: var(--e-2); max-width: 720px; }
.rodar-andamento-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); color: var(--tinta-suave); font-size: var(--t-pequeno); }
.rodar-passo { display: inline-flex; flex: 1 1 14rem; align-items: center; gap: var(--e-2); min-width: 0; }
.rodar-passo .t-matrix { flex: none; }
/* 8 trechos, um por etapa: a cor diz o que já foi, o que roda agora e o que parou */
.rodar-etapas { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--e-1); margin: 0; padding: 0; }
.rodar-etapa { display: grid; gap: var(--e-1); min-width: 0; color: var(--tinta-suave); font-size: var(--t-legenda); }
.rodar-trecho { position: relative; height: 6px; border-radius: var(--raio-pilula); background: var(--linha); overflow: hidden; }
.rodar-trecho > span {
  position: absolute; inset: 0;
  background: var(--petroleo);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-smooth-out);
}
.rodar-etapa[data-estado="feito"] .rodar-trecho > span { --p: 1; }
/* Nada a fazer: o trecho fica só no contorno (feita = cheio), diferença que não depende da cor */
.rodar-etapa[data-estado="pulado"] .rodar-trecho > span { --p: 1; background: transparent; box-shadow: inset 0 0 0 1px var(--petroleo); border-radius: inherit; }
/* Pausada: listras; parada: cheio. Os dois ganham a marca ‖ ou ■ embaixo (.rodar-etapa-marca) */
.rodar-etapa[data-estado="pausado"] .rodar-trecho > span { --p: 1; background: repeating-linear-gradient(-45deg, var(--alerta) 0 3px, transparent 3px 6px); }
.rodar-etapa[data-estado="parado"] .rodar-trecho > span { --p: 1; background: var(--perigo); }
.rodar-etapa[data-estado="agora"] { color: var(--tinta); font-weight: 600; }
.rodar-etapa-marca { line-height: 1; font-size: var(--t-legenda); }
.rodar-etapa-marca:empty { display: none; }
.rodar-etapa[data-estado="pausado"] .rodar-etapa-marca { color: var(--alerta); }
.rodar-etapa[data-estado="parado"] .rodar-etapa-marca { color: var(--perigo); }
.rodar-etapa-nome { display: none; }
.rodar-pensando { min-height: 1.5em; font-size: var(--t-pequeno); }
.rodar-pensando .t-think { text-align: left; max-width: 100%; }
/* A frase que se reveza quebra linha em tela estreita ou com espaçamento de texto aumentado */
.rodar-pensando .t-think-sizer,
.rodar-pensando .t-think-text { white-space: normal; overflow-wrap: anywhere; }
.rodar-movimento { margin-left: auto; font-size: var(--t-pequeno); }
.rodar-toggle-rotulo { cursor: pointer; }
/* "Parar a animação": a frase, o brilho e os pontinhos ficam parados */
.rodar-quieto .t-shimmer,
.rodar-quieto .t-shimmer::before,
.rodar-quieto .t-matrix i,
.rodar-quieto .t-think-text { animation: none !important; transition: none !important; }
.rodar-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); color: var(--tinta-suave); font-size: var(--t-pequeno); }
.rodar-resumo .t-reel { color: var(--tinta); font-family: var(--fonte-titulo); font-size: var(--t-titulo-3); font-weight: 500; }
.rodar-avisos { display: grid; gap: var(--e-1); margin: 0; padding: 0; color: var(--tinta-suave); font-size: var(--t-pequeno); max-width: 72ch; }
.rodar-avisos li { overflow-wrap: anywhere; }
.rodar-avisos li[data-tipo="erro"] { color: var(--perigo); }
.rodar-avisos li[data-tipo="pausa"] { color: var(--alerta); }
.rodar-aviso-tipo { font-weight: 600; }
.rodar-toggle { padding: 0; min-height: 0; border-bottom: 0; }
@media (min-width: 768px) {
  /* Com espaço, cada trecho ganha o nome da etapa embaixo */
  .rodar-etapa-nome { display: block; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .rodar-trecho > span { transition: none; }
}