/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Smooth SPA-like page transitions on Turbo navigations (native browser API). */
@view-transition {
  navigation: auto;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Barras de progresso (ranking/dashboard) crescem ao aparecer. Mudanças de
   largura depois disso (refresh em tempo real) usam transition. */
@keyframes barra-cresce {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.barra-animada {
  transform-origin: left;
  animation: barra-cresce 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Conteúdo de turbo-frame lazy (skeleton → dados) entra com fade.
   Turbo marca o frame com [complete] quando o conteúdo chega. */
@keyframes surge {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
.frame-surge[complete] > * {
  animation: surge 0.25s ease-out both;
}

/* Modal de confirmação (<dialog>). */
@keyframes dialog-entra {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.dialog-animado[open] {
  animation: dialog-entra 0.16s ease-out;
}

/* Selo "Ao vivo" (shared/_ao_vivo): cinza enquanto conecta, verde pulsando
   quando o <turbo-cable-stream-source> da página está conectado. */
@keyframes ao-vivo-pulsa {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.ao-vivo { background: var(--color-gray-100); color: var(--color-gray-500); }
.ao-vivo-ponto > span:last-child { background: var(--color-gray-400); }
.ao-vivo-texto::after { content: "Conectando…"; }
body:has(turbo-cable-stream-source[connected]) .ao-vivo { background: var(--color-emerald-50); color: var(--color-emerald-700); }
body:has(turbo-cable-stream-source[connected]) .ao-vivo-ponto > span:last-child { background: #10b981; }
body:has(turbo-cable-stream-source[connected]) .ao-vivo-pulso {
  background: #34d399;
  animation: ao-vivo-pulsa 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
body:has(turbo-cable-stream-source[connected]) .ao-vivo-texto::after { content: "Ao vivo"; }

/* Curva padrão das chegadas: desacelera forte, sem quicar. */
:root { --ease-chegada: cubic-bezier(0.16, 1, 0.3, 1); }

/* Registro salvo (registros/_confirmacao): o check se desenha e o cartão
   assenta. O traço do prazo de "Desfazer" encolhe até o botão sumir. */
@keyframes check-desenha { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes check-anel { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes confirmacao-entra { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes prazo-esvazia { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.confirmacao-entra { animation: confirmacao-entra 0.45s var(--ease-chegada) both; }
.check-anel { animation: check-anel 0.4s var(--ease-chegada) both; }
.check-traco { stroke-dasharray: 24; animation: check-desenha 0.45s 0.15s var(--ease-chegada) both; }
.prazo-desfazer { transform-origin: left; animation: prazo-esvazia linear both; }

/* Célula da grade que acabou de mudar (registro feito agora ou chegando ao
   vivo pelo morph): acende na cor da marca e volta. */
@keyframes celula-acende {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-brand) 55%, transparent); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 10px transparent; transform: none; }
}
.celula-acende { animation: celula-acende 1.1s var(--ease-chegada) 2; }

/* Painel lateral da grade (<dialog>): desliza da direita. */
@keyframes painel-entra { from { transform: translateX(100%); } to { transform: none; } }
.painel-lateral[open] { animation: painel-entra 0.32s var(--ease-chegada); }
.painel-lateral::backdrop { background: rgb(0 0 0 / 35%); backdrop-filter: blur(2px); }

/* Donut do dashboard: o anel se desenha no sentido horário. */
@property --revela { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@keyframes anel-revela { from { --revela: 0%; } to { --revela: 100%; } }
.anel-revela {
  mask: conic-gradient(#000 var(--revela), transparent 0);
  animation: anel-revela 1.1s var(--ease-chegada) both;
}

/* Colunas da evolução mensal crescem de baixo, uma depois da outra. */
@keyframes coluna-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.coluna-animada { transform-origin: bottom; animation: coluna-cresce 0.7s var(--ease-chegada) both; }

/* Mapa do Brasil do Dashboard (dashboard/_mapa): cada estado na cor da
   marca, mais forte quanto mais capítulos participando (--intensidade vem
   do nível). Mistura com a superfície, então funciona nos dois temas. */
.mapa-estado, .mapa-amostra { fill: var(--color-gray-100); background: var(--color-gray-100); }
.mapa-estado:not([data-nivel="0"]), .mapa-amostra:not([data-nivel="0"]) {
  fill: color-mix(in oklab, var(--color-brand) var(--intensidade), var(--color-surface));
  background: color-mix(in oklab, var(--color-brand) var(--intensidade), var(--color-surface));
}
.mapa-estado {
  stroke: var(--color-surface);
  stroke-width: 1;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.4s ease, stroke 0.15s ease;
  animation: estado-surge 0.5s var(--ease-chegada) both;
}
.mapa-amostra { border: 1px solid var(--color-gray-200); }
/* Modo "aprovadas × devolvidas": do amarelo (0% aprovadas) ao verde (100%),
   misturado em oklab para o meio do caminho não ficar barrento. Os tons 400–500
   não mudam no tema escuro, então valem para os dois. */
.mapa-estado.mapa-calor:not([data-nivel="0"]) {
  fill: color-mix(in oklab, var(--color-emerald-500) var(--razao), var(--color-amber-400));
}
.mapa-legenda-calor { background: linear-gradient(in oklab 90deg, var(--color-amber-400), var(--color-emerald-500)); }
.mapa-brasil .mapa-uf[data-selecionado] .mapa-estado { stroke: var(--color-brand-ink); stroke-width: 2.5; }
@keyframes estado-surge { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.mapa-brasil .mapa-uf { outline: none; cursor: pointer; }
.mapa-brasil .mapa-uf:hover .mapa-estado, .mapa-brasil .mapa-uf:focus-visible .mapa-estado {
  stroke: var(--color-brand-ink);
  stroke-width: 2;
  filter: brightness(1.08);
}

/* Retrospectiva em slides (retrospectivas/show). Cada slide é um "palco"
   vinho com um brilho dourado em posição diferente; o conteúdo entra em
   sequência sempre que o slide aparece (hidden → visível reinicia a animação). */
.historia-slide {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3.5rem 2rem 4rem; text-align: center;
}
.historia-slide :is(button, a) { pointer-events: auto; }
.historia-slide[hidden] { display: none; }
.historia-fundo-1 { background: radial-gradient(120% 70% at 50% 0%, rgb(212 168 67 / 32%), transparent 60%), linear-gradient(180deg, #7a1a22, #2e080c); }
.historia-fundo-2 { background: radial-gradient(90% 60% at 100% 100%, rgb(212 168 67 / 28%), transparent 60%), linear-gradient(160deg, #591018, #2e080c); }
.historia-fundo-3 { background: radial-gradient(90% 60% at 0% 100%, rgb(5 150 105 / 22%), transparent 60%), linear-gradient(200deg, #6b1620, #2e080c); }
.historia-fundo-4 { background: radial-gradient(100% 60% at 0% 0%, rgb(212 168 67 / 25%), transparent 60%), linear-gradient(170deg, #4a0d14, #1f0508); }
.historia-fundo-5 { background: radial-gradient(100% 70% at 50% 50%, rgb(212 168 67 / 18%), transparent 65%), linear-gradient(180deg, #591018, #1f0508); }
@keyframes historia-surge { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.historia-surge { animation: historia-surge 0.6s var(--ease-chegada) both; }
.historia-surge:nth-child(2) { animation-delay: 0.12s; }
.historia-surge:nth-child(3) { animation-delay: 0.24s; }
.historia-surge:nth-child(4) { animation-delay: 0.36s; }
.historia-surge:nth-child(5) { animation-delay: 0.48s; }
.historia-barra { transform-origin: left; animation: barra-cresce 0.9s var(--ease-chegada) both; }
@keyframes estado-acende { from { fill: rgb(255 255 255 / 12%); } }
.historia-estado-visitado { animation: estado-acende 0.6s ease-out both; }

/* Barra sem espaço para os links (menu_controller.js): eles vão para o menu,
   como no celular. Fora de @layer, vence o xl:flex/xl:hidden do Tailwind. */
.barra-compacta .nav-barra { display: none; }
.barra-compacta [data-menu-target="botao"] { display: grid; }
.barra-compacta #menu-principal:not(.hidden) { display: block; }

/* Palco da ficha do capítulo (capitulos/show): vinho em leve degradê com um
   fio dourado no alto. */
.palco {
  background: linear-gradient(165deg, #7a1a22 0%, #5e121a 55%, #420b12 100%);
  box-shadow: inset 0 1px 0 rgb(243 217 164 / 28%), inset 0 0 0 1px rgb(243 217 164 / 10%), 0 18px 36px -28px rgb(46 8 12 / 90%);
}
.palco ::selection { background: rgb(243 217 164 / 35%); color: #fff; }
.palco :focus-visible { outline-color: #f3d9a4; }

/* Ficha do capítulo (capitulos/show): eliminado apaga o palco para um
   grafite avermelhado. */
.ficha-palco-eliminado { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 3%) 0 12px, transparent 12px 24px), linear-gradient(135deg, #3b2a2d, #1a1214); }
.ficha-selo-ativo { background: rgb(16 185 129 / 22%); color: #a7f3d0; }
.ficha-selo-eliminado { background: rgb(239 68 68 / 25%); color: #fecaca; }
.ficha-surge { animation: historia-surge 0.6s var(--ease-chegada) both; }

/* Ladrilho de atividade: a cor da situação (--cor-situacao) vira a faixa à
   esquerda, um véu no fundo e o rótulo. Não enviada fica tracejada. */
.ficha-ladrilho {
  border-color: color-mix(in oklab, var(--cor-situacao) 35%, var(--color-gray-200));
  background: linear-gradient(135deg, color-mix(in oklab, var(--cor-situacao) 12%, var(--color-surface)), var(--color-surface) 70%);
}
.ficha-ladrilho::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cor-situacao); }
.ficha-ladrilho-rotulo { color: color-mix(in oklab, var(--cor-situacao) 75%, var(--color-gray-900)); }
.ficha-ladrilho-pendente { border-style: dashed; background: var(--color-surface); }
.ficha-ladrilho-pendente .ficha-ladrilho-rotulo { color: var(--color-gray-500); }
.ficha-participacao-participando { color: var(--color-emerald-700); }
.ficha-participacao-concluinte { color: var(--color-emerald-800); }
.ficha-participacao-sem_aprovacao { color: var(--color-amber-700); }
.ficha-participacao-eliminado { color: var(--color-red-700); }

/* A curva de pontos se desenha da esquerda para a direita. */
@keyframes curva-revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ficha-curva { animation: curva-revela 1.4s var(--ease-chegada) both; }

/* Confete do capítulo completo (confete_controller.js). */
.confete { position: fixed; pointer-events: none; z-index: 60; width: 8px; height: 12px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .barra-animada, .dialog-animado[open], .ao-vivo-pulso, .frame-surge[complete] > *,
  .confirmacao-entra, .check-anel, .check-traco, .anel-revela, .coluna-animada, .painel-lateral[open], .mapa-estado,
  .historia-surge, .historia-barra, .historia-estado-visitado, .ficha-surge, .ficha-curva, .medidor-barra { animation: none !important; transition: none; }
  /* A célula ainda sinaliza a mudança, só sem movimento. */
  .celula-acende { animation: none; outline: 2px solid var(--color-brand); outline-offset: 1px; }
}

/* Thin, unobtrusive scrollbar for dropdowns and other small scroll areas. */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-400);
}

/* Medidor da pontuação (registros/new, medidor_controller.js): vinho que
   esquenta para o dourado conforme a nota sobe; acima do limite fica
   vermelho, e sem pontuação a barra some. */
.medidor-barra {
  background: linear-gradient(90deg, var(--color-brand), #d4a843);
  transform: scaleX(0);
  transition: transform 0.45s var(--ease-chegada), background 0.2s ease;
}
[data-medidor="acima"] .medidor-barra { background: var(--color-red-600); }
[data-medidor="acima"] .medidor-texto { color: var(--color-red-700); }
[data-medidor="maxima"] .medidor-texto { color: var(--color-brand-ink); }
[data-medidor="sem-pontos"] .medidor-texto { color: var(--color-amber-700); }

/* Área de planilha (shared/_campo_planilha): foco do input invisível vira
   contorno da área; arquivo escolhido ou arrastado acende em vinho. */
.campo-planilha:has(input:focus-visible) { outline: 2px solid var(--color-brand-ink); outline-offset: 2px; }
.campo-planilha-arrastando, .campo-planilha-escolhido { border-style: solid; border-color: var(--color-brand); background: var(--color-brand-soft); }
.campo-planilha-escolhido .campo-planilha-nome { color: var(--color-brand-ink); font-weight: 600; }