/* Área do técnico: paleta azul compartilhada com a gestão.
   Alvos confortáveis e uma coluna no celular; resumo e opções lado a lado
   quando há espaço. O conteúdo e as regras do atendimento são os mesmos. */

:root {
  --tinta: #16233a;
  --tinta-fraca: #5d6f87;
  --fundo: #eef2f7;
  --papel: #ffffff;
  --linha: #d9e1ec;
  --marinho: #102846;
  --acao: #143454;
  --ok: #27567f;
  --alerta: #b3261e;
  --sombra: 0 1px 2px rgba(15, 45, 74, .08), 0 8px 24px rgba(15, 45, 74, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.oculto { display: none !important; }

/* ------------------------------------------------------------- entrada --- */

@font-face {
  font-family: "Jakarta";
  src: url("./assets/fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

#entrada {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 40px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 42%, #22507f 0, #102846 40%, #0b1c33 85%);
  color: #f5f8ff;
  color-scheme: dark;
  font-family: "Jakarta", "Segoe UI", system-ui, sans-serif;
}

#entrada .entrada-cenario { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#entrada .entrada-cenario::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, #0b1c3355 100%); }
#entrada .entrada-mapa { width: 100%; height: 100%; color: #8cc4f0; }
#entrada .entrada-curvas { stroke: currentColor; stroke-width: 1; opacity: .13; }
#entrada .entrada-rota { stroke: #8cc4f0; stroke-width: 1; opacity: .17; }
#entrada .entrada-rota-luz { stroke: #a8d6fa; stroke-width: 1.5; stroke-dasharray: .11 .89; opacity: 0; animation: tecnico-rota 4.6s ease-in-out both; }
#entrada .entrada-pontos { fill: #a8d6fa; opacity: .55; }
#entrada .entrada-pulso { fill: none; stroke: #a8d6fa; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: tecnico-pulso 2s ease-out 2; }
#entrada .entrada-pulso-final { animation-delay: .5s; }

#entrada .entrada-topo, #entrada .entrada-conteudo, #entrada .entrada-rodape {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

#entrada .entrada-topo, #entrada .entrada-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#entrada .entrada-marca { display: inline-flex; align-items: center; gap: 12px; color: #f5f8ff; text-decoration: none; font-size: 24px; font-weight: 750; letter-spacing: -.8px; }
#entrada .entrada-marca img { display: block; border-radius: 12px; box-shadow: 0 0 0 1px #a8d6fa18, 0 4px 16px #020d1626; }
#entrada .entrada-contexto { color: #bed1e8; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
#entrada .entrada-topo { align-self: start; }
#entrada .entrada-rodape { align-self: end; }
#entrada .entrada-conteudo { display: grid; grid-template-columns: minmax(0, 444px); align-items: center; justify-content: center; padding-block: 20px; }
#entrada svg { display: block; width: 22px; height: 22px; flex: 0 0 auto; }

#entrada .cartao-entrada {
  position: relative;
  width: 100%;
  padding: 36px;
  border: 1px solid #a8c4e047;
  border-radius: 24px;
  background: linear-gradient(155deg, #23466fef, #102846f5);
  color: #f5f8ff;
  box-shadow: inset 0 1px 0 #e3efff1f, 0 30px 90px #010d1b59, 0 4px 20px #010d1b33;
  animation: tecnico-entrada .65s ease-out both;
}

#entrada .cartao-entrada::before { content: ""; position: absolute; top: -1px; left: 22%; width: 56%; height: 1px; background: linear-gradient(90deg, transparent, #a8d6fa, transparent); pointer-events: none; }

@supports (backdrop-filter: blur(1px)) {
  #entrada .cartao-entrada { background: linear-gradient(155deg, #315b8aa8, #17385dce); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}

#entrada h1 { margin: 0 0 10px; color: #f5f8ff; font-size: 28px; line-height: 1.3; font-weight: 750; letter-spacing: -.9px; }
#entrada .apoio { margin: 0 0 28px; color: #c4d5e9; font-size: 13px; line-height: 1.7; }
#entrada label { margin-bottom: 8px; color: #d1e0f1; font-size: 13px; font-weight: 650; }
#entrada .entrada-campo { position: relative; margin-bottom: 20px; }
#entrada .entrada-campo > svg { position: absolute; z-index: 1; top: 17px; left: 15px; width: 19px; height: 19px; color: #aec9e6; pointer-events: none; }
#entrada input { min-height: 54px; margin: 0; padding: 14px 14px 14px 44px; background: #0b203c66; border: 1px solid #89a9d0; border-radius: 12px; color: #f5f8ff; caret-color: #a8d6fa; font: 400 16px/1.5 "Jakarta", "Segoe UI", system-ui, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s; }
#entrada input::placeholder { color: #b8cce4; font-size: 13px; opacity: 1; }
#entrada input:focus { background: #142f51; border-color: #a8d6fa; }
#entrada input:focus-visible { outline: 2px solid #a8d6fa; outline-offset: 3px; }
#entrada input:autofill { background: #1a395d; color: #f5f8ff; box-shadow: inset 0 0 0 1000px #1a395d; }
#entrada input:-webkit-autofill { -webkit-text-fill-color: #f5f8ff; caret-color: #a8d6fa; -webkit-box-shadow: inset 0 0 0 1000px #1a395d; }
#entrada .entrada-campo-senha input { padding-right: 52px; }
#entrada .entrada-ver-senha { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border-radius: 8px; background: transparent; color: #c0d8ef; }
#entrada .entrada-ver-senha[hidden] { display: none; }
#entrada .entrada-ver-senha:hover { background: #a8d6fa1a; color: #e3efff; }
#entrada .entrada-olho-risco { display: none; }
#entrada .entrada-ver-senha[aria-pressed="true"] .entrada-olho-risco { display: block; }
#entrada #botaoEntrar { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 54px; margin-top: 6px; border: 1px solid #82add9; border-radius: 12px; background: linear-gradient(180deg, #2f6ba8, #1c4470); color: #fff; box-shadow: inset 0 1px 0 #e3efff33, 0 6px 22px #06162c42; font-size: 14px; font-weight: 750; transition: background .15s, box-shadow .15s; }
#entrada #botaoEntrar:hover:not(:disabled) { background: #386fa8; box-shadow: inset 0 1px 0 #e3efff33, 0 6px 26px #06162c59; }
#entrada #botaoEntrar:disabled { opacity: .7; cursor: wait; }
#entrada button:focus-visible { outline: 2px solid #b1d9ff; outline-offset: 3px; }
#entrada .aviso { margin: 14px 0 0; min-height: 0; color: #c8d9ed; line-height: 1.6; }
#entrada .aviso.erro { color: #ffb8b0; }
#entrada .aviso.ok { color: #b1d9ff; }
#entrada .aviso:empty { margin: 0; }
#entrada .entrada-dica { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #a8c4e033; color: #b9cce2; font-size: 11px; line-height: 1.7; text-align: center; }
#entrada .entrada-rodape { color: #a8bfd9; font-size: 11px; }
#entrada .entrada-rodape a { padding-block: 12px; color: #c5daf1; text-decoration: none; }
#entrada .entrada-rodape a:hover { color: #fff; text-decoration: underline; }
#entrada a:focus-visible { outline: 2px solid #a8d6fa; outline-offset: 5px; border-radius: 2px; }

@keyframes tecnico-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tecnico-rota {
  0% { stroke-dashoffset: 1; opacity: 0; }
  15%, 75% { opacity: .65; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes tecnico-pulso {
  from { transform: scale(.5); opacity: .8; }
  to { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 900px) {
  #entrada { gap: 28px; }
  #entrada .entrada-conteudo { padding-block: 0; }
}

@media (max-width: 480px) {
  #entrada { gap: 24px; padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  #entrada .entrada-marca { gap: 10px; font-size: 22px; }
  #entrada .entrada-marca img { width: 38px; height: 38px; border-radius: 10px; }
  #entrada .entrada-contexto { max-width: 90px; font-size: 9px; letter-spacing: 1px; text-align: right; }
  #entrada .entrada-cenario { opacity: .65; }
  #entrada .cartao-entrada { padding: 28px 24px; border-radius: 20px; }
  #entrada h1 { font-size: 25px; }
  #entrada .apoio { margin-bottom: 24px; }
  #entrada .entrada-rodape { flex-direction: column; gap: 4px; text-align: center; font-size: 10px; }
  #entrada .entrada-rodape a { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #entrada input, #entrada #botaoEntrar { transition: none; }
  #entrada .cartao-entrada, #entrada .entrada-rota-luz, #entrada .entrada-pulso { animation: none; }
}

@media (max-height: 740px) {
  #entrada { gap: 18px; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  #entrada .cartao-entrada { padding-block: 24px; }
  #entrada .apoio { margin-bottom: 20px; }
  #entrada .entrada-dica { margin-top: 18px; padding-top: 16px; }
}

label {
  display: block;
  margin-bottom: 16px;
  color: var(--tinta-fraca);
  font-size: 13px;
  font-weight: 600;
}

input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
}

/* ------------------------------------------------ Safari do iPhone --- */

/* NADA DE CAMPO COM LETRA MENOR QUE 16px. O Safari do iOS dá zoom na página
   inteira quando um campo abaixo disso recebe foco — e ela continua ampliada
   depois que o teclado some, com o técnico tendo de pinçar para voltar. A área
   usa 14px no texto corrido, e os campos herdavam isso pelo `font: inherit`.
   Bloquear o zoom no viewport (maximum-scale=1) também resolveria, mas tira de
   quem enxerga pouco o direito de ampliar; subir a letra do campo não tira
   nada de ninguém. */
#area :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  font-size: 16px;
}

/* O iOS desenha uma sombra interna nos campos de texto por conta própria, que
   não combina com a borda da área. O seletor fica de fora: sem a aparência
   nativa ele perde a seta, e o técnico deixa de ver que ali se escolhe. */
input:is([type="text"], [type="email"], [type="password"], [type="search"], :not([type])), textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Dois toques rápidos no mesmo lugar dão zoom no iOS. Nas respostas do
   checklist ("ok" e logo "não ok", porque errou) isso acontece o tempo todo.
   `manipulation` tira só o zoom do duplo toque; a pinça continua valendo. */
button, .botao-foto, .filtro { touch-action: manipulation; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
}

textarea { resize: vertical; }

button {
  min-height: 50px;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--marinho);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

button[disabled] { opacity: .55; cursor: default; }

#botaoEntrar { width: 100%; }

button.secundario {
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--tinta);
}

button.principal { background: var(--acao); }

/* ---------------------------------------------------------------- área --- */

#area { min-height: 100dvh; padding: 0 0 calc(28px + env(safe-area-inset-bottom)); font: 14px/1.6 "Jakarta", "Segoe UI", sans-serif; }
#area input, #area select, #area textarea { font-size: 16px; }
#area button { min-height: 44px; font-size: 13px; }
#area button.principal { min-height: 48px; }
#area button.principal:hover:not(:disabled) { background: #0e2944; }
#area button.secundario:hover:not(:disabled) { background: #edf2f7; border-color: #a8b9cd; }
#area :is(h2, h3, p, dd, small, strong) { overflow-wrap: anywhere; }

.topo {
  background: linear-gradient(110deg, #16375a, #102846);
  color: #fff;
  border-bottom: 3px solid #2f6ba8;
}

.topo-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1120px;
  margin: auto;
  padding: 14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left));
  padding-top: max(14px, env(safe-area-inset-top));
}

.area-marca, .topo-conta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.area-marca { flex-shrink: 0; }
.area-marca img { border-radius: 10px; }
.area-marca strong { font-size: 19px; letter-spacing: -.6px; }
.area-marca h1 { margin: 0; color: #bbcee4; font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.topo-conta { gap: 20px; }
.topo-identidade { display: grid; min-width: 0; }
.topo-identidade strong { font-size: 13px; }
.topo-identidade small { color: #bbcee4; font-size: 11px; }
#area .topo .secundario { padding: 8px 16px; border-color: #7791ad; color: #fff; }
#area .topo .secundario:hover:not(:disabled) { background: #ffffff14; }

/* Com o celular deitado o entalhe fica na lateral, e a página ocupa a tela
   inteira (viewport-fit=cover). Sem a área segura, o texto passaria por baixo
   dele. Em pé, o valor da área segura é zero e vale o espaçamento de sempre. */
.filtros, .lista, .detalhe { width: 100%; max-width: 1120px; margin-inline: auto;
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
.filtros { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px 8px; }
.filtros-titulo h2 { margin: 0; font-size: 24px; letter-spacing: -.6px; }
.filtros-titulo p { margin: 3px 0 0; color: var(--tinta-fraca); font-size: 13px; }
.filtros-opcoes { display: flex; gap: 4px; padding: 4px; border: 1px solid #d8e0ea; border-radius: 12px; background: #e4ebf4; }

.filtro {
  padding: 8px 18px;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-fraca);
  font-weight: 600;
}

.filtro.ativo { background: #fff; color: var(--marinho); box-shadow: 0 1px 4px #10284614; }

.lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; padding-block: 16px; }

.cartao {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--papel);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}

.cartao:hover { border-color: #90b4d8; box-shadow: 0 5px 20px #1028460d; }
.cartao:focus-visible { outline: 2px solid #2f6ba8; outline-offset: 3px; }
.cartao h2 { margin: 14px 0 6px; font-size: 18px; line-height: 1.4; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cartao-topo small { color: var(--tinta-fraca); font-size: 12px; }
.linha { margin: 0; font-size: 14px; }
.linha.fraca { color: var(--tinta-fraca); }
.cartao-abrir { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 1px solid #e7ecf3; color: #27567f; font-size: 12px; font-weight: 700; }

.etiqueta {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.etiqueta.pendente { background: #fdeeea; color: var(--alerta); }
.etiqueta.andamento { background: #e6eef8; color: var(--acao); }
.etiqueta.concluida { background: #e8f0fa; color: var(--ok); }

/* Prioridade e sequência de atendimento. As mesmas cores do aplicativo: alta
   vermelha, média laranja, baixa verde — na marca e na borda do cartão. A
   marca é contornada, e não cheia como a etiqueta da etapa ao lado: "Pendente"
   também é vermelha. Os tons de texto passam de 4.5:1 sobre o branco. */
.marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }

.prioridade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.prioridade::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.prioridade.alta { color: #c62828; }
.prioridade.media { color: #c2410c; }
.prioridade.baixa { color: #2e7d32; }

.cartao.prioridade-alta, .cartao.prioridade-alta:hover { border-color: #e9a29b; }
.cartao.prioridade-media, .cartao.prioridade-media:hover { border-color: #f0bd83; }
.cartao.prioridade-baixa, .cartao.prioridade-baixa:hover { border-color: #a3d3a6; }

.vazio { grid-column: 1 / -1; padding: 32px 20px; color: var(--tinta-fraca); text-align: center; background: #fff; border: 1px dashed #b9c8db; border-radius: 14px; }

/* ------------------------------------------------------------- detalhe --- */

.detalhe { padding-block: 14px; animation: tecnico-detalhe .2s ease-out; }
.detalhe-barra { margin-bottom: 12px; }

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  background: transparent;
  color: #27567f;
}

.demanda-resumo { padding: 22px 24px; border: 1px solid var(--linha); border-radius: 16px; background: #fff; box-shadow: var(--sombra); }
.resumo-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.demanda-codigo { color: var(--tinta-fraca); font-size: 12px; overflow-wrap: anywhere; }
.demanda-resumo h2 { margin: 12px 0 8px; font-size: 25px; line-height: 1.35; letter-spacing: -.6px; }
.descricao { margin: 0 0 16px; color: var(--tinta-fraca); white-space: pre-line; }

.dados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #e7ecf3;
  font-size: 14px;
}

.dados > div { min-width: 0; }
.dados dt { color: var(--tinta-fraca); font-size: 11px; font-weight: 600; }
.dados dd { margin: 4px 0 0; font-weight: 600; }

.linha-do-tempo { --etapas-intervalo: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--etapas-intervalo); margin: 20px 0 0; padding: 0; list-style: none; }
.linha-do-tempo li { position: relative; min-width: 0; text-align: center; }
/* O conector vai do centro de uma etapa ao centro da próxima, com respiro
   dos dois lados do marcador. Assim as legendas e os círculos compartilham
   o mesmo eixo, mesmo quando uma data ocupa mais de uma linha. */
.linha-do-tempo li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 23px); width: calc(100% + var(--etapas-intervalo) - 46px); height: 1px; background: #cbd8e8; }
.etapa-marcador { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 8px; border: 1px solid #abbdd2; border-radius: 50%; background: #fff; color: #526780; font-size: 12px; font-weight: 700; }
.etapa-feita .etapa-marcador { background: #e0ebf8; border-color: #97b6d7; color: #27567f; }
.etapa-atual .etapa-marcador { background: #143454; border-color: #143454; color: #fff; box-shadow: 0 0 0 4px #dce8f7; }
.linha-do-tempo strong { display: block; font-size: 12px; }
.linha-do-tempo small { display: block; margin-top: 2px; color: var(--tinta-fraca); font-size: 11px; }

.acoes { display: grid; gap: 10px; }
.detalhe > .acoes:not(:has(button)) { display: none; }
.detalhe > .acoes:has(button) { justify-items: end; margin-top: 20px; }
.detalhe > .acoes > button { min-width: min(100%, 220px); }

.conclusao {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.conclusao h3 { margin: 0 0 10px; font-size: 15px; }
.conclusao p { margin: 0 0 8px; font-size: 14px; }


.aviso { margin: 14px 0 0; min-height: 22px; font-size: 14px; }
#avisoDetalhe:empty { display: none; }
#avisoChecklist:empty { display: none; }
#avisoChecklist { max-width: 760px; margin: 16px auto; }
.cartao-criacao { font-size: 12px; margin-top: 10px; }
.busca-justificativas { width: 100%; max-width: 760px; margin: 16px auto; min-width: 0; }
.campo-rotulo { display: block; margin-bottom: 8px; color: var(--tinta-fraca); }
.seletor-justificativa { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; }
.painel-justificativas { padding: 12px; margin-top: 8px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.painel-justificativas label { margin: 0; }
.resultados-justificativas { list-style: none; padding: 0; margin: 8px 0; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.resultados-justificativas button { width: 100%; text-align: left; padding: 10px; min-height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--tinta); overflow-wrap: anywhere; }
.resultados-justificativas button:hover, .resultados-justificativas button:focus-visible { background: #e8f0fa; }
.paginacao-justificativas { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--linha); padding-top: 10px; }
.paginacao-justificativas .secundario { width: auto; min-height: 40px; padding: 8px 12px; }
.paginacao-justificativas small { color: var(--tinta-fraca); font-size: 11px; }
.aviso.ok { color: var(--ok); font-weight: 600; }
.aviso.erro { color: var(--alerta); font-weight: 600; }

@keyframes tecnico-detalhe { from { opacity: .5; } to { opacity: 1; } }

@media (max-width: 700px) {
  .topo-conteudo, .filtros, .lista, .detalhe {
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }
  .topo-conteudo, .topo-conta { gap: 12px; }
  .topo-identidade { max-width: 150px; text-align: right; }
  .area-marca { gap: 8px; }
  .area-marca strong { font-size: 16px; }
  .area-marca img { width: 32px; height: 32px; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros-opcoes .filtro { flex: 1; }
  .lista { grid-template-columns: 1fr; }
  .demanda-resumo { padding: 18px; }
  .demanda-resumo h2 { font-size: 21px; }
  .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dado-endereco { grid-column: 1 / -1; }
  .linha-do-tempo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-do-tempo li::after { display: none; }
  .detalhe > .acoes { justify-items: stretch !important; }
}

@media (max-width: 380px) {
  .topo-conteudo { flex-wrap: wrap; }
  .topo-conta { flex: 1; justify-content: flex-end; }
  .topo-identidade { max-width: 110px; }
}

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

/* A lista das peças já trocadas nesta demanda. A seção em volta é um cartão
   `.opcao`, igual às outras duas: moldura própria aqui daria moldura dentro de
   moldura. */
.trocas { margin: 0 0 12px; padding-left: 18px; }
.trocas li { margin-bottom: 10px; }
.trocas strong { display: block; font-size: 14px; }
.trocas small { color: var(--tinta-fraca); font-size: 13px; }

/* Salvar ocupa a largura toda; cancelar fica embaixo e menor.
   Lado a lado e do mesmo tamanho, um toque torto no fim de um checklist longo
   descartaria tudo — e cancelar descarta mesmo. O peso visual tem que
   corresponder ao tamanho do estrago. */
.acoes-opcao {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  justify-items: stretch;
}

.acoes-opcao .principal { margin-top: 0; }

/* Sozinho no grupo, o cancelar não precisa de espaço acima: a última coisa
   antes dele já é um botão. */
.acoes-opcao:not(:has(.principal)) { margin-top: 10px; }

.acoes-opcao .secundario {
  justify-self: center;
  width: auto;
  margin-top: 0;
  padding-inline: 32px;
  border-color: transparent;
  color: var(--tinta-fraca);
}

/* Cancelar a troca não leva destaque de ação de continuar. Ele se chamava
   "Concluir a troca", vinha em azul de largura cheia, e descartava a peça
   escolhida: o técnico tocava nele achando que salvava. Agora ele só abre o
   pedido de motivo, e o único botão cheio da troca é "Salvar peça". */

/* A peça salva, com "Remover" ao lado. Remover é cancelar aquela troca, e
   também pede o motivo; por isso o botão é discreto e não um × solto. */
.troca-linha { display: flex; align-items: flex-start; gap: 10px; }
.troca-linha > div { flex: 1; min-width: 0; }

#area .remover-troca {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--alerta);
  font-weight: 600;
}

#area .remover-troca:hover:not(:disabled) { background: #fbeceb; border-color: #e3b4b0; }

.troca-origem { display: block; margin-top: 2px; font-style: italic; }

/* O pedido de motivo, no lugar do que está sendo cancelado. */
.cancelar-troca {
  margin: 10px 0 4px;
  padding: 14px;
  border-radius: 10px;
  background: #fdf6f5;
  border: 1px solid #eccfcc;
}

.cancelar-troca label { margin-bottom: 0; }
.cancelar-troca .acoes-opcao { margin-top: 12px; }
.opcao-aberta > .cancelar-troca { max-width: 760px; margin-inline: auto; }

#area button.perigo { min-height: 48px; background: var(--alerta); color: #fff; }
#area button.perigo:hover:not(:disabled) { background: #93201a; }

/* As canceladas ficam à vista do técnico, mais apagadas que as salvas: não
   contam como peça trocada. */
.trocas-canceladas strong { color: var(--tinta-fraca); text-decoration: line-through; }

/* A caixa de marcar fica na linha, ao lado do texto — empilhada vira dois
   elementos soltos e ninguem entende que um pertence ao outro. */
.caixa-de-marcar {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  font-weight: 500;
}

.caixa-de-marcar input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 auto;
}

/* Convite para ativar os avisos e o recado que aparece com a aba aberta. */
.convite-aviso {
  margin: 14px 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.convite-aviso p { margin: 0 0 12px; font-size: 14px; }
.convite-aviso .acoes { grid-template-columns: 1fr 1fr; }

.recado {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--marinho);
  color: #fff;
  box-shadow: 0 10px 30px rgba(15, 45, 74, .3);
  z-index: 50;
}

.recado strong { font-size: 15px; }
.recado span { font-size: 14px; color: #cfe0ef; }

@media (min-width: 720px) {
  .convite-aviso { max-width: 720px; margin-inline: auto; }
  .recado { left: auto; right: 20px; max-width: 380px; }
}

/* Opções compactas; editores abertos ocupam uma linha inteira sem ocultar
   outras opções nem perder os rascunhos. No celular, uma coluna. */
.o-que-foi-feito { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; align-items: stretch; }
.o-que-foi-feito > .titulo-secao { grid-column: 1 / -1; }

.titulo-secao {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.3px;
}

.opcao {
  min-width: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.opcao-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.opcao h3 { margin: 0; font-size: 14px; }
.opcao-estado { padding: 3px 8px; border-radius: 6px; background: #edf2f7; color: #526780; font-size: 10px; font-weight: 600; }
.opcao-estado.registrada { background: #e8f0fa; color: #27567f; }
.opcao-estado.rascunho { background: #e5edfa; color: #234e83; }
.opcao-aberta { grid-column: 1 / -1; }
.opcao-aberta > :is(label, .pergunta, .campo-foto, .acoes-opcao, .escolhidas, .trocas) { max-width: 760px; margin-inline: auto; }
.opcao-aberta > .opcao-cabecalho { padding-bottom: 12px; border-bottom: 1px solid #e7ecf3; }
.opcao label:last-of-type { margin-bottom: 0; }
.opcao .linha { margin-bottom: 4px; }
.opcao .linha:last-child { margin-bottom: 0; }


.acoes-concluir { margin-top: 20px; padding-top: 16px; border-top: 1px solid #d8e0ea; }
@media (max-width: 900px) { .o-que-foi-feito { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- checklist --- */

/* A resposta é um BOTÃO, não um rádio. O rádio tem alvo de 20px e exige mira;
   em pé, no sol, de luva, o técnico erra. O botão inteiro é o alvo. */
.pergunta {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--linha);
}

.pergunta:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

.pergunta-titulo {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 650;
  color: var(--tinta);
}

.exigido {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--alerta);
}

/* No notebook a foto é opcional. Cinza, e não vermelho: vermelho diz "falta",
   e ali não falta nada. */
.opcional {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.respostas { display: flex; flex-wrap: wrap; gap: 8px; }

.resposta {
  /* 108px e o que faz duas respostas curtas ("ok" / "nao ok") caberem lado a
     lado no iPhone mais estreito ainda em uso. Texto mais longo passa do
     espaco e desce sozinho, que e o certo: quebrar a palavra seria pior. */
  flex: 1 1 108px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta);
  font-weight: 600;
}

.resposta.marcada {
  background: var(--acao);
  border-color: var(--acao);
  color: #fff;
}

.campo-foto { margin-top: 16px; }
.campo-foto-nome { margin: 0 0 8px; color: var(--tinta-fraca); font-size: 13px; font-weight: 600; }

/* A etiqueta faz o papel do botão, e o seletor de arquivo fica escondido atrás
   dela — visível o bastante para o navegador abrir a câmera, invisível o
   bastante para não aparecer o "Nenhum arquivo escolhido", que não diz nada a
   quem está em pé na frente do equipamento. */
.botao-foto {
  display: block;
  margin: 0;
  min-height: 50px;
  padding: 14px 18px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  /* A letra dos outros botões da área, e não 16px fixo: lado a lado, o
     botão de foto parecia de outro sistema. (Os 16px obrigatórios do iOS
     são dos CAMPOS; aqui é um rótulo, e rótulo não dá zoom.) */
  font-size: inherit;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
}

.foto-escondida {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
}

.foto-escondida:focus-visible + .botao-foto,
.botao-foto:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }

/* A miniatura confirma O QUE foi fotografado. Sem ela o técnico só vê o nome
   de um arquivo e não tem como saber se pegou o equipamento ou o próprio pé. */
.previa-foto {
  display: block;
  width: 100%;
  max-width: 220px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--linha);
}

.respondido { margin: 0; padding-left: 18px; }
.respondido li { margin-bottom: 10px; }
.respondido strong { display: block; font-size: 14px; }
.respondido small { color: var(--tinta-fraca); font-size: 13px; }

/* O botão de salvar fecha o cartão: largura cheia para não sobrar ao lado da
   última resposta e parecer parte dela. */
.opcao > button { width: 100%; margin-top: 12px; }
.opcao:not(.opcao-aberta) { display: flex; flex-direction: column; }
.opcao:not(.opcao-aberta) > button { margin-top: auto; }
.opcao-aberta > button { display: block; max-width: 760px; margin-inline: auto; }

/* As justificativas que o técnico já escolheu. Cada uma com o texto fixo que o
   gestor cadastrou — é ele que vai para o relatório, e escondê-lo faria o
   técnico escolher sem saber o que está assinando. */
.escolhidas { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }

.escolhidas li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f4f7fb;
  border: 1px solid var(--linha);
}

.escolhidas li > div { flex: 1; min-width: 0; }
.escolhidas strong { display: block; font-size: 14px; }
.escolhidas small { display: block; margin-top: 4px; color: var(--tinta-fraca); font-size: 13px; }

/* O × fica com alvo de 44px mesmo desenhado pequeno: em campo, o toque erra. */
.tirar {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 22px;
  line-height: 1;
}

/* O rótulo das peças no resumo da demanda concluída: a lista abaixo já carrega
   o detalhe, então aqui basta dizer do que ela é. */
.rotulo-do-resumo { margin: 12px 0 6px; font-size: 14px; }

/* As fotos da peça trocada, lado a lado: são várias, e empilhadas em largura
   cheia empurrariam o botão de salvar para longe no celular. Cada uma com o ×
   por cima do canto, alvo de 44px como os outros. */
.fotos-da-troca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.fotos-da-troca li { position: relative; }

.fotos-da-troca .previa-foto {
  width: 100%;
  max-width: none;
  aspect-ratio: 3 / 4;
  margin: 0;
  object-fit: cover;
}

.fotos-da-troca .tirar {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 10px 0 10px;
  background: rgba(16, 40, 70, .72);
  color: #fff;
}