/* =====================================================================
   App do cliente: Início, Pedidos, Ajuda e menu inferior.
   Mesma linguagem do site: placa de serviço, pisca-alerta, asfalto.
   ===================================================================== */

:root {
  --placa: #0B4EA2; --placa-escura: #083B7C; --placa-clara: #E7EEF8;
  --pisca: #FFB81C; --pisca-escuro: #F0A500; --pisca-clara: #FFF4D6;
  --asfalto: #15181B; --asfalto-2: #3B4148; --asfalto-3: #69717A;
  --concreto: #F1F2F3; --linha: #DCDFE3; --linha-forte: #B9BFC5;
  --rodovia: #0E7A47; --rodovia-clara: #E5F3EB; --alerta: #C8261D; --alerta-clara: #FBEAE9;
  --fonte: 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Overpass Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body.tela-cliente { margin: 0; font: 400 16px/1.5 var(--fonte); color: var(--asfalto); background: #E4E7EA; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--placa); outline-offset: 2px; border-radius: 8px; }
.ic { width: 24px; height: 24px; flex: none; }

.tela { position: relative; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--concreto); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .tela { box-shadow: 0 0 0 1px var(--linha); } }

.rotulo { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--asfalto-3); }
.rotulo::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--pisca); }

/* ---------- Cabeçalho ---------- */
.cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 18px 4px; }
.cabeca .marca { display: flex; align-items: center; gap: 9px; font: 900 19px/1 var(--fonte); letter-spacing: -0.03em; text-decoration: none; }
.cabeca .marca img { width: 32px; height: 32px; }
.status-24 { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--mono); color: var(--asfalto-2); }
.status-24 i { width: 8px; height: 8px; border-radius: 50%; background: var(--rodovia); box-shadow: 0 0 0 3px var(--rodovia-clara); }
.titulo-tela { padding: calc(18px + env(safe-area-inset-top)) 18px 6px; }
.titulo-tela h1 { font-size: 30px; font-weight: 900; letter-spacing: -0.035em; }
.titulo-tela p { color: var(--asfalto-3); margin-top: 6px; }

.secao { padding: 22px 18px 4px; }
.secao > h2 { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 12px; }

/* ---------- Início ---------- */
.ola { padding: 16px 18px 0; }
.ola h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.04em; }
.ola p { color: var(--asfalto-2); margin-top: 6px; }

.placa-app { position: relative; margin: 14px 18px 0; background: var(--placa); color: #fff; border-radius: 18px; padding: 18px 20px 18px; }
.placa-app::before { content: ''; position: absolute; inset: 7px; border: 2.5px solid #fff; border-radius: 12px; pointer-events: none; }
.placa-app .pictos { display: flex; gap: 8px; margin-bottom: 12px; }
.placa-app .pictos span { width: 40px; height: 40px; display: grid; place-items: center; background: #fff; color: var(--asfalto); border-radius: 7px; }
.placa-app .pictos .ic { width: 26px; height: 26px; }
.placa-app h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: .98; }
.placa-app p { font-weight: 700; opacity: .9; margin: 6px 0 14px; font-size: 14.5px; line-height: 1.35; }
.placa-app .btn-acionar { position: relative; z-index: 1; }

.btn-acionar, .btn-linha {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px;
  border-radius: 12px; border: 2px solid transparent; font: 800 16.5px/1 var(--fonte); text-decoration: none; cursor: pointer;
}
.btn-acionar { background: var(--pisca); color: var(--asfalto); }
.btn-acionar:active { background: var(--pisca-escuro); }
.btn-acionar .ic { width: 21px; height: 21px; stroke-width: 2.4; }
.btn-linha { background: #fff; color: var(--asfalto); border-color: var(--asfalto); }
.btn-acionar[disabled] { opacity: .6; }
.pisca { animation: pisca 1.2s steps(1, end) infinite; }
@keyframes pisca { 50% { opacity: .2; } }

/* Luzes do painel: escolha do problema */
.painel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.luz { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 12px 6px 10px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; text-decoration: none; text-align: center; }
.luz .ic { width: 30px; height: 30px; }
.luz b { font-size: 13.5px; font-weight: 800; line-height: 1.15; }
.luz:active { border-color: var(--asfalto); }
.luz.breve { opacity: .45; pointer-events: none; }

/* Quanto custa (resumo) */
.lista-precos { background: #fff; border: 1px solid var(--linha); border-radius: 14px; }
.lista-precos div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px dashed var(--linha); }
.lista-precos div:first-child { border-top: 0; }
.lista-precos span { font-weight: 700; }
.lista-precos b { font: 700 14.5px/1.4 var(--mono); white-space: nowrap; }
.lista-precos small { display: block; padding: 12px 16px 14px; border-top: 1px solid var(--linha); color: var(--asfalto-3); font-size: 13px; }
/* Sem valores (o preço só aparece no chat): nome do serviço e, embaixo, o que inclui. */
.lista-precos.incluido div { display: block; }
.lista-precos.incluido em { display: block; margin-top: 2px; font-style: normal; font-size: 13.5px; color: var(--asfalto-3); }
.link-seco { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 800; font-size: 14.5px; text-decoration: none; color: var(--placa); }
.link-seco .ic { width: 18px; height: 18px; }

.instalar { margin: 18px 18px 0; display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; }
.instalar img { width: 42px; height: 42px; border-radius: 10px; }
.instalar div { flex: 1; font-size: 13.5px; color: var(--asfalto-3); }
.instalar b { display: block; color: var(--asfalto); font-size: 14.5px; }
.instalar button { border: 0; background: var(--asfalto); color: #fff; border-radius: 10px; padding: 10px 14px; font: 800 13.5px var(--fonte); cursor: pointer; }

/* Pedido em andamento (acima do menu) */
.pedido-ativo {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40;
  width: calc(100% - 20px); max-width: 460px; display: flex; align-items: center; gap: 12px;
  background: var(--asfalto); color: #fff; border-radius: 14px; padding: 12px 14px; text-decoration: none;
  box-shadow: 0 14px 30px rgba(21, 24, 27, .3);
}
.pedido-ativo .ic-box { width: 40px; height: 40px; border-radius: 10px; background: var(--pisca); color: var(--asfalto); display: grid; place-items: center; flex: none; }
.pedido-ativo .ic-box .ic { width: 22px; height: 22px; }
.pedido-ativo div { flex: 1; min-width: 0; }
.pedido-ativo b { display: block; font-size: 15px; font-weight: 800; }
.pedido-ativo small { color: #C3C9CE; font: 500 12.5px/1.3 var(--mono); }
.pedido-ativo > .ic { color: var(--pisca); }

/* ---------- Menu inferior ---------- */
.abas {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 50; width: 100%; max-width: 480px;
  display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--linha);
  padding: 0 8px env(safe-area-inset-bottom);
}
.abas a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 11px 0 9px; text-decoration: none; color: var(--asfalto-3); font-size: 11.5px; font-weight: 800; }
.abas a svg { width: 23px; height: 23px; }
.abas a.ativa { color: var(--asfalto); }
.abas a.ativa::before { content: ''; position: absolute; top: -1px; left: 30%; right: 30%; height: 3px; background: var(--pisca); border-radius: 0 0 3px 3px; }

/* ---------- Pedidos ---------- */
.lista-pedidos h2 { font: 600 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--asfalto-3); margin: 18px 0 10px; }
.cartao-pedido { display: block; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 15px 16px; text-decoration: none; margin-bottom: 10px; }
.cartao-pedido.ativo { border-color: var(--asfalto); box-shadow: inset 4px 0 0 var(--pisca); }
.cartao-pedido .topo-ped { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cartao-pedido b { font-size: 16px; font-weight: 800; }
.cartao-pedido small { display: block; color: var(--asfalto-3); font-size: 13px; }
.cartao-pedido .codigo { font-family: var(--mono); }
.cartao-pedido .rodape-ped { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--linha); font-size: 13.5px; color: var(--asfalto-2); }
.cartao-pedido .rodape-ped strong { display: inline-flex; align-items: center; gap: 4px; color: var(--asfalto); }
.cartao-pedido .rodape-ped .ic { width: 16px; height: 16px; }
.etiqueta { flex: none; align-self: flex-start; display: inline-block; padding: 4px 9px; border-radius: 6px; font: 700 11.5px/1.2 var(--mono); white-space: nowrap; background: var(--concreto); color: var(--asfalto-2); }
.etiqueta.ativo { background: var(--placa-clara); color: var(--placa); }
.etiqueta.verde { background: var(--rodovia-clara); color: var(--rodovia); }
.etiqueta.vermelho { background: var(--alerta-clara); color: var(--alerta); }
.etiqueta.amarelo { background: var(--pisca-clara); color: #8A5A00; }

.vazio-app { text-align: center; padding: 48px 20px; color: var(--asfalto-3); }
.vazio-app .ic { width: 44px; height: 44px; margin: 0 auto; color: var(--asfalto-3); }
.vazio-app h2 { color: var(--asfalto); margin: 14px 0 6px; font-size: 20px; font-weight: 900; }
.vazio-app .btn-acionar { margin-top: 20px; }

/* ---------- Ajuda ---------- */
.emergencia { margin: 4px 18px 0; background: var(--alerta-clara); border-radius: 14px; padding: 16px; }
.emergencia b { display: block; color: var(--alerta); font-size: 16px; font-weight: 900; }
.emergencia p { font-size: 14px; color: #7A1A14; margin: 2px 0 12px; }
.emergencia .ligar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.emergencia a { display: grid; justify-items: center; gap: 2px; background: #fff; border-radius: 10px; padding: 10px 6px; text-decoration: none; color: var(--alerta); font: 700 20px/1 var(--mono); }
.emergencia a small { font: 700 11px/1.2 var(--fonte); color: var(--asfalto-3); }
.cartao-app { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 16px; }
.campo-app { display: grid; gap: 6px; margin-bottom: 14px; }
.campo-app > label, .campo-app > span.rot { font-weight: 800; font-size: 14px; }
.campo-app select, .campo-app textarea, .campo-app input { width: 100%; min-height: 48px; padding: 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte); font: 500 16px var(--fonte); color: var(--asfalto); background: #fff; }
.campo-app textarea { min-height: 96px; resize: vertical; }
.campo-app select:focus, .campo-app textarea:focus, .campo-app input:focus { outline: none; border-color: var(--placa); box-shadow: 0 0 0 4px var(--placa-clara); }
.campo-app .erro { color: var(--alerta); font-size: 13px; font-weight: 700; }
.motivos { display: grid; gap: 6px; }
.motivos label { display: flex; gap: 10px; align-items: center; min-height: 46px; padding: 0 12px; border: 1.5px solid var(--linha); border-radius: 10px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.motivos input { accent-color: var(--placa); width: 18px; height: 18px; }
.motivos label:has(input:checked) { border-color: var(--placa); background: var(--placa-clara); }
.sucesso-app { text-align: center; padding: 8px 4px; }
.sucesso-app .ic { width: 40px; height: 40px; margin: 0 auto; color: var(--rodovia); }
.sucesso-app b { display: block; font-size: 18px; font-weight: 900; margin: 10px 0 6px; }
.sucesso-app p { color: var(--asfalto-2); font-size: 14.5px; }
.protocolo { display: inline-block; margin-top: 12px; font: 700 16px var(--mono); background: var(--concreto); border-radius: 8px; padding: 8px 12px; letter-spacing: .03em; }
.solicitacao { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.solicitacao .topo-ped { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.solicitacao b { font-weight: 800; }
.solicitacao small { display: block; color: var(--asfalto-3); font: 500 12.5px var(--mono); margin-top: 2px; }
.solicitacao .resposta { margin-top: 10px; background: var(--rodovia-clara); color: #0B5A35; padding: 10px 12px; border-radius: 10px; font-size: 14px; white-space: pre-wrap; }
.faq-app details { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
.faq-app summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq-app summary::-webkit-details-marker { display: none; }
.faq-app summary::after { content: '+'; font: 500 20px/1 var(--mono); color: var(--asfalto-3); }
.faq-app details[open] summary::after { content: '−'; }
.faq-app p { margin-top: 8px; color: var(--asfalto-2); font-size: 14.5px; }
.links-rodape { text-align: center; padding: 22px 18px; font-size: 13px; color: var(--asfalto-3); }

.janela-fundo-app { position: fixed; inset: 0; background: rgba(21, 24, 27, .5); z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.janela-app { width: 100%; max-width: 480px; background: #fff; border-radius: 18px 18px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); }
.janela-app h2 { font-size: 20px; font-weight: 900; margin-bottom: 12px; }
.janela-app ol { padding-left: 20px; color: var(--asfalto-2); margin: 0 0 16px; }
.janela-app li { margin-bottom: 8px; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 3000; background: var(--asfalto); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 92%; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }