/* BANDA AG — folha unica. Sem framework, sem build.
   Escrita CELULAR PRIMEIRO: o link publico circula pelo WhatsApp e quase
   todo mundo abre no telefone. O que e de tela grande fica no @media do fim.

   O fundo de TODAS as telas e a ilustracao dos instrumentos. Como a imagem
   e escura, a interface inteira e escura: painel translucido por cima da
   foto e texto claro, com contraste alto. */

:root{
  color-scheme:dark;

  --tinta:#eef2f7;                      /* texto principal */
  --suave:#a3adbb;                      /* texto secundario */
  --linha:rgba(255,255,255,.14);
  --papel:rgba(17,20,26,.80);           /* painel por cima da foto */
  --papel-forte:rgba(14,17,22,.96);     /* modal: quase opaco, e formulario */
  --reserva:#242527;                    /* cor da ilustracao: fica no lugar
                                           dela enquanto a imagem carrega */
  --azul:#2563eb; --azul-link:#7cb0fb; --azul-claro:rgba(96,165,250,.18);
  --verde:#10b981; --verde-tinta:#6ee7b7; --verde-claro:rgba(52,211,153,.18);
  --vermelho:#dc2626; --vermelho-tinta:#fca5a5; --vermelho-claro:rgba(248,113,113,.16);
}
*{box-sizing:border-box}

/* ---------- o fundo ----------
   A imagem fica numa camada fixa propria (body::before), nao em
   background-attachment:fixed — que o Safari do iPhone trata mal, tremendo
   a cada rolagem. O degrade escuro por cima e o que garante que qualquer
   texto caia em cima de area escura, mesmo sobre a parte clara do teclado. */
html{background-color:var(--reserva)}
body{margin:0;min-height:100vh;background:transparent;
     font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     color:var(--tinta);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background-color:var(--reserva);
  background-image:linear-gradient(rgba(12,14,18,.58),rgba(12,14,18,.76)),
                   url("../img/fundo-900.webp");
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

a{color:var(--azul-link);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:21px;margin:0 0 4px}
.sub{color:var(--suave);margin:0 0 18px;font-size:14px}

/* ---------- topo e menu (area interna) ---------- */
.topo{background:rgba(10,12,16,.86);backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);
      position:sticky;top:0;z-index:40}
.topo-in{max-width:1180px;margin:0 auto;padding:0 14px;display:flex;align-items:center;
         gap:12px;min-height:56px}
.marca{font-weight:800;color:#fff;font-size:16px;white-space:nowrap}
.marca span{color:#93c5fd;font-weight:500;font-size:12.5px}
.usuario{color:var(--suave);font-size:12.5px;white-space:nowrap;margin-left:auto}
.usuario b{color:#fff}
.selo-papel{background:rgba(96,165,250,.22);color:#bfdbfe;border-radius:999px;
            padding:1px 8px;font-size:10px;font-weight:800;text-transform:uppercase;
            letter-spacing:.05em;margin-left:6px}
.hamburguer{background:none;border:0;color:var(--tinta);font-size:22px;line-height:1;
            padding:8px 4px;cursor:pointer}
.menu{display:none;position:absolute;top:56px;left:0;right:0;
      background:rgba(10,12,16,.97);backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      flex-direction:column;align-items:stretch;padding:8px;gap:2px;
      border-bottom:1px solid var(--linha);box-shadow:0 12px 24px rgba(0,0,0,.5)}
.menu.aberto{display:flex}
.menu a{color:var(--tinta);padding:12px;border-radius:8px}
.menu a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.menu a.ativo{background:var(--azul);color:#fff}

/* ---------- estrutura ---------- */
.pagina{max-width:1180px;margin:0 auto;padding:18px 14px 60px}
.caixa{background:var(--papel);backdrop-filter:blur(10px);
       -webkit-backdrop-filter:blur(10px);
       border:1px solid var(--linha);border-radius:12px;
       padding:16px 14px;margin-bottom:16px;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.caixa h2{font-size:16px;margin:0 0 12px}
.vazio{color:var(--suave);text-align:center;padding:26px 8px;margin:0}

/* ---------- campos ----------
   Alvo de 46px de altura: dedo em tela de celular, nao ponteiro de mouse.
   font-size 16px no input evita o zoom automatico do iOS ao focar.        */
.campo{margin-bottom:14px}
label{display:block;font-size:13px;color:var(--suave);margin-bottom:5px;font-weight:600}
input[type=text],input[type=password],input[type=search],input[type=tel],select{
     width:100%;padding:12px 13px;border:1px solid rgba(255,255,255,.22);
     border-radius:10px;font-size:16px;font-family:inherit;
     background:rgba(255,255,255,.07);color:var(--tinta);min-height:46px}
input::placeholder{color:#8b95a3}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23a3adbb' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
       background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
select option{background:#14181f;color:var(--tinta)}
input:focus,select:focus{outline:2px solid rgba(124,176,251,.65);
       border-color:var(--azul-link);background:rgba(255,255,255,.11)}
input.somente-leitura{background:rgba(255,255,255,.04);color:var(--suave);
       border-style:dashed;border-color:rgba(255,255,255,.18)}
input.com-erro,select.com-erro{border-color:var(--vermelho-tinta);
       background:var(--vermelho-claro)}
label.caixinha{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--tinta);
               font-weight:400;margin:0}
label.caixinha input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--azul)}

.erro-campo{margin:6px 0 0;color:var(--vermelho-tinta);font-size:13.5px;font-weight:600}
.erro-geral{margin:4px 0 14px;padding:11px 13px;border-radius:9px;font-size:14px;
            background:var(--vermelho-claro);color:#fecaca;
            border:1px solid rgba(248,113,113,.45)}

/* Data + idade lado a lado: a idade e estreita, so mostra o resultado. */
.linha-campos{display:flex;gap:10px}
.linha-campos .campo-data{flex:1 1 auto;min-width:0}
.linha-campos .campo-idade{flex:0 0 92px}

/* Honeypot: fora da tela, sem display:none (robo bom desconfia de none). */
.fora-da-tela{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- botoes ---------- */
.btn{background:var(--azul);color:#fff;border:0;padding:12px 18px;border-radius:10px;
     font-size:15px;font-weight:600;cursor:pointer;display:inline-block;text-decoration:none;
     text-align:center;min-height:46px;font-family:inherit}
.btn:hover{background:#1d4ed8;text-decoration:none;color:#fff}
.btn.claro{background:rgba(255,255,255,.10);color:var(--tinta);
           border:1px solid rgba(255,255,255,.24)}
.btn.claro:hover{background:rgba(255,255,255,.18);color:#fff}
.btn.perigo{background:var(--vermelho)}
.btn.perigo:hover{background:#b91c1c}
.btn.verde{background:var(--verde)}
.btn.verde:hover{background:#059669}
.btn.pequeno{padding:7px 11px;font-size:13px;min-height:0;border-radius:8px}
.btn.grande{padding:15px 20px;font-size:17px;min-height:52px}
.btn.largo{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- tela publica ---------- */
.publico-caixa{max-width:520px;margin:0 auto;padding:22px 14px 56px}
.publico-topo{text-align:center;margin-bottom:18px;
              text-shadow:0 2px 14px rgba(0,0,0,.75)}
.publico-topo h1{font-size:26px;margin:0 0 6px;color:#fff}
.publico-topo p{margin:0;color:#dbe4f0;font-size:15px}
.dica-final{margin:14px 0 0;color:var(--suave);font-size:12.5px;text-align:center}

.confirmacao{background:var(--papel);backdrop-filter:blur(10px);
             -webkit-backdrop-filter:blur(10px);
             border:1px solid rgba(52,211,153,.45);border-radius:12px;
             padding:26px 18px;margin-bottom:16px;text-align:center;
             box-shadow:0 12px 34px rgba(0,0,0,.35)}
.confirmacao-marca{width:56px;height:56px;border-radius:50%;background:var(--verde-claro);
                   color:var(--verde-tinta);font-size:30px;line-height:56px;
                   margin:0 auto 12px;font-weight:800}
.confirmacao h2{margin:0 0 8px;font-size:20px;color:var(--verde-tinta)}
.confirmacao p{margin:0 0 18px;color:var(--tinta)}

/* ---------- filtros e barra de acoes ---------- */
.filtros{margin:0 0 4px}
.filtros .campo-acoes{display:flex;gap:10px}
.filtros .campo-acoes .btn{flex:1}
.barra-acoes{margin:4px 0 14px}
.barra-acoes .btn{width:100%}

/* ---------- tabela que virou cartao no celular ----------
   Cada linha e um cartao e cada celula mostra o rotulo do data-rot. Assim
   nao existe rolagem horizontal escondendo coluna no telefone.           */
.rolagem-x{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
table.t.cartoes thead{display:none}
table.t.cartoes tr{display:block;background:rgba(255,255,255,.05);
                   border:1px solid rgba(255,255,255,.12);
                   border-radius:11px;padding:12px 14px;margin-bottom:11px}
table.t.cartoes td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
                   border:0;text-align:right}
table.t.cartoes td::before{content:attr(data-rot);color:var(--suave);font-size:12.5px;
                           font-weight:700;text-transform:uppercase;letter-spacing:.03em;
                           text-align:left;flex:0 0 auto}
table.t.cartoes td:empty{display:none}
table.t.cartoes td.acoes-linha{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px;
                               margin-top:10px;padding-top:11px;
                               border-top:1px solid rgba(255,255,255,.12)}
table.t.cartoes td.acoes-linha::before{content:none}
.monoespaco{font-variant-numeric:tabular-nums}

/* ---------- selos ---------- */
.selo{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;
      text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.selo.ok{background:var(--verde-claro);color:var(--verde-tinta)}
.selo.nao{background:rgba(255,255,255,.10);color:var(--suave)}
.selo.alerta{background:var(--vermelho-claro);color:var(--vermelho-tinta)}
.selo.info{background:var(--azul-claro);color:#bfdbfe}

/* ---------- modal ---------- */
.fundo-modal{display:none;position:fixed;inset:0;background:rgba(3,5,8,.72);z-index:100;
             align-items:flex-start;justify-content:center;padding:16px 12px 40px;overflow:auto}
.fundo-modal.aberto{display:flex}
.modal{background:var(--papel-forte);border:1px solid var(--linha);border-radius:14px;
       width:100%;max-width:520px;padding:18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal h3{margin:0 0 4px;font-size:18px}
.modal .dica{color:var(--suave);font-size:13.5px;margin:0 0 14px}
.modal-acoes{display:flex;gap:10px;margin-top:16px}
.modal-acoes .btn{flex:1}

/* ---------- avisos ---------- */
.aviso{padding:11px 14px;border-radius:9px;margin-bottom:16px;font-size:14.5px}
.aviso.ok{background:var(--verde-claro);color:var(--verde-tinta);
          border:1px solid rgba(52,211,153,.45)}
.aviso.erro{background:var(--vermelho-claro);color:#fecaca;
            border:1px solid rgba(248,113,113,.45)}
.aviso.info{background:var(--azul-claro);color:#bfdbfe;
            border:1px solid rgba(96,165,250,.45)}

/* ---------- login ---------- */
.login-tela{min-height:100vh;display:flex;align-items:center;justify-content:center;
            padding:18px}
.login-caixa{background:var(--papel-forte);border:1px solid var(--linha);border-radius:16px;
             padding:26px 20px;width:100%;max-width:390px;
             box-shadow:0 24px 60px rgba(0,0,0,.6)}
.login-caixa h1{text-align:center;margin:0 0 4px}
.login-caixa .sub{text-align:center;margin-bottom:20px}
.rodape-login{text-align:center;margin:16px 0 0;font-size:13.5px}

/* ---------- tela grande ---------- */
@media(min-width:821px){
  /* Acima de 820px a versao 1920 compensa o download; abaixo disso fica a
     de 900, que e um quarto do peso. */
  body::before{
    background-image:linear-gradient(rgba(12,14,18,.58),rgba(12,14,18,.76)),
                     url("../img/fundo-1920.webp");
  }

  body{font-size:15px}
  h1{font-size:23px}
  .hamburguer{display:none}
  .menu{display:flex;position:static;flex-direction:row;background:none;padding:0;
        border:0;box-shadow:none;gap:4px;margin-left:16px;backdrop-filter:none;
        -webkit-backdrop-filter:none}
  .menu a{padding:8px 12px}
  .usuario{order:9}
  .caixa{padding:18px 20px}
  input[type=text],input[type=password],input[type=search],input[type=tel],select{
       padding:9px 11px;font-size:14px;min-height:0}
  .btn{padding:9px 16px;font-size:14px;min-height:0}
  .btn.grande{padding:12px 18px;font-size:16px}
  .linha-campos .campo-idade{flex:0 0 110px}

  .filtros{display:flex;gap:12px;align-items:flex-end}
  .filtros .campo{flex:1;margin-bottom:0}
  .filtros .campo-acoes{flex:0 0 auto}
  .filtros .campo-acoes .btn{flex:0 0 auto}
  .barra-acoes{display:flex;justify-content:flex-end;margin:16px 0 14px}
  .barra-acoes .btn{width:auto}

  table.t.cartoes thead{display:table-header-group}
  table.t.cartoes tr{display:table-row;background:none;border:0;border-radius:0;
                     padding:0;margin:0}
  table.t.cartoes th,table.t.cartoes td{display:table-cell;padding:9px 10px;
       border-bottom:1px solid rgba(255,255,255,.10);text-align:left}
  table.t.cartoes th{background:rgba(255,255,255,.06);color:var(--suave);font-size:11.5px;
       text-transform:uppercase;letter-spacing:.04em;font-weight:800}
  table.t.cartoes td::before{content:none}
  table.t.cartoes td.num{text-align:right}
  table.t.cartoes td.acoes-linha{display:table-cell;white-space:nowrap;margin:0;
       padding:9px 10px;border-top:0}
  table.t.cartoes tr:hover td{background:rgba(255,255,255,.05)}
  .modal{padding:22px}
  .modal-acoes{justify-content:flex-end}
  .modal-acoes .btn{flex:0 0 auto}
  .publico-caixa{padding-top:30px}
}