/* ========================================================================= TLC — sistema de interface "liquid glass" Usado pelo app (app.tlcsaomarcos.com.br) e pelo painel (admin.…). Claro e escuro; o tema segue o sistema e pode ser trocado no botão (data-theme="light" | "dark" no ). ========================================================================= */ /* ---------- tokens: claro ---------- */ :root{ color-scheme: light; /* marca */ --laranja:#ff741f; --teal:#00a69d; --marrom:#9a4c2a; /* uso funcional (variantes com contraste AA) */ --acento:#b84600; --acento-2:#00706b; --acento-suave:rgba(255,116,31,.14); /* fundo e vidro */ --fundo:#fdf4ec; --fundo-2:#fff9f4; --vidro:rgba(255,255,255,.62); --vidro-forte:rgba(255,255,255,.82); --vidro-borda:rgba(255,255,255,.85); --vidro-linha:rgba(154,76,42,.14); --brilho:linear-gradient(140deg,rgba(255,255,255,.75),rgba(255,255,255,0) 42%); --sombra:0 10px 34px -12px rgba(122,60,32,.35), 0 2px 8px -4px rgba(122,60,32,.22); --sombra-alta:0 22px 60px -18px rgba(122,60,32,.45); /* texto */ --txt:#2a1a12; --txt-suave:#7a5c4c; --txt-fraco:#a08979; /* estados */ --ok:#00706b; --aviso:#8a5a00; --erro:#b3261e; --info:#4b3a92; --ok-bg:#e2f5f2; --aviso-bg:#fff4e0; --erro-bg:#fdecea; --info-bg:#eee9ff; --raio:18px; --raio-sm:12px; --raio-lg:26px; --transicao:180ms cubic-bezier(.2,.7,.3,1); } /* ---------- tokens: escuro ---------- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --acento:#ff8f4d; --acento-2:#3fd0c4; --acento-suave:rgba(255,116,31,.20); --fundo:#140f0d; --fundo-2:#1d1613; --vidro:rgba(38,28,24,.58); --vidro-forte:rgba(38,28,24,.86); --vidro-borda:rgba(255,255,255,.14); --vidro-linha:rgba(255,255,255,.10); --brilho:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%); --sombra:0 12px 36px -14px rgba(0,0,0,.75), 0 2px 10px -6px rgba(0,0,0,.6); --sombra-alta:0 26px 70px -20px rgba(0,0,0,.8); --txt:#f7ece5; --txt-suave:#c3aa9c; --txt-fraco:#96796a; --ok:#3fd0c4; --aviso:#f0b45c; --erro:#ff8a80; --info:#b0a3f5; --ok-bg:rgba(0,166,157,.16); --aviso-bg:rgba(255,180,80,.16); --erro-bg:rgba(255,110,100,.16); --info-bg:rgba(150,130,255,.16); } } :root[data-theme="dark"]{ color-scheme: dark; --acento:#ff8f4d; --acento-2:#3fd0c4; --acento-suave:rgba(255,116,31,.20); --fundo:#140f0d; --fundo-2:#1d1613; --vidro:rgba(38,28,24,.58); --vidro-forte:rgba(38,28,24,.86); --vidro-borda:rgba(255,255,255,.14); --vidro-linha:rgba(255,255,255,.10); --brilho:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%); --sombra:0 12px 36px -14px rgba(0,0,0,.75), 0 2px 10px -6px rgba(0,0,0,.6); --sombra-alta:0 26px 70px -20px rgba(0,0,0,.8); --txt:#f7ece5; --txt-suave:#c3aa9c; --txt-fraco:#96796a; --ok:#3fd0c4; --aviso:#f0b45c; --erro:#ff8a80; --info:#b0a3f5; --ok-bg:rgba(0,166,157,.16); --aviso-bg:rgba(255,180,80,.16); --erro-bg:rgba(255,110,100,.16); --info-bg:rgba(150,130,255,.16); } /* ---------- base ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ min-height:100dvh; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--txt); background:var(--fundo); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* as manchas de cor por trás do vidro — é o que dá o que refratar */ body::before{ content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none; background: radial-gradient(38vmax 38vmax at 12% 8%, rgba(255,116,31,.34), transparent 62%), radial-gradient(34vmax 34vmax at 88% 14%, rgba(0,166,157,.30), transparent 60%), radial-gradient(40vmax 40vmax at 72% 92%, rgba(255,116,31,.22), transparent 64%), radial-gradient(30vmax 30vmax at 8% 88%, rgba(0,166,157,.22), transparent 62%), var(--fundo); filter:blur(18px) saturate(120%); } :root[data-theme="dark"] body::before, :root:not([data-theme="light"]) body::before{} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::before{ opacity:.7 } } :root[data-theme="dark"] body::before{ opacity:.7 } :root[data-theme="light"] body::before{ opacity:1 } button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} a{color:var(--acento)} .hide{display:none !important} :where(button,a,input,select,textarea):focus-visible{ outline:2px solid var(--acento-2); outline-offset:2px; border-radius:8px; } /* ---------- vidro ---------- */ .vidro,.card,.card-auth,.metrica,header.top,nav.bottom{ position:relative; background:var(--vidro); border:1px solid var(--vidro-borda); border-radius:var(--raio); box-shadow:var(--sombra); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); overflow:hidden; } /* reflexo especular no topo da peça */ .vidro::before,.card::before,.card-auth::before,.metrica::before, header.top::before,nav.bottom::before{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--brilho); opacity:.9; } .vidro > *,.card > *,.card-auth > *,.metrica > *,header.top > *,nav.bottom > *{position:relative} /* navegador sem backdrop-filter: cai para superfície sólida legível */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .vidro,.card,.card-auth,.metrica,header.top,nav.bottom{ background:var(--vidro-forte) } } /* ---------- tipografia ---------- */ h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em} .titulo{font-size:clamp(20px,2.4vw,26px);font-weight:700} .sub{margin:6px 0 20px;color:var(--txt-suave);font-size:14px;line-height:1.5} .bloco{margin:26px 0 12px;font-size:12px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--txt-fraco)} .vazio{color:var(--txt-suave);font-size:14px;margin:0 0 14px} .meta{margin:8px 0 0;font-size:13.5px;color:var(--txt-suave);line-height:1.65} .meta b{color:var(--txt);font-weight:600} /* ---------- formulários ---------- */ label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px} .inp{ width:100%; padding:12px 14px; border:1px solid var(--vidro-linha); border-radius:var(--raio-sm); background:var(--vidro-forte); transition:border-color var(--transicao), box-shadow var(--transicao); } .inp:focus{ outline:none; border-color:var(--acento-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--acento-2) 22%, transparent); } textarea.inp{resize:vertical;min-height:84px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media (max-width:420px){ .grid2{grid-template-columns:1fr} } .check{display:flex;align-items:flex-start;gap:10px;margin:10px 0;font-size:14px;font-weight:400} .check input{margin-top:3px;width:18px;height:18px;accent-color:var(--acento)} .obrig{color:var(--acento)} fieldset{border:0;padding:0;margin:0} fieldset legend{font-size:15px;font-weight:700;color:var(--acento-2);padding:0;margin-bottom:2px} /* ---------- botões ---------- */ .btn,.btn-mini{ position:relative; border:1px solid transparent; border-radius:var(--raio-sm); font-weight:700; letter-spacing:.01em; color:#fff; background:linear-gradient(180deg, var(--laranja), var(--acento)); box-shadow:0 8px 20px -10px rgba(184,70,0,.75), inset 0 1px 0 rgba(255,255,255,.35); transition:transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao); } .btn{width:100%;margin-top:20px;padding:13px 18px;font-size:15px} .btn-mini{padding:9px 15px;font-size:13px;border-radius:11px} .btn:hover,.btn-mini:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(184,70,0,.8), inset 0 1px 0 rgba(255,255,255,.4)} .btn:active,.btn-mini:active{transform:translateY(0)} .btn:disabled,.btn-mini:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn.suave,.btn-mini.suave{ background:var(--vidro-forte); color:var(--acento-2); border-color:var(--vidro-linha); box-shadow:none; } .btn-mini.ok{background:linear-gradient(180deg, var(--teal), var(--acento-2)); box-shadow:0 8px 20px -10px rgba(0,112,107,.7), inset 0 1px 0 rgba(255,255,255,.3)} .btn-mini.perigo{background:var(--vidro-forte);color:var(--erro);border-color:var(--vidro-linha);box-shadow:none} /* ---------- peças ---------- */ .card{padding:18px;margin-bottom:16px} .card h4{margin:0 0 4px;font-size:16px} .tag,.chip{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid var(--vidro-linha); background:var(--acento-suave); color:var(--acento); } .chip.aprovada,.chip.inscricoes_abertas{background:var(--ok-bg);color:var(--ok)} .chip.pendente,.chip.rascunho{background:var(--aviso-bg);color:var(--aviso)} .chip.espera,.chip.em_andamento{background:var(--info-bg);color:var(--info)} .chip.cancelada,.chip.encerrado{background:var(--vidro-forte);color:var(--txt-suave)} .acoes{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap} .linha{display:flex;justify-content:space-between;gap:14px;padding:9px 0; border-bottom:1px solid var(--vidro-linha);font-size:13.5px} .linha:last-child{border-bottom:0} .linha span{color:var(--txt-suave)} .alerta{background:var(--aviso-bg);border:1px solid var(--vidro-linha);color:var(--aviso); padding:11px 13px;border-radius:var(--raio-sm);font-size:13.5px;margin:14px 0} details{margin-top:12px;font-size:13.5px;color:var(--txt-suave)} details summary{cursor:pointer;color:var(--acento);font-weight:600;list-style:none} details summary::-webkit-details-marker{display:none} details summary::before{content:"▸ ";display:inline-block;transition:transform var(--transicao)} details[open] summary::before{content:"▾ "} /* ---------- botão de tema ---------- */ .tema{ width:38px;height:38px;padding:0;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:16px; background:var(--vidro); border:1px solid var(--vidro-borda); color:inherit; -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:none; } .tema:hover{transform:none;box-shadow:0 6px 18px -10px rgba(0,0,0,.5)} :root[data-theme="dark"] .tema .sol, :root:not([data-theme="light"]) .tema .sol{display:none} :root[data-theme="dark"] .tema .lua, :root:not([data-theme="light"]) .tema .lua{display:inline} .tema .lua{display:none} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .tema .sol{display:inline} :root:not([data-theme="dark"]) .tema .lua{display:none} } :root[data-theme="light"] .tema .sol{display:inline} :root[data-theme="light"] .tema .lua{display:none} /* ---------- toast ---------- */ #toast{ position:fixed; left:50%; transform:translate(-50%,12px); bottom:calc(96px + env(safe-area-inset-bottom)); padding:12px 18px; border-radius:14px; font-size:14px; max-width:min(92%,420px); text-align:center; z-index:60; opacity:0; pointer-events:none; background:var(--vidro-forte); color:var(--txt); border:1px solid var(--vidro-borda); box-shadow:var(--sombra-alta); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); transition:opacity var(--transicao), transform var(--transicao); } #toast.on{opacity:1;transform:translate(-50%,0)} #toast.erro{color:var(--erro)} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important} }