/* Ecrãs da app de captura. Só tokens do tokens.css; os tamanhos grandes compõem-se a partir deles.
   Botões grandes e texto forte para ler ao sol: letra base de 18 px (--t-medio), botões de 22 px (--t-grande). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-text);
  font-size: var(--t-medio);
  line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.escondido {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--input-focus-border);
  outline-offset: 2px;
}

/* ---------- Topo e separadores ---------- */

.faixa-duplo {
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-weight: 600;
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.topo {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  /* L2: área segura também dos lados (iPhone deitado). */
  padding: calc(var(--spacing-compact) + env(safe-area-inset-top)) max(var(--spacing-md), env(safe-area-inset-right)) var(--spacing-compact)
    max(var(--spacing-md), env(safe-area-inset-left));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.topo h1 {
  margin: 0;
  font-size: var(--t-grande);
  font-weight: 600;
}

.etiqueta-destino {
  font-size: var(--t-pequeno);
  color: var(--color-text-secondary);
  background: var(--color-surface-hover);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* M1: no modo teste, a etiqueta diz-se com o tom de atenção e a 16 px. */
.etiqueta-destino[data-tom="atencao"] {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--color-warning);
  background: var(--color-warning-light);
}

.separadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.separadores button {
  min-height: var(--spacing-2xl);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
}

.separadores button[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

main {
  max-width: calc(var(--spacing-2xl) * 12);
  margin: 0 auto;
  padding: var(--spacing-md) max(var(--spacing-md), env(safe-area-inset-right)) var(--spacing-md) max(var(--spacing-md), env(safe-area-inset-left));
}

/* ---------- Estado da fila e avisos ---------- */

.estado-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-compact) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.estado-fila[data-tom="ok"] {
  color: var(--color-success);
}

.estado-fila[data-tom="atencao"] {
  color: var(--color-warning);
  background: var(--color-warning-light);
}

.estado-fila[data-tom="erro"] {
  color: var(--color-danger);
  background: var(--color-danger-light);
}

.aviso {
  margin: var(--spacing-md) 0 0;
  padding: var(--spacing-compact) var(--spacing-md);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
}

.aviso:empty {
  display: none;
}

.aviso[data-tom="ok"] {
  color: var(--color-success);
  background: var(--color-success-light);
}

.aviso[data-tom="atencao"] {
  color: var(--color-warning);
  background: var(--color-warning-light);
}

.aviso[data-tom="erro"] {
  color: var(--color-danger);
  background: var(--color-danger-light);
}

.nota-instalar {
  font-size: var(--t-pequeno);
  color: var(--color-text-muted);
  margin: var(--spacing-md) 0 0;
}

/* ---------- Destino (duas portas) ---------- */

.destino {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
}

/* H3: sem overflow hidden no grupo (cortava o contorno de foco); os cantos ficam nos botões. */
.destino button:first-child {
  border-radius: calc(var(--border-radius-md) - 2px) 0 0 calc(var(--border-radius-md) - 2px);
}

.destino button:last-child {
  border-radius: 0 calc(var(--border-radius-md) - 2px) calc(var(--border-radius-md) - 2px) 0;
}

.destino button:focus-visible {
  position: relative;
  z-index: 1;
}

.destino button {
  min-height: calc(var(--spacing-2xl) + var(--spacing-compact));
  border: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.destino button + button {
  border-left: 2px solid var(--input-border);
}

.destino button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---------- Botões grandes ---------- */

.botoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-compact);
}

.botao-grande {
  min-height: calc(var(--spacing-2xl) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-lg);
  font: inherit;
  font-size: var(--t-grande);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.botao-grande:active {
  background: var(--color-surface-hover);
}

.botao-grande:disabled {
  color: var(--color-text-muted);
  border-style: dashed;
  cursor: not-allowed;
}

.em-breve {
  font-size: var(--t-pequeno);
  font-weight: 400;
}

.interruptor {
  display: flex;
  align-items: center;
  gap: var(--spacing-compact);
  min-height: var(--spacing-2xl);
  margin-top: var(--spacing-md);
  font-weight: 600;
  cursor: pointer;
}

.interruptor input {
  width: calc(var(--spacing-lg) + var(--spacing-xs));
  height: calc(var(--spacing-lg) + var(--spacing-xs));
  accent-color: var(--color-primary);
  margin: 0;
}

/* ---------- Editor ---------- */

.editor {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
}

.editor h2 {
  margin: 0 0 var(--spacing-compact);
  font-size: var(--t-grande);
  font-weight: 600;
}

.campo {
  display: block;
  margin-bottom: var(--spacing-md);
}

.campo > span {
  display: block;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.campo textarea,
.campo input {
  width: 100%;
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-compact);
  min-height: var(--spacing-2xl);
}

.campo textarea:focus,
.campo input:focus {
  border-color: var(--input-focus-border);
  outline: 3px solid var(--input-focus-border);
  outline-offset: 0;
}

.previsao {
  display: block;
  max-width: 100%;
  max-height: calc(var(--spacing-2xl) * 6);
  margin: 0 auto var(--spacing-md);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border);
}

/* M3: Cancelar à esquerda, longe do polegar direito; Guardar à direita, maior.
   M2: a barra fica colada ao fundo do ecrã visível e sobe acima do teclado (--teclado vem do visualViewport). */
.acoes {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-compact);
  position: sticky;
  bottom: var(--teclado, 0px);
  z-index: 2;
  background: var(--color-surface);
  padding: var(--spacing-sm) 0 calc(var(--spacing-sm) + env(safe-area-inset-bottom));
  margin-bottom: calc(-1 * var(--spacing-md));
}

.botao {
  min-height: calc(var(--spacing-2xl) + var(--spacing-compact));
  font: inherit;
  font-weight: 600;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  padding: 0 var(--spacing-md);
}

.botao-principal {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-primary);
  font-size: var(--t-grande);
}

.botao-principal:hover {
  background: var(--color-primary-hover);
}

.botao-principal:disabled {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.botao-secundario {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 2px solid var(--input-border);
}

.botao-pequeno {
  min-height: calc(var(--spacing-xl) + var(--spacing-compact));
  font-size: var(--t-base);
}

/* ---------- Histórico ---------- */

.historico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-sm);
}

.linha {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-compact) var(--spacing-md);
  color: inherit;
  text-decoration: none;
}

a.linha:active {
  background: var(--color-surface-hover);
}

.linha-topo {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-weight: 600;
}

.linha-ficheiro {
  display: block;
  font-size: var(--t-base);
  margin: var(--spacing-xs) 0;
}

.linha-dados {
  display: block;
  font-size: var(--t-pequeno);
  color: var(--color-text-muted);
}

.selo {
  display: inline-block;
  font-size: var(--t-pequeno);
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  padding: 0 var(--spacing-sm);
  white-space: nowrap;
}

.selo-chegou {
  color: var(--color-success);
  background: var(--color-success-light);
}

.selo-fila {
  color: var(--color-warning);
  background: var(--color-warning-light);
}

.selo-falhou {
  color: var(--color-danger);
  background: var(--color-danger-light);
}

.selo-registo {
  color: var(--color-info);
  background: var(--color-info-light);
  margin-left: var(--spacing-xs);
}

.vazio {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--spacing-xl) 0;
}

/* ---------- Definições ---------- */

.bloco {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.bloco h2 {
  margin: 0 0 var(--spacing-compact);
  font-size: var(--t-medio);
  font-weight: 600;
}

.bloco p {
  margin: 0 0 var(--spacing-compact);
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-compact);
  padding: var(--spacing-compact) 0;
  border-top: 1px solid var(--color-border-light);
  cursor: pointer;
}

.opcao input {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  accent-color: var(--color-primary);
  margin: var(--spacing-xs) 0 0;
  flex: none;
}

.opcao-texto small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--t-pequeno);
}

.opcao[aria-disabled="true"] {
  cursor: not-allowed;
}

.resultado {
  font-size: var(--t-base);
  margin-top: var(--spacing-sm);
}

.linha-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.confirmar {
  margin-top: var(--spacing-compact);
  padding: var(--spacing-md);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ---------- Painel do duplo (só no modo duplo) ---------- */

.painel-duplo {
  margin-top: var(--spacing-xl);
  border: 1px dashed var(--color-warning);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  font-size: var(--t-base);
}

.painel-duplo summary {
  font-weight: 600;
  cursor: pointer;
  min-height: var(--spacing-xl);
}

.painel-duplo pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--t-pequeno);
  background: var(--color-surface-hover);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-md);
}

/* ---------- Ronda 2 ---------- */

.botao-perigo {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-danger);
}

.linha-motivo {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--t-base);
  color: var(--color-danger);
}

.acoes-falhada {
  margin-top: var(--spacing-compact);
}

.linha-topo {
  align-items: flex-start;
}

.campo textarea {
  resize: none;
  overflow-y: hidden;
}

/* ---------- Ronda 3 ---------- */

/* M2: com o teclado aberto, a barra Cancelar e Guardar passa a fixa, logo acima do teclado (--teclado já leva a margem),
   e a caixa de texto fica mais baixa, com deslizar por dentro. */
.teclado-aberto .acoes {
  position: fixed;
  left: max(var(--spacing-md), env(safe-area-inset-left));
  right: max(var(--spacing-md), env(safe-area-inset-right));
  bottom: var(--teclado, 0px);
  margin: 0;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
}

.teclado-aberto .editor {
  padding-bottom: calc(var(--spacing-2xl) * 2);
}

.teclado-aberto .campo textarea {
  max-height: calc(var(--spacing-2xl) * 3);
  overflow-y: auto;
}

.estado-fila:focus-visible {
  outline: 3px solid var(--input-focus-border);
  outline-offset: 2px;
}