/* App de campo "Manutenção". Decisões em docs/lancamento_offline/design_app_campo.md. */

:root {
  /* Marca SENCO */
  --amarelo-500: #ffc844; /* Sunglow, Pantone 1225 C */
  --amarelo-100: hsl(43 100% 93%);
  --azul-900: #211261; /* Midnight Blue, Pantone 2755 C */
  --azul-700: hsl(249 50% 34%);
  --azul-100: hsl(249 60% 96%);
  --branco: #ffffff;

  /* Cinzas azulados, pela matiz da marca */
  --texto: var(--azul-900);
  --texto-suave: hsl(249 14% 36%);
  --borda: hsl(249 16% 86%);
  --borda-campo: hsl(249 16% 62%);
  --superficie: hsl(249 30% 97%);

  /* Situação (sempre junto com texto) */
  --vermelho-700: hsl(4 72% 40%);
  --vermelho-50: hsl(4 90% 96%);
  --verde-700: hsl(145 63% 26%);

  /* Tipografia: três tamanhos */
  --fonte: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto-titulo: 24px;
  --texto-base: 18px;
  --texto-pequeno: 15px;

  /* Espaço */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --raio: 10px;
  --raio-grande: 16px;
  --altura-campo: 56px;
  --altura-botao: 60px;
  --altura-abas: 64px;
  --sombra-flutuante: 0 8px 24px hsl(249 69% 12% / 0.22);
  --foco: 0 0 0 3px var(--amarelo-500), 0 0 0 5px var(--azul-900);
}

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

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: 1.5;
  color: var(--texto);
  background: var(--branco);
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
p {
  margin: 0;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.escondido {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}

/* ---------- Topo: sempre visível, com a faixa de obra ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--amarelo-500);
  padding-top: env(safe-area-inset-top);
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  max-width: 560px;
  min-height: 60px;
  margin: 0 auto;
  padding: var(--e2) var(--e4);
}

.logo {
  flex: none;
  width: 32px;
  height: 32px;
}

.topo-titulo {
  flex: 1;
  min-width: 0;
  font-size: var(--texto-titulo);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.conexao {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--texto-pequeno);
  line-height: 1.25;
  text-align: right;
}

.conexao-textos {
  display: flex;
  flex-direction: column;
}

#conexao-estado {
  font-weight: 600;
}

.conexao-sinal {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--azul-900);
  background: var(--azul-900);
  flex: none;
}

.conexao--offline .conexao-sinal {
  background: transparent;
}

.zebra {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--azul-900) 0 12px, var(--amarelo-500) 12px 24px);
}

/* ---------- Avisos ---------- */

.avisos {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--e4);
}

.avisos > .aviso {
  margin-top: var(--e4);
}

.aviso {
  display: block;
  width: 100%;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  font-size: var(--texto-pequeno);
  line-height: 1.4;
  text-align: left;
}

.aviso--atencao {
  background: var(--amarelo-100);
  color: var(--azul-900);
  font-weight: 600;
}

.aviso--erro {
  background: var(--vermelho-50);
  color: var(--vermelho-700);
}

.aviso--acao {
  min-height: 48px;
  border: 0;
  background: var(--azul-900);
  color: var(--branco);
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Conteúdo ---------- */

.conteudo {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--e5) var(--e4) calc(var(--altura-abas) + var(--e7) + env(safe-area-inset-bottom));
}

.titulo {
  font-size: var(--texto-titulo);
  line-height: 1.2;
  font-weight: 700;
}

.titulo--secao {
  margin: var(--e7) 0 var(--e3);
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--texto-suave);
}

.detalhe,
.explicacao {
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

.cabeca-form:has(.titulo:not(.escondido)) {
  margin-bottom: var(--e5);
}

.cabeca-form .detalhe {
  margin-top: var(--e1);
}

.rotulo {
  display: block;
  margin-bottom: var(--e2);
  padding: 0;
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

/* ---------- Fotos: os dois quadros lado a lado, como no relatório ---------- */

.fotos {
  margin: 0 0 var(--e5);
  padding: 0;
  border: 0;
  min-width: 0;
}

.fotos-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
}

.foto {
  position: relative;
  display: flex;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--raio-grande);
  border: 2px dashed var(--borda-campo);
  background: var(--superficie);
  cursor: pointer;
}

.foto:focus-within {
  box-shadow: var(--foco);
}

.foto--com-imagem {
  border-style: solid;
  border-color: var(--azul-900);
}

.foto--erro {
  border-color: var(--vermelho-700);
}

.foto-vazia {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  padding: var(--e3);
  text-align: center;
}

.foto-icone {
  width: 40px;
  height: 40px;
  color: var(--azul-700);
}

.foto-nome {
  font-weight: 600;
}

.foto-ajuda {
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

.foto-imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px hsl(249 69% 12% / 0.1);
}

.foto-faixa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--e2) var(--e3);
  background: var(--azul-900);
  color: var(--branco);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

/* ---------- Campos ---------- */

.campo + .campo {
  margin-top: var(--e5);
}

/* A quantidade fica colada ao material; entre um material e outro, mais espaço. */
.campo + .campo--junto {
  margin-top: var(--e3);
}

.secao .campo + .campo:not(.campo--junto) {
  margin-top: var(--e6);
}

.campo-rotulo {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.titulo--secao + .explicacao {
  margin: calc(-1 * var(--e2)) 0 var(--e4);
}

.campo input,
.campo select {
  display: block;
  width: 100%;
  height: var(--altura-campo);
  padding: 0 var(--e4);
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio);
  background-color: var(--branco);
  font-size: var(--texto-base);
}

.campo select {
  appearance: none;
  padding-right: var(--e7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%23211261' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e4) center;
  background-size: 20px;
}

.campo--curto input {
  max-width: 10rem;
}

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--azul-900);
  box-shadow: 0 0 0 3px var(--amarelo-500);
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] {
  border-color: var(--vermelho-700);
}

/* Escolhas prontas: botões lado a lado; o escolhido fica azul. */
.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.opcoes:focus {
  outline: none;
}

.opcao {
  min-width: 64px;
  min-height: 48px;
  padding: 0 var(--e4);
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio);
  background: var(--branco);
  font-size: var(--texto-base);
  cursor: pointer;
  touch-action: manipulation;
}

.opcao[aria-pressed="true"] {
  border-color: var(--azul-900);
  background: var(--azul-900);
  color: var(--branco);
  font-weight: 600;
}

.opcoes[aria-invalid="true"] .opcao {
  border-color: var(--vermelho-700);
}

.campo .dica {
  margin-top: var(--e2);
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

.erro {
  font-size: var(--texto-pequeno);
  font-weight: 600;
  color: var(--vermelho-700);
}

.erro:not(:empty) {
  margin-top: var(--e2);
}

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

.acoes-form {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e6);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--e5);
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-size: var(--texto-base);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.botao:disabled {
  opacity: 0.55;
  cursor: default;
}

.acoes-form .botao {
  width: 100%;
  min-height: var(--altura-botao);
}

.botao--principal {
  background: var(--azul-900);
  color: var(--branco);
}

.botao--principal:active {
  background: var(--azul-700);
}

.botao--secundario {
  background: var(--branco);
  border-color: var(--azul-900);
  color: var(--azul-900);
}

.botao--perigo {
  background: var(--vermelho-700);
  color: var(--branco);
}

.botao--texto {
  min-height: 48px;
  padding: 0 var(--e3);
  background: none;
  color: var(--azul-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.botao--texto.perigo {
  color: var(--vermelho-700);
}

/* ---------- Fila ---------- */

.cabeca-fila {
  margin-bottom: var(--e4);
}

.botao--largo {
  width: 100%;
  min-height: var(--altura-botao);
}

#tela-fila > .aviso,
#tela-fila > .explicacao,
#tela-fila > .botao {
  margin-bottom: var(--e5);
}

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borda);
}

.lista:empty {
  border-top: 0;
}

.item {
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--borda);
}

.item-endereco {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.item-detalhe {
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

.item-situacao {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin-top: var(--e2);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.item-situacao svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.item--erro .item-situacao {
  color: var(--vermelho-700);
}

.item--enviado .item-situacao {
  color: var(--verde-700);
}

.item-ultimo {
  margin-top: var(--e1);
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

.item-acoes {
  display: flex;
  gap: var(--e2);
  margin: var(--e2) 0 0 calc(-1 * var(--e3));
}

.lista--enviados .item {
  padding: var(--e3) 0;
}

.vazio {
  padding: var(--e6) 0;
  text-align: center;
  color: var(--texto-suave);
}

.vazio .botao {
  margin-top: var(--e4);
}

/* ---------- Abas embaixo, ao alcance do polegar ---------- */

.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--branco);
  border-top: 1px solid var(--borda);
}

.aba {
  position: relative;
  min-height: var(--altura-abas);
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-size: var(--texto-base);
  cursor: pointer;
  touch-action: manipulation;
}

.aba[aria-current="page"] {
  color: var(--azul-900);
  font-weight: 600;
}

.aba[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--azul-900);
}

.aba-contagem:not(:empty) {
  display: inline-block;
  min-width: 28px;
  margin-left: var(--e1);
  padding: 0 var(--e2);
  border-radius: 14px;
  background: var(--amarelo-500);
  color: var(--azul-900);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  line-height: 28px;
}

/* ---------- Recado (confirmação rápida) ---------- */

.recado {
  position: fixed;
  left: var(--e4);
  right: var(--e4);
  bottom: calc(var(--altura-abas) + var(--e3) + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: 528px;
  margin: 0 auto;
  padding: var(--e4);
  border-radius: var(--raio);
  background: var(--azul-900);
  color: var(--branco);
  box-shadow: var(--sombra-flutuante);
  animation: aparecer 150ms ease-out;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- Diálogo de confirmação ---------- */

.dialogo {
  width: min(100% - 32px, 440px);
  padding: var(--e5);
  border: 0;
  border-radius: var(--raio-grande);
  color: var(--texto);
  box-shadow: var(--sombra-flutuante);
}

.dialogo::backdrop {
  background: hsl(249 69% 12% / 0.5);
}

.dialogo p {
  margin-top: var(--e3);
  color: var(--texto-suave);
}

.dialogo-acoes {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.dialogo-acoes .botao {
  width: 100%;
  min-height: 56px;
}

@media (prefers-reduced-motion: reduce) {
  .recado {
    animation: none;
  }
}