/* Imersa · utilitários da aplicação (prefixo imx-). Só tokens do design system; nenhum valor de cor solto.
   Componentes novos nascem no design-system/ primeiro (ADR-0015); aqui ficam apenas ajustes de layout das telas. */

.imx-inline { display: inline; }

.imx-publico { max-width: 520px; margin-inline: auto; padding-block: var(--space-10); }
.imx-marca { display: flex; justify-content: center; padding-block: var(--space-6); }
.imx-logo { height: 40px; width: auto; }
.imx-contexto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.imx-contexto__rotulo { font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-100); }
.imx-contexto__linha { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.imx-contexto__empresa { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) { .imx-contexto__empresa { font-size: 22px; line-height: 28px; } }
.imx-estreito { max-width: 480px; }
.imx-topo-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.imx-busca { align-items: flex-end; flex-wrap: wrap; }
.imx-dias { flex-wrap: wrap; gap: var(--space-2); }

.imx-grade-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.imx-tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.imx-valor-pequeno { font-size: 14px; color: var(--tinta-100); }

.imx-botao-cartao { width: 100%; text-align: start; display: flex; flex-direction: column; gap: var(--space-1); min-height: var(--alvo-toque); cursor: pointer; font: inherit; color: inherit; }

.imx-dados { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.imx-dados dt { color: var(--tinta-100); }
.imx-dados dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .imx-dados { grid-template-columns: 1fr; }
  .imx-dados dd { padding-bottom: var(--space-2); border-bottom: var(--traco-fino) solid var(--linha-000); }
}

.imx-rastro { margin: 0; padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); color: var(--tinta-100); }

.imx-gr { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 700; color: var(--marca-000); min-width: 1.2ch; }
.imx-gr-pequeno { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--marca-000); }

.imx-detalhes summary { cursor: pointer; min-height: var(--alvo-toque); display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--mare-000); list-style: none; }
.imx-detalhes summary::-webkit-details-marker { display: none; }
.imx-detalhes summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: var(--traco-medio) solid currentColor; border-bottom: var(--traco-medio) solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.imx-detalhes[open] summary::before { transform: rotate(45deg); }
.imx-quebra { overflow-wrap: anywhere; }
.imx-lista-mono { font-family: var(--font-mono); display: grid; gap: var(--space-1); padding-inline-start: var(--space-6); }

/* Campo de pressão, FR e horários dentro das linhas: não estoura o cartão no celular. */
.im-registros__acoes .im-linha { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.im-registros__acoes .im-entrada { min-width: 0; width: auto; max-width: 220px; }
@media (max-width: 768px) {
  .im-registros__acoes .im-linha { justify-content: flex-start; }
  .im-registros__acoes .im-entrada { max-width: 100%; flex: 1 1 140px; }
}


/* Alarme tocando: destaque na linha (o som vem do js/app.js). */
[data-imx-situacao="Ringing"] { color: var(--perigo-000); font-weight: 700; }

/* Galeria de fotos da operação. */
.imx-fotos { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.imx-foto { margin: 0; display: grid; gap: var(--space-2); }
.imx-foto img, .imx-foto video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; background: var(--fundo-200); }

/* Logo por tema (design-system Navegação e Marca): lockup claro no Profundo, escuro nos temas claros. */

/* Folha aberta: a página atrás não rola. */
.imx-sem-rolagem { overflow: hidden; }
.imx-folha__texto { color: var(--tinta-100); }

/* Fundo interativo atrás de toda a aplicação (design-system Fundo). */
.im-fundo[data-imx-fundo] { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.imx-publico, .im-shell { position: relative; z-index: 1; }
@media print { .im-fundo[data-imx-fundo] { display: none; } }

/* Leitura de GR na lista de mergulhos: letra grande em mono (Instrumento compacto inline). */
.imx-gr-pequeno { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--marca-000); }

/* Barra de ações acima de listas (filtros e ação principal). */
.imx-barra { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; justify-content: space-between; }
.imx-titulo-pagina { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
@media (min-width: 1024px) { .imx-titulo-pagina h1 { font-size: 32px; line-height: 36px; } }

/* "Mais" na navegação: mesmo visual dos itens; lista vertical de atalhos dentro da Folha. */
.imx-nav-mais { background: none; border: 0; font-family: inherit; cursor: pointer; }
.imx-mais { display: grid; gap: var(--space-1); }
.imx-mais__item { justify-content: flex-start; gap: var(--space-3); width: 100%; }
.imx-pular:focus { position: fixed; left: var(--space-4); top: var(--space-4); z-index: 50; width: auto; height: auto; clip: auto; padding: var(--space-2) var(--space-4); background: var(--fundo-300); color: var(--tinta-000); border-radius: var(--radius-md); }

/* Leituras da tela de mergulho (design-system Instrumento) e rodapé de formulário longo. */
.imx-instrumentos { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.imx-instrumento--largo { grid-column: 1 / -1; }
.imx-instrumento__horas { font-size: 22px; line-height: 28px; }
.imx-rodape-form { justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 639px) { .imx-rodape-form { flex-direction: column-reverse; align-items: stretch; } .imx-rodape-form > * { width: 100%; } }
.imx-barra__campo { flex: 1 1 240px; }
.imx-linha-acao { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.imx-marca-empresa__img { max-height: 96px; max-width: 100%; width: auto; object-fit: contain; background: var(--fundo-300); border-radius: var(--radius-md); padding: var(--space-2); }
.imx-mono-area { font-family: var(--font-mono); font-size: 15px; line-height: 22px; }
.imx-resumo { margin-top: var(--space-1); font-weight: 400; }

/* Foco programático do Blazor no título após navegar: leitor de tela anuncia, sem desenhar contorno. Foco por teclado continua visível. */
.im-app h1[tabindex="-1"]:focus { outline: none; }

/* Horários do dia: lista densa (nome, hora, ação numa linha) em vez de um cartão por evento. */
.imx-eventos { list-style: none; margin: 0; padding: 0 var(--space-4); }
.imx-eventos__item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3); min-height: var(--alvo-toque); padding: var(--space-2) 0; border-bottom: var(--traco-fino) solid var(--linha-000); }
.imx-eventos__item { scroll-margin-top: calc(var(--alvo-toque) * 2); }
.imx-eventos__item:last-child { border-bottom: 0; }
.imx-eventos__nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.imx-eventos__hora { min-width: 3.5rem; text-align: right; }
.imx-eventos__midia { grid-column: 1 / -1; display: grid; gap: var(--space-2); padding-bottom: var(--space-1); }

/* Checklist: pergunta e respostas em duas linhas por item; o motivo de "não se aplica" vai numa folha. */
.imx-checklist { list-style: none; margin: 0; padding: 0; }
.imx-checklist__item { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: var(--traco-fino) solid var(--linha-000); scroll-margin-top: calc(var(--alvo-toque) * 2); }
.imx-checklist__item:last-child { border-bottom: 0; }
.imx-checklist__item:target { background: var(--fundo-200); }
.imx-checklist__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.imx-checklist__linha .im-chip { margin-right: auto; }
.imx-passos { list-style: none; padding-inline-start: 0; margin: 0; }

/* Página pública de acompanhamento (ADR-0029). */
.imx-idiomas { flex-wrap: wrap; }
.imx-acompanhar__logo { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-md); background: #ffffff; padding: var(--space-1); }
.imx-acompanhar__pela { display: flex; align-items: center; gap: var(--space-2); }
.imx-acompanhar__pela .im-marca svg { height: 20px; }

/* Link de acompanhamento na operação: QR com a marca e ações. */
.imx-link-acompanhar { word-break: break-all; }

/* Link aberto de assinatura (ADR-0039): espaço reservado para o widget do Turnstile (65 px) e a lista de links gerados. */
.imx-turnstile { min-height: 65px; width: 100%; }
.imx-links-abertos__qr { margin-top: var(--space-2); }
.imx-links-abertos__qr summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.imx-comentario { white-space: pre-line; overflow-wrap: anywhere; }
/* Navegação de mês do controle financeiro: setas de 44 px nas pontas e o mês no meio, numa linha só no celular. */
.imx-mes { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--space-2); text-align: center; }
.imx-mes .im-btn { min-width: 44px; min-height: 44px; justify-content: center; }

/* Tela da lancha (ADR-0036): campos grandes para mão molhada e luz forte. */
.imx-lancha__entrada { min-height: 56px; font-size: 1.5rem; }

/* Assinatura salva e PIN (ADR-0033). */
.imx-traco { width: 100%; max-width: 420px; height: auto; color: var(--tinta-000); background: var(--fundo-100); border: var(--traco-fino) solid var(--linha-000); border-radius: var(--radius-md); }
.imx-pin { letter-spacing: 0.5em; font-size: 1.5rem; min-height: 56px; max-width: 14ch; }

/* Avaliação mútua (ADR-0034): estrelas como opções de rádio, alvo de 44 px, seleção e foco visíveis. */
.imx-estrelas { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.imx-estrelas legend { width: 100%; margin-bottom: var(--space-2); }
.imx-estrelas label { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alvo-toque); min-height: var(--alvo-toque); font-size: 1.75rem; line-height: 1; color: var(--tinta-200); border: var(--traco-fino) solid var(--linha-100); border-radius: var(--radius-md); cursor: pointer; }
.imx-estrelas input:checked + label { color: var(--sobre-marca); background: var(--marca-000); border-color: var(--marca-000); }
.imx-estrelas input:focus-visible + label { outline: 3px solid var(--foco-000); outline-offset: 2px; }
.imx-resposta { margin: 0; padding: var(--space-3); border-left: var(--traco-forte) solid var(--marca-000); background: var(--fundo-100); border-radius: var(--radius-sm); }

/* Ficha do relatório final (ADR-0032). */
.imx-bloco-ficha { border: var(--traco-fino) solid var(--linha-000); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; }
.imx-bloco-ficha legend { padding: 0 var(--space-2); }
.imx-linha-opcoes { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.imx-linha-checklist { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3); min-height: var(--alvo-toque); border-bottom: var(--traco-fino) solid var(--linha-000); }
.imx-fotos-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.imx-foto-ficha img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--fundo-100); }
.imx-foto-ficha--fora { opacity: 0.55; }
@media (max-width: 480px) { .imx-linha-checklist { grid-template-columns: 1fr; } }

/* Folha aberta de dentro de uma célula de ações: o conteúdo volta a alinhar à esquerda (validação de 22/10/2026). */
.im-registros__acoes .im-folha { text-align: left; }
.im-registros__acoes .im-folha .im-entrada { width: 100%; }

/* Cadastro de item: campos de consumível somem quando o tipo escolhido é durável, e vice-versa. */
.im-folha:has(input[name="tipo"][value="Durable"]:checked) [data-so="consumivel"],
.im-folha:has(input[name="tipo"][value="Consumable"]:checked) [data-so="duravel"] { display: none; }