/* InfraMINA — movimento (decisão de 07/10/2026: "mais animação").

   O carimbo continua sendo o único momento autorado (DESIGN.md). O resto é
   movimento de serviço: diz que a tela mudou, de onde algo veio e que o
   clique foi recebido. Regras, todas da etapa de movimento do design:

   - Só transform e opacity animam; nada de largura, altura ou margem.
   - Entrar e sair: curva de saída forte (--curva-saida). Nunca ease-in.
   - Tela de trabalho abaixo de 300 ms; a saída mais rápida que a entrada.
   - O que se usa dezenas de vezes por turno (passar o mouse, digitar,
     redesenhar a tela) não anima, ou anima só cor, em 110 ms.
   - Movimento não traz cor nova: nada aqui pinta, só move e esmaece.
   - Com "reduzir movimento" ligado, as durações vão a zero (tokens.css) e as
     animações abaixo são desligadas no fim desta folha. */

/* ── Troca de tela: blocos em cascata ───────────────────────────────── */
/* O script marca só os blocos de cima com `em-cascata` (um cartão dentro de
   outro não anima duas vezes) e tira `entrando` da tela depois de meio
   segundo: o que for redesenhado depois disso aparece sem animar. */
.view.active {
  animation: view-in var(--dur-entrada) var(--curva-saida);
}
.view.entrando .em-cascata {
  animation: bloco-entra var(--dur-entrada) var(--curva-saida) both;
  animation-delay: calc(var(--ordem, 0) * var(--cascata));
}
@keyframes bloco-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Barras de andamento enchem da esquerda quando a tela entra. */
.view.entrando :is(.fiscal-progress > span, .estatistica-barra > i, .remota-ocupacao > i) {
  transform-origin: left center;
  animation: barra-enche var(--dur-lento) var(--curva-saida) both;
  animation-delay: calc(var(--ordem, 0) * var(--cascata) + 80ms);
}
@keyframes barra-enche {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}

/* ── Abas dos módulos: a aba nova acende, a antiga apaga ───────────── */
.rotas-aba,
.nav-btn {
  transition:
    color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

/* ── Botões: respondem ao toque (o afundar de 2 px é do DESIGN.md) ─── */
.btn {
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) var(--curva-saida);
}

/* ── Janelas: o fundo escurece e a janela sobe de leve ──────────────── */
.modal-overlay.open {
  animation: fundo-escurece var(--dur) ease-out;
}
.modal-overlay.open .modal {
  animation: janela-entra var(--dur-entrada) var(--curva-saida);
}
@keyframes fundo-escurece {
  from {
    opacity: 0;
  }
}
@keyframes janela-entra {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Aviso (toast): sobe de baixo, sai mais depressa do que entra ───── */
.toast {
  transition:
    opacity var(--dur-saida) ease-out,
    transform var(--dur-saida) var(--curva-saida);
}
.toast.show {
  transition-duration: var(--dur-entrada);
}

/* ── Seções recolhíveis: o conteúdo aparece, não salta ──────────────── */
/* Só no clique de quem abre (o script põe `abrindo`); uma seção que o
   redesenho devolve aberta não anima de novo. */
details.abrindo[open] > :not(summary) {
  animation: aparece var(--dur) var(--curva-saida);
}
@keyframes aparece {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Menu do celular: a gaveta desliza, com a curva de gaveta ───────── */
@media (max-width: 1024px) {
  .sidebar {
    transition: transform var(--dur-entrada) var(--curva-gaveta);
  }
}

/* ── Silhueta de carregamento ─────────────────────────────────────────
   A peça é a `.skeleton` de styles.css (com o brilho que passa); aqui só o
   arranjo de três linhas que o script desenha enquanto a lista chega. */
.silhueta {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}
.silhueta .skeleton:nth-child(2) {
  width: 82%;
}
.silhueta .skeleton:nth-child(3) {
  width: 64%;
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .view.entrando .em-cascata,
  .view.entrando :is(.fiscal-progress > span, .estatistica-barra > i, .remota-ocupacao > i),
  .modal-overlay.open,
  .modal-overlay.open .modal,
  details.abrindo[open] > :not(summary) {
    animation: none;
  }
}


/* ═══ Página de entrada (13/10/2026) ═══════════════════════════════════
   Fica no fim da última folha porque a entrada tinha regras em três
   arquivos; aqui elas se resolvem de uma vez, sem !important.
   - Celular: só o cartão, centrado, sem foto (nada a baixar).
   - A partir de 960 px: duas colunas — a foto da correia, escurecida para
     o vazio, com o nome do sistema; o cartão do lado, na mesma altura.
   - Os caminhos secundários são links de texto em tinta neutra: o laranja
     é do carimbo, e esquecer a senha não é autorizar nada (regra 2). */
.auth-gate.open {
  align-content: center;
}
.auth-gate .auth-visual {
  display: none;
}
.auth-gate .auth-card {
  display: grid;
  gap: 0;
  width: min(420px, 100%);
}
.auth-gate .auth-form > .btn-primary {
  margin-top: 0.25rem;
}
.auth-gate .auth-caminhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.auth-gate .auth-link-btn {
  width: auto;
  min-height: 44px;
  padding: 0 0.1rem;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}
.auth-gate .auth-link-btn:hover:not(:disabled) {
  color: var(--text);
  background: none;
  text-decoration-color: currentColor;
}
.auth-gate .auth-link-btn:focus-visible {
  outline: var(--rule-body) solid var(--text);
  outline-offset: 2px;
}
.auth-gate .auth-link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.auth-gate .auth-rodape {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: var(--rule-hair) solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
@media (min-width: 960px) {
  .auth-gate.open {
    grid-template-columns: minmax(0, 1.25fr) minmax(400px, 0.85fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    background: var(--void-2);
    backdrop-filter: none;
  }
  .auth-gate .auth-visual {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    justify-self: stretch;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 4.5rem);
    background:
      linear-gradient(180deg, rgba(21, 22, 25, 0.15) 0%, rgba(21, 22, 25, 0.35) 45%, rgba(21, 22, 25, 0.94) 100%),
      linear-gradient(90deg, rgba(21, 22, 25, 0) 45%, rgba(21, 22, 25, 0.55) 78%, #111215 100%),
      url('../public/images/galeria/galeria-14-correia-iluminada.jpg') center 40% / cover no-repeat;
  }
  .auth-gate .auth-visual-texto {
    display: grid;
    gap: 0.6rem;
    max-width: 30rem;
  }
  .auth-gate .auth-visual-kicker {
    color: var(--on-void-2);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--track-label, 0.09em);
    text-transform: uppercase;
  }
  .auth-gate .auth-visual-texto strong {
    color: var(--on-void);
    font-family: var(--font-label);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .auth-gate .auth-visual-texto p {
    margin: 0;
    color: var(--on-void-2);
    font-size: 1.02rem;
    line-height: 1.5;
  }
  .auth-gate .auth-card {
    justify-self: center;
    align-self: center;
    width: min(420px, calc(100% - 4rem));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .auth-gate.open .auth-card {
    animation: entrada-cartao var(--dur-entrada, 240ms) var(--curva-saida, ease-out) both;
  }
}
@keyframes entrada-cartao {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Telas muito estreitas (até 150 px, 13/10/2026): o cartão encolhe e o
   conteúdo junto. Campo de texto tem largura mínima própria (≈150 px) e a
   coluna da grade não encolhia abaixo dela. */
.auth-gate .auth-card {
  grid-template-columns: minmax(0, 1fr);
}
.auth-gate .auth-card > *,
.auth-gate .auth-brand > div,
.auth-gate .auth-form > * {
  min-width: 0;
}
.auth-gate .auth-form .form-control {
  width: 100%;
  min-width: 0;
}
.auth-gate .auth-brand strong,
.auth-gate .auth-brand span,
.auth-gate .auth-card h1,
.auth-gate .auth-card p {
  overflow-wrap: anywhere;
}
.auth-gate .auth-link-btn,
.auth-gate .auth-form .btn {
  white-space: normal;
  text-align: center;
}
@media (max-width: 279px) {
  .auth-gate.open {
    padding: 6px;
  }
  .auth-gate .auth-card {
    padding: 0.75rem;
  }
  .auth-gate .auth-logo {
    display: none;
  }
}

/* Até 279 px de largura (relógio, tela dividida, zoom muito alto): a barra
   do topo e o conteúdo perdem o recuo generoso, e título e botão quebram
   linha em vez de empurrar a página para o lado (13/10/2026). */
@media (max-width: 279px) {
  .app .topbar {
    padding: 0.5rem;
    gap: 0.4rem;
  }
  .app .topbar-title {
    min-width: 0;
  }
  .app .topbar-title h1,
  .app .topbar-title p,
  .app .view h1,
  .app .view h2,
  .app .view h3 {
    overflow-wrap: anywhere;
  }
  .app .content {
    padding: 6px;
  }
  .app .topbar-title h1 {
    font-size: 0.82rem;
    letter-spacing: 0;
  }
  .industrial-chat-fab {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.75rem;
  }
  .app .view .btn,
  .app .daily-toolbar span {
    white-space: normal;
    max-width: 100%;
  }
  .app .view .form-group,
  .app .view .form-control,
  .app .view .stat-card,
  .app .view .daily-toolbar > * {
    min-width: 0;
    max-width: 100%;
  }
  .app .daily-toolbar,
  .app .card,
  .app .daily-card,
  .app .daily-block {
    padding-inline: 0.5rem;
  }
}

/* Abaixo de 300 px, os cabeçalhos com ação ao lado (mês e imprimir, título e
   faixa de risco) empilham, e as barras de ferramenta quebram linha. */
@media (max-width: 299px) {
  .app .card-head,
  .app .daily-title,
  .app .daily-title > div,
  .app .capex-actions,
  .app .map-editor-toolbar,
  .app .map-tool-group {
    flex-wrap: wrap;
    min-width: 0;
  }
  .app .card-head > *,
  .app .capex-actions > *,
  .app .daily-title > div > *,
  .app .daily-grid > *,
  .app .rotas-resumo > *,
  .app .view .empty {
    min-width: 0;
    max-width: 100%;
  }
  .app .daily-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .risk-label {
    white-space: normal;
  }
  .app .rotas-resumo {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .rotas-resumo-item span,
  .app .rotas-resumo-item strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app .capex-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .app .capex-actions > .btn {
    white-space: normal;
  }
  .app #view-monthly #monthlyMonth {
    min-width: 0;
    width: 100%;
  }
  .app .topbar-title * {
    overflow-wrap: anywhere;
  }
  /* "Diagrama | Tabela" tinha largura do próprio conteúdo e alargava a
     coluna inteira da Malha. */
  .app .malha-modo {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .app .rotas-conteudo > * {
    min-width: 0;
  }
}

/* Entrada sem foto (a página da terceirizada): uma coluna, cartão no centro.
   A grade de duas colunas valia também ali, e o cartão ia para a esquerda. */
@media (min-width: 960px) {
  .auth-gate.open:not(:has(.auth-visual)) {
    grid-template-columns: minmax(0, 1fr);
    background: var(--void-2);
  }
  .auth-gate.open:not(:has(.auth-visual)) .auth-card {
    justify-self: center;
  }
}
/* "Voltar para entrar" (redefinir senha) é caminho, não ação: link de texto,
   como "Esqueci minha senha" na entrada. */
.auth-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 4px;
}
.auth-link:hover {
  text-decoration-color: currentColor;
}
/* Campos da página da terceirizada: o que alguém responde vai na monoespaçada
   dos valores, como no sistema interno (DESIGN.md, Tipografia). */
.terceirizada-page :is(.form-control, .cell-in) {
  font-family: var(--font-value);
}