/* =========================================================================
   ZONA AZUL · PRAIAS — Folha de estilos (styles.css)
   Organização: (1) tokens/base, (2) cabeçalho + idiomas, (3) faixa/geo,
   (4) formulário, (5) prévia da placa, (6) documento, (7) praia,
   (8) barra de ação, (9) sheets/overlays, (10) aviso, (11) busca de praia,
   (12) menu, (13) confirmação, (14) banner de instalação, (15) utilitários,
   (16) home/hub, (17) pagamento/QR Code, (18) overlay "processando".
   Cores e medidas ficam em variáveis (:root) para fácil manutenção.
   ========================================================================= */

/* ===== (1) TOKENS DE DESIGN — cores, raios e fontes reutilizáveis ===== */
  :root{
    --blue-900:#072B5F;   /* azul mais escuro (títulos/valor) */
    --blue-700:#0B4DA2;   /* azul principal da identidade */
    --blue-500:#1769C4;   /* azul de destaque/foco */
    --blue-100:#E8F1FB;   /* azul bem claro (fundos suaves) */
    --red:#D8232A;        /* vermelho de ação (pagar) */
    --red-dark:#B01B21;   /* vermelho pressionado/erro */
    --ink:#14213D;        /* cor do texto principal */
    --muted:#5B6B85;      /* texto secundário */
    --line:#D6E0EF;       /* bordas/linhas */
    --bg:#EEF4FC;         /* fundo da tela */
    --white:#FFFFFF;
    --ok:#157A4A;         /* verde de sucesso */
    --warn:#B4820A;       /* âmbar de alerta */
    --svc-blue:#007BFF;      /* botões do hub (estilo do emdurb.online antigo) */
    --svc-blue-dark:#0056B3; /* botão do hub em hover/foco */
    --svc-faixa:#A35200;     /* faixa marrom à esquerda dos botões do hub */
    --svc-faixa-hi:#FFAE42;  /* faixa laranja em hover/foco */
    --svc-sub:#CDD6E1;       /* subtítulo dos botões do hub (cinza apagado) */
    --radius:14px;        /* raio padrão dos cartões/campos */
    --tap:52px;           /* altura mínima de toque (acessibilidade) */
    --shadow:0 6px 24px rgba(9,42,95,.12);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }

/* ===== (1b) BASE — reset leve e tipografia global ===== */
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--font);
    color:var(--ink);
    background:var(--bg);
    line-height:1.35;
    -webkit-font-smoothing:antialiased;
    overscroll-behavior-y:none;   /* evita "puxar para atualizar" acidental */
  }
  button{font-family:inherit}
  input,select{font-family:inherit}

  /* Casca do app: coluna que ocupa toda a altura (100dvh) e centraliza no desktop */
  .app{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100dvh;   /* dvh = altura real considerando barras do navegador */
    max-width:520px;
    margin:0 auto;
    background:var(--bg);
    position:relative;
  }

/* ===== (2) CABEÇALHO — barra azul fixa no topo ===== */
  .topbar{
    background:linear-gradient(160deg,var(--blue-700),var(--blue-900));
    color:#fff;
    padding:calc(env(safe-area-inset-top) + 14px) 16px 16px;  /* respeita o notch */
    display:flex;
    align-items:center;
    gap:12px;
    position:sticky;top:0;z-index:20;
  }
  .brand-mark{   /* selo "ZA" */
    width:42px;height:42px;flex:0 0 42px;border-radius:11px;
    background:#fff;color:var(--blue-700);
    display:grid;place-items:center;font-weight:800;font-size:17px;letter-spacing:-.5px;
    box-shadow:inset 0 -3px 0 var(--red);
  }
  /* Texto da marca: encolhe e trunca (…) para dar lugar às bandeiras */
  .brand-txt{display:flex;flex-direction:column;line-height:1.1;min-width:0;flex:1 1 auto}
  .brand-txt b{font-size:15px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-txt span{font-size:11.5px;opacity:.85;text-transform:uppercase;letter-spacing:1.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kebab{  /* botão de menu (⋮) */
    margin-left:8px;width:42px;height:42px;border-radius:11px;border:0;
    background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer;
    display:grid;place-items:center;
  }
  .kebab:active{background:rgba(255,255,255,.28)}

  /* Seletor de idioma (bandeiras). A ativa fica opaca e com contorno branco. */
  .lang-switch{margin-left:auto;display:flex;gap:5px;align-items:center;flex:0 0 auto}
  .flagbtn{
    width:25px;height:18px;padding:0;border:0;border-radius:4px;overflow:hidden;
    cursor:pointer;background:transparent;opacity:.5;display:block;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.4);transition:opacity .15s,box-shadow .15s,transform .1s;
  }
  .flagbtn svg{width:100%;height:100%;display:block}
  .flagbtn[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px #fff}   /* bandeira selecionada */
  .flagbtn:active{transform:scale(.93)}

/* ===== (3) FAIXA DE CONTEXTO + CHIP DE GEOLOCALIZAÇÃO ===== */
  .strip{
    background:var(--white);border-bottom:1px solid var(--line);
    padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .strip .ctx{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
  .geo-chip{  /* estado neutro (localizando) */
    margin-left:auto;display:inline-flex;align-items:center;gap:6px;
    font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;
    background:var(--blue-100);color:var(--blue-700);
  }
  .geo-chip.ok{background:#E4F5EC;color:var(--ok)}                 /* posição capturada */
  .geo-chip.err{background:#FDE7E7;color:var(--red-dark);cursor:pointer}  /* precisa autorizar */
  .geo-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}

/* ===== (4) FORMULÁRIO — área rolável, campos e mensagens de erro ===== */
  .form{flex:1;overflow-y:auto;padding:16px 16px 24px;-webkit-overflow-scrolling:touch}
  .field{margin-bottom:14px}
  .control{  /* base de todos os campos (input e o botão de praia) */
    width:100%;min-height:var(--tap);
    background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius);
    padding:0 15px;font-size:16px;color:var(--ink);
    display:flex;align-items:center;
  }
  input.control::placeholder{color:#93A2BC}
  input.control{outline:none;transition:border-color .15s,box-shadow .15s}
  input.control:focus{border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(23,105,196,.14)}
  .control.invalid,input.control.invalid{border-color:var(--red)}                         /* campo com erro */
  .control.invalid:focus,input.control.invalid:focus{box-shadow:0 0 0 4px rgba(216,35,42,.14)}
  .hint{font-size:12px;color:var(--muted);margin:6px 4px 0}
  .err-msg{font-size:12.5px;color:var(--red-dark);margin:6px 4px 0;display:none;font-weight:600}
  .field.has-error .err-msg{display:block}   /* a mensagem só aparece quando o campo tem .has-error */

/* ===== (5) PRÉVIA DA PLACA (padrão Mercosul / EMDURB) ===== */
  .plate-preview{
    margin:2px 0 12px;
    border-radius:12px;overflow:hidden;
    border:3px solid #111;
    background:#fff;
    box-shadow:var(--shadow);
    user-select:none;
  }
  .plate-band{  /* faixa azul superior: bandeira | BRASIL | ★ EMDURB */
    background:linear-gradient(180deg,#0B57C7,#0847A6);
    color:#fff;height:26px;display:flex;align-items:center;justify-content:space-between;
    padding:0 10px;font-size:11px;font-weight:700;letter-spacing:1px;
  }
  .plate-band .flag{width:16px;height:11px;border-radius:2px;overflow:hidden;display:inline-flex;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
  .plate-band .flag svg{width:100%;height:100%;display:block}
  .plate-band .mesr{display:inline-flex;align-items:center;gap:5px}
  .plate-band .star{color:#fff;font-size:12px;line-height:1}
  .plate-chars{  /* os 7 caracteres grandes da placa */
    display:flex;align-items:center;justify-content:center;gap:2px;
    padding:12px 8px 14px;
    font-family:"Arial Narrow",Arial,sans-serif;
    font-weight:800;font-size:clamp(34px,11vw,48px);letter-spacing:3px;color:#111;
  }
  .plate-chars .ch{min-width:.62em;text-align:center}   /* caractere digitado */
  .plate-chars .ph{color:#C7CFDA}                        /* "•" de posição vazia */

/* ===== (6) DOCUMENTO — seletor segmentado CPF / CNPJ / Estrangeiro ===== */
  .segment{display:flex;gap:6px;margin-bottom:8px}
  .segment button{
    flex:1;min-height:40px;border:1.5px solid var(--line);background:var(--white);
    border-radius:10px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;
    transition:.12s;
  }
  .segment button[aria-pressed="true"]{   /* tipo selecionado */
    background:var(--blue-700);border-color:var(--blue-700);color:#fff;
  }

/* ===== (7) CAMPO DE PRAIA — botão que abre a busca ===== */
  .picker-field{justify-content:space-between;cursor:pointer;text-align:left}
  .picker-field .ph{color:#93A2BC}                    /* placeholder (nenhuma praia escolhida) */
  .picker-field .val{color:var(--ink)}                /* praia escolhida */
  .picker-field .chev{color:var(--blue-500);font-size:14px;flex:0 0 auto;margin-left:10px}

/* ===== (8) BARRA DE AÇÃO — rodapé fixo com valor + botão pagar ===== */
  .actionbar{
    position:sticky;bottom:0;z-index:20;
    background:var(--white);border-top:1px solid var(--line);
    padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);
    display:flex;align-items:center;gap:14px;
    box-shadow:0 -6px 20px rgba(9,42,95,.06);
  }
  .fee{display:flex;flex-direction:column;line-height:1.05;flex:0 0 auto}
  .fee small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
  .fee b{font-size:20px;color:var(--blue-900);white-space:nowrap}
  .fee b.faixa{font-size:16px}   /* zaRuas antes de escolher a rua: "R$ 2,00 | R$ 5,00" (tarifas das zonas) */
  .btn-pay{
    /* encolhe para a barra de valor caber inteira (ex.: as duas tarifas da zaRuas) */
    flex:1 1 0;min-width:0;padding:0 12px;white-space:nowrap;
    min-height:var(--tap);border:0;border-radius:var(--radius);
    background:var(--red);color:#fff;font-size:16px;font-weight:800;letter-spacing:.3px;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    transition:.12s;
  }
  .btn-pay:active{background:var(--red-dark)}
  .btn-pay[disabled]{opacity:.55;filter:grayscale(.2)}

/* ===== (9) SHEETS / OVERLAYS — painéis que sobem de baixo (bottom sheets) ===== */
  .scrim{  /* fundo escurecido; .open o torna visível */
    position:fixed;inset:0;background:rgba(7,25,55,.5);z-index:40;
    opacity:0;visibility:hidden;transition:opacity .2s;
  }
  .scrim.open{opacity:1;visibility:visible}
  .sheet{  /* painel; fica fora da tela (translateY 100%) até receber .open */
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    max-width:520px;margin:0 auto;
    background:var(--white);border-radius:20px 20px 0 0;
    transform:translateY(100%);transition:transform .24s cubic-bezier(.22,1,.36,1);
    max-height:88dvh;display:flex;flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sheet.open{transform:translateY(0)}                 /* animação de subida */
  .sheet-grip{width:40px;height:4px;border-radius:99px;background:var(--line);margin:10px auto 4px}
  .sheet-head{padding:6px 18px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
  .sheet-head h2{margin:0;font-size:16px}
  .sheet-head .close{margin-left:auto;border:0;background:var(--blue-100);color:var(--blue-700);width:34px;height:34px;border-radius:9px;font-size:18px;cursor:pointer}
  .sheet-body{overflow-y:auto;padding:14px 18px 20px}

/* ===== (10) MODAL DE AVISO — cor da faixa superior muda conforme o tipo ===== */
  .aviso-ico{font-size:20px;line-height:1}
  .aviso-msg{margin:2px 0 16px;font-size:15px;color:var(--ink);line-height:1.5;white-space:pre-line}
  .aviso-actions{display:flex;gap:10px}
  .aviso-actions .btn-solid,.aviso-actions .btn-ghost{flex:1;min-height:48px;border-radius:12px;font-weight:800;font-size:15px;cursor:pointer}
  #sheetAviso[data-tipo="ok"]    .sheet-head{box-shadow:inset 0 3px 0 var(--ok)}     /* ✅ sucesso */
  #sheetAviso[data-tipo="alerta"].sheet-head{box-shadow:inset 0 3px 0 var(--warn)}   /* ⚠️ alerta */
  #sheetAviso[data-tipo="erro"]  .sheet-head{box-shadow:inset 0 3px 0 var(--red)}    /* ⛔ erro */
  #sheetAviso[data-tipo="info"]  .sheet-head{box-shadow:inset 0 3px 0 var(--blue-500)} /* ℹ️ info */

/* ===== (11) BUSCA DE PRAIA — campo de busca + lista de resultados ===== */
  .search-wrap{padding:14px 18px 10px;border-bottom:1px solid var(--line)}
  .search-wrap input{width:100%;min-height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font-size:16px;outline:none}
  .search-wrap input:focus{border-color:var(--blue-500)}
  .beach-list{list-style:none;margin:0;padding:6px 8px 12px;overflow-y:auto}
  .beach-list li{
    padding:14px 12px;border-radius:11px;font-size:15.5px;cursor:pointer;
    display:flex;align-items:center;gap:10px;
  }
  .beach-list li:active,.beach-list li.hi{background:var(--blue-100)}   /* .hi = item em foco (teclado) */
  .beach-list li .pin{color:var(--blue-500);font-size:15px}
  .beach-list li .preco{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}  /* R$/h da rua (zaRuas) */
  .beach-list li:not(.beach-disabled){font-weight:700}                 /* disponível: destaque em negrito */
  .beach-list li[aria-selected="true"]{color:var(--blue-700)}          /* praia atual */
  .beach-list li.beach-disabled{color:var(--muted);cursor:not-allowed;text-decoration:line-through}  /* fora do horário de cobrança: taxado */
  .beach-list li.beach-disabled:active{background:transparent}
  .beach-list li.beach-disabled .pin{color:var(--muted)}
  .beach-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:14px}

/* ===== (12) ITENS DE MENU — instalar / remover versão anterior ===== */
  .menu-item{
    width:100%;text-align:left;background:var(--white);border:1px solid var(--line);
    border-radius:12px;padding:14px 14px;margin-bottom:10px;cursor:pointer;
    display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink);
  }
  .menu-item:active{background:var(--blue-100)}
  .menu-item .mi-ico{width:34px;height:34px;border-radius:9px;background:var(--blue-100);color:var(--blue-700);display:grid;place-items:center;font-size:17px;flex:0 0 34px}
  .menu-item .mi-tx{display:flex;flex-direction:column}
  .menu-item .mi-tx small{color:var(--muted);font-size:12px;margin-top:2px}
  .menu-note{font-size:12.5px;color:var(--muted);background:var(--blue-100);border-radius:10px;padding:11px 12px;margin-top:6px}

/* ===== (13) CONFIRMAÇÃO — resumo do registro e identificador ===== */
  .confirm-body{padding:18px}
  .summary{background:var(--blue-100);border-radius:14px;padding:14px 16px;margin-bottom:14px}
  .summary .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;border-bottom:1px dashed rgba(11,77,162,.18)}
  .summary .row:last-child{border-bottom:0}
  .summary .row span{color:var(--muted)}
  .summary .row b{color:var(--ink);text-align:right;word-break:break-word}
  .txid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#fff;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;color:var(--blue-900);word-break:break-all;margin-bottom:14px}
  .txid small{display:block;color:var(--muted);font-family:var(--font);font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
  .confirm-actions{display:flex;flex-direction:column;gap:10px}
  .confirm-actions .btn-verificar,.confirm-actions .btn-link{flex:0 0 auto;width:100%}
  .btn-ghost{flex:1;min-height:48px;border:1.5px solid var(--line);background:#fff;border-radius:12px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer}
  .btn-solid{flex:2;min-height:48px;border:0;background:var(--blue-700);color:#fff;border-radius:12px;font-weight:800;font-size:15px;cursor:pointer}
  .btn-solid:active{background:var(--blue-900)}

/* ===== (14) BANNER DE INSTALAÇÃO — só visível com a classe .show ===== */
  .install-banner{
    display:none;align-items:center;gap:12px;
    background:linear-gradient(160deg,var(--blue-700),var(--blue-900));color:#fff;
    padding:12px 16px;
  }
  .install-banner.show{display:flex}
  .install-banner b{font-size:13.5px}
  .install-banner p{margin:2px 0 0;font-size:12px;opacity:.85}
  .install-banner .ib-btn{margin-left:auto;background:#fff;color:var(--blue-700);border:0;border-radius:10px;padding:9px 14px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
  .install-banner .ib-x{background:transparent;border:0;color:#fff;opacity:.7;font-size:18px;cursor:pointer;padding:4px}

/* ===== (15) UTILITÁRIOS E ACESSIBILIDADE ===== */
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}  /* só para leitores de tela */
  :focus-visible{outline:3px solid var(--blue-500);outline-offset:2px}                          /* foco visível por teclado */
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}                          /* respeita "reduzir movimento" */

/* ===== (16) HOME / HUB (raiz emdurb.online) — botões de serviço + barra inferior ===== */
  /* área rolável do hub, com a foto aérea de Ubatuba do emdurb.online antigo
     sob um véu escuro (40%) para dar leitura ao texto branco */
  .home{
    flex:1;overflow-y:auto;padding:16px 14px 20px;-webkit-overflow-scrolling:touch;
    background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url("/images/Ubatuba-Aerea-1.jpg") center/cover no-repeat var(--blue-900);
  }

  /* saudação/título curto acima dos botões */
  .home-hi{display:flex;align-items:baseline;gap:8px;margin:2px 4px 14px}
  .home-hi b{font-size:16px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
  .home-hi span{font-size:12.5px;color:rgba(255,255,255,.85)}

  /* Botões de serviço no estilo do emdurb.online antigo: azul, faixa marrom à esquerda,
     cantos direitos arredondados. No celular ficam um por linha, centralizados. */
  .svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
  .svc-tile{   /* cada serviço: ícone + rótulo numa linha, subtítulo opcional embaixo */
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;
    width:220px;min-height:70px;padding:12px 15px;text-decoration:none;color:#fff;
    background:var(--svc-blue);border-left:8px solid var(--svc-faixa);border-radius:0 12px 12px 0;
    box-shadow:5px 8px 15px rgba(0,0,0,.3);
    transition:transform .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
  }
  .svc-tile:hover,.svc-tile:focus-visible{   /* destaque: azul mais escuro, faixa laranja com brilho */
    background:var(--svc-blue-dark);border-left-color:var(--svc-faixa-hi);transform:translate(-2px,-2px);
    box-shadow:8px 12px 22px rgba(0,0,0,.4),inset 8px 0 15px -5px rgba(255,174,66,.8);
  }
  .svc-tile:focus-visible{outline:3px solid var(--svc-faixa-hi);outline-offset:2px}   /* foco pelo teclado */
  .svc-tile:active{transform:scale(.98)}
  .svc-tile-t{display:flex;align-items:center;justify-content:center;gap:8px}   /* linha ícone + rótulo */
  .svc-tile-ico{display:grid;place-items:center;flex:0 0 auto}
  .svc-tile-ico svg{width:20px;height:20px;display:block}
  .svc-label{font-size:16px;font-weight:600;line-height:1.25}
  .svc-sub{font-size:12px;font-weight:400;line-height:1.3;color:var(--svc-sub);opacity:.9}   /* subtítulo (home_botoes.str_subtitulo) */

  /* rodapé institucional curto */
  .home-footer{text-align:center;color:rgba(255,255,255,.85);font-size:11.5px;padding:18px 12px 4px;line-height:1.5;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
  .home-footer b{color:#fff;display:block;font-size:12px}

  /* ----- Barra de navegação inferior (Início / Sobre / Notificações) ----- */
  .tabbar{
    display:flex;background:linear-gradient(160deg,var(--blue-700),var(--blue-900));
    padding:8px 6px calc(env(safe-area-inset-bottom) + 8px);
    box-shadow:0 -6px 20px rgba(9,42,95,.12);
  }
  .tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    border:0;background:transparent;color:#fff;opacity:.6;cursor:pointer;
    font-size:11px;font-weight:600;padding:6px 4px;transition:opacity .15s;
  }
  .tab svg{width:22px;height:22px}
  .tab:active{opacity:.85}
  .tab.is-active{opacity:1}

/* ===== (17) PAGAMENTO — resumo + QR Code (tela /zaPraias/pagamentos) ===== */
  .pay-title{margin:4px 4px 16px;text-align:center}
  .pay-title h2{margin:0 0 4px;font-size:18px;color:var(--ink)}
  .pay-title p{margin:0;font-size:13px;color:var(--muted)}
  .pay-error{background:#FBE9E9;border:1px solid var(--red);color:var(--red-dark);border-radius:var(--radius);padding:16px;text-align:center;font-size:14px;margin-bottom:14px}
  .qr-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:14px}
  .qr-card img{width:220px;height:220px;max-width:100%;border-radius:10px}
  .qr-copy{display:flex;gap:10px;width:100%;align-items:flex-start}
  .qr-copy .txid{flex:1;margin:0;max-height:90px;overflow-y:auto}
  .btn-copy{flex-shrink:0;min-height:48px;padding:0 16px;border:0;background:var(--blue-700);color:#fff;border-radius:12px;font-weight:700;font-size:13px;cursor:pointer}
  .btn-copy.copied{background:var(--ok)}
  .btn-ghost.btn-link{text-decoration:none;display:flex;align-items:center;justify-content:center}
  #sheetVerificacao[data-tipo="ok"] .sheet-head{box-shadow:inset 0 3px 0 var(--ok)}
  #sheetVerificacao[data-tipo="erro"] .sheet-head{box-shadow:inset 0 3px 0 var(--red)}
  #sheetVerificacao[data-tipo="ok"] #verificacaoIco{color:var(--ok)}
  #sheetVerificacao[data-tipo="erro"] #verificacaoIco{color:var(--red)}
  .verificacao-loading{display:flex;justify-content:center;margin:2px 0 14px}
  .verificacao-loading[hidden]{display:none}
  .verificacao-loading img{width:42px;height:42px}
  #scrimPagamento{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  #sheetVerificacao.resultado-central{
    top:50%;bottom:auto;left:50%;right:auto;width:min( calc(100% - 32px), 480px);
    max-height:calc(100dvh - 32px);border-radius:20px;
    transform:translate(-50%,-50%) scale(.96);opacity:0;
    transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .2s;
  }
  #sheetVerificacao.resultado-central.open{transform:translate(-50%,-50%) scale(1);opacity:1}

/* ===== (18) OVERLAY "PROCESSANDO" — modal central com o fundo desfocado, exibido
   ao clicar em "Gerar Pix" e mantido durante a troca de página ===== */
  .loading-overlay{
    position:fixed;inset:0;display:none;align-items:center;justify-content:center;
    background:rgba(7,25,55,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    z-index:60;
  }
  .loading-overlay.show{display:flex}
  .loading-card{
    display:flex;align-items:center;gap:14px;background:var(--white);
    border-radius:var(--radius);padding:18px 24px;box-shadow:var(--shadow);
    max-width:86vw;
  }
  .loading-card img{width:42px;height:42px;flex-shrink:0}
  .loading-card span{font-size:15px;font-weight:700;color:var(--ink)}

/* ===== (19) SELETOR DE TEMPO (RANGE 1 A 10 HORAS) ===== */
.range-box{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;
}
.range-header{
  display:flex;align-items:center;justify-content:space-between;
}
.range-label{
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.range-val-badge{
  background:var(--blue-100);color:var(--blue-700);
  font-size:14px;font-weight:800;padding:4px 10px;border-radius:8px;
  border:1px solid rgba(11,77,162,.2);
}
.range-slider-wrap{
  position:relative;display:flex;flex-direction:column;padding:4px 0 2px;
}
.range-input{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;
  border-radius:4px;background:var(--line);outline:none;cursor:pointer;
  margin:10px 0;transition:background .15s;
}
.range-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:50%;background:var(--blue-700);
  box-shadow:0 2px 6px rgba(11,77,162,.4);cursor:pointer;
  border:2.5px solid #fff;transition:transform .1s,background .15s;
}
.range-input::-webkit-slider-thumb:active{
  transform:scale(1.15);background:var(--blue-900);
}
.range-input::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--blue-700);
  box-shadow:0 2px 6px rgba(11,77,162,.4);cursor:pointer;
  border:2.5px solid #fff;transition:transform .1s,background .15s;
}
.range-input::-moz-range-thumb:active{
  transform:scale(1.15);background:var(--blue-900);
}
.range-ticks{
  display:flex;justify-content:space-between;
  font-size:11px;font-weight:700;color:var(--muted);padding:0 2px;
}

/* ===== (20) TEMA VERDE ESCURO (ZONA AZUL RUAS) ===== */
body.theme-ruas,
.app.theme-ruas {
  --blue-900: #08331E;   /* verde bem escuro (títulos, valor) */
  --blue-700: #0E5A35;   /* verde escuro principal (topbar, botões, ativo) */
  --blue-500: #168B50;   /* verde destaque/foco */
  --blue-100: #E6F4ED;   /* verde claro para fundos suaves e chips */
  --bg: #EDF6F1;         /* fundo suave esverdeado da página */
}

body.theme-ruas input.control:focus,
.theme-ruas input.control:focus,
.theme-ruas .search-wrap input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(22, 139, 80, 0.14);
}

body.theme-ruas .range-val-badge,
.theme-ruas .range-val-badge {
  border-color: rgba(14, 90, 53, 0.2);
}

body.theme-ruas .range-input::-webkit-slider-thumb,
.theme-ruas .range-input::-webkit-slider-thumb {
  background: var(--blue-700);
  box-shadow: 0 2px 6px rgba(14, 90, 53, 0.4);
}

body.theme-ruas .range-input::-moz-range-thumb,
.theme-ruas .range-input::-moz-range-thumb {
  background: var(--blue-700);
  box-shadow: 0 2px 6px rgba(14, 90, 53, 0.4);
}

body.theme-ruas :focus-visible,
.theme-ruas :focus-visible {
  outline-color: var(--blue-500);
}