/* casco.css — o que as telas desenhadas tinham no bloco "extra desta tela" e o site também precisa.
   Copiado das telas aprovadas (Etapa8, Controlador-A, Celular, Estados), sem nada novo de desenho;
   candidato a subir para design/sistema/componentes.css, que é a folha única (decisão da sessão
   principal). Só var(--…): a prova cores_uma_fonte acusa cor solta aqui também. */

/* Etapa8 (Opção 2): a barra de 3 px sob as abas; o cartão do topo compacto. */
.o-cabecalho--duas-linhas .o-cabecalho__linha--abas { border-top: 0; border-bottom: 3px solid var(--marinho); padding-bottom: 0; align-items: flex-end; min-height: 40px; }
.o-documento--compacto { padding: var(--esp-4) var(--esp-5); gap: 0; }
.o-documento--compacto .o-documento__titulo { font-size: 22px; line-height: 28px; }
.o-sequencia--abas a.o-sequencia__etapa { font-family: inherit; }
/* A marca da aba aberta (fundo marinho): o desenho só mostrou a aberta "em curso"; aceita e
   proposta, em marinho ou verde-escuro sobre marinho, sumiam. Ficam em branco. */
.o-sequencia--abas .o-sequencia__etapa--atual .o-sequencia__marca { color: var(--sobre-marinho); }
.o-sequencia--abas .o-sequencia__etapa--atual .o-etapa-circulo--pronta { border-color: var(--sobre-marinho); }
.o-sequencia--abas .o-sequencia__etapa--atual .o-etapa-circulo--pronta::after { background: var(--sobre-marinho); }

/* Estados: o "Mais" é um <details>: abre e fecha sem roteiro. */
.o-menu-mais > summary { list-style: none; cursor: pointer; }
.o-menu-mais > summary::-webkit-details-marker { display: none; }
.o-menu__item[aria-current="page"] { background: var(--marinho-fundo); color: var(--marinho); font-weight: 600; }
.o-menu__item .o-codigo { color: var(--tinta-3); }

/* O seletor de unidade é também um <details>, com a lista das unidades aberta para a esquerda,
   sob o botão. Classe própria (e não a do "Mais") porque abaixo de 900 px a folha esconde o "Mais",
   e o seletor tem de ficar: é por ele que se troca de unidade no celular. */
.o-seletor { position: relative; min-width: 0; }
.o-seletor > summary { list-style: none; max-width: 100%; }
.o-seletor > summary::-webkit-details-marker { display: none; }
.o-seletor .o-menu { left: 0; right: auto; max-height: 60vh; overflow-y: auto; min-width: min(280px, calc(100vw - 32px)); }
/* Fechado, o menu não ocupa lugar nenhum (o Edge ainda mede a caixa de um <details> fechado). */
.o-seletor:not([open]) > .o-menu, .o-menu-mais:not([open]) > .o-menu { display: none; }

.o-seletor-unidade .o-codigo { white-space: nowrap; flex: none; }

/* Celular (≤ 900 px), como no desenho do celular:
   - no alto, o ícone e o seletor da unidade (o nome do aplicativo sai quando há seletor: não cabem
     os dois, e o seletor é o que serve para trabalhar);
   - o pé fica no fim da tela mesmo com pouco conteúdo; em cima, a situação ("gravando…", "Aceita
     em…", "só leitura"); embaixo, numa linha, "‹ 7", o aceite largo e "9 ›" (os nomes das etapas
     vizinhas saem da vista e ficam no rótulo de leitura de tela). */
@media (max-width: 900px) {
  .o-cabecalho__linha:has(.o-seletor) .o-cabecalho__nome { display: none; }
  .o-seletor { flex: 1 1 auto; }
  /* a lista abre alinhada pela direita do seletor, para não passar da borda da tela */
  .o-seletor .o-menu { left: auto; right: 0; }
  .o-casco--tela { min-height: 100vh; }
  .o-pe-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
  .o-pe-etapa__esquerda { flex: none; }
  .o-pe-etapa__direita { display: contents; }
  .o-pe-etapa__direita > .o-salvo, .o-pe-etapa__direita > .o-pe-etapa__aceita { order: -1; flex-basis: 100%; justify-content: center; }
  .o-pe-etapa__direita > .o-botao--principal, .o-pe-etapa__direita > .o-botao--refazer { flex: 1 1 auto; }
  .o-pe-etapa__direita > a.o-botao:last-child { margin-left: auto; }
  .o-pe-etapa__nome { display: none; }
}

/* Controlador-A: a matriz de etapas. */
.o-matriz th.o-matriz__etapa { text-transform: none; letter-spacing: 0; text-align: center; padding: 8px 3px; font-size: 11.5px; line-height: 14px; white-space: nowrap; }
.o-matriz__n { display: block; font-family: var(--font-titulo); font-size: 13px; line-height: 16px; font-weight: 700; color: var(--marinho); }
.o-matriz td.o-matriz__celula { text-align: center; padding: 5px 3px; }
.o-matriz__ligacao { display: inline-flex; padding: 3px; border-radius: var(--raio-pilula); }
.o-matriz__ligacao:hover { background: var(--rebaixado); }
.o-matriz__unidade { color: var(--tinta-1); text-decoration: none; }
.o-matriz__unidade:hover .o-tabela__nome { text-decoration: underline; }
.o-matriz th:first-child, .o-matriz td:first-child { position: sticky; left: 0; z-index: 1; background: var(--papel); min-width: 220px; max-width: 250px; }
.o-matriz th:first-child { z-index: 3; background: var(--trilho); }
.o-matriz tfoot td:first-child, .o-matriz tfoot td { background: var(--trilho); }
.o-matriz tfoot td.o-matriz__celula { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.o-cartao__cabecalho .o-tarefas__legenda { padding: 0; }
@media (max-width: 900px) { .o-matriz th:first-child, .o-matriz td:first-child { min-width: 140px; max-width: 160px; } }

/* Celular: as abas rolam para o lado e a atual fica à vista (a página a rola até ela ao abrir). */
@media (max-width: 900px) {
  .o-sequencia--abas { scrollbar-width: none; scroll-snap-type: x proximity; }
  .o-sequencia--abas .o-sequencia__etapa { font-size: 12px; padding: 0 9px; }
  .o-sequencia--abas .o-sequencia__etapa--atual { scroll-snap-align: center; }
}