/* Loterias da Casa — "Casa do Dado" Tokens em 3 camadas (primitivo -> semantico -> componente), decisao da Rodada 2 (Theo/Marina/Vera). Dark mode fica pro proximo ciclo, mas os tokens ja sao 100% centralizados aqui (zero hex fora de :root) pra isso ser barato depois - so um bloco novo :root[data-theme="dark"]. */ :root{ /* ---- primitivos ---- */ --p-forest-900:#0F3D2E; --p-forest-950:#0A2C21; --p-green-700:#177A53; --p-green-800:#15803d; --p-gold-500:#D9A227; --p-blue-600:#1d4ed8; --p-blue-500:#3b82f6; --p-blue-200:#bfdbfe; --p-blue-100:#eff6ff; --p-amber-600:#b45309; --p-amber-400:#f59e0b; --p-amber-50:#fff7ed; --p-red-600:#991b1b; --p-red-50:#fee2e2; --p-yellow-800:#854d0e; --p-yellow-100:#fef9c3; --p-cream-50:#F7F5F0; --p-cream-100:#EFEDE6; --p-sand-200:#E7E3D8; --p-white:#ffffff; --p-charcoal:#1C2B24; /* ---- semantico ---- */ --bg:var(--p-cream-50); --card:var(--p-white); --ink:var(--p-charcoal); --ink-2:#5C6B62; --line:var(--p-sand-200); --disclaimer-bg:var(--p-cream-100); --action:var(--p-green-700); /* CTA / acao primaria - nunca dourado */ --action-ink:#ffffff; --accent:var(--action); /* alias p/ compat com HTML inline existente */ --gold:var(--p-gold-500); /* so marca, acerto/premio ganho, zona rara da regua */ --gold-ink:#8A6410; /* texto sobre --gold-soft - contraste AA (4,8:1 sobre --gold-soft, 5,4:1 sobre branco - ajuste Vera) */ --gold-soft:color-mix(in srgb, var(--gold) 14%, white); /* dark mode (fora de escopo de ativacao nesta fase, deixado pronto pra quando :root[data-theme="dark"] existir): --gold-ink: #E8C25C; --gold-soft: color-mix(in srgb, var(--gold) 20%, var(--p-forest-900)); */ --super:var(--p-amber-600); --super-bg:var(--p-amber-50); --super-line:var(--p-amber-400); --acum:var(--p-blue-600); --acum-bg:var(--p-blue-100); --acum-line:var(--p-blue-500); --ok:var(--p-green-800); --warn-bg:var(--p-yellow-100); --warn-ink:var(--p-yellow-800); --err-bg:var(--p-red-50); --err-ink:var(--p-red-600); --brand-900:var(--p-forest-900); --brand-950:var(--p-forest-950); /* ---- componente ---- */ --radius-card:16px; --radius-control:12px; --shadow-card: 0 1px 2px color-mix(in srgb, var(--brand-900) 10%, transparent), 0 10px 24px -6px color-mix(in srgb, var(--brand-900) 16%, transparent); --touch-min:44px; } *{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,sans-serif} body{background:var(--bg);color:var(--ink)} .wrap{max-width:520px;margin:0 auto;padding:12px;padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))} .hidden{display:none !important} .topbar{position:sticky;top:0;z-index:20;background:var(--brand-900);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px} .topbar h1{font-size:16px;font-weight:600;flex:1} .fresh{font-size:12px;padding:4px 10px;border-radius:999px;background:color-mix(in srgb, var(--brand-900) 60%, white 8%);color:#c9d6cf;white-space:nowrap} .fresh.ok::before{content:"● ";color:#4ade80} .fresh.stale::before{content:"● ";color:#facc15} .fresh.stale{background:#7c5806;color:#fde68a} .fresh.cooldown{background:#7c2d12;color:#fed7aa} .fresh.cooldown::before{content:"● ";color:#fb923c} .banner{margin:12px 0;padding:10px 14px;border-radius:var(--radius-card);font-size:13px;line-height:1.45} .banner.cooldown{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--p-amber-400)} .banner.cooldown b{display:block} .banner.err{background:var(--err-bg);color:var(--err-ink)} .disclaimer{ font-size:12px;line-height:1.35;color:var(--ink-2);background:var(--disclaimer-bg); border-radius:var(--radius-card);padding:8px 12px;margin:10px 0 14px; } .sec{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:18px 4px 8px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-card)} .card.super{border:2px solid var(--super-line);background:linear-gradient(var(--super-bg),var(--card))} .card.acum{border:2px solid var(--acum-line);background:linear-gradient(var(--acum-bg),var(--card))} /* Concurso especial (ex.: Lotofácil da Independência) - categoria própria, não compete com a régua super/acum. Emenda da Vera à "cerca do dourado" (2026-07-18): dourado como MOLDURA DE RARIDADE é permitido aqui (precedente da zona rara da régua, .z4) - restrito a borda + badge + gradiente de fundo. Proibido no valor do prêmio (nunca ganho, só estimado) e em sinais de urgência (ver .especial-prazo abaixo, substitui o glow antigo). */ .card.especial{border:2px solid var(--gold);background:linear-gradient(var(--gold-soft),var(--card))} .especial-prazo{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--warn-bg);color:var(--warn-ink)} .card .head{display:flex;align-items:center;gap:8px} .card .head h2{font-size:15px;flex:1;font-weight:600} .badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap} .badge.super{background:var(--super);color:#fff} .badge.acum{background:var(--acum);color:#fff} .badge.normal{background:var(--line);color:var(--ink-2)} /* gold-soft/gold-ink + borda gold (nao gold cheio) - gold cheio com gold-ink reprovava contraste AA (2,3:1) pra texto de 11px; mesmo par ja usado no selo "a receber" (.recebido-pill, ver mais abaixo). */ .badge.especial{background:var(--gold-soft);color:var(--gold-ink);border:1px solid var(--gold)} .valor{font-size:32px;font-weight:800;margin:8px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .valor.valor--normal{font-size:20px} .card.super .valor{color:var(--super)} .card.acum .valor{color:var(--acum)} .meta{font-size:12px;color:var(--ink-2)} .mult{font-size:13px;margin-top:6px} .mult b{color:var(--ink);font-weight:700} /* Card destaque (Rodada 2): so 1 card por vez ganha esta classe, via regra objetiva em app.js (super_acumulada de maior valor > acumulada > nenhum). Estado calmo nunca ganha span-2. */ .card--destaque{grid-column:1 / -1} .card--destaque .valor{font-size:36px} @media(min-width:900px){ .cards{container-type:inline-size} .card--destaque{grid-column:span 2} /* Sidebar expandida reduz o espaco do container - se ficar estreito demais, o card destaque volta a ocupar 1 coluna em vez de espremer. */ @container (max-width: 520px){ .card--destaque{grid-column:span 1} } } .regua{margin:14px 0 4px} .track{position:relative;height:8px;border-radius:999px;display:flex;overflow:visible} .z1{width:40%;background:var(--line);border-radius:999px 0 0 999px} .z2{width:25%;background:var(--p-blue-200)} .z3{width:20%;background:var(--p-blue-500)} .z4{width:15%;background:color-mix(in srgb, var(--gold) 55%, white 45%);border-radius:0 999px 999px 0} .tick{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink-2);opacity:.5} .pointer{ position:absolute;top:-3px;width:14px;height:14px;border-radius:50%; background:var(--brand-900);box-shadow:0 0 0 2px #fff, 0 1px 3px color-mix(in srgb, var(--brand-900) 40%, transparent); transform:translateX(-50%); } .labels{position:relative;height:26px;font-size:10px;color:var(--ink-2)} .labels span{position:absolute;transform:translateX(-50%);text-align:center;line-height:1.2;white-space:nowrap} .labels b{display:block;color:var(--ink);font-size:10px;font-weight:700} .cta{ display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--touch-min); margin-top:12px;padding:11px;border:0;border-radius:var(--radius-control); background:var(--action);color:var(--action-ink);font-size:14px;font-weight:600;cursor:pointer; text-align:center;text-decoration:none;transition:background-color .15s ease-out; } .cta:hover{background:color-mix(in srgb, var(--action) 85%, black)} .cta.ghost{background:#fff;color:var(--action);border:1px solid var(--action)} .cta.ghost:hover{background:color-mix(in srgb, var(--action) 8%, white)} .cta:disabled{opacity:.5;cursor:default} .cta:focus-visible{outline:2px solid var(--action);outline-offset:2px} .empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius-card);padding:28px 20px;text-align:center} .empty .ico{font-size:34px} .empty h3{margin:10px 0 6px;font-size:16px} .empty p{font-size:13px;color:var(--ink-2);line-height:1.5} .progress-list{list-style:none;text-align:left;margin:14px auto 0;max-width:280px;font-size:13px} .progress-list li{padding:4px 0;color:var(--ink-2)} .progress-list li.done{color:var(--ok)} .progress-list li.doing{color:var(--ink);font-weight:600} .bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:10px 0} .bar>div{height:100%;background:var(--action);width:0%;transition:width .4s} .backfill{background:var(--card);border:1px solid var(--acum-line);border-radius:var(--radius-card);padding:16px;font-size:13px;margin-bottom:14px} .backfill h3{font-size:14px;margin-bottom:4px;font-weight:700} .backfill .meta{margin-top:6px} form .card{margin-bottom:12px} .fld{margin-bottom:14px} .fld>label{display:block;font-size:13px;font-weight:600;margin-bottom:6px} .hint{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.4} .hint.lock{color:var(--warn-ink);background:var(--warn-bg);padding:6px 10px;border-radius:8px} .espelho-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4;padding:6px 0;cursor:pointer;min-height:var(--touch-min)} .espelho-row input{margin-top:2px;flex-shrink:0} .faq-item{margin-bottom:12px} .faq-q{font-weight:700;margin-bottom:6px} .faq-a{font-size:13px;color:var(--ink-2);line-height:1.5} select,input[type=text],input[type=password],input[type=number]{ width:100%;min-height:var(--touch-min);padding:11px;border:1px solid var(--line); border-radius:var(--radius-control);font-size:15px;background:#fff;color:var(--ink); } select:focus-visible,input:focus-visible{outline:2px solid var(--action);outline-offset:1px} .stepper{display:flex;align-items:center;gap:12px} .stepper button{width:var(--touch-min);height:var(--touch-min);border-radius:var(--radius-control);border:1px solid var(--line);background:#fff;font-size:20px;cursor:pointer} .stepper button:disabled{opacity:.35;cursor:default} .stepper button:focus-visible{outline:2px solid var(--action);outline-offset:2px} .stepper .val{font-size:20px;font-weight:700;min-width:44px;text-align:center} .numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px} .numgrid button{aspect-ratio:1;min-height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:13px;cursor:pointer} .numgrid button.sel{background:var(--action);color:#fff;border-color:var(--action);font-weight:700} .numgrid button:focus-visible{outline:2px solid var(--action);outline-offset:2px} .seg{display:flex;border:1px solid var(--line);border-radius:var(--radius-control);overflow:hidden} .seg button{flex:1;min-height:var(--touch-min);padding:10px 0;border:0;background:#fff;font-size:14px;cursor:pointer} .seg button.sel{background:var(--action);color:#fff;font-weight:700} .seg button:focus-visible{outline:2px solid var(--action);outline-offset:-2px} .custo{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:10px 2px} .custo b{font-size:18px;font-weight:800} .jogo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;margin-bottom:10px;box-shadow:var(--shadow-card)} .jogo .top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:8px;font-size:13px} .jogo .top .t{font-weight:700;flex:1} .tagfav{font-size:11px;background:var(--acum-bg);color:var(--acum);padding:2px 8px;border-radius:999px} .dezenas{display:flex;flex-wrap:wrap;gap:6px} .dz{width:36px;height:36px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink)} .dz.fav{background:var(--action);color:#fff} .joguei{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;min-height:var(--touch-min)} /* Uma sugestão pode ter mais de uma linha "joguei" (dobra normal+especial) - linha-alvo é o wrapper de uma linha já apurada, com o rótulo do concurso acima do conf-box correspondente (Meus jogos, modelo da Marina). */ .linha-alvo{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .linha-alvo-titulo{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:4px} .linha-alvo .conf-box{margin-top:4px} .switch{position:relative;width:46px;height:26px;background:#cbd5e1;border-radius:999px;cursor:pointer;transition:.2s;flex-shrink:0} .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s} .switch.on{background:var(--ok)} .switch.on::after{left:23px} .switch.locked{cursor:default;opacity:.6} .switch:focus-visible{outline:2px solid var(--action);outline-offset:2px} .datasrc{font-size:11px;color:var(--ink-2);margin-top:8px} /* Acerto conferido: anel dourado externo (unico uso de --gold fora de marca e regua, conforme regra "dourado cercado" da Vera - marca conquista). */ .dz.hit{background:var(--ok);color:#fff;box-shadow:0 0 0 2px var(--gold)} .conf-box{margin-top:6px} .conf-sorteio{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px} .conf-sorteio b{font-size:12px;color:var(--ink-2);width:100%} .conf-acertos{font-size:12px;font-weight:700;background:var(--bg);padding:2px 8px;border-radius:999px;white-space:nowrap} .conf-msg{font-size:13px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} .conf-expirada{font-size:12px;color:var(--ink-2)} .conf-box.premiado{background:linear-gradient(var(--super-bg),var(--card));border:1px solid var(--super-line);border-radius:var(--radius-control);padding:10px;margin-top:10px} .conf-box.premiado .conf-acertos{background:var(--super);color:#fff} .conf-instrucoes{font-size:12px;color:var(--ink-2);margin-top:8px;line-height:1.5;background:#fff;border-radius:8px;padding:8px 10px} /* "Marcar como recebido" (Rodada 3) */ .recebido-btn{margin-top:10px} .selo{display:flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;width:fit-content} .selo .ico{flex-shrink:0} .selo-recebido{background:var(--line);color:var(--ink-2);margin-top:10px;flex-wrap:wrap} .selo-desfazer{color:var(--ink-2);text-decoration:underline;cursor:pointer;font-weight:600;margin-left:2px} .selo-a-receber{background:var(--gold-soft);color:var(--gold-ink);margin:0 0 12px} .selo-a-receber .ico{stroke:var(--gold-ink)} .selo-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;animation:selo-pulse 2s ease-in-out infinite} @media(prefers-reduced-motion:reduce){ .selo-dot{animation:none;opacity:1} } @keyframes selo-pulse{0%,100%{opacity:.4}50%{opacity:1}} .login{max-width:340px;margin:60px auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:24px;box-shadow:var(--shadow-card)} .login h2{font-size:18px;margin-bottom:4px;display:flex;align-items:center;gap:8px;font-weight:700} .login h2 .ico{width:22px;height:22px;flex-shrink:0} .login p{font-size:13px;color:var(--ink-2);margin-bottom:16px} .lerr{font-size:13px;background:var(--err-bg);color:var(--err-ink);padding:8px 12px;border-radius:8px;margin-bottom:12px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .mainnav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom, 0px)} .mainnav a[data-view]{flex:1;text-align:center;padding:8px 0 10px;font-size:11px;color:var(--ink-2);text-decoration:none;cursor:pointer;min-height:var(--touch-min)} .mainnav a[data-view].active{color:var(--action);font-weight:700} .mainnav a[data-view]:focus-visible{outline:2px solid var(--action);outline-offset:-2px} .mainnav .ico{width:20px;height:20px;flex-shrink:0;display:block;margin:0 auto 2px;stroke:currentColor} .mainnav .navtop,.mainnav .navfoot{display:none} h2.page{font-size:20px;margin:16px 4px 4px;font-weight:700} .muted{color:var(--ink-2);font-size:13px;padding:20px;text-align:center} /* Desktop (>=900px): este bloco PRECISA vir depois de todas as regras base acima (.mainnav, .topbar, .wrap, .cards) - regras de mesma especificidade definidas depois vencem no cascade independente da media query, entao um override de desktop declarado antes das regras base seria perdido. */ @media(min-width:900px){ body.has-nav{display:grid;grid-template-columns:auto 1fr;min-height:100vh} .wrap{max-width:960px;padding-bottom:12px} .cards{display:grid;grid-template-columns:1fr 1fr;gap:12px} .mainnav{position:sticky;top:0;height:100vh;bottom:auto;flex-direction:column; background:linear-gradient(180deg, var(--brand-900), var(--brand-950));border:0;padding:14px 0;width:232px;overflow:hidden; transition:width .2s ease-out} .nav-collapsed .mainnav{width:64px} @media(prefers-reduced-motion:reduce){ .mainnav,.mainnav .lbl{transition:none} } .mainnav .navtop{display:flex;align-items:center;justify-content:space-between;padding:4px 14px 26px;gap:6px} .nav-collapsed .mainnav .navtop{flex-direction:column;align-items:center;padding:8px 0 20px;gap:8px} .mainnav .brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;overflow:hidden} .mainnav .brand .ico{width:22px;height:22px;flex-shrink:0;margin:0} .mainnav .navtoggle{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:transparent;border:0;border-radius:8px;color:#c9d6cf;cursor:pointer;transition:background-color .15s} .mainnav .navtoggle .ico{width:18px;height:18px;margin:0;transition:transform .2s ease-out} .mainnav .navtoggle:hover{background:color-mix(in srgb, var(--brand-900) 60%, white 10%);color:#fff} .mainnav .navtoggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .nav-collapsed .mainnav .navtoggle .ico{transform:scaleX(-1)} .mainnav a[data-view]{flex:0 0 auto;display:flex;align-items:center;gap:10px;text-align:left;white-space:nowrap; margin:2px 10px;padding:11px 12px;border-radius:var(--radius-control);font-size:14px;font-weight:500;letter-spacing:.01em;color:#c9d6cf; transition:background-color .15s;min-height:var(--touch-min)} .mainnav .ico{width:20px;height:20px;margin:0} .mainnav a[data-view]:hover{background:color-mix(in srgb, var(--brand-900) 60%, white 10%);color:#fff} .mainnav a[data-view].active{background:var(--action);color:#fff;font-weight:600} .mainnav a[data-view]:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .mainnav .navfoot{display:block;margin-top:auto;padding:14px 18px 4px;border-top:1px solid color-mix(in srgb, var(--brand-900) 60%, white 12%)} .mainnav .navfoot a{display:flex;align-items:center;gap:10px;color:#c9d6cf;font-size:13px;text-decoration:none;cursor:pointer;white-space:nowrap;min-height:var(--touch-min)} .mainnav .lbl{opacity:1;transition:opacity .12s ease-out} .nav-collapsed .mainnav .lbl{opacity:0;width:0;margin:0;padding:0;overflow:hidden;pointer-events:none} .nav-collapsed .mainnav a[data-view]{justify-content:center;padding:11px 0;margin:2px 8px} .nav-collapsed .mainnav .navfoot a{justify-content:center;gap:0} .topbar{background:#fff;border-bottom:1px solid var(--line);padding:8px 20px;position:static;justify-content:flex-end} .topbar h1{display:none} .topbar>a{display:none} } /* Lixeira de "apagar jogo" (Marina, Rodada 2): area de toque real 44px, sem depender so do glifo do emoji. */ .jogo .top a[title="Apagar este registro"]{ display:flex;align-items:center;justify-content:center; min-width:var(--touch-min);min-height:var(--touch-min);margin:-11px -11px -11px 0; border-radius:var(--radius-control); } .jogo .top a[title="Apagar este registro"]:hover{background:var(--err-bg)} .jogo .top a[title="Apagar este registro"]:focus-visible{outline:2px solid var(--err-ink);outline-offset:-2px} /* ============================================================ Placar da Casa (Rodada 3) - bloco fixo no topo de "Meus jogos" ============================================================ */ .placar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px;margin:0 0 14px;box-shadow:var(--shadow-card)} .placar-head{margin-bottom:10px} .placar-titulo{font-size:14px;font-weight:700;color:var(--ink)} .seg--placar{flex-wrap:wrap;margin-bottom:8px} .seg--placar button{flex:1 1 45%;min-width:120px;font-size:12.5px;padding:9px 4px} .placar-custom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px} .placar-custom input[type=date]{flex:1 1 130px;min-width:130px;min-height:var(--touch-min);padding:8px;border:1px solid var(--line);border-radius:var(--radius-control);font-size:13px;background:#fff;color:var(--ink)} .placar-custom span{font-size:12px;color:var(--ink-2)} .placar-custom .cta{width:auto;margin-top:0;padding:9px 14px;min-height:var(--touch-min)} .placar-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px} .placar-col{display:flex;flex-direction:column;gap:2px} .placar-label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);font-weight:600} .placar-valor{font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px} .placar-valor-ganho{border-bottom:3px solid transparent;padding-bottom:2px;width:fit-content} .placar-valor-ganho.tem-ganho{border-bottom-color:var(--gold)} .placar-valor.esmaecido{color:var(--ink-2);opacity:.55} .ico-moeda{flex-shrink:0} .placar-micro{font-size:12px;color:var(--ink-2);margin-top:8px} .placar-sublinha{font-size:12px;color:var(--ink-2);margin-top:8px} /* Sublinha clicavel vira