/* ═══ Organização padrão (13/10/2026) ═══════════════════════════════════
   Carregada por último. O sistema cresceu em camadas, e cada tela trazia a
   sua margem: medidas as telas, o conteúdo de um cartão começava a 20, 16,
   15, 14, 29, 33, 37, 1 ou 0 px da borda; o espaço entre blocos ia de 16 a
   42 px; duas fileiras de dois cartões dividiam a largura em pontos
   diferentes. Aqui ficam as regras de que tudo deriva:

   1. Entre blocos da tela, um espaço só: 16 px.
   2. No cartão, uma margem interna só: 20 px. O cabeçalho vai de borda a
      borda (régua embaixo) com o texto a 20 px, e todo o corpo começa nos
      mesmos 20 px. Caixa vazia, lista, gráfico e indicadores alinham a borda
      deles nessa margem.
   3. Tabela dentro do cartão vai de borda a borda, mas a primeira e a última
      coluna têm 20 px: o texto da tabela alinha com o título do cartão.
   4. Duas colunas de cartões são sempre metade e metade.
   5. Botão em tabela tem uma altura só, e a célula de ações continua célula
      (com `display: flex` ela perdia a régua da linha).

   Nada de cor aqui: só posição e medida. */
@media screen {
  .app {
    --org-x: 1.25rem; /* 20 px: margem interna do cartão */
    --org-y: 1rem; /* 16 px: espaço entre blocos */
  }

  /* 1. A pilha da tela */
  .app .view.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--org-y);
  }
  .app .view.active > * {
    min-width: 0;
    margin-block: 0;
  }
  .app .overview-grid,
  .app .layout-split,
  .app .dashboard-band,
  .app .dashboard-chart-grid {
    gap: var(--org-y);
  }
  .app .overview-grid > *,
  .app .dashboard-band > *,
  .app .dashboard-chart-grid > *,
  .app .layout-split > * {
    margin-block: 0;
  }

  /* 2. O cartão */
  .app .view :is(.card, .daily-block) {
    padding: 0 var(--org-x) var(--org-x);
  }
  .app .view :is(.card, .daily-block):not(:has(> :is(.card-head, .daily-block-head))) {
    padding-top: var(--org-x);
  }
  .app .view :is(.card, .daily-block) > :is(.card-head, .daily-block-head) {
    margin: 0 calc(-1 * var(--org-x)) var(--org-y);
    padding: var(--org-y) var(--org-x);
  }
  /* Cartão que é só cabeçalho (o "O que pede atenção" sem pendências): sem
     sobra de margem embaixo. */
  .app .view :is(.card, .daily-block) > :is(.card-head, .daily-block-head):last-child {
    margin-bottom: calc(-1 * var(--org-x));
    border-bottom: 0;
  }
  /* Telas que davam 20 px de margem aos filhos do cartão (correções antigas
     para cartão sem margem interna) somariam 40 agora: a margem é do cartão. */
  .app .view :is(.card, .daily-block) > :not(.card-head):not(.daily-block-head):not(.table-wrap):not(.daily-alertas) {
    margin-inline: 0;
  }
  /* Blocos do corpo que traziam recuo próprio passam a usar o do cartão. */
  .app .view :is(.card, .daily-block) > :is(
      .mini-list,
      canvas,
      .daily-photos,
      .daily-totals,
      .daily-grid,
      .daily-standard-note,
      .daily-nominal-aviso,
      .daily-passagem-campos,
      .material-adjust-note,
      .month-strip,
      .custom-material-form,
      .audit-toolbar,
      .audit-date-groups,
      .training-add-row,
      .chart-box,
      .card-body,
      .realized-grid,
      .realized-hint,
      .stats,
      .empty,
      .empty-state,
      .empty-inline
    ) {
    margin-inline: 0;
    padding-inline: 0;
  }
  /* Invólucro de corpo (`*-body`, `technical-grid`) não soma margem à do
     cartão: os campos começam onde o título começa. */
  .app .view :is(.card, .daily-block) > :is([class*='-body'], .technical-grid) {
    padding-inline: 0;
    padding-top: 0;
    /* Embaixo também: a Pré-visita fechava os cartões a 55–63 px (20 do
       invólucro, 20 do cartão e a margem do último campo). */
    padding-bottom: 0;
  }
  /* Na grade de campos quem separa é o vão, nunca a margem do campo: a
     margem de 14 px sobrava embaixo da última fileira. */
  .app .view .technical-grid {
    gap: var(--org-y);
  }
  .app .view .technical-grid > .form-group {
    margin-bottom: 0;
  }
  /* Caixa vazia e lista precisam do próprio respiro dentro da borda. A lista
     acima tinha `textarea.form-control`, e o :is() herda a especificidade do
     seletor mais forte da lista: ela vencia esta regra, e o texto do estado
     vazio encostava na moldura. O textarea tem regra própria logo abaixo. */
  .app .view :is(.card, .daily-block) > :is(.empty, .empty-state, .empty-inline) {
    padding: var(--org-y) var(--org-x);
    width: auto;
  }
  .app .view :is(.card, .daily-block) > textarea.form-control {
    width: 100%;
    padding: 0.7rem 0.85rem;
  }

  /* O bloco de cabeçalho do relatório diário segue a mesma margem. */
  .app .view .daily-card {
    padding: var(--org-x);
  }

  /* 3. A tabela no cartão */
  .app .view :is(.card, .daily-block, .daily-card) > .table-wrap:not(.card-head) {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--org-x));
    border-inline: 0;
    border-bottom: 0;
  }
  .app .view :is(.card, .daily-block, .daily-card) > .table-wrap:not(.card-head):last-child {
    margin-bottom: calc(-1 * var(--org-x));
  }
  .app .view :is(.card, .daily-block, .daily-card) > .table-wrap :is(th, td):first-child {
    padding-left: var(--org-x);
  }
  .app .view :is(.card, .daily-block, .daily-card) > .table-wrap :is(th, td):last-child {
    padding-right: var(--org-x);
  }
  /* Os indicadores de "Programado × Realizado" ficam colados como os do topo
     (régua comum, sem vão desigual). */
  .app .view .realized-grid {
    gap: 0;
  }

  /* 4. Duas colunas de cartões: metade e metade */
  @media (min-width: 1024px) {
    .app .dashboard-alerts,
    .app .dashboard-chart-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* 5. Tabela: célula de ações e altura dos botões */
  /* `width: 1%` (interface-polish.css) só não explodia porque a célula era
     flex: como célula de verdade, 1% para 163 px de botões pedia uma tabela de
     16 mil px. 1px + nowrap encolhe a coluna ao conteúdo. */
  .app td.actions-cell {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
    vertical-align: middle;
  }
  .app td.actions-cell > * + * {
    margin-left: 0.35rem;
  }
  .app .view td :is(.btn, .btn-icon) {
    height: 36px;
    min-height: 36px;
    padding-block: 0;
    vertical-align: middle;
  }
  /* Etiqueta dentro de botão de tabela ("Treinamentos · Em dia") não aumenta
     a altura do botão. */
  .app .view td .btn .status-pill {
    padding-block: 0.1rem;
    line-height: 1.2;
  }
  .app .view td .btn-icon {
    width: 36px;
    height: 36px;
  }

  /* Cartão "Projeto ativo": o rótulo em cima, o nome embaixo. */
  .app .aside-card span {
    display: block;
    margin-bottom: 0.2rem;
  }
}

/* Menu lateral (13/10/2026): com onze módulos, a 922 px de altura o último
   saía cortado e Administração sumia numa rolagem. Até 1040 px de altura os
   itens ficam com 40 px e o bloco do projeto ativo, mais enxuto. Abaixo de
   860 px (notebook de 768 px, ou zoom de 125%), 38 px: a regra logo abaixo.
   Ela morava em modulos.css, que carrega antes, e por isso nunca vencia. */
@media screen and (min-width: 769px) and (max-height: 1040px) {
  .app .nav {
    padding-block: var(--sp-2);
  }
  .app .nav-btn {
    min-height: 40px;
    margin-bottom: 1px;
    padding-block: 0.4rem;
  }
  .app .nav-foot .active-project {
    padding-block: 0.6rem;
  }
  .app .nav-foot .active-project strong {
    font-size: 1rem;
  }
}
@media screen and (min-width: 769px) and (max-height: 860px) {
  .app .nav-btn {
    min-height: 38px;
  }
}

/* Texto de apoio em cabeçalho e nota de rodapé de cartão: até ~75
   caracteres por linha. Com 449–521 px, a explicação do Programado ×
   Realizado virava uma coluna estreita de sete linhas. */
@media screen {
  .app .view .card-head p,
  .app .view .daily-block-head p,
  .app .view .realized-hint,
  .app .view .stat-note,
  .app .view :is(.card, .daily-block) > p {
    max-width: min(75ch, 100%);
  }
  /* O aviso de vazio é uma caixa, não uma linha de texto: ocupa a largura do
     cartão como os outros vazios (o do Programado × Realizado ficava com
     620 px num cartão de 1062). */
  .app .view :is(.card, .daily-block) > p:is(.empty, .empty-state, .empty-inline) {
    max-width: none;
  }
}

/* Motoristas na equipe, na mesma linha de "Adicionar quem faltou" (pedido de
   13/10/2026): o campo tem a altura dos botões pequenos e não empurra o
   resto para a direita, como fazia no rodapé do bloco. */
@media screen {
  .app .daily-block-actions {
    align-items: center;
  }
  .app .daily-block-actions .daily-drivers {
    margin-left: 0;
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
  }
  /* A mesma altura dos botões da linha: 40 px no computador, 44 no toque. */
  .app .daily-block-actions .daily-drivers input {
    min-height: 40px;
    height: 40px;
    padding-block: 0;
  }
}
@media screen and (max-width: 768px) {
  .app .daily-block-actions .daily-drivers {
    width: 100%;
    justify-content: space-between;
  }
  .app .daily-block-actions .daily-drivers input {
    min-height: 44px;
    height: 44px;
  }
}

/* Cartão de falta (revisão visual de 13/10/2026, com faltas lançadas): o
   texto claro do tema sumia sobre o fundo de atenção, e o motivo largo
   espremia o nome numa coluna de duas letras. Tinta escura sobre o fundo
   claro, o motivo na largura do texto e cartões mais largos. */
@media screen {
  .app .daily-faltas-lista:has(> li.daily-falta) {
    grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
  }
  .app .daily-faltas-lista li.daily-falta {
    color: var(--ink);
  }
  .app .daily-faltas-lista li.daily-falta :is(.daily-falta-quem small, .daily-falta-ate, .daily-falta-motivo-fixo) {
    color: var(--risk-attention);
  }
  .app .daily-faltas-lista li.daily-falta .btn-ghost {
    color: var(--ink);
    border-color: var(--rule-hair-ink);
  }
  .app .daily-falta-detalhe .daily-falta-motivo {
    width: auto;
    min-width: 9.5rem;
  }
  /* Quantas pessoas da função faltaram (15/10/2026): número curto, na
     linha do motivo, sem esticar o cartão. */
  .app .daily-falta-detalhe .daily-falta-qtd {
    flex: none;
    width: 5.5rem;
    text-align: right;
  }
  .app .daily-faltas-lista li.daily-falta .daily-falta-detalhe {
    flex-wrap: nowrap;
  }
  .app .daily-falta-ate {
    white-space: nowrap;
  }
  .app .daily-falta-ate input {
    width: auto;
  }
}

/* Histórico de relatórios: filtro por ano e mês ao lado do título, e uma
   linha por mês separando os relatórios (pedido de 13/10/2026). */
@media screen {
  .app .daily-history-title {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .app .daily-history-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .app .daily-history-filtro label {
    min-width: 150px;
  }
  .app .daily-history-table tr.daily-history-mes th {
    padding: var(--sp-2) 20px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-align: left;
    text-transform: uppercase;
  }
  .app .daily-history-table tr.daily-history-mes th span {
    margin-left: var(--sp-2);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
}
@media screen {
  /* Carimbo em lote, só para o Supervisor (15/10/2026). */
  .app .daily-lote {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 20px;
    border-top: var(--rule-hair) solid var(--border);
    border-bottom: var(--rule-hair) solid var(--border);
    background: var(--surface-2);
  }
  .app .daily-lote p {
    flex: 1 1 260px;
    margin: 0;
    font-size: var(--t-sm);
  }
  .app .daily-lote-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
  }
  .app .daily-lote-campos label {
    display: grid;
    flex: 1 1 150px;
    gap: 0.35rem;
    min-width: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}
@media screen and (max-width: 768px) {
  .app .daily-history-title {
    grid-template-columns: 1fr;
  }
  .app .daily-history-filtro label {
    flex: 1 1 140px;
    min-width: 0;
  }
}

/* Condição térmica: a caixa "Equipamento não disponível" abre o bloco, com
   alvo de toque de 44 px (pedido de 13/10/2026). */
@media screen {
  .app .daily-ambiente-indisponivel {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }
  .app .daily-ambiente-indisponivel input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
  }
}

/* Nota dentro de bloco do relatório: o limite de ~75 caracteres por linha
   cortava a régua de baixo no meio. Dentro do bloco, a nota fica sem régua;
   o espaçamento já separa. */
@media screen {
  .app .view .daily-block > p.daily-standard-note {
    border-bottom: 0;
  }
}
@media screen {
  .app .daily-faltas-lista li.daily-falta .daily-falta-quem {
    min-width: 14ch;
  }
  /* Com "Equipamento não disponível", o menu travado fica igual aos campos travados. */
  .app .daily-environmental select.form-control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
}
@media screen {
  /* "1 falta" no cabeçalho escuro: a tinta de atenção do papel media pouco
     contraste aqui; a do escuro (que o tema claro devolve à do papel) lê. */
  .app .daily-falta-contagem {
    color: var(--risk-attention-void);
  }
}

/* 6. Relatório diário (14/10/2026): a grade do relatório tinha vão de 24 px e
   cada bloco ainda somava 16 px de margem, e os espaços saíam em 24, 26, 40 e
   56 px. Agora é o vão de 16 px da regra 1 e nada mais. O título de seção
   ("Contingente NPE") ganha o dobro acima, para ficar perto do que ele nomeia,
   e alinha com a borda dos cartões; a nota que o segue, fora de cartão, perde a
   caixa que só faz sentido dentro de um. */
@media screen {
  .app .daily-report {
    gap: var(--org-y);
  }
  .app .daily-report > * {
    margin-block: 0;
  }
  .app .daily-report > .daily-section-title {
    margin-top: var(--org-y);
    padding-inline: 0;
  }
  .app .daily-report > .daily-standard-note {
    max-width: 75ch;
    padding: 0;
    border-bottom: 0;
  }
}
/* Dentro do bloco do relatório, o mesmo ritmo dos outros cartões: 16 px do
   cabeçalho ao primeiro conteúdo, 16 px entre partes e 20 px do último até a
   borda. O texto livre e as fotos traziam 16 px de margem própria (de
   interface-polish.css), e as equipes abriam a 32 px e fechavam a 37 px. */
@media screen {
  /* block: em inline-block a margem não se junta à do cabeçalho (dava 32 px)
     e a linha de texto deixava 7 px de sobra embaixo. */
  .app .view .daily-block > textarea.form-control {
    display: block;
    margin: 0;
  }
  .app .view .daily-block > :not(.daily-block-head) + textarea.form-control {
    margin-top: var(--org-y);
  }
  .app .view .daily-block > .daily-photos,
  .app .view .daily-block > textarea.form-control + .daily-photos {
    margin: var(--org-y) 0 0;
  }
  /* Tabela logo abaixo do cabeçalho encosta nele: a faixa de 16 px entre as
     duas réguas era um vão sem conteúdo, e a régua dobrada. */
  .app .view :is(.card, .daily-block, .daily-card) > :is(.card-head, .daily-block-head) + .table-wrap {
    margin-top: calc(-1 * var(--org-y));
    border-top: 0;
  }
}

/* 7. Janelas (14/10/2026): no celular o cabeçalho da janela recuava 16 px e o
   corpo e o rodapé, 20 px — o título não alinhava com o primeiro campo. A
   margem de 20 px vale para as três partes, em qualquer largura. */
@media screen {
  /* Sem `.app`: o diálogo de confirmação é anexado fora dele. */
  .modal-overlay .modal :is(.modal-head, .modal-body, .modal-foot) {
    padding-inline: 1.25rem;
  }
}
/* Alvos de toque nas janelas: o campo de digitar a confirmação (42 px) e a
   seção recolhível "Ajustar tempo previsto" (38 px). */
@media screen and (max-width: 768px), screen and (pointer: coarse) {
  .modal-overlay .modal :is(input.form-control:not([type=checkbox]):not([type=radio]), select.form-control, summary) {
    min-height: 44px;
  }
}
/* Com uma janela aberta, o botão do assistente sai da frente: no celular ele
   cobria o botão de confirmar do diálogo, que fica no pé da tela. */
@media screen {
  body:has(.modal-overlay.open) .industrial-chat-fab {
    display: none;
  }
}
/* Texto livre é bloco: em inline-block a linha de texto deixava 7 px de
   sobra embaixo do campo, e o cartão fechava a 28 px em vez de 20. */
@media screen {
  .app .view textarea.form-control {
    display: block;
  }
}
/* O ícone do botão não cede espaço ao texto: num botão estreito ele encolhia
   (o de "Adicionar PDF" chegava a 5 px de largura). */
@media screen {
  :is(.app, .terceirizada-page) .btn > .sr-icon,
  :is(.app, .terceirizada-page) .btn > svg {
    flex: none;
  }
}

/* 8. Excluir (14/10/2026): o vermelho cheio repetido em cada cartão (74 na
   Biblioteca, um por rota, um por atividade) fazia da cor de impedido a mais
   presente na tela. O botão de excluir passa a ser contornado; o vermelho
   cheio fica para a confirmação, o momento em que a exclusão acontece. */
@media screen {
  :is(.app, .terceirizada-page) .btn.btn-danger:not(#confirmDialogOk) {
    background: transparent;
    color: var(--risk-blocked-void);
    border-color: var(--risk-blocked-void);
    box-shadow: none;
  }
  :is(.app, .terceirizada-page) .btn.btn-danger:not(#confirmDialogOk):hover {
    background: rgba(240, 100, 90, 0.12);
  }
}
/* A silhueta de carregamento dentro do painel escuro: vinha no bege do papel. */
@media screen {
  .app .skeleton {
    background: var(--console-panel-2);
  }
  .app .skeleton::after {
    background-image: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.06) 50%, transparent 75%);
  }
}

/* 9. Indicadores (14/10/2026): "R$ 5.780.317,08" quebrava no meio, com os
   centavos na linha de baixo — um número partido se lê errado. O valor não
   quebra; ele diminui com a largura da célula (até o tamanho de antes, que
   continua sendo o teto) para caber inteiro. */
@media screen {
  .app .stat-card {
    container-type: inline-size;
  }
  /* Piso de 1,1 rem: em célula estreita (os três indicadores do relatório no
     celular) só a conta pela largura dava 6 px. */
  .app .stat-card .val {
    white-space: nowrap;
    font-size: clamp(1.1rem, 10.5cqi, 1.8rem);
  }
}
/* Busca de lista (Estoque, Materiais): somava 16 px ao recuo do cartão (o
   campo começava a 36 px da borda) e o rótulo vinha em letra corrida. */
@media screen {
  .app .view :is(.card, .daily-block) > .list-search {
    padding-inline: 0;
  }
  .app .list-search > label:first-child {
    color: var(--muted);
    font-family: var(--font-label);
    font-stretch: var(--stretch-label);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }
}
/* Regra 2, completada (14/10/2026): o primeiro bloco depois do cabeçalho não
   soma margem à do cabeçalho, e o último não deixa margem embaixo — o cartão
   fecha nos 20 px da própria margem. (Remotas abria a 28 px e fechava a 35.) */
@media screen {
  .app .view :is(.card, .daily-block) > :is(.card-head, .daily-block-head) + :not(.table-wrap) {
    margin-top: 0;
  }
  .app .view :is(.card, .daily-block) > :last-child:not(.table-wrap) {
    margin-bottom: 0;
  }
}
/* 10. Bloco de indicadores (14/10/2026): seis indicadores numa grade de
   quatro (Contratos) ou cinco (Remotas) deixavam células vazias na cor do fio.
   Seis viram três por fileira; e o último indicador de qualquer bloco ocupa o
   que sobrar da fileira dele. */
@media screen and (min-width: 561px) {
  .app .stats:has(> .stat-card:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen {
  .app .stats > .stat-card:last-child {
    grid-column: auto / -1;
  }
}