/* =====================================================================
   lcc-noite.css — NOITE PREMIUM, folha comum das telas do CLIENTE (26/10/2026)
   Estudo: vault Vendas/design-cadastro-vip/README.md (paleta, guia, enxertos).

   COMO USAR
   - <link rel="stylesheet" href="lcc-noite.css?v=3"> no <head>, ANTES do <style> da página
     (o CSS da página vem depois e vence nos empates). A CADA mudança desta folha, subir o ?v= em
     TODAS as páginas que a carregam (cadastro, consulta, qr_lookup ×2, reserva_cancelada) — senão
     o celular segue com a versão velha em cache.
   - <body class="lcc-noite lcc-<pagina>">. TUDO aqui só vale dentro de .lcc-noite (até o
     color-scheme): pode carregar a folha no qr_lookup.php sem mexer no modo FUNCIONÁRIO —
     ponha a classe no body só na visão do cliente sem login.
   - <head> recomendado: <meta name="theme-color" content="#000000"> e
     <meta name="color-scheme" content="dark">.
   - A folha foi feita para SUBSTITUIR o visual antigo (degradê roxo, botão verde-água):
     tire o CSS visual antigo da página, mas mantenha o que é comportamento
     (.form-step escondido, [hidden], display que o JS liga). .form-step, .bolinha-seg[hidden]
     e .btn-alterar[hidden] já estão garantidos aqui.
   - Só visual: nenhuma regra mexe em id/name/JS. Os estados que o JS liga (readonly-dark,
     attention, campo-ok, campo-erro, loading-state, .cpf-campo.travado, btn-espera,
     bolinha-seg) estão mapeados com os nomes de hoje, na ordem certa.
   - Fonte: Montserrat 800 LOCAL (a do telão) só em título, rótulo, botão e valor de destaque;
     texto e campos na fonte do sistema. Ícones: Tabler (MIT) em data-URI, ver ÍCONES.
   ===================================================================== */

@font-face{
  font-family:"LCC Montserrat";
  src:url("../telao/fontes/montserrat-800.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* superfícies */
  --lcc-bg:#000000;          /* página (= caixa preta do logo) */
  --lcc-surface:#141414;     /* cartão (1 nível só) */
  --lcc-surface-2:#1E1E1E;   /* campo, ladrilho, linha */
  --lcc-surface-0:#0E0E0E;   /* campo travado / desligado */
  --lcc-line:#2C2C2C;        /* divisória, borda de desligado */
  --lcc-line-soft:#242424;   /* divisória dentro do cartão */
  --lcc-card-line:#262626;   /* borda do cartão */
  /* texto (todos >= 4,5:1 sobre #141414 e #1E1E1E) */
  --lcc-text:#F5F5F5;
  --lcc-text-2:#B8B8B8;      /* rótulo, secundário */
  --lcc-text-3:#8C8C8C;      /* placeholder, apoio — nada mais escuro que isto p/ texto */
  --lcc-text-lock:#E6E6E6;   /* valor do campo travado (precisa conferir) */
  /* controles */
  --lcc-field:#6B6B6B;       /* borda do campo (>= 3:1) */
  --lcc-field-hover:#8C8C8C;
  --lcc-disabled-bg:#2C2C2C;
  --lcc-disabled-text:#B8B8B8; /* 7:1 sobre #2C2C2C — desligado legível */
  /* CAMPO CLARO (Emerson 26/10: no celular, rótulo cinza e dado branco no preto "se misturavam").
     O rótulo fica no preto e o dado vai numa caixa clara com texto escuro. Desligado continua escuro. */
  --lcc-campo-bg:#F5F5F5;
  --lcc-campo-bg-foco:#FFFFFF;     /* sua vez */
  --lcc-campo-texto:#111111;       /* 17,3:1 sobre #F5F5F5 */
  --lcc-campo-ph:#6B6B6B;          /* placeholder: 4,9:1 sobre #F5F5F5 */
  --lcc-campo-trav-bg:#D9D9D9;     /* travado (veio do CPF, só conferir) */
  --lcc-campo-trav-icone:#555555;  /* cadeado: 5,3:1 sobre #D9D9D9 */
  --lcc-campo-ok-icone:#15803D;    /* check verde escuro: 4,6:1 sobre #F5F5F5 (o #22C55E fica na borda, contra o preto) */
  --lcc-campo-erro-bg:#FFF0F1;
  --lcc-campo-erro-icone:#C8102E;  /* 5,3:1 sobre #FFF0F1 */
  --lcc-campo-load-bg:#FFF6D6;
  /* marca */
  --lcc-red:#E60023;         /* SÓ preenchimento: botão, régua, ícone, borda */
  --lcc-red-dark:#BF001D;    /* hover/pressionado */
  --lcc-red-text:#FF4D5E;    /* vermelho quando é TEXTO (5,7:1) */
  --lcc-red-tint:rgba(230,0,35,.12);
  --lcc-red-glow:rgba(230,0,35,.18);
  --lcc-amber:#FFC400;       /* SÓ validade/aviso/consultando */
  --lcc-amber-tint:rgba(255,196,0,.08);
  --lcc-amber-line:rgba(255,196,0,.5);
  --lcc-green:#22C55E;       /* sucesso; texto sobre verde cheio = #111 */
  --lcc-green-tint:rgba(34,197,94,.12);
  --lcc-green-line:rgba(34,197,94,.4);
  --lcc-on-red:#FFFFFF;
  --lcc-on-light:#111111;
  /* tipografia */
  --lcc-f-display:"LCC Montserrat","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lcc-f-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lcc-ph-tam:.8em;         /* placeholder (relativo ao campo) */
  /* forma e espaço */
  --lcc-r-card:16px;--lcc-r-ctl:12px;--lcc-r-tile:10px;--lcc-r-pill:999px;
  --lcc-gutter:16px;--lcc-gap:12px;--lcc-max:480px;
  --lcc-toque:54px;          /* altura mínima de botão e campo */
  --lcc-logo-alt:36px;       /* altura do logo no topo (a do voucher, escolhida pelo dono) */
  /* movimento */
  --lcc-ease:cubic-bezier(.2,.7,.3,1);--lcc-dur:.18s;
  /* ícones Tabler como máscara (preto = opaco). Uso: mask:var(--lcc-svg-X) */
  --lcc-svg-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12'/%3E%3Cpath d='M16 3l0 4'/%3E%3Cpath d='M8 3l0 4'/%3E%3Cpath d='M4 11l16 0'/%3E%3Cpath d='M8 15h2v2h-2l0 -2'/%3E%3C/svg%3E");
  --lcc-svg-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  --lcc-svg-hourglass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 7h11'/%3E%3Cpath d='M6.5 17h11'/%3E%3Cpath d='M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1'/%3E%3Cpath d='M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1'/%3E%3C/svg%3E");
  --lcc-svg-woman:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 16v5'/%3E%3Cpath d='M14 16v5'/%3E%3Cpath d='M8 16h8l-2 -7h-4z'/%3E%3Cpath d='M5 11c1.667 -1.333 3.333 -2 5 -2'/%3E%3Cpath d='M19 11c-1.667 -1.333 -3.333 -2 -5 -2'/%3E%3Cpath d='M10 4a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3C/svg%3E");
  --lcc-svg-man:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 16v5'/%3E%3Cpath d='M14 16v5'/%3E%3Cpath d='M9 9h6l-1 7h-4z'/%3E%3Cpath d='M5 11c1.333 -1.333 2.667 -2 4 -2'/%3E%3Cpath d='M19 11c-1.333 -1.333 -2.667 -2 -4 -2'/%3E%3Cpath d='M10 4a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3C/svg%3E");
  --lcc-svg-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
  --lcc-svg-pulseira:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8.5' width='19' height='7' rx='3.5'/%3E%3Crect x='10' y='10.5' width='4' height='3' rx='0.5'/%3E%3C/svg%3E");
  --lcc-svg-ticket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l0 2'/%3E%3Cpath d='M15 11l0 2'/%3E%3Cpath d='M15 17l0 2'/%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
  --lcc-svg-ticket-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5v2'/%3E%3Cpath d='M15 17v2'/%3E%3Cpath d='M9 5h10a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3m-2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
  --lcc-svg-crown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6l4 6l5 -4l-2 10h-14l-2 -10l5 4l4 -6'/%3E%3C/svg%3E");
  --lcc-svg-gift:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1l0 -2'/%3E%3Cpath d='M12 8l0 13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  --lcc-svg-sparkles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6'/%3E%3C/svg%3E");
  --lcc-svg-cake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18v-8a3 3 0 0 0 -3 -3h-12a3 3 0 0 0 -3 3v8'/%3E%3Cpath d='M3 14.803c.312 .135 .654 .204 1 .197a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1c.35 .007 .692 -.062 1 -.197'/%3E%3Cpath d='M12 4l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737'/%3E%3C/svg%3E");
  --lcc-svg-id:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -10'/%3E%3Cpath d='M7 10a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M15 8l2 0'/%3E%3Cpath d='M15 12l2 0'/%3E%3Cpath d='M7 16l10 0'/%3E%3C/svg%3E");
  --lcc-svg-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
  --lcc-svg-device-mobile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z'/%3E%3Cpath d='M11 4h2'/%3E%3Cpath d='M12 17v.01'/%3E%3C/svg%3E");
  --lcc-svg-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0'/%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E");
  --lcc-svg-shield-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/%3E%3C/svg%3E");
  --lcc-svg-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
  --lcc-svg-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
  --lcc-svg-qrcode:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M7 17l0 .01'/%3E%3Cpath d='M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M7 7l0 .01'/%3E%3Cpath d='M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M17 7l0 .01'/%3E%3Cpath d='M14 14l3 0'/%3E%3Cpath d='M20 14l0 .01'/%3E%3Cpath d='M14 14l0 3'/%3E%3Cpath d='M14 20l3 0'/%3E%3Cpath d='M17 17l3 0'/%3E%3Cpath d='M20 17l0 3'/%3E%3C/svg%3E");
  --lcc-svg-link-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15l3 -3m2 -2l1 -1'/%3E%3Cpath d='M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464'/%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463'/%3E%3C/svg%3E");
  --lcc-svg-alert-triangle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --lcc-svg-alert-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --lcc-svg-info-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
  --lcc-svg-circle-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E");
  --lcc-svg-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
  --lcc-svg-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
  --lcc-svg-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12'/%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E");
  --lcc-svg-loader:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E");
  --lcc-svg-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E");
  --lcc-svg-chevron-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6'/%3E%3C/svg%3E");
  --lcc-svg-credit-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8'/%3E%3Cpath d='M3 10l18 0'/%3E%3Cpath d='M7 15l.01 0'/%3E%3Cpath d='M11 15l2 0'/%3E%3C/svg%3E");
  --lcc-svg-pix:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l4 4-4 4-4-4 4-4z' fill='%23000' stroke='none'/%3E%3Cpath d='M2 12l4-4 4 4-4 4-4-4z' fill='%23000' stroke='none'/%3E%3Cpath d='M12 14l4 4-4 4-4-4 4-4z' fill='%23000' stroke='none'/%3E%3Cpath d='M14 12l4-4 4 4-4 4-4-4z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

@keyframes lccFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes lccGira{to{transform:rotate(360deg)}}
@keyframes lccSobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- BASE */
html:has(> body.lcc-noite){background:#000;color-scheme:dark}
body.lcc-noite{
  color-scheme:dark;
  margin:0;padding:0;display:block;min-height:100vh;
  background:#000 radial-gradient(140% 360px at 50% 0,rgba(230,0,35,.16),rgba(230,0,35,0) 72%) no-repeat;
  color:var(--lcc-text);font-family:var(--lcc-f-text);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
.lcc-noite *,.lcc-noite *::before,.lcc-noite *::after{box-sizing:border-box}
/* foco do teclado: anel BRANCO (aparece até sobre o botão vermelho) */
body.lcc-noite :is(a,button,summary,label,[tabindex]):focus-visible{outline:2px solid #fff;outline-offset:3px}
body.lcc-noite :is(input,select,textarea):focus-visible{outline:2px solid #fff;outline-offset:2px}
.lcc-noite .lcc-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lcc-noite .lcc-num{font-variant-numeric:tabular-nums}
.lcc-noite .lcc-nowrap{white-space:nowrap}
/* passo do formulário: escondido até o JS mostrar (comportamento, não visual) */
.lcc-noite .form-step{display:none;text-align:left;animation:lccFade .2s var(--lcc-ease)}

/* ---------------------------------------------------------------- ÍCONES
   1) <svg class="lcc-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">…</svg>   (HTML estático)
   2) <span class="lcc-mic lcc-i-woman" aria-hidden="true"></span>                (máscara, sem colar path)
   3) class="lcc-ic-antes lcc-i-trash" no próprio elemento: o ícone vai no ::before e
      SOBREVIVE quando o JS reescreve o texto (ex.: o Cancelar do voucher).
   Cor = currentColor. Tamanho = --lcc-ic-tam (padrão 20px). */
.lcc-noite svg.lcc-ic{display:inline-block;flex:0 0 auto;width:var(--lcc-ic-tam,20px);height:var(--lcc-ic-tam,20px);vertical-align:middle}
.lcc-noite .lcc-mic,
.lcc-noite .lcc-ic-antes::before{
  display:inline-block;flex:0 0 auto;width:var(--lcc-ic-tam,20px);height:var(--lcc-ic-tam,20px);vertical-align:middle;
  background:currentColor;-webkit-mask:var(--lcc-ic) center/contain no-repeat;mask:var(--lcc-ic) center/contain no-repeat;
}
.lcc-noite .lcc-ic-antes::before{content:"";position:static;transform:none;border-radius:0;opacity:1;margin:0}
.lcc-noite .lcc-i-calendar{--lcc-ic:var(--lcc-svg-calendar)}
.lcc-noite .lcc-i-clock{--lcc-ic:var(--lcc-svg-clock)}
.lcc-noite .lcc-i-hourglass{--lcc-ic:var(--lcc-svg-hourglass)}
.lcc-noite .lcc-i-woman{--lcc-ic:var(--lcc-svg-woman)}
.lcc-noite .lcc-i-man{--lcc-ic:var(--lcc-svg-man)}
.lcc-noite .lcc-i-user{--lcc-ic:var(--lcc-svg-user)}
.lcc-noite .lcc-i-pulseira{--lcc-ic:var(--lcc-svg-pulseira)}
.lcc-noite .lcc-i-ticket{--lcc-ic:var(--lcc-svg-ticket)}
.lcc-noite .lcc-i-ticket-off{--lcc-ic:var(--lcc-svg-ticket-off)}
.lcc-noite .lcc-i-crown{--lcc-ic:var(--lcc-svg-crown)}
.lcc-noite .lcc-i-gift{--lcc-ic:var(--lcc-svg-gift)}
.lcc-noite .lcc-i-sparkles{--lcc-ic:var(--lcc-svg-sparkles)}
.lcc-noite .lcc-i-cake{--lcc-ic:var(--lcc-svg-cake)}
.lcc-noite .lcc-i-id{--lcc-ic:var(--lcc-svg-id)}
.lcc-noite .lcc-i-phone{--lcc-ic:var(--lcc-svg-phone)}
.lcc-noite .lcc-i-device-mobile{--lcc-ic:var(--lcc-svg-device-mobile)}
.lcc-noite .lcc-i-lock{--lcc-ic:var(--lcc-svg-lock)}
.lcc-noite .lcc-i-shield-check{--lcc-ic:var(--lcc-svg-shield-check)}
.lcc-noite .lcc-i-pencil{--lcc-ic:var(--lcc-svg-pencil)}
.lcc-noite .lcc-i-search{--lcc-ic:var(--lcc-svg-search)}
.lcc-noite .lcc-i-qrcode{--lcc-ic:var(--lcc-svg-qrcode)}
.lcc-noite .lcc-i-link-off{--lcc-ic:var(--lcc-svg-link-off)}
.lcc-noite .lcc-i-alert-triangle{--lcc-ic:var(--lcc-svg-alert-triangle)}
.lcc-noite .lcc-i-alert-circle{--lcc-ic:var(--lcc-svg-alert-circle)}
.lcc-noite .lcc-i-info-circle{--lcc-ic:var(--lcc-svg-info-circle)}
.lcc-noite .lcc-i-circle-check{--lcc-ic:var(--lcc-svg-circle-check)}
.lcc-noite .lcc-i-check{--lcc-ic:var(--lcc-svg-check)}
.lcc-noite .lcc-i-x{--lcc-ic:var(--lcc-svg-x)}
.lcc-noite .lcc-i-trash{--lcc-ic:var(--lcc-svg-trash)}
.lcc-noite .lcc-i-loader{--lcc-ic:var(--lcc-svg-loader)}
.lcc-noite .lcc-i-arrow-right{--lcc-ic:var(--lcc-svg-arrow-right)}
.lcc-noite .lcc-i-chevron-left{--lcc-ic:var(--lcc-svg-chevron-left)}
.lcc-noite .lcc-i-credit-card{--lcc-ic:var(--lcc-svg-credit-card)}
.lcc-noite .lcc-i-pix{--lcc-ic:var(--lcc-svg-pix)}

/* ---------------------------------------------------------------- ESTRUTURA */
/* Topo com o logo: barra #000 colada em cima, sangra até a borda sem criar rolagem.
   logo.png/logo2.png têm caixa preta: só sobre #000 exato. Branco transparente: img/lcc-logo-branco.png */
.lcc-noite .lcc-topo{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:center;min-height:60px;margin:0;padding:12px var(--lcc-gutter);
  background:#000;border-image:conic-gradient(#000 0 0) fill 0//0 100vmax;animation:none;
}
.lcc-noite .lcc-topo img{display:block;width:auto;height:var(--lcc-logo-alt);max-width:none;margin:0;border-radius:0;filter:none;transform:none;transition:none}
/* Coluna da página: 1 nível, 16px de lado (o antigo somava ~62px por lado) */
.lcc-noite .lcc-pagina{
  width:auto;max-width:var(--lcc-max);margin:0 auto;padding:0 var(--lcc-gutter) 40px;
  background:transparent;border:0;border-radius:0;box-shadow:none;text-align:left;animation:none;
}
/* Título da tela (sem degradê no texto) */
.lcc-noite h1,.lcc-noite .lcc-titulo{
  margin:22px 0 0;font:800 1.25rem/1.2 var(--lcc-f-display);letter-spacing:-.005em;color:var(--lcc-text);text-align:left;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  text-wrap:balance;
}
/* Rótulo em CAIXA-ALTA espaçada (assinatura dos flyers) + régua vermelha 24x3 */
.lcc-noite .lcc-eyebrow{display:block;margin:0;font:800 .75rem/1.25 var(--lcc-f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--lcc-text-2)}
.lcc-noite .lcc-regua::after{content:"";display:block;width:24px;height:3px;margin-top:8px;border-radius:2px;background:var(--lcc-red)}
.lcc-noite .lcc-regua-centro::after{margin-left:auto;margin-right:auto}
/* Indicador de passo: <div class="lcc-passos"><i class="on"></i><i></i><b>Passo 1 de 2</b></div> */
.lcc-noite .lcc-passos{display:flex;align-items:center;gap:6px;margin:12px 0 16px}
.lcc-noite .lcc-passos i{flex:1 1 0;height:4px;border-radius:2px;background:var(--lcc-line)}
.lcc-noite .lcc-passos i.on{background:var(--lcc-red)}
.lcc-noite .lcc-passos b{margin-left:6px;font:800 .75rem/1 var(--lcc-f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--lcc-text-2);white-space:nowrap}
/* Cartão (superfície única; sombra não aparece no preto: separa por cor + borda 1px) */
.lcc-noite .lcc-cartao{
  position:relative;isolation:isolate;padding:16px;border-radius:var(--lcc-r-card);
  background:var(--lcc-surface);border:1px solid var(--lcc-card-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* Lista dentro do cartão: linhas com divisória, nunca caixa dentro de caixa */
.lcc-noite .lcc-linha{padding:14px 0;border-top:1px solid var(--lcc-line-soft)}
.lcc-noite .lcc-linha:first-child{border-top:0}
/* Chip (ex.: "Cadastro via Totem") */
.lcc-noite .lcc-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 12px 6px 10px;
  border:1px solid var(--lcc-line);border-radius:var(--lcc-r-pill);background:transparent;
  font:800 .75rem/1.2 var(--lcc-f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--lcc-text-2);
  --lcc-ic-tam:16px;
}
.lcc-noite .lcc-chip :is(svg,.lcc-mic){color:var(--lcc-red)}
/* Link */
.lcc-noite .lcc-link{
  color:var(--lcc-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lcc-field);
  cursor:pointer;transition:text-decoration-color var(--lcc-dur) var(--lcc-ease);
}
.lcc-noite .lcc-link:hover{text-decoration-color:var(--lcc-red)}
/* Monograma LV. (a) pequeno e nítido, p/ canto de cabeçalho: <span class="lcc-monograma" aria-hidden="true"></span>
   (b) marca-d'água: .lcc-marca no contêiner; fica no canto de baixo à direita, ATRÁS e FORA do texto.
   Ajuste por variável: --lcc-marca-x / --lcc-marca-y (deslocamento), --lcc-marca-tam, --lcc-marca-op. */
.lcc-noite .lcc-monograma{
  display:inline-block;flex:0 0 auto;width:var(--lcc-mono-tam,26px);height:calc(var(--lcc-mono-tam,26px) * 1.03);
  background:url("img/lcc-monograma-branco.png") center/contain no-repeat;opacity:.85;
}
.lcc-noite .lcc-marca{position:relative;isolation:isolate;overflow:hidden}
.lcc-noite .lcc-marca::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:var(--lcc-marca-x,-30px);bottom:var(--lcc-marca-y,-34px);
  width:var(--lcc-marca-tam,140px);height:calc(var(--lcc-marca-tam,140px) * 1.03);
  background:url("img/lcc-monograma-branco.png") center/contain no-repeat;opacity:var(--lcc-marca-op,.05);
}

/* ---------------------------------------------------------------- BOTÕES
   .lcc-btn                principal: vermelho cheio, largura total, 54px (Avançar, Cadastrar, Consultar, Pagar)
   .lcc-btn-sec            secundário: contorno branco
   .lcc-btn-fantasma       terciário: só texto (Cancelar de modal)
   .lcc-btn-perigo         destrutivo: contorno vermelho (Cancelar Reserva) — nunca vermelho cheio
   .lcc-btn-longo          rótulo comprido: sem caixa-alta (cabe em 1 linha a 360px com fonte x1,3)
   .lcc-btn-auto           largura do conteúdo
   :disabled               cinza #2C2C2C, texto #B8B8B8 (7:1), sem efeito do mouse, cursor not-allowed */
.lcc-noite .lcc-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:var(--lcc-toque);margin:20px 0 0;padding:12px 16px;
  border:0;border-radius:var(--lcc-r-ctl);background:var(--lcc-red);color:var(--lcc-on-red);
  box-shadow:none;overflow:visible;text-align:center;text-decoration:none;
  font:800 1rem/1.2 var(--lcc-f-display);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;-webkit-appearance:none;appearance:none;--lcc-ic-tam:20px;
  transition:background-color var(--lcc-dur) var(--lcc-ease),border-color var(--lcc-dur) var(--lcc-ease),
             color var(--lcc-dur) var(--lcc-ease),box-shadow var(--lcc-dur) var(--lcc-ease),transform var(--lcc-dur) var(--lcc-ease);
}
.lcc-noite .lcc-btn:not(.lcc-ic-antes)::before{content:none}   /* mata o "ripple" antigo */
.lcc-noite .lcc-btn > svg{flex:0 0 auto;width:var(--lcc-ic-tam);height:var(--lcc-ic-tam)}
.lcc-noite .lcc-btn:hover:not(:disabled){background:var(--lcc-red-dark);transform:translateY(-1px);box-shadow:0 0 0 4px var(--lcc-red-glow)}
.lcc-noite .lcc-btn:active:not(:disabled){transform:none}
.lcc-noite .lcc-btn-sec{background:transparent;color:var(--lcc-text);border:1.5px solid var(--lcc-text)}
.lcc-noite .lcc-btn-sec:hover:not(:disabled){background:rgba(255,255,255,.08);box-shadow:none}
.lcc-noite .lcc-btn-fantasma{background:transparent;color:var(--lcc-text-2);border:0}
.lcc-noite .lcc-btn-fantasma:hover:not(:disabled){background:transparent;color:var(--lcc-text);box-shadow:none;transform:none}
.lcc-noite .lcc-btn-perigo{background:transparent;color:var(--lcc-red-text);border:1.5px solid var(--lcc-red-text)}
.lcc-noite .lcc-btn-perigo:hover:not(:disabled){background:var(--lcc-red-tint);box-shadow:none}
.lcc-noite .lcc-btn-longo{letter-spacing:.01em;text-transform:none}
.lcc-noite .lcc-btn-auto{display:inline-flex;width:auto}
.lcc-noite .lcc-btn:disabled,.lcc-noite .lcc-btn[aria-disabled="true"]{
  background:var(--lcc-disabled-bg);color:var(--lcc-disabled-text);border-color:transparent;
  box-shadow:none;transform:none;cursor:not-allowed;opacity:1;
}

/* "Alterar" (campo mascarado): botãozinho de contorno, alvo de 40px. Mesmo visual em .lcc-btn-mini */
.lcc-noite :is(button.btn-alterar,.lcc-btn-mini){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;
  width:auto;min-height:40px;margin:0;padding:6px 12px;
  border:1.5px solid var(--lcc-field);border-radius:var(--lcc-r-pill);background:transparent;color:var(--lcc-text);
  font:600 .875rem/1.2 var(--lcc-f-text);letter-spacing:0;text-transform:none;white-space:nowrap;
  box-shadow:none;transform:none;cursor:pointer;
  transition:border-color var(--lcc-dur) var(--lcc-ease),background-color var(--lcc-dur) var(--lcc-ease);
}
.lcc-noite :is(button.btn-alterar,.lcc-btn-mini)::before{content:none}
.lcc-noite :is(button.btn-alterar,.lcc-btn-mini):hover{border-color:var(--lcc-text);background:rgba(255,255,255,.06);transform:none;box-shadow:none}
.lcc-noite :is(button.btn-alterar,.lcc-btn-mini) svg{width:16px;height:16px;flex:0 0 auto}
.lcc-noite button.btn-alterar[hidden],.lcc-noite .lcc-btn-mini[hidden]{display:none !important}

/* "Consultar outro CPF" BLOQUEADO (consulta.php): desligado e legível, rótulo + bolinha num grupo
   centrado (a bolinha tem largura fixa: nada treme). Quando o JS tira a .btn-espera, vale o .lcc-btn. */
.lcc-noite button.btn-espera,.lcc-noite button.btn-espera:disabled{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:var(--lcc-toque);padding:8px 12px 8px 16px;
  border:1.5px solid var(--lcc-line);border-radius:var(--lcc-r-ctl);background:var(--lcc-surface-2);color:var(--lcc-text-2);
  font:800 .9375rem/1.2 var(--lcc-f-display);letter-spacing:.01em;text-transform:none;
  opacity:1;box-shadow:none;transform:none;cursor:not-allowed;
}
.lcc-noite button.btn-espera::before{content:none}
.lcc-noite button.btn-espera .bolinha-seg{position:static;transform:none}

/* ---------------------------------------------------------------- CAMPOS
   Rótulo: todo <label for="…"> já sai como rótulo (ou class="lcc-rotulo" em outro elemento);
   .rotulo-linha = rótulo + "Alterar" na mesma linha. O <label> que embrulha um rádio (sem for) não muda.
   Campo: qualquer input text/tel/… dentro de .lcc-noite (ou .lcc-campo). O fundo tem !important
   porque o JS escreve fundo claro no style (#f5f5f5, #fff3e0). */
.lcc-noite :is(.lcc-rotulo,label[for]){
  display:block;margin:18px 0 8px;font:800 .75rem/1.25 var(--lcc-f-display);letter-spacing:.1em;
  text-transform:uppercase;color:var(--lcc-text-2);text-align:left;
}
.lcc-noite .rotulo-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 8px}
.lcc-noite .rotulo-linha > :is(label,.lcc-rotulo){margin:0;min-width:0}

.lcc-noite :is(input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],input[type="password"],.lcc-campo){
  display:block;width:100%;max-width:100%;min-height:var(--lcc-toque);margin:0;padding:13px 14px;
  border:2px solid var(--lcc-campo-bg);border-radius:var(--lcc-r-ctl);
  background-color:var(--lcc-campo-bg) !important;background-image:none;
  color:var(--lcc-campo-texto);-webkit-text-fill-color:currentColor;caret-color:var(--lcc-red);
  font:600 1.0625rem/1.3 var(--lcc-f-text);font-variant-numeric:tabular-nums;letter-spacing:.01em;
  box-shadow:none;transform:none;opacity:1;-webkit-appearance:none;appearance:none;
  color-scheme:light; /* o fundo do preenchimento automático do navegador segue o color-scheme: claro, sob o texto escuro */
  transition:border-color var(--lcc-dur) var(--lcc-ease),box-shadow var(--lcc-dur) var(--lcc-ease),background-color var(--lcc-dur) var(--lcc-ease);
}
.lcc-noite :is(input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],input[type="password"],.lcc-campo)::placeholder{
  color:var(--lcc-campo-ph);opacity:1;font-style:normal;font-weight:400;font-size:var(--lcc-ph-tam);
}
.lcc-noite :is(input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],input[type="password"],.lcc-campo):not([readonly]):not(:disabled):hover{border-color:var(--lcc-field-hover)}
.lcc-noite input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--lcc-campo-bg) inset;-webkit-text-fill-color:var(--lcc-campo-texto);caret-color:var(--lcc-red)}

/* ESTADOS QUE O JS LIGA — manter nomes, !important e ESTA ORDEM (o último ganha) */
/* travado = veio da base/API, só conferir: caixa cinza-clara, texto escuro, cadeado */
.lcc-noite :is(input.readonly-dark,.lcc-campo-travado){
  background-color:var(--lcc-campo-trav-bg) !important;border-color:var(--lcc-campo-trav-bg) !important;
  color:var(--lcc-campo-texto) !important;-webkit-text-fill-color:var(--lcc-campo-texto);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0'/%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px;
  padding-right:46px;cursor:default;box-shadow:none;
}
/* travado e ainda vazio (esperando o CPF): tracejado = "vai ser preenchido". Precisa de placeholder
   no input (placeholder=" " serve) — sem ele o :placeholder-shown não acende */
.lcc-noite :is(input.readonly-dark,.lcc-campo-travado):placeholder-shown{background-color:transparent !important;border-style:dashed;border-color:var(--lcc-field) !important;color-scheme:dark}
/* ...e o exemplo dele fica no cinza do PRETO (o cinza do campo claro some no fundo transparente) */
.lcc-noite :is(input.readonly-dark,.lcc-campo-travado):placeholder-shown::placeholder{color:var(--lcc-text-3);-webkit-text-fill-color:var(--lcc-text-3)}
/* sua vez (vazio esperando): caixa BRANCA com halo branco em volta, não vermelho — vermelho é só erro */
.lcc-noite input.attention{background-color:var(--lcc-campo-bg-foco) !important;border-color:var(--lcc-text) !important;box-shadow:0 0 0 4px rgba(255,255,255,.45)}
/* válido: verde + check */
.lcc-noite input.campo-ok{
  background-color:var(--lcc-campo-bg) !important;border-color:var(--lcc-green) !important;box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px;padding-right:46px;
}
/* inválido depois que a pessoa saiu do campo: vermelho + alerta */
.lcc-noite input.campo-erro{
  background-color:var(--lcc-campo-erro-bg) !important;border-color:var(--lcc-red-text) !important;box-shadow:0 0 0 4px rgba(230,0,35,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px;padding-right:46px;
}
/* consultando o CPF */
.lcc-noite input.loading-state{background-color:var(--lcc-campo-load-bg) !important;border-color:var(--lcc-amber) !important;background-image:none;box-shadow:none}
/* desligado (bloqueio do contador): continua ESCURO — perto dos campos claros, escuro = desligado.
   (As opções de Sexo, .lcc-opcao, são cartões de ESCOLHA, não campo de digitar: ficam escuras de propósito.) */
.lcc-noite :is(input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],input[type="password"],.lcc-campo):disabled{
  background-color:var(--lcc-surface-0) !important;border-color:var(--lcc-line) !important;border-style:solid;
  color:var(--lcc-text-3);-webkit-text-fill-color:var(--lcc-text-3);background-image:none;box-shadow:none;cursor:not-allowed;opacity:1;font-weight:400;color-scheme:dark;
}
.lcc-noite :is(input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],input[type="password"],.lcc-campo):disabled::placeholder{color:var(--lcc-text-3);-webkit-text-fill-color:var(--lcc-text-3)}
/* CPF bloqueado pelo contador: campo desligado + bolinha dos segundos à direita (cadastro.php) */
.lcc-noite .cpf-campo{position:relative;margin:0}
.lcc-noite .cpf-campo.travado input{padding-right:calc(2.625rem + 22px);cursor:not-allowed}
.lcc-noite .cpf-campo .bolinha-seg{position:absolute;right:8px;top:50%;transform:translateY(-50%)}

/* BOLINHA DO BLOQUEIO (30:00, 29:59…): contorno + números de largura fixa. Tamanho em em: cresce
   junto com a fonte x1,3 sem cortar o "29:59". O JS só escreve o texto e liga/desliga o hidden. */
.lcc-noite .bolinha-seg{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:3.5em;height:3.5em;border-radius:50%;
  border:2px solid rgba(245,245,245,.8);background:transparent;color:var(--lcc-text);
  font:700 .75rem/1 var(--lcc-f-text);letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";pointer-events:none;
}
.lcc-noite .bolinha-seg[hidden]{display:none !important}

/* Escolha (sexo): <div class="lcc-opcoes"><label class="lcc-opcao"><input type="radio" …>Mulher</label>…</div>
   O rádio é uma bolinha visível (aparece marcado mesmo sem :has()). Ícone opcional — rádio + ícone +
   "Mulher" em meia largura NÃO cabe a 360px com fonte x1,3 (medido); sem ícone sobra folga. */
.lcc-noite .lcc-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lcc-noite .lcc-opcao{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin:0;padding:10px 12px;
  border:2px solid var(--lcc-field);border-radius:var(--lcc-r-ctl);background:var(--lcc-surface-2);color:var(--lcc-text);
  font:800 1rem/1.2 var(--lcc-f-display);letter-spacing:.02em;text-transform:none;cursor:pointer;--lcc-ic-tam:22px;
  transition:border-color var(--lcc-dur) var(--lcc-ease),background-color var(--lcc-dur) var(--lcc-ease);
}
.lcc-noite .lcc-opcao:hover{border-color:var(--lcc-field-hover)}
.lcc-noite .lcc-opcao :is(svg,.lcc-mic){color:var(--lcc-red)}
.lcc-noite input[type="radio"]{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;width:22px;height:22px;margin:0;
  border:2px solid var(--lcc-text-3);border-radius:50%;background:transparent;cursor:pointer;
  transition:border-color var(--lcc-dur) var(--lcc-ease);
}
.lcc-noite input[type="radio"]:checked{border-color:var(--lcc-red);background:radial-gradient(circle closest-side,var(--lcc-red) 0 52%,transparent 58%)}
.lcc-noite .lcc-opcao:has(input:checked){border-color:var(--lcc-red);background:rgba(230,0,35,.12)}

/* ---------------------------------------------------------------- FAIXAS
   .lcc-faixa + .lcc-faixa-erro | -aviso (âmbar: validade) | -ok | -info. O ícone vem sozinho (::before).
   Mapeia também as classes que o SERVIDOR e o JS já emitem — o texto não muda, só a roupa:
   .error-message / .error-list (erro), .success-message e .feedback-message.success (ok),
   .feedback-message.error (erro). Nenhuma regra mexe em display (o JS liga/desliga #cpfFeedback, #msgTrava). */
/* (duas regras iguais de propósito: num :is() só, o peso de .feedback-message.success (2 classes)
   passaria para .lcc-faixa e a variante .lcc-faixa-aviso perderia) */
.lcc-noite :is(.lcc-faixa,.error-message,.error-list,.success-message){
  position:relative;margin:16px 0 0;padding:12px 14px 12px 44px;border:0;border-radius:var(--lcc-r-ctl);
  background:var(--lcc-surface-2);color:var(--lcc-text);box-shadow:none;animation:none;
  font:500 .9375rem/1.45 var(--lcc-f-text);text-align:left;
}
.lcc-noite :is(.feedback-message.success,.feedback-message.error){
  position:relative;margin:16px 0 0;padding:12px 14px 12px 44px;border:0;border-radius:var(--lcc-r-ctl);
  background:var(--lcc-surface-2);color:var(--lcc-text);box-shadow:none;animation:none;
  font:500 .9375rem/1.45 var(--lcc-f-text);text-align:left;
}
.lcc-noite :is(.lcc-faixa,.error-message,.error-list,.success-message,.feedback-message.success,.feedback-message.error)::before{
  content:"";display:block;position:absolute;left:14px;top:calc(12px + (1.45em - 20px) / 2);width:20px;height:20px;
  border-radius:0;transform:none;opacity:1;
  background:var(--lcc-faixa-cor,var(--lcc-text-2));
  -webkit-mask:var(--lcc-faixa-ic,var(--lcc-svg-info-circle)) center/contain no-repeat;mask:var(--lcc-faixa-ic,var(--lcc-svg-info-circle)) center/contain no-repeat;
}
.lcc-noite :is(.lcc-faixa-erro,.error-message,.error-list,.feedback-message.error){
  background:var(--lcc-red-tint);border-left:3px solid var(--lcc-red);
  --lcc-faixa-cor:var(--lcc-red-text);--lcc-faixa-ic:var(--lcc-svg-alert-circle);
}
.lcc-noite .lcc-faixa-aviso{
  background:var(--lcc-amber-tint);border:1px solid var(--lcc-amber-line);color:var(--lcc-amber);font-weight:600;
  --lcc-faixa-cor:var(--lcc-amber);--lcc-faixa-ic:var(--lcc-svg-alert-triangle);
}
.lcc-noite :is(.lcc-faixa-ok,.success-message,.feedback-message.success){
  background:var(--lcc-green-tint);border-left:3px solid var(--lcc-green);
  --lcc-faixa-cor:var(--lcc-green);--lcc-faixa-ic:var(--lcc-svg-circle-check);
}
.lcc-noite .lcc-faixa-info{background:var(--lcc-surface-2);border-left:3px solid var(--lcc-text-3);--lcc-faixa-cor:var(--lcc-text-2);--lcc-faixa-ic:var(--lcc-svg-info-circle)}
.lcc-noite .error-list h4{margin:0 0 6px;font:700 .9375rem/1.3 var(--lcc-f-text);color:var(--lcc-red-text)}
.lcc-noite .error-list ul{margin:0;padding-left:18px}
.lcc-noite .error-list li{margin:2px 0 0;color:var(--lcc-text);font-size:inherit}
.lcc-noite .error-list li::marker{color:var(--lcc-red-text)}

/* Faixa de CONTEXTO ("Confira seus dados / Vieram do seu CPF", escudo verde). HTML estático:
   <div class="lcc-contexto"><div><b class="lcc-contexto-titulo">Confira seus dados</b>
   <span class="lcc-contexto-texto">Vieram do seu CPF</span></div></div>
   Quem decide quando aparece é a página (:has() no estado que o JS já monta). -neutro = lápis cinza
   ("Preencha seus dados / Como estão no documento"). */
.lcc-noite .lcc-contexto{
  display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;border-radius:var(--lcc-r-ctl);
  background:rgba(34,197,94,.08);border:1px solid var(--lcc-green-line);text-align:left;
}
.lcc-noite .lcc-contexto::before{
  content:"";flex:0 0 26px;width:26px;height:26px;background:var(--lcc-contexto-cor,var(--lcc-green));
  -webkit-mask:var(--lcc-contexto-ic,var(--lcc-svg-shield-check)) center/contain no-repeat;mask:var(--lcc-contexto-ic,var(--lcc-svg-shield-check)) center/contain no-repeat;
}
.lcc-noite .lcc-contexto-titulo{display:block;font:800 .9375rem/1.25 var(--lcc-f-display);color:var(--lcc-text)}
.lcc-noite .lcc-contexto-texto{display:block;margin-top:2px;font:400 .875rem/1.35 var(--lcc-f-text);color:var(--lcc-text-2)}
.lcc-noite .lcc-contexto-neutro{background:var(--lcc-surface);border-color:var(--lcc-line);--lcc-contexto-cor:var(--lcc-text-2);--lcc-contexto-ic:var(--lcc-svg-pencil)}

/* ---------------------------------------------------------------- CARTÃO DE ESTADO
   Tela inteira de um estado (link inválido, esgotado, lista vencida, cancelada…): cartão central
   com ÍCONE EM CÍRCULO (desenhado no ::before: círculo tingido + halo + ícone, tudo na cor do estado).
   <div class="lcc-estado lcc-estado-erro"><h2 class="lcc-estado-titulo">…</h2><p>…</p></div>
   Variantes: -erro (link-off, vermelho) | -aviso (ticket-off, âmbar) | -ok (circle-check, verde) | -info.
   Trocar o ícone: --lcc-estado-ic:var(--lcc-svg-X); a cor: --lcc-estado-cor.
   Automáticos (HTML do servidor, sem mudar o texto):
   - .feedback-message.exhausted (esgotado / lista vencida) = estado -aviso, sempre;
   - .lcc-pagina sem .form-step > .error-message (link sem serial, serial inválido, erro sem passo) = estado -erro
     (precisa de :has(); sem ele continua como faixa de erro). */
.lcc-noite :is(.lcc-estado,.feedback-message.exhausted){
  position:relative;isolation:isolate;display:block;margin:28px 0 0;padding:28px 16px 24px;
  border:1px solid var(--lcc-card-line);border-radius:var(--lcc-r-card);background:var(--lcc-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);color:var(--lcc-text);text-align:center;
  font:400 1rem/1.5 var(--lcc-f-text);animation:lccFade .2s var(--lcc-ease);
}
.lcc-noite :is(.lcc-estado,.feedback-message.exhausted)::before{
  content:"";display:block;position:static;width:72px;height:72px;margin:0 auto 16px;border-radius:0;transform:none;opacity:1;
  background:var(--lcc-estado-cor,var(--lcc-text-2));
  -webkit-mask:var(--lcc-estado-ic,var(--lcc-svg-info-circle)) center/32px 32px no-repeat,
               radial-gradient(closest-side,rgba(0,0,0,.16) 0 77%,rgba(0,0,0,.06) 78% 99%,transparent 100%);
  mask:var(--lcc-estado-ic,var(--lcc-svg-info-circle)) center/32px 32px no-repeat,
       radial-gradient(closest-side,rgba(0,0,0,.16) 0 77%,rgba(0,0,0,.06) 78% 99%,transparent 100%);
}
.lcc-noite :is(.lcc-estado-titulo,.lcc-estado :is(h1,h2,h3),.feedback-message.exhausted h3){
  margin:0 0 8px;font:800 1.25rem/1.25 var(--lcc-f-display);letter-spacing:0;color:var(--lcc-text);text-align:center;text-wrap:balance;
  background:none;-webkit-text-fill-color:currentColor;
}
.lcc-noite :is(.lcc-estado,.feedback-message.exhausted) p{margin:8px 0 0;color:var(--lcc-text-2);font-size:1rem;line-height:1.5}
.lcc-noite :is(.lcc-estado,.feedback-message.exhausted) p strong{color:var(--lcc-text);font-weight:700}
.lcc-noite .lcc-estado-acoes{display:grid;gap:10px;margin-top:20px}
.lcc-noite .lcc-estado-acoes .lcc-btn{margin:0}
.lcc-noite .lcc-estado-erro{--lcc-estado-cor:var(--lcc-red-text);--lcc-estado-ic:var(--lcc-svg-link-off)}
.lcc-noite :is(.lcc-estado-aviso,.feedback-message.exhausted){--lcc-estado-cor:var(--lcc-amber);--lcc-estado-ic:var(--lcc-svg-ticket-off)}
.lcc-noite .lcc-estado-ok{--lcc-estado-cor:var(--lcc-green);--lcc-estado-ic:var(--lcc-svg-circle-check)}
.lcc-noite .lcc-estado-info{--lcc-estado-cor:var(--lcc-text-2);--lcc-estado-ic:var(--lcc-svg-info-circle)}
/* automático: mensagem de erro sem passo na tela (regras separadas: um seletor com :has() não derruba os outros) */
.lcc-noite .lcc-pagina:not(:has(.form-step)) > .error-message{
  display:block;margin:28px 0 0;padding:28px 16px 24px;border:1px solid var(--lcc-card-line);border-radius:var(--lcc-r-card);
  background:var(--lcc-surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--lcc-text);text-align:center;font:600 1.0625rem/1.45 var(--lcc-f-text);text-wrap:balance;
  --lcc-estado-cor:var(--lcc-red-text);--lcc-estado-ic:var(--lcc-svg-link-off);
}
.lcc-noite .lcc-pagina:not(:has(.form-step)) > .error-message::before{
  content:"";display:block;position:static;left:auto;top:auto;width:72px;height:72px;margin:0 auto 16px;
  background:var(--lcc-estado-cor);
  -webkit-mask:var(--lcc-estado-ic) center/32px 32px no-repeat,
               radial-gradient(closest-side,rgba(0,0,0,.16) 0 77%,rgba(0,0,0,.06) 78% 99%,transparent 100%);
  mask:var(--lcc-estado-ic) center/32px 32px no-repeat,
       radial-gradient(closest-side,rgba(0,0,0,.16) 0 77%,rgba(0,0,0,.06) 78% 99%,transparent 100%);
}

/* ---------------------------------------------------------------- LADRILHO DE PICTOGRAMA
   Pictograma VERMELHO num ladrilho #1E1E1E (como os cards de preço dos flyers):
   <span class="lcc-ladrilho"><span class="lcc-mic lcc-i-woman"></span></span>  (ou um <svg class="lcc-ic">)
   Tamanho: 40px (padrão) | .lcc-ladrilho-36. Cor: padrão vermelho | -neutro | -ambar | -verde. */
.lcc-noite .lcc-ladrilho{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:var(--lcc-ladrilho-tam,40px);height:var(--lcc-ladrilho-tam,40px);
  border-radius:var(--lcc-r-tile);background:var(--lcc-surface-2);border:1px solid var(--lcc-line);
  color:var(--lcc-red);--lcc-ic-tam:24px;
}
.lcc-noite .lcc-ladrilho > svg{width:var(--lcc-ic-tam);height:var(--lcc-ic-tam)}
.lcc-noite .lcc-ladrilho-36{--lcc-ladrilho-tam:36px;--lcc-ic-tam:22px}
.lcc-noite .lcc-ladrilho-neutro{color:var(--lcc-text-2)}
.lcc-noite .lcc-ladrilho-ambar{color:var(--lcc-amber)}
.lcc-noite .lcc-ladrilho-verde{color:var(--lcc-green)}

/* ---------------------------------------------------------------- CARREGANDO
   <span class="lcc-girando" aria-hidden="true"></span> — anel âmbar (estado "consultando") */
.lcc-noite .lcc-girando{
  display:inline-block;flex:0 0 auto;width:18px;height:18px;vertical-align:-4px;margin:0;
  border:2.5px solid rgba(255,196,0,.25);border-top-color:var(--lcc-amber);border-radius:50%;
  animation:lccGira .8s linear infinite;
}

/* ---------------------------------------------------------------- MOVIMENTO REDUZIDO */
/* (none, não duração curta: com transition-duration em todo elemento, o transition-property
   padrão "all" fazia QUALQUER mudança de estilo virar transição) */
@media (prefers-reduced-motion:reduce){
  .lcc-noite *,.lcc-noite *::before,.lcc-noite *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .lcc-noite .lcc-girando{animation:lccGira 1.6s linear infinite !important}
}