/* JOGO FEITO · estilos do sistema Padrão visual aprovado em 25/10/2026: cartões de vidro sobre fundo escuro com luz verde, a partir do recurso «Cuadrante» da Moxen (licença permite uso dentro do produto). Escuro por padrão; claro com data-tema="claro" no . As cores ficam em variáveis no :root; os acentos vão como r, g, b porque o painel de anéis (painel.js) também os lê. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); /* Jogo Feito · novo visual dos painéis, a partir do recurso «Cuadrante» (Moxen). Escuro por padrão (grafite com luz verde); claro pelo botão do topo. Cores do Jogo Feito nos acentos. */ :root { --cu-fondo: #0B110E; --cu-texto: #EEF5F0; --cu-suave: rgba(222, 240, 230, .7); --cu-tenue: rgba(222, 240, 230, .52); /* acentos (r, g, b): elétrico, menta, âmbar e coral */ --cu-cielo: 0, 226, 104; --cu-ambar: 242, 176, 40; --cu-violeta: 64, 214, 196; --cu-coral: 255, 112, 112; --cu-cielo-tinta: #08130D; --cu-luz-1: 0, 200, 96; --cu-luz-1-a: .30; --cu-luz-2: 5, 102, 56; --cu-luz-2-a: .45; --cu-luz-3: 242, 176, 40; --cu-luz-3-a: .08; --cu-rejilla: rgba(160, 255, 200, .05); --cu-grano: .07; --cu-vidrio: 200, 255, 225; --cu-tarjeta: rgba(16, 28, 22, .62); --cu-borde: rgba(170, 255, 210, .10); --cu-filo: rgba(255, 255, 255, .15); --cu-sombra: 2, 8, 5; --cu-sombra-a: .85; --cu-marca: 200, 255, 225; --cu-pista: rgba(200, 255, 225, .08); --cu-hoja: #101C16; --cu-globo: rgba(10, 18, 14, .9); --cu-sube: 0, 226, 104; --cu-sube-tinta: rgb(110, 240, 165); --cu-baja: 255, 112, 112; --cu-baja-tinta: rgb(255, 160, 160); --cu-pulgar: linear-gradient(180deg, #4BF29A, #00C85E); --cu-pulgar-tinta: #08130D; --cu-pulgar-brillo: rgba(0, 226, 104, .45); --cu-barra-a: 90, 245, 160; --cu-barra-b: 0, 150, 80; --cu-radio: 28px; --cu-curva: cubic-bezier(.22, 1, .36, 1); --cu-rebote: cubic-bezier(.34, 1.56, .64, 1); --cu-modo-luz: lighter; --jf-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --jf-acao: #00E268; --jf-acao-tinta: #08130D; --jf-faixa: #F2A516; color-scheme: dark; } :root[data-tema="claro"] { --cu-fondo: #EEF3F0; --cu-texto: #13201A; --cu-suave: rgba(19, 32, 26, .7); --cu-tenue: rgba(19, 32, 26, .56); --cu-cielo: 5, 122, 64; --cu-ambar: 176, 112, 0; --cu-violeta: 0, 128, 118; --cu-coral: 200, 50, 60; --cu-cielo-tinta: #FFFFFF; --cu-luz-1: 0, 200, 100; --cu-luz-1-a: .22; --cu-luz-2: 120, 210, 170; --cu-luz-2-a: .32; --cu-luz-3: 255, 200, 90; --cu-luz-3-a: .18; --cu-rejilla: rgba(20, 80, 50, .06); --cu-grano: .04; --cu-vidrio: 255, 255, 255; --cu-tarjeta: rgba(255, 255, 255, .76); --cu-borde: rgba(20, 80, 50, .10); --cu-filo: rgba(255, 255, 255, 1); --cu-sombra: 30, 70, 50; --cu-sombra-a: .24; --cu-marca: 20, 60, 40; --cu-pista: rgba(20, 80, 50, .08); --cu-hoja: #FFFFFF; --cu-globo: rgba(255, 255, 255, .95); --cu-sube: 5, 122, 64; --cu-sube-tinta: #056638; --cu-baja: 200, 50, 60; --cu-baja-tinta: #B42323; --cu-pulgar: linear-gradient(180deg, #0A7D45, #056638); --cu-pulgar-tinta: #FFFFFF; --cu-pulgar-brillo: rgba(5, 102, 56, .4); --cu-barra-a: 40, 170, 100; --cu-barra-b: 5, 102, 56; --cu-modo-luz: source-over; --jf-acao: #056638; --jf-acao-tinta: #FFFFFF; color-scheme: light; } /* nomes antigos, usados em alguns estilos inline dos módulos */ :root { --branco: #FFFFFF; --grafite: #1E2622; --grafite-2: rgba(var(--cu-vidrio), .06); --nevoa: rgba(var(--cu-vidrio), .07); --eletrico: rgb(var(--cu-cielo)); --erro: rgb(var(--cu-coral)); --sucesso: rgb(var(--cu-cielo)); --stone-esc: var(--cu-tenue); --f-titulo: var(--jf-fonte); --f-texto: var(--jf-fonte); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 9999px; --mute: var(--cu-suave); } * { box-sizing: border-box; } button { font: inherit; color: inherit; } svg { display: block; } h1, h2, p, ul { margin: 0; padding: 0; } ul { list-style: none; } .cu-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── el ambiente ───────────────────────────────────────────────────── */ .cu-ambiente { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .cu-luz { position: absolute; border-radius: 50%; will-change: transform; } .cu-luz--violeta { width: 980px; height: 980px; left: -300px; top: -420px; background: radial-gradient(closest-side, rgba(var(--cu-luz-1), var(--cu-luz-1-a)), rgba(var(--cu-luz-1), calc(var(--cu-luz-1-a) * .4)) 45%, transparent); animation: cu-deriva-a 26s ease-in-out infinite alternate; } .cu-luz--cielo { width: 900px; height: 900px; right: -280px; bottom: -420px; background: radial-gradient(closest-side, rgba(var(--cu-luz-2), var(--cu-luz-2-a)), rgba(var(--cu-luz-2), calc(var(--cu-luz-2-a) * .4)) 45%, transparent); animation: cu-deriva-b 31s ease-in-out infinite alternate; } .cu-luz--ambar { width: 640px; height: 640px; left: 22%; bottom: -380px; background: radial-gradient(closest-side, rgba(var(--cu-luz-3), var(--cu-luz-3-a)), transparent); animation: cu-deriva-a 38s ease-in-out infinite alternate-reverse; } @keyframes cu-deriva-a { to { transform: translate(90px, 60px) scale(1.1); } } @keyframes cu-deriva-b { to { transform: translate(-110px, -50px) scale(1.08); } } /* la rejilla tenue (se apaga hacia los bordes) y el grano fino */ .cu-ambiente::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--cu-rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--cu-rejilla) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask-image: radial-gradient(70% 62% at 50% 46%, #000 20%, transparent 78%); mask-image: radial-gradient(70% 62% at 50% 46%, #000 20%, transparent 78%); } .cu-ambiente::after { content: ''; position: absolute; inset: 0; opacity: var(--cu-grano); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ── la escena ─────────────────────────────────────────────────────── */ .cu-escena { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 0 40px; display: flex; flex-direction: column; gap: 22px; } .cu-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 20px; animation: cu-baja-suave .9s var(--cu-curva) both; } @keyframes cu-baja-suave { from { opacity: 0; transform: translateY(-12px); } } .cu-titulo { display: flex; align-items: center; gap: 16px; } .cu-marca { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(150deg, rgba(var(--cu-vidrio), .12), rgba(var(--cu-vidrio), .03)), var(--cu-tarjeta); border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 0 var(--cu-filo), 0 14px 26px -12px rgba(var(--cu-sombra), var(--cu-sombra-a)); } .cu-marca svg { width: 28px; height: 28px; fill: none; stroke-linecap: round; } .cu-marca .a { stroke: rgb(var(--cu-cielo)); stroke-width: 2.6; stroke-dasharray: 52 80; transform: rotate(-90deg); transform-origin: 16px 16px; } .cu-marca .b { stroke: rgb(var(--cu-ambar)); stroke-width: 2.6; stroke-dasharray: 30 50; transform: rotate(-90deg); transform-origin: 16px 16px; } .cu-marca .c { fill: rgb(var(--cu-violeta)); stroke: none; } .cu-cabeza h1 { font-size: 1.9rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; } .cu-cabeza p { margin-top: 6px; font-size: .95rem; color: var(--cu-suave); } .cu-controles { display: flex; align-items: center; gap: 14px; } .cu-vivo { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 14px; border-radius: 99px; font-size: .86rem; font-weight: 500; color: var(--cu-suave); background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); } .cu-vivo i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--cu-cielo)); box-shadow: 0 0 10px rgba(var(--cu-cielo), .8); } .cu-vivo i::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid rgb(var(--cu-cielo)); animation: cu-late 2s ease-out infinite; } @keyframes cu-late { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } } /* el periodo: un pulgar que se desliza con un resorte entre tres opciones */ .cu-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 16px; background: rgba(var(--cu-vidrio), .06); border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 2px rgba(var(--cu-sombra), .25); } .cu-seg-pulgar { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 3); border-radius: 12px; background: var(--cu-pulgar); box-shadow: 0 8px 20px -6px var(--cu-pulgar-brillo), inset 0 1px 0 rgba(255, 255, 255, .5); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .7s var(--cu-muelle, var(--cu-curva)); } .cu-seg-op { position: relative; z-index: 1; min-width: 64px; height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font-size: .92rem; font-weight: 500; letter-spacing: -.005em; color: var(--cu-suave); cursor: pointer; transition: color .35s; } .cu-seg-op[aria-checked="true"] { color: var(--cu-pulgar-tinta); font-weight: 700; } @media (hover: hover) { .cu-seg-op[aria-checked="false"]:hover { color: var(--cu-texto); } } .cu-seg-op:focus-visible, .cu-fila:focus-visible, .cu-linea-caja:focus-visible, .cu-barras-caja:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 3px; } :root[data-tema="claro"] .cu-seg-op:focus-visible, :root[data-tema="claro"] .cu-fila:focus-visible, :root[data-tema="claro"] .cu-linea-caja:focus-visible, :root[data-tema="claro"] .cu-barras-caja:focus-visible { outline-color: rgb(var(--cu-violeta)); } /* ── las tarjetas ──────────────────────────────────────────────────── */ .cu-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 20px; } .cu-canales { grid-row: 1 / 3; } .cu-tarjeta { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 28px 30px 30px; border-radius: var(--cu-radio); overflow: hidden; background: linear-gradient(156deg, rgba(var(--cu-vidrio), .085), rgba(var(--cu-vidrio), .02) 58%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); box-shadow: inset 0 1px 0 var(--cu-filo), 0 54px 90px -44px rgba(var(--cu-sombra), var(--cu-sombra-a)), 0 16px 34px -18px rgba(var(--cu-sombra), calc(var(--cu-sombra-a) * .8)); animation: cu-entra 1s calc(.12s + var(--k, 0) * 110ms) var(--cu-curva) both; } @keyframes cu-entra { from { opacity: 0; transform: translateY(30px) scale(.985); } } /* el filo de luz de arriba y el reflejo que sigue al cursor */ .cu-tarjeta::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--cu-vidrio), .11), transparent 62%); } .cu-tarjeta::after { content: ''; position: absolute; left: 30px; right: 30px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cu-filo) 30%, var(--cu-filo) 70%, transparent); pointer-events: none; } @media (hover: hover) { .cu-tarjeta:hover::before { opacity: 1; } } .cu-tarjeta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .cu-tarjeta h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; } .cu-tarjeta-cab p { margin-top: 5px; font-size: .88rem; color: var(--cu-suave); } .cu-meta-clave { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 11px; border-radius: 99px; font-size: .78rem; font-weight: 500; color: var(--cu-suave); background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); white-space: nowrap; } .cu-meta-clave i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgb(var(--cu-cielo)); border-right-color: transparent; transform: rotate(-30deg); } /* ── Canales: los anillos y la leyenda ─────────────────────────────── */ .cu-canales-cuerpo { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 34px; margin-top: 14px; } .cu-anillos { position: relative; width: 400px; max-width: 100%; aspect-ratio: 1; } .cu-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; } .cu-centro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .cu-centro > div { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; transition: opacity .35s, transform .6s var(--cu-curva), filter .35s; } .cu-centro-uno { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(4px); } .cu-anillos.is-uno .cu-centro-total { opacity: 0; transform: translateY(-10px) scale(.94); filter: blur(4px); } .cu-anillos.is-uno .cu-centro-uno { opacity: 1; transform: none; filter: none; } .cu-rotulo { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--cu-tenue); } .cu-rotulo b { font-weight: 700; color: var(--cu-texto); } .cu-centro-sub { font-size: .8rem; color: var(--cu-suave); } .cu-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--c, var(--cu-cielo))); box-shadow: 0 0 12px rgba(var(--c, var(--cu-cielo)), .75); flex: none; } .cu-leyenda { display: grid; gap: 8px; } .cu-fila { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 3px 12px; width: 100%; padding: 13px 16px 13px 20px; border-radius: 20px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: background-color .35s, border-color .35s, opacity .35s, transform .7s var(--cu-muelle, var(--cu-curva)), box-shadow .35s; } .cu-fila::before { content: ''; position: absolute; left: 7px; top: 15px; bottom: 15px; width: 3px; border-radius: 3px; background: rgb(var(--c)); opacity: .5; transform: scaleY(.4); transition: transform .6s var(--cu-muelle, var(--cu-curva)), opacity .3s, box-shadow .3s; } .cu-fila.is-sel { background: linear-gradient(100deg, rgba(var(--c), .13), rgba(var(--c), .03)); border-color: rgba(var(--c), .3); transform: translateX(6px); box-shadow: 0 18px 30px -22px rgba(var(--c), .6); } .cu-fila.is-sel::before { opacity: 1; transform: none; box-shadow: 0 0 14px rgba(var(--c), .75); } .cu-leyenda.is-resalta .cu-fila:not(.is-sel) { opacity: .46; } @media (hover: hover) { .cu-fila:not(.is-sel):hover { background: rgba(var(--cu-vidrio), .05); } } .cu-fila-nombre { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; letter-spacing: -.015em; } .cu-fila-pct { justify-self: end; font-size: 1.28rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; } .cu-fila-pct::after { content: ' %'; font-size: .8rem; font-weight: 500; color: var(--cu-suave); letter-spacing: 0; margin-left: 2px; } .cu-fila-valor { font-size: .84rem; color: var(--cu-suave); white-space: nowrap; } .cu-fila-valor .cu-cifra { color: var(--cu-texto); font-weight: 500; } .cu-fila > .cu-delta { justify-self: end; } .cu-etiqueta-meta { position: absolute; right: 14px; top: -9px; padding: 3px 9px; border-radius: 99px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--cu-cielo-tinta); background: linear-gradient(180deg, #a8d6ff, #66b2fa); box-shadow: 0 8px 16px -8px rgba(var(--cu-cielo), .9), inset 0 1px 0 rgba(255, 255, 255, .6); opacity: 0; transform: translateY(8px) scale(.6); transition: opacity .25s, transform .6s var(--cu-rebote); } .cu-fila.is-meta .cu-etiqueta-meta { opacity: 1; transform: none; } /* variación: una flecha pequeña y un número */ .cu-delta { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 9px 0 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; transition: background-color .3s, color .3s; } .cu-delta::before { content: ''; width: 8px; height: 7px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: transform .5s var(--cu-rebote); } .cu-delta.is-sube { color: var(--cu-sube-tinta); background: rgba(var(--cu-sube), .14); } .cu-delta.is-baja { color: var(--cu-baja-tinta); background: rgba(var(--cu-baja), .14); } .cu-delta.is-baja::before { transform: rotate(180deg); } .cu-delta--grande { min-height: 28px; padding: 0 12px 0 10px; font-size: .88rem; } /* ── las cifras que ruedan ─────────────────────────────────────────── */ .cu-cifra { display: inline-flex; vertical-align: top; font-variant-numeric: tabular-nums; line-height: 1.12; white-space: nowrap; } .cu-ruedas { display: inline-flex; height: 1.12em; } .cu-d { display: block; height: 1.12em; overflow: hidden; margin-right: -.012em; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); } .cu-tira { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1.12em)); transition: transform 1.05s var(--cu-muelle, var(--cu-curva)) calc(var(--i, 0) * 40ms); } .cu-tira b { display: block; height: 1.12em; font-weight: inherit; } .cu-sep { display: block; height: 1.12em; } .cu-cifra--grande { font-size: 2.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--cu-texto); } .cu-cifra--kpi { font-size: 3.1rem; font-weight: 700; color: var(--cu-texto); } .cu-cifra--ped { font-size: 1.9rem; font-weight: 700; color: var(--cu-texto); } /* ── Ingresos: la cifra y la línea ─────────────────────────────────── */ .cu-kpi-cifra { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; } .cu-moneda { font-size: 1.5rem; font-weight: 500; color: var(--cu-suave); } .cu-linea-caja { position: relative; flex: 1; min-height: 96px; margin: 8px -10px -8px; border-radius: 18px; cursor: crosshair; touch-action: pan-y; } .cu-linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cu-rejilla line { stroke: var(--cu-pista); stroke-width: 1; stroke-dasharray: 2 6; } .cu-st-a { stop-color: rgb(var(--cu-violeta)); } .cu-st-b { stop-color: rgb(var(--cu-ambar)); } .cu-st-c { stop-color: rgb(var(--cu-cielo)); } .cu-st-area-a { stop-color: rgb(var(--cu-ambar)); stop-opacity: .3; } .cu-st-area-b { stop-color: rgb(var(--cu-ambar)); stop-opacity: 0; } .cu-trazo { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; animation: cu-traza 1.5s .55s var(--cu-curva) both; filter: drop-shadow(0 7px 10px rgba(var(--cu-ambar), .3)); } .cu-area { animation: cu-funde 1s 1.1s both; } @keyframes cu-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes cu-funde { from { opacity: 0; } } .cu-guia { stroke: var(--cu-tenue); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .25s; } .cu-punta { fill: rgb(var(--cu-cielo)); stroke: var(--cu-hoja); stroke-width: 2.5; filter: drop-shadow(0 0 7px rgba(var(--cu-cielo), .85)); } .cu-onda { fill: none; stroke: rgb(var(--cu-cielo)); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: cu-late 2.2s ease-out infinite; } .cu-foco { fill: var(--cu-hoja); stroke: rgb(var(--cu-ambar)); stroke-width: 3; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 0 8px rgba(var(--cu-ambar), .8)); } .cu-linea-caja.is-foco .cu-guia, .cu-linea-caja.is-foco .cu-foco { opacity: 1; } .cu-linea-caja.is-foco .cu-punta, .cu-linea-caja.is-foco .cu-onda { opacity: .35; } /* el globo de las gráficas */ .cu-tip { position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 1px; padding: 8px 13px 9px; border-radius: 14px; pointer-events: none; white-space: nowrap; background: var(--cu-globo); border: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 var(--cu-filo), 0 18px 34px -14px rgba(var(--cu-sombra), .9); opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, -100%) translateY(-14px) scale(.92); transform-origin: 50% 100%; transition: opacity .2s, transform .22s var(--cu-curva); } .cu-tip b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cu-tip span { font-size: .76rem; color: var(--cu-suave); } .cu-tip.is-visible { opacity: 1; transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, -100%) translateY(-14px); } .cu-tip.is-salta { transition: opacity .2s; } /* ── Pedidos: las barras ───────────────────────────────────────────── */ .cu-ped-total { display: flex; align-items: center; gap: 10px; } .cu-barras-caja { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 100px; margin-top: 14px; border-radius: 16px; touch-action: pan-y; } .cu-barras { flex: 1; display: flex; align-items: stretch; gap: clamp(5px, .9vw, 10px); min-height: 0; } .cu-barra { position: relative; flex: 1; border-radius: 10px 10px 5px 5px; overflow: hidden; background: var(--cu-pista); cursor: pointer; } .cu-barra-relleno { position: absolute; inset: 0; border-radius: 10px 10px 5px 5px; background: linear-gradient(180deg, rgb(var(--cu-barra-a)), rgba(var(--cu-barra-b), .72) 70%, rgba(var(--cu-barra-b), .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); transform: translateY(calc((1 - var(--h, 0)) * 100%)); transition: transform 1s var(--cu-muelle, var(--cu-curva)) calc(var(--i, 0) * 45ms), filter .3s, opacity .3s; } .cu-barras.is-sale .cu-barra-relleno { transition: transform .38s cubic-bezier(.5, 0, .75, 0) calc(var(--j, 0) * 22ms); } .cu-barras.is-resalta .cu-barra:not(.is-activa) .cu-barra-relleno { opacity: .42; } .cu-barra.is-activa .cu-barra-relleno { filter: brightness(1.12) saturate(1.15); } .cu-barra.is-viva .cu-barra-relleno::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent); animation: cu-brilla 2s ease-in-out infinite; } @keyframes cu-brilla { 50% { opacity: .25; } } .cu-ejes { display: flex; justify-content: space-between; margin-top: 11px; font-size: .78rem; color: var(--cu-tenue); font-weight: 500; } .cu-solo-dedo { display: none; } @media (hover: none) { .cu-solo-raton { display: none; } .cu-solo-dedo { display: inline; } } .cu-pista { text-align: center; font-size: .82rem; color: var(--cu-tenue); animation: cu-baja-suave 1s .9s var(--cu-curva) both; } /* ── en el teléfono: una columna ───────────────────────────────────── */ @media (max-width: 1280px) { .cu-escena { padding: 22px 0 28px; } .cu-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .cu-canales { grid-row: auto; } .cu-canales-cuerpo { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; } .cu-anillos { width: 340px; } .cu-leyenda { width: 100%; } .cu-linea-caja { min-height: 130px; } .cu-barras-caja { min-height: 150px; } } @media (max-width: 560px) { .cu-escena { gap: 18px; padding-top: 16px; } .cu-cabeza { flex-direction: column; align-items: stretch; gap: 16px; } .cu-controles { justify-content: space-between; } .cu-seg-op { min-width: 54px; } .cu-cabeza h1 { font-size: 1.6rem; } .cu-marca { width: 42px; height: 42px; border-radius: 14px; } .cu-tarjeta { padding: 22px 20px 24px; border-radius: 24px; } .cu-tarjeta::after { left: 20px; right: 20px; } .cu-meta-clave { display: none; } .cu-cifra--grande { font-size: 1.9rem; } .cu-cifra--kpi { font-size: 2.5rem; } .cu-fila { padding: 12px 12px 12px 18px; } .cu-fila.is-sel { transform: translateX(3px); } .cu-pista { padding: 0 6px; } } /* ── movimiento reducido: todo queda quieto, con los mismos datos ──── */ @media (prefers-reduced-motion: reduce) { .cu-luz, .cu-vivo i::after, .cu-onda, .cu-barra.is-viva .cu-barra-relleno::after { animation: none; } .cu-cabeza, .cu-tarjeta, .cu-pista, .cu-area { animation: cu-funde .4s both; } .cu-trazo { animation: none; stroke-dashoffset: 0; } .cu-tira, .cu-barra-relleno, .cu-seg-pulgar, .cu-fila, .cu-fila::before, .cu-centro > div, .cu-tip, .cu-etiqueta-meta { transition-duration: .01s; transition-delay: 0s; } .cu-barras.is-sale .cu-barra-relleno { transition-duration: .01s; transition-delay: 0s; } } /* ── base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--cu-fondo); color: var(--cu-texto); } body { font-family: var(--jf-fonte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } [hidden] { display: none !important; } img { max-width: 100%; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; } h1 { font-size: 1.9rem; letter-spacing: -.04em; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0; } a { color: rgb(var(--cu-cielo)); } button { font: inherit; color: inherit; } .num { font-variant-numeric: tabular-nums; } .mute { color: var(--cu-suave); } .sm { font-size: .88rem; } .xs { font-size: .76rem; } .overline { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cu-tenue); } .sr, .cu-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } :focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 3px; } svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .pilha { display: grid; gap: 18px; } .pilha.p8 { gap: 10px; } .pilha > *, .grid-inicio > *, .app > * { min-width: 0; } .linha { display: flex; align-items: center; gap: 12px; } .linha.entre { justify-content: space-between; } .linha.wrap { flex-wrap: wrap; } .cresce { flex: 1; min-width: 0; } .div { height: 1px; background: var(--cu-borde); border: 0; margin: 0; } .cu-ambiente { z-index: 0; } /* ── vidro ────────────────────────────────────────────────────────── */ .card, .escuro, .vidro { position: relative; isolation: isolate; border-radius: 24px; padding: 18px; background: linear-gradient(156deg, rgba(var(--cu-vidrio), .085), rgba(var(--cu-vidrio), .02) 58%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); box-shadow: inset 0 1px 0 var(--cu-filo), 0 40px 70px -44px rgba(var(--cu-sombra), var(--cu-sombra-a)), 0 14px 30px -20px rgba(var(--cu-sombra), calc(var(--cu-sombra-a) * .8)); } .card.g, .escuro { padding: 24px; } .escuro { background: linear-gradient(140deg, rgba(var(--cu-cielo), .14), rgba(var(--cu-cielo), .03) 60%), var(--cu-tarjeta); border-color: rgba(var(--cu-cielo), .22); } .escuro .overline { color: rgb(var(--cu-cielo)); } @media (max-width: 560px) { .card.g, .escuro { padding: 20px; border-radius: 22px; } } /* ── botões ───────────────────────────────────────────────────────── */ .btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 16px; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; color: var(--cu-texto); transition: transform .3s var(--cu-curva), filter .3s, background-color .3s, border-color .3s; } .btn:active { transform: scale(.97); } .btn.pri, .btn.ele { color: var(--cu-pulgar-tinta); background: var(--cu-pulgar); box-shadow: 0 12px 26px -12px var(--cu-pulgar-brillo), inset 0 1px 0 rgba(255,255,255,.45); } .btn.pri:hover, .btn.ele:hover { filter: brightness(1.06); } .btn.ele { height: 54px; font-size: 1.02rem; } .btn.sec, .btn.contorno { background: rgba(var(--cu-vidrio), .06); border: 1px solid var(--cu-borde); } .btn.sec:hover, .btn.contorno:hover { background: rgba(var(--cu-vidrio), .1); } .btn.perigo { background: rgba(var(--cu-coral), .08); border: 1px solid rgba(var(--cu-coral), .35); color: var(--cu-baja-tinta); } .btn.peq { height: 38px; padding: 0 14px; font-size: .84rem; border-radius: 12px; } .btn.bloco { width: 100%; } .btn[disabled] { opacity: .55; pointer-events: none; } .btn-ico { appearance: none; border: 1px solid var(--cu-borde); cursor: pointer; width: 44px; height: 44px; border-radius: 14px; background: rgba(var(--cu-vidrio), .06) !important; color: var(--cu-texto); display: inline-grid; place-items: center; flex: none; text-decoration: none; } .btn-ico:hover { background: rgba(var(--cu-vidrio), .1) !important; } /* ── campos ───────────────────────────────────────────────────────── */ .campo-f { display: grid; gap: 7px; min-width: 0; } .campo-f label, .rot { font-size: .8rem; font-weight: 700; color: var(--cu-suave); } .campo-f input, .campo-f select, .campo-f textarea { width: 100%; height: 50px; border-radius: 16px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-texto); padding: 0 14px; font: inherit; font-size: 1rem; transition: border-color .25s, box-shadow .25s, background-color .25s; } .campo-f select option { background: var(--cu-hoja); color: var(--cu-texto); } .campo-f textarea { height: 104px; padding: 12px 14px; resize: vertical; } .campo-f input::placeholder, .campo-f textarea::placeholder { color: var(--cu-tenue); } .campo-f input:focus, .campo-f select:focus, .campo-f textarea:focus { outline: none; border-color: rgba(var(--cu-cielo), .7); background: rgba(var(--cu-vidrio), .08); box-shadow: 0 0 0 4px rgba(var(--cu-cielo), .16); } .campo-f input:disabled, .campo-f select:disabled { opacity: .6; } .campo-f .dica { font-size: .8rem; color: var(--cu-tenue); } .campo-f.erro input, .campo-f.erro select { border-color: rgba(var(--cu-coral), .8); box-shadow: 0 0 0 4px rgba(var(--cu-coral), .14); } .campo-f.erro .dica-erro, .campo-f.erro .dica { color: var(--cu-baja-tinta); } .grade-f { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .grade-f.dois { grid-template-columns: 1fr 1fr; } .grade-f.tres { grid-template-columns: 1fr 1fr 1fr; } .grade-f .cheio { grid-column: 1 / -1; } } .check { display: flex; gap: 12px; align-items: center; font-size: .9rem; cursor: pointer; min-height: 40px; color: var(--cu-suave); } .check input { width: 20px; height: 20px; accent-color: rgb(var(--cu-cielo)); flex: none; margin: 0; } .url-prev { display: flex; align-items: center; height: 50px; border-radius: 16px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05) !important; overflow: hidden; } .url-prev span { padding: 0 2px 0 14px; color: var(--cu-tenue); white-space: nowrap; } .url-prev input { border: 0; height: 100%; flex: 1; min-width: 0; font: inherit; padding: 0 14px 0 0; background: transparent; color: var(--cu-texto); } .url-prev input:focus { outline: none; } .url-prev:focus-within { border-color: rgba(var(--cu-cielo), .7); box-shadow: 0 0 0 4px rgba(var(--cu-cielo), .16); } .busca { position: relative; flex: 1; min-width: 0; } .busca input { width: 100%; height: 48px; border-radius: 16px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-texto); padding: 0 16px 0 44px; font: inherit; } .busca input:focus { outline: none; border-color: rgba(var(--cu-cielo), .7); box-shadow: 0 0 0 4px rgba(var(--cu-cielo), .16); } .busca svg { position: absolute; left: 14px; top: 14px; color: var(--cu-tenue); } .erro-msg { color: var(--cu-baja-tinta); font-size: .9rem; } /* ── chips, etiquetas, abas ───────────────────────────────────────── */ .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { appearance: none; flex: none; height: 38px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-suave); font-size: .86rem; font-weight: 700; cursor: pointer; transition: background-color .3s, color .3s; } .chip:hover { color: var(--cu-texto); } .chip.on { color: var(--cu-pulgar-tinta); background: var(--cu-pulgar); border-color: transparent; box-shadow: 0 8px 18px -8px var(--cu-pulgar-brillo); } .st { --c: var(--cu-marca); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: rgba(var(--c), .12); color: rgb(var(--c)); } .st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .st.ok, .st.verde { --c: var(--cu-cielo); color: var(--cu-sube-tinta); } .st.erro { --c: var(--cu-coral); color: var(--cu-baja-tinta); } .st.alerta { --c: var(--cu-ambar); } .abas { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; max-width: 100%; overflow-x: auto; background: rgba(var(--cu-vidrio), .06); border: 1px solid var(--cu-borde); } .abas button { appearance: none; border: 0; background: transparent; height: 38px; padding: 0 16px; border-radius: 12px; font-size: .9rem; font-weight: 700; color: var(--cu-suave); cursor: pointer; white-space: nowrap; transition: color .3s, background-color .3s; } .abas button:hover { color: var(--cu-texto); } .abas button.on { color: var(--cu-pulgar-tinta); background: var(--cu-pulgar); box-shadow: 0 8px 18px -8px var(--cu-pulgar-brillo), inset 0 1px 0 rgba(255,255,255,.45); } .aviso { --c: var(--cu-ambar); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; font-size: .9rem; background: rgba(var(--c), .1); border: 1px solid rgba(var(--c), .25); } .aviso > svg { color: rgb(var(--c)); } .aviso.info, .aviso.ok { --c: var(--cu-cielo); } /* ── avatares, escudos, números ───────────────────────────────────── */ .av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; background: rgba(var(--cu-vidrio), .08); border: 1px solid var(--cu-borde); color: var(--cu-texto); } .av.m { width: 40px; height: 40px; font-size: .82rem; } .av.g { width: 96px; height: 96px; font-size: 1.8rem; } .av.verde { background: var(--cu-pulgar); color: var(--cu-pulgar-tinta); border: 0; } .camisa { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; flex: none; background: var(--cu-texto); color: var(--cu-fondo); } .escudo { border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; color: #fff; } .escudo.uv { background: linear-gradient(150deg, #0A8F4E, #056638); box-shadow: 0 10px 20px -12px rgba(var(--cu-sombra), .9); } .saldo { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .valor.ent { color: var(--cu-sube-tinta); } /* ── listas ───────────────────────────────────────────────────────── */ .lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .lista > li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 16px; transition: background-color .3s; } .lista > li:hover { background: rgba(var(--cu-vidrio), .05); } .lista a.li { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; } .nome-l { flex: 1; min-width: 0; } .nome-l strong { display: block; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nome-l span { font-size: .84rem; color: var(--cu-suave); } /* elenco em lista: toque na linha abre o cadastro */ .lista-atl { padding: 6px 8px; } .lista-atl ul { list-style: none; margin: 0; padding: 0; } .lista-atl li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--cu-borde); } .lista-atl li:last-child { border-bottom: 0; } .la-li { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px; border-radius: 16px; color: inherit; text-decoration: none; transition: background-color .2s; } .la-li:hover { background: rgba(var(--cu-vidrio), .05); } .la-li:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: -2px; } .la-cam { display: none; } .la-sit { justify-self: end; } .la-sit .chip, .la-sit .st { white-space: nowrap; } .la-zap { flex: none; width: 44px; height: 44px; margin-right: 4px; color: rgb(var(--cu-cielo)); } .la-cab { display: none; } @media (max-width: 767px) { .la-sit.ativo { display: none; } } .la-vazio { display: block !important; text-align: center; padding: 28px 12px; } @media (min-width: 768px) { .la-cab { display: grid; grid-template-columns: minmax(0, 1fr) 90px 140px 44px; gap: 12px; padding: 10px 10px 8px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cu-tenue); border-bottom: 1px solid var(--cu-borde); } .la-li { grid-template-columns: auto minmax(0, 1fr) 90px 140px; } .la-cam { display: block; } .la-sit { justify-self: start; } } .cards-atletas { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 768px) { .cards-atletas { grid-template-columns: 1fr 1fr; } } @media (min-width: 1280px) { .cards-atletas { grid-template-columns: 1fr 1fr 1fr; } } .ca { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: inherit; background: linear-gradient(156deg, rgba(var(--cu-vidrio), .07), rgba(var(--cu-vidrio), .02) 60%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 0 var(--cu-filo), 0 20px 34px -24px rgba(var(--cu-sombra), var(--cu-sombra-a)); transition: transform .4s var(--cu-curva), border-color .3s; } .ca:hover { transform: translateY(-2px); border-color: rgba(var(--cu-cielo), .3); } .tabela-wrap { overflow-x: auto; } .tab-admin { width: 100%; border-collapse: separate; border-spacing: 0 6px; min-width: 720px; font-size: .9rem; } .card .tab-admin { padding: 0 8px; } .tab-admin th { text-align: left; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cu-tenue); padding: 10px 12px 2px; white-space: nowrap; } .tab-admin td { padding: 10px 12px; background: rgba(var(--cu-vidrio), .035); white-space: nowrap; } .tab-admin td:first-child { border-radius: 14px 0 0 14px; } .tab-admin td:last-child { border-radius: 0 14px 14px 0; } .tab-admin tr:hover td { background: rgba(var(--cu-vidrio), .07); } .lista li .dir { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; } @media (max-width: 560px) { .lista li .dir { flex-direction: column; align-items: flex-end; gap: 6px; } } .fin-li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cu-borde); } .fin-li:last-child { border-bottom: 0; } .fin-li .ic { width: 40px; height: 40px; border-radius: 14px; background: rgba(var(--cu-vidrio), .07); display: grid; place-items: center; flex: none; } /* ── casca: menu lateral, topo, menu inferior ─────────────────────── */ .app { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; min-height: 100dvh; } .lateral { display: none; } .topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: 60px; display: flex; align-items: center; gap: 12px; background: var(--cu-globo); border-bottom: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--cu-fondo); } .topo h1 { font-size: 1.1rem; letter-spacing: -.02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topo .clube-mini { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .conteudo { padding-block: 20px 120px; max-width: 1180px; width: 100%; margin: 0 auto; } .cab-pagina { display: none; } .inferior { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; padding: 6px; border-radius: 22px; background: var(--cu-globo); border: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--cu-filo), 0 20px 40px -18px rgba(var(--cu-sombra), .9); } .inferior a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; border-radius: 16px; color: var(--cu-tenue); text-decoration: none; font-size: .7rem; font-weight: 700; } .inferior a.on { color: var(--cu-pulgar-tinta); background: var(--cu-pulgar); box-shadow: 0 8px 20px -8px var(--cu-pulgar-brillo); } .fab { position: fixed; z-index: 25; right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); height: 56px; border-radius: 18px; } @media (min-width: 1024px) { .app { grid-template-columns: 252px 1fr; } .lateral { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; padding: 26px 16px 20px; overflow-y: auto; border-right: 1px solid var(--cu-borde); background: linear-gradient(180deg, rgba(var(--cu-vidrio), .05), rgba(var(--cu-vidrio), .01)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .lateral .logo { padding: 0 12px 24px; } .lateral .logo img { height: 36px; width: auto; display: block; } .lateral .logo .overline { margin-top: 10px; color: rgb(var(--cu-cielo)); } .lateral > a { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 14px; color: var(--cu-suave); text-decoration: none; font-weight: 700; font-size: .95rem; border: 1px solid transparent; transition: background-color .3s, color .3s; } .lateral > a:hover { color: var(--cu-texto); background: rgba(var(--cu-vidrio), .05); } .lateral > a.on { color: var(--cu-texto); background: linear-gradient(100deg, rgba(var(--cu-cielo), .16), rgba(var(--cu-cielo), .03)); border-color: rgba(var(--cu-cielo), .28); } .lateral > a.on::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: rgb(var(--cu-cielo)); box-shadow: 0 0 12px rgba(var(--cu-cielo), .8); } .lateral > a.on svg { color: rgb(var(--cu-cielo)); } .lateral .rod { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 6px 0; border-top: 1px solid var(--cu-borde); font-size: .9rem; } .lateral .rod small { display: block; color: var(--cu-tenue); font-size: .76rem; } .lateral .rod .btn-ico { width: 36px; height: 36px; border: 0; background: transparent !important; color: var(--cu-tenue); } .lateral .rod .btn-ico:hover { color: var(--cu-texto); } .topo { display: none; } .inferior { display: none; } .fab { display: none; } .conteudo { padding-block: 32px 48px; padding-left: 36px !important; padding-right: 36px !important; } .cab-pagina { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cab-pagina h1 { font-size: 1.9rem; } } .logo-claro { display: none !important; } :root[data-tema="claro"] .logo-escuro { display: none !important; } :root[data-tema="claro"] .logo-claro { display: block !important; } .tema-bt { appearance: none; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-suave); border-radius: 12px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; cursor: pointer; margin: 0 6px 10px; } .tema-bt:hover { color: var(--cu-texto); } /* ── blocos das telas ─────────────────────────────────────────────── */ .grid-inicio { display: grid; gap: 18px; } @media (min-width: 1024px) { .grid-inicio { grid-template-columns: 1.35fr 1fr; align-items: start; } } .resumo-dl { margin: 0; display: grid; } .resumo-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cu-borde); } .resumo-dl div:last-child { border-bottom: 0; } .resumo-dl dt { font-size: .88rem; color: var(--cu-suave); } .resumo-dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .resumo-dl dd.ent { color: var(--cu-sube-tinta); } .resumo-dl dd.sai { color: var(--cu-baja-tinta); } .cu-marca .escudo { width: 100% !important; height: 100% !important; border-radius: inherit; } .cu-seg-op { white-space: nowrap; } @media (max-width: 640px) { .cu-controles { width: 100%; } .cu-controles .cu-seg { flex: 1; } .cu-controles > .btn { display: none; } } .linha3 { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 900px) { .linha3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1280px) { .linha3 { grid-template-columns: 1.2fr 1fr 1fr; } .linha3.dois { grid-template-columns: 1.3fr 1fr; } } .kpis { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, 1fr); } } .resumo-fin { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .resumo-fin .card:first-child { grid-column: 1 / -1; } @media (min-width: 768px) { .resumo-fin { grid-template-columns: 1.4fr 1fr 1fr; } .resumo-fin .card:first-child { grid-column: auto; } } .acoes-rapidas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .acao { display: grid; gap: 10px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--cu-texto); font-weight: 700; font-size: .9rem; background: rgba(var(--cu-vidrio), .04); border: 1px solid var(--cu-borde); transition: transform .4s var(--cu-curva), background-color .3s; } .acao:hover { transform: translateY(-2px); background: rgba(var(--cu-vidrio), .08); } .acao .ic, .acao span.ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: rgb(var(--cu-cielo)); background: rgba(var(--cu-cielo), .12); } .pos-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .pos-grade div { text-align: center; padding: 12px 0; border-radius: 16px; background: rgba(var(--cu-vidrio), .04); border: 1px solid var(--cu-borde); } .pos-grade b { display: block; font-size: 1.4rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .pos-grade span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--cu-tenue); } .pos-grade div.falta { border-color: rgba(var(--cu-ambar), .4); background: rgba(var(--cu-ambar), .1); } .pos-grade div.falta b { color: rgb(var(--cu-ambar)); } .etapas { display: flex; gap: 8px; } .etapas .e { flex: 1; display: grid; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--cu-tenue); } .etapas .e i { display: block; height: 6px; border-radius: 99px; background: var(--cu-pista); } .etapas .e.on { color: var(--cu-texto); } .etapas .e.on i, .etapas .e.feita i { background: rgb(var(--cu-cielo)); box-shadow: 0 0 10px rgba(var(--cu-cielo), .5); } .rodape-form { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 10px; border-radius: 20px; background: var(--cu-globo); border: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } @media (max-width: 639px) { .rodape-form .btn { flex: 1; padding: 0 16px; } } @media (min-width: 1024px) { .rodape-form { bottom: 16px; } } .foto-up { display: flex; align-items: center; gap: 16px; } .foto-up .av.g { border: 2px dashed var(--cu-borde); background: rgba(var(--cu-vidrio), .04); color: var(--cu-tenue); } .ficha-topo { display: grid; justify-items: center; text-align: center; gap: 12px; } @media (min-width: 768px) { .ficha-topo { display: flex; text-align: left; align-items: center; } } .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; } .nums div { text-align: center; padding: 14px 6px; border-radius: 16px; background: rgba(var(--cu-vidrio), .04); border: 1px solid var(--cu-borde); } .nums b { display: block; font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .nums span { font-size: .74rem; color: var(--cu-tenue); } .dados { display: grid; grid-template-columns: 1fr; } .dados div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cu-borde); font-size: .94rem; } .dados div span:first-child { color: var(--cu-suave); } .dados div span:last-child { text-align: right; font-weight: 700; min-width: 0; overflow-wrap: anywhere; } @media (min-width: 768px) { .dados { grid-template-columns: 1fr 1fr; column-gap: 32px; } } .vazio { text-align: center; padding: 36px 16px; display: grid; gap: 10px; justify-items: center; } .vazio .ic { width: 56px; height: 56px; border-radius: 18px; background: rgba(var(--cu-cielo), .12); color: rgb(var(--cu-cielo)); display: grid; place-items: center; } .em-breve { border: 1px dashed var(--cu-borde); border-radius: 24px; padding: 36px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; background: rgba(var(--cu-vidrio), .03); } .carregando { min-height: 60vh; display: grid; place-items: center; color: var(--cu-suave); position: relative; z-index: 1; } .gira { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--cu-pista); border-top-color: rgb(var(--cu-cielo)); animation: gira .8s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } .entra > * { animation: sobe .5s var(--cu-curva) both; } .entra > *:nth-child(2) { animation-delay: .05s; } .entra > *:nth-child(3) { animation-delay: .1s; } .entra > *:nth-child(4) { animation-delay: .15s; } .entra > *:nth-child(5) { animation-delay: .2s; } @keyframes sobe { from { opacity: .001; transform: translateY(10px); } } /* ── janelas e avisos ─────────────────────────────────────────────── */ dialog.janela { border: 1px solid var(--cu-borde); padding: 0; border-radius: 26px; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); background: var(--cu-hoja); color: var(--cu-texto); box-shadow: inset 0 1px 0 var(--cu-filo), 0 40px 80px -30px rgba(0,0,0,.6); } dialog.janela::backdrop { background: rgba(4, 8, 6, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } dialog.janela .j-corpo { padding: 26px; display: grid; gap: 16px; overflow-y: auto; max-height: calc(100dvh - 140px); } dialog.janela .j-rod { padding: 12px 26px 22px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .credencial { background: rgba(var(--cu-vidrio), .06); border: 1px solid var(--cu-borde); border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; font-size: .94rem; } .credencial b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 1.1rem; letter-spacing: .02em; color: rgb(var(--cu-cielo)); } .toast { position: fixed; z-index: 70; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 16px; font-weight: 700; font-size: .9rem; color: var(--cu-texto); background: var(--cu-globo); border: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--cu-filo), 0 20px 40px -18px rgba(var(--cu-sombra), .9); opacity: 0; transition: opacity .25s, transform .35s var(--cu-curva); pointer-events: none; max-width: calc(100% - 32px); text-align: center; } .toast.on { opacity: 1; transform: translate(-50%, 0); } .toast.erro { border-color: rgba(var(--cu-coral), .5); color: var(--cu-baja-tinta); } @media (min-width: 1024px) { .toast { bottom: 32px; } } /* ── painel de métricas dentro da casca ───────────────────────────── */ .app .cu-escena { padding: 0; max-width: none; } .cu-sem-delta .cu-delta:empty { display: none; } .cu-moneda:empty { display: none; } .proximo-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 16px; } .proximo-vs .t { display: grid; justify-items: center; gap: 8px; text-align: center; font-weight: 700; font-size: .95rem; min-width: 0; } .proximo-vs .meio { position: relative; width: 2px; height: 60px; background: var(--cu-pista); } .proximo-vs .meio::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgb(var(--cu-cielo)); box-shadow: 0 0 14px rgba(var(--cu-cielo), .9); } /* ── telas de entrada ─────────────────────────────────────────────── */ .entrada { position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-columns: 1fr; align-items: center; gap: 28px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 36px max(16px, env(safe-area-inset-left, 0px)); } @media (min-width: 980px) { .entrada { grid-template-columns: 1.05fr minmax(0, 440px); gap: 64px; padding-top: 40px; padding-bottom: 40px; } } /* lado da marca: o círculo do meio-campo, como no símbolo */ .marca-lado { display: grid; gap: 22px; justify-items: start; animation: cu-baja-suave .9s var(--cu-curva) both; } .marca-lado .logo { height: 34px; width: auto; display: block; } .marca-lado h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: .95; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; } .marca-lado h1 em { font-style: normal; background: linear-gradient(90deg, rgb(var(--cu-cielo)), rgb(var(--cu-violeta))); -webkit-background-clip: text; background-clip: text; color: transparent; } .marca-lado p { margin: 0; max-width: 440px; font-size: 1.02rem; line-height: 1.55; color: var(--cu-suave); } .selos { display: flex; flex-wrap: wrap; gap: 8px; } .selo { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 99px; font-size: .84rem; font-weight: 700; color: var(--cu-suave); background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); } .selo i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 10px rgba(var(--c), .8); } .campo-viz { position: relative; width: min(500px, 100%); margin-top: 8px; padding: 14px; border-radius: 26px; background: linear-gradient(156deg, rgba(var(--cu-vidrio), .07), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 0 var(--cu-filo), 0 40px 70px -40px rgba(var(--cu-sombra), var(--cu-sombra-a)); animation: cu-entra 1s .25s var(--cu-curva) both; } .campo-viz svg { display: block; width: 100%; height: auto; overflow: visible; } .gramado { fill: url(#faixas); } .lc { fill: none; stroke: rgba(var(--cu-cielo), .55); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(var(--cu-cielo), .45)); stroke-dasharray: 1 1; animation: traca 1.6s var(--cu-curva) both; } .lc.p { fill: rgba(var(--cu-cielo), .7); stroke: none; animation: aparece .6s 1.2s both; } @keyframes traca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes aparece { from { opacity: 0; } } .jog { animation: entra-jog .7s calc(1s + var(--k) * 110ms) var(--cu-rebote) both; transform-box: fill-box; transform-origin: center; } @keyframes entra-jog { from { opacity: 0; transform: scale(.3); } } .jog circle.halo { fill: rgba(var(--cu-cielo), .18); } .jog circle.cor { fill: url(#camisa); stroke: rgba(255,255,255,.85); stroke-width: 1.4; filter: drop-shadow(0 3px 6px rgba(var(--cu-sombra), .7)); } .jog text.n { font: 700 9.5px var(--jf-fonte); fill: #08130D; text-anchor: middle; dominant-baseline: central; } .jog text.ap { font: 700 8.5px var(--jf-fonte); fill: var(--cu-texto); text-anchor: middle; paint-order: stroke; stroke: var(--cu-fondo); stroke-width: 3px; stroke-linejoin: round; } .jog.falta circle.cor { fill: transparent; stroke: rgba(var(--cu-marca), .45); stroke-dasharray: 3 3; filter: none; } .jog.falta text.n { fill: var(--cu-tenue); } .jog.falta circle.halo { fill: none; } .bola { animation: rola 2.4s 2.2s var(--cu-curva) both; transform-box: fill-box; transform-origin: center; } @keyframes rola { from { opacity: 0; transform: translateX(-40px) rotate(-200deg); } } .campo-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 4px 2px; font-size: .84rem; color: var(--cu-suave); } .campo-pe b { color: var(--cu-texto); } .campo-pe .leg { display: inline-flex; align-items: center; gap: 14px; } .campo-pe .leg span { display: inline-flex; align-items: center; gap: 6px; } .campo-pe .leg i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--cu-cielo)); box-shadow: 0 0 8px rgba(var(--cu-cielo), .7); } .campo-pe .leg i.f { background: none; border: 1.5px dashed rgba(var(--cu-marca), .5); box-shadow: none; } @media (max-width: 979px) { .campo-viz { display: none; } .marca-lado h1 { font-size: clamp(2.2rem, 10vw, 3rem); } .marca-lado p { font-size: .95rem; } } /* o cartão do formulário: o mesmo vidro dos painéis */ .cartao { position: relative; isolation: isolate; display: grid; gap: 20px; padding: 30px; border-radius: var(--cu-radio); overflow: hidden; background: linear-gradient(156deg, rgba(var(--cu-vidrio), .09), rgba(var(--cu-vidrio), .02) 58%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); box-shadow: inset 0 1px 0 var(--cu-filo), 0 54px 90px -44px rgba(var(--cu-sombra), var(--cu-sombra-a)), 0 16px 34px -18px rgba(var(--cu-sombra), calc(var(--cu-sombra-a) * .8)); animation: cu-entra 1s .2s var(--cu-curva) both; } .cartao::after { content: ''; position: absolute; left: 30px; right: 30px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cu-filo) 30%, var(--cu-filo) 70%, transparent); pointer-events: none; } @media (max-width: 560px) { .cartao { padding: 24px 20px; border-radius: 24px; } } .cartao .cab { display: grid; gap: 6px; } .cartao .cab .over { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--cu-cielo)); } .cartao .cab h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1.1; } .cartao .cab p { margin: 0; font-size: .92rem; color: var(--cu-suave); } .cartao .clube { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); } .cartao .clube .esc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(150deg, #0A8F4E, #056638); box-shadow: 0 10px 20px -10px rgba(var(--cu-sombra), .9); flex: none; } .cartao .clube b { display: block; } .cartao .clube span { font-size: .8rem; color: var(--cu-suave); } .cartao form { display: grid; gap: 16px; margin: 0; } .cartao .f { display: grid; gap: 7px; } .cartao .f label { font-size: .8rem; font-weight: 700; color: var(--cu-suave); } .cartao .ctl { position: relative; } .cartao .ctl > svg { position: absolute; left: 14px; top: 15px; color: var(--cu-tenue); pointer-events: none; } .cartao .ctl input { width: 100%; box-sizing: border-box; height: 50px; border-radius: 16px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-texto); font: inherit; font-size: 1rem; padding: 0 48px 0 44px; transition: border-color .25s, box-shadow .25s, background-color .25s; } .cartao .ctl input::placeholder { color: var(--cu-tenue); } .cartao .ctl input:focus { outline: none; border-color: rgba(var(--cu-cielo), .7); background: rgba(var(--cu-vidrio), .08); box-shadow: 0 0 0 4px rgba(var(--cu-cielo), .16); } .cartao .ctl .olho { position: absolute; right: 4px; top: 3px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--cu-tenue); cursor: pointer; display: grid; place-items: center; } .cartao .ctl .olho:hover { color: var(--cu-texto); } .cartao .f.erro input { border-color: rgba(var(--cu-coral), .8); box-shadow: 0 0 0 4px rgba(var(--cu-coral), .14); } .cartao .f .dica { font-size: .8rem; color: var(--cu-baja-tinta); } .cartao .linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .cartao .check { display: inline-flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--cu-suave); cursor: pointer; min-height: 44px; } .cartao .check input { width: 20px; height: 20px; accent-color: rgb(var(--cu-cielo)); margin: 0; } .link { color: rgb(var(--cu-cielo)); font-weight: 700; font-size: .88rem; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 10px 0; } .link:hover { text-decoration: underline; } .cartao .btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 22px; border-radius: 16px; font: inherit; font-weight: 700; font-size: 1.02rem; width: 100%; text-decoration: none; } .cartao .btn.pri { color: var(--cu-pulgar-tinta); background: var(--cu-pulgar); box-shadow: 0 14px 28px -12px var(--cu-pulgar-brillo), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .3s var(--cu-curva), filter .3s; } .cartao .btn.pri:hover { filter: brightness(1.06); transform: translateY(-1px); } .cartao .btn.pri:active { transform: scale(.98); } .cartao .btn.vid { color: var(--cu-texto); background: rgba(var(--cu-vidrio), .06); border: 1px solid var(--cu-borde); height: 48px; font-size: .95rem; } .cartao .btn .gira { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; display: none; } .cartao .btn.carregando .gira { display: block; } .cartao .btn.carregando .txt { opacity: .8; } .cartao .aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; font-size: .88rem; line-height: 1.45; background: rgba(var(--c, var(--cu-cielo)), .1); border: 1px solid rgba(var(--c, var(--cu-cielo)), .25); } .cartao .aviso svg { color: rgb(var(--c, var(--cu-cielo))); margin-top: 1px; } .cartao .aviso b { display: block; } .cartao .aviso span { color: var(--cu-suave); } .regras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .regras li { display: flex; gap: 10px; align-items: center; font-size: .86rem; color: var(--cu-tenue); transition: color .3s; } .regras li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cu-pista); box-sizing: border-box; flex: none; transition: background-color .3s, border-color .3s, box-shadow .3s; } .regras li.ok { color: var(--cu-texto); } .regras li.ok::before { background: rgb(var(--cu-cielo)); border-color: rgb(var(--cu-cielo)); box-shadow: 0 0 10px rgba(var(--cu-cielo), .6); } .forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .forca i { height: 6px; border-radius: 99px; background: var(--cu-pista); transition: background-color .3s, box-shadow .3s; } .forca i.on { background: rgb(var(--cu-cielo)); box-shadow: 0 0 10px rgba(var(--cu-cielo), .6); } .cartao .rodape { text-align: center; font-size: .8rem; color: var(--cu-tenue); } .cartao .rodape a { color: inherit; } .cartao .alterna { display: flex; justify-content: flex-end; margin: -10px -8px -6px 0; } .cartao .alterna .tema-bt { margin: 0; height: 34px; border-radius: 99px; } .cartao .clube .escudo { flex: none; } .cartao .alterna button { appearance: none; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-suave); border-radius: 99px; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; } /* ── cadastro do atleta em uma página (vai para jogofeito.css ao implementar) ── */ .grade-f { align-items: start; } @media (min-width: 640px) { .grade-f.tres { grid-template-columns: 1fr 1fr 1fr; } .grade-f .cheio2 { grid-column: span 2; } } .form-atleta { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1100px) { .form-atleta { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; } .fa-lado { position: sticky; top: 24px; } } .secao-cab { display: flex; gap: 14px; align-items: flex-start; } .h-peq { font-size: 1.05rem; margin: 0; letter-spacing: -.02em; } .secao-cab h2 { font-size: 1.15rem; letter-spacing: -.02em; margin: 0; } .secao-cab p { margin: 3px 0 0; } .secao-n { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: .88rem; color: rgb(var(--cu-cielo)); background: rgba(var(--cu-cielo), .12); border: 1px solid rgba(var(--cu-cielo), .25); } .secao { scroll-margin-top: 24px; } .opc { font-weight: 400; font-size: .76rem; color: var(--cu-tenue); } .rot { display: block; } /* cartão do atleta ao vivo */ .fa-cartao { display: grid; justify-items: center; gap: 14px; text-align: center; } .fa-foto { position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 2px dashed var(--cu-borde); background: rgba(var(--cu-vidrio), .04) center / cover no-repeat; color: var(--cu-tenue); transition: border-color .25s; } .fa-foto:hover { border-color: rgba(var(--cu-cielo), .6); } .fa-foto.tem { border: 2px solid rgba(var(--cu-cielo), .7); box-shadow: 0 0 24px -6px rgba(var(--cu-cielo), .6); } .fa-foto.tem .sem { display: none; } .fa-foto .sem { display: grid; justify-items: center; gap: 4px; font-size: .78rem; } .fa-foto .num { position: absolute; right: -4px; bottom: 2px; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cu-pulgar-tinta); background: var(--cu-pulgar); box-shadow: 0 8px 18px -8px var(--cu-pulgar-brillo); } .fa-quem { display: grid; gap: 2px; min-width: 0; max-width: 100%; } .fa-quem b { font-size: 1.4rem; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fa-quem b.vazio { color: var(--cu-tenue); } .fa-quem span { font-size: .88rem; color: var(--cu-suave); } .fa-cartao .div { width: 100%; } .fa-falta { width: 100%; text-align: left; display: grid; gap: 8px; } .fa-falta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .fa-falta a { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--cu-suave); text-decoration: none; font-size: .9rem; border-radius: 10px; } .fa-falta a:hover { color: var(--cu-texto); } .fa-falta a::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cu-pista); box-sizing: border-box; flex: none; transition: background-color .3s, border-color .3s, box-shadow .3s; } .fa-falta li.ok a { color: var(--cu-texto); } .fa-falta li.ok a::before { background: rgb(var(--cu-cielo)); border-color: rgb(var(--cu-cielo)); box-shadow: 0 0 10px rgba(var(--cu-cielo), .6); } /* celular e notebook pequeno: o cartão vira uma faixa */ @media (max-width: 1099px) { .fa-cartao { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; padding: 16px 18px; } .fa-foto { width: 72px; height: 72px; } .fa-foto .sem b { display: none; } .fa-foto .num { min-width: 30px; height: 30px; font-size: .84rem; border-radius: 10px; right: -6px; bottom: -4px; } .fa-quem b { font-size: 1.15rem; } .fa-cartao .div, .fa-falta { display: none; } } @media (max-width: 480px) { #fa-bt-foto { display: none; } .fa-cartao { grid-template-columns: auto minmax(0, 1fr); } } /* escolhas em pílulas (posição, pé, tamanho, situação) */ .escolha { display: flex; flex-wrap: wrap; gap: 8px; } .escolha .chip { height: 44px; min-width: 48px; padding: 0 14px; } @media (max-width: 639px) { .escolha { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; } .escolha .chip { min-width: 0; padding: 0 4px; } } .campo-f .escolha { min-height: 50px; align-items: center; } /* blocos que abrem (endereço, emergência) */ .mais-campos { border: 1px solid var(--cu-borde); border-radius: 18px; background: rgba(var(--cu-vidrio), .025); } .mais-campos > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; cursor: pointer; font-weight: 700; font-size: .92rem; border-radius: 18px; } .mais-campos > summary::-webkit-details-marker { display: none; } .mais-campos > summary > svg:first-child { color: rgb(var(--cu-cielo)); } .mais-campos > summary > svg:last-child { margin-left: auto; color: var(--cu-tenue); transform: rotate(90deg); transition: transform .3s var(--cu-curva); } .mais-campos[open] > summary > svg:last-child { transform: rotate(-90deg); } .mais-campos > .grade-f { padding: 4px 16px 18px; } .mais-campos > summary:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } /* mensalidade: chave liga/desliga */ .linha-mens { display: grid; gap: 14px; } @media (min-width: 640px) { .linha-mens { grid-template-columns: minmax(0, 1fr) 220px; align-items: end; } } .troca { display: flex; gap: 14px; align-items: center; cursor: pointer; min-height: 50px; } .troca input { position: absolute; opacity: 0; width: 1px; height: 1px; } .troca .trilho { flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--cu-pista); position: relative; transition: background-color .3s; } .troca .trilho i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .3s var(--cu-curva); } .troca input:checked + .trilho { background: rgb(var(--cu-cielo)); } .troca input:checked + .trilho i { transform: translateX(20px); } .troca input:focus-visible + .trilho { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 3px; } .troca b { display: block; } /* rodapé com Cancelar visível */ .rodape-form { align-items: center; } .rodape-form .rf-nota { margin-right: auto; padding-left: 8px; } @media (max-width: 639px) { .rodape-form .rf-nota { display: none; } } .rodape-form .btn.sec { color: var(--cu-texto); } @media (prefers-reduced-motion: reduce) { .troca .trilho i, .mais-campos > summary > svg { transition: none; } } /* ── entrada da administração: sóbria, sem campo de futebol ── */ .entrada.adm { grid-template-columns: 1fr; } @media (min-width: 980px) { .entrada.adm { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 0; } .entrada.adm .adm-lado { padding-right: 64px; margin-right: 64px; border-right: 1px solid var(--cu-borde); } } .adm-lado { display: grid; gap: 26px; align-content: center; animation: cu-baja-suave .9s var(--cu-curva) both; } .adm-lado .logo { height: 32px; width: auto; display: block; } .adm-selo { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cu-suave); background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); justify-self: start; } .adm-selo i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--cu-cielo)); } .adm-lado h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; } .adm-lado > p { margin: 0; max-width: 460px; font-size: 1rem; line-height: 1.6; color: var(--cu-suave); } .adm-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 480px; border-top: 1px solid var(--cu-borde); } .adm-itens li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--cu-borde); } .adm-itens .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--cu-texto); background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); } .adm-itens b { display: block; font-size: .95rem; } .adm-itens span { font-size: .86rem; color: var(--cu-suave); } .adm-seg { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--cu-tenue); margin: 0; } @media (max-width: 979px) { .adm-itens, .adm-seg { display: none; } .adm-lado { gap: 16px; } .adm-lado h1 { font-size: 1.9rem; } } /* luz mais contida na administração */ body.sobrio .cu-luz { opacity: .45; } /* assinatura “Desenvolvido por astravox” em todas as entradas */ .assinatura { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: .74rem; color: var(--cu-tenue); } .assinatura .av-marca { display: inline-flex; align-items: center; min-height: 32px; opacity: .8; border-radius: 6px; transition: opacity .2s; } .assinatura .av-marca:hover, .assinatura .av-marca:focus-visible { opacity: 1; } .assinatura .av-marca:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 4px; } .assinatura img { height: 14px; width: auto; display: block; } .assinatura .av-claro { display: none; } :root[data-tema="claro"] .assinatura .av-escuro { display: none; } :root[data-tema="claro"] .assinatura .av-claro { display: block; } .entrada { min-height: calc(100dvh - 56px); } /* ── jogos e convocação (vai para jogofeito.css ao implementar) ── */ .pilha > .abas { justify-self: start; } .linha3 > .cu-tarjeta { grid-template-rows: none; grid-auto-rows: auto; align-content: start; } .cv-lista li.voce.entra { animation: cu-baja-suave .6s var(--cu-curva) both; } .lista-jogos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .jg { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 22px; text-decoration: none; color: inherit; background: linear-gradient(156deg, rgba(var(--cu-vidrio), .07), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 0 var(--cu-filo); transition: border-color .25s, transform .3s var(--cu-curva); } .jg:hover { border-color: rgba(var(--cu-cielo), .35); transform: translateY(-1px); } .jg:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } .jg > svg { color: var(--cu-tenue); } .jg-data { width: 56px; height: 60px; border-radius: 16px; display: grid; place-content: center; text-align: center; background: rgba(var(--cu-cielo), .1); border: 1px solid rgba(var(--cu-cielo), .25); } .jg-data b { font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; } .jg-data span { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--cu-cielo)); } .jg-info { min-width: 0; display: grid; gap: 4px; } .jg-tit { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .jg-quorum { display: grid; gap: 5px; width: 130px; justify-items: end; text-align: right; } .jg-num { font-size: .9rem; color: var(--cu-suave); font-variant-numeric: tabular-nums; } .jg-num b { font-size: 1.25rem; color: var(--cu-texto); } .jg-barra { width: 100%; height: 6px; border-radius: 99px; background: var(--cu-pista); overflow: hidden; } .jg-barra i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--cu-ambar)); transition: width .6s var(--cu-curva); } .jg-barra.ok i { background: rgb(var(--cu-cielo)); box-shadow: 0 0 10px rgba(var(--cu-cielo), .6); } .jg-placar { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } .jg-placar i { font-style: normal; color: var(--cu-tenue); font-size: 1rem; margin: 0 4px; } @media (max-width: 639px) { .jg { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 12px; } .jg > svg { display: none; } .jg-quorum { width: 72px; } .jg-quorum .xs { display: none; } .jg-data { width: 52px; } } /* formulário do jogo: convocados */ .lista-conv { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-template-columns: 1fr; } @media (min-width: 900px) { .lista-conv { grid-template-columns: 1fr 1fr; } } .lc-li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 12px; border-radius: 16px; cursor: pointer; border: 1px solid transparent; transition: background-color .2s, border-color .2s; } .lc-li:hover { background: rgba(var(--cu-vidrio), .05); } .lc-li input { width: 22px; height: 22px; accent-color: rgb(var(--cu-cielo)); flex: none; margin: 0; } .lc-li:has(input:checked) { background: rgba(var(--cu-cielo), .07); border-color: rgba(var(--cu-cielo), .22); } /* painel do jogo */ .grade-jogo { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1100px) { .grade-jogo { grid-template-columns: 380px minmax(0, 1fr); } } .jogo-cab { display: grid; gap: 18px; } .jc-topo { display: flex; gap: 8px; flex-wrap: wrap; } .jc-confronto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .jc-x { font-weight: 700; color: var(--cu-tenue); display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .jc-x b { font-size: 1.8rem; color: var(--cu-texto); } .jc-x i { font-style: normal; } .jc-nomes { display: grid; gap: 3px; min-width: 0; flex-basis: 100%; } .jc-nomes b { font-size: 1.2rem; letter-spacing: -.02em; } .jc-nomes span { font-size: .9rem; color: var(--cu-suave); } .jc-dados { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .jc-dados li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: .92rem; line-height: 1.45; } .jc-dados svg { color: rgb(var(--cu-cielo)); margin-top: 1px; } .cont-resp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } @media (max-width: 639px) { .cont-resp { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cr { appearance: none; text-align: left; cursor: pointer; display: grid; gap: 4px; padding: 16px; border-radius: 20px; font: inherit; color: var(--cu-texto); background: linear-gradient(156deg, rgba(var(--cu-vidrio), .07), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 0 var(--cu-filo); transition: border-color .2s, transform .3s var(--cu-curva); } .cr:hover { transform: translateY(-1px); } .cr-n { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .cr-n small { font-size: 1rem; color: var(--cu-tenue); font-weight: 400; } .cr-t { font-size: .84rem; color: var(--cu-suave); display: flex; align-items: center; gap: 7px; } .cr-t::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c, var(--cu-marca))); box-shadow: 0 0 8px rgba(var(--c, var(--cu-marca)), .6); } .cr-vou { --c: var(--cu-cielo); } .cr-nao { --c: var(--cu-coral); } .cr-talvez { --c: var(--cu-ambar); } .cr-sem { --c: var(--cu-marca); } .cr.on { border-color: rgba(var(--c), .6); box-shadow: inset 0 1px 0 var(--cu-filo), 0 0 0 3px rgba(var(--c), .15); } .cr:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } .acoes-jogo { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 639px) { .acoes-jogo .btn { flex: 1 1 100%; } } .lista-resp .lr-cab { display: grid; gap: 10px; padding: 12px 10px 10px; border-bottom: 1px solid var(--cu-borde); } .lista-resp .la-li { grid-template-columns: auto minmax(0, 1fr) auto; } .lista-resp .lr-env { flex: none; margin-right: 6px; } @media (max-width: 480px) { .lista-resp .lr-env span { display: none; } .lista-resp .lr-env { width: 44px; padding: 0; } } .lr-sim { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; } .pre-lista { white-space: pre-wrap; font: inherit; font-size: .9rem; line-height: 1.5; margin: 0; padding: 14px; border-radius: 14px; background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); max-height: 50vh; overflow: auto; } /* página do atleta (/c/{token}) */ .cv { position: relative; z-index: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 14px; } .cv-topo { display: flex; align-items: center; gap: 12px; padding: 6px 4px; } .cv-topo b { display: block; } .cv-jogo { display: grid; gap: 14px; } .cv-over { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--cu-cielo)); } .cv h1 { margin: 0; font-size: 2rem; letter-spacing: -.035em; } .cv-jogo > p { margin: -8px 0 0; } .cv-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cv-op { appearance: none; cursor: pointer; display: grid; justify-items: center; gap: 8px; padding: 16px 6px; min-height: 92px; border-radius: 20px; font: inherit; font-weight: 700; color: var(--cu-texto); background: rgba(var(--cu-vidrio), .05); border: 1px solid var(--cu-borde); transition: transform .3s var(--cu-curva), background-color .25s, border-color .25s; } .cv-op svg { width: 26px; height: 26px; } .cv-vou { --c: var(--cu-cielo); } .cv-talvez { --c: var(--cu-ambar); } .cv-nao { --c: var(--cu-coral); } .cv-op svg { color: rgb(var(--c)); } .cv-op.sel { background: rgba(var(--c), .16); border-color: rgba(var(--c), .7); box-shadow: 0 0 0 3px rgba(var(--c), .15); transform: scale(1.02); } .cv-vou.sel { background: var(--cu-pulgar); color: var(--cu-pulgar-tinta); } .cv-vou.sel svg { color: currentColor; } .cv-op:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } .cv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .cv-lista li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--cu-borde); } .cv-lista li:last-child { border-bottom: 0; } .cv-lista li.voce { background: rgba(var(--cu-cielo), .08); border-radius: 14px; padding: 8px 10px; } .cv-pe { display: flex; justify-content: center; padding-top: 8px; opacity: .7; } .cv-pe img { height: 20px; width: auto; } @media (prefers-reduced-motion: reduce) { .jg, .cr, .cv-op, .jg-barra i { transition: none; } } .aviso > div > b { display: block; } .aviso > div > span { color: var(--cu-suave); } @media (max-width: 1099px) { .grade-jogo > .pilha { display: contents; } } .jc-adv { width: 52px; height: 52px; font-size: 16px; background: rgba(var(--cu-vidrio), .1) !important; color: var(--cu-texto) !important; } .jc-nomes { flex-basis: 100%; } /* ── diretoria (vai para jogofeito.css ao implementar) ── */ .dr-pres { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; } .dr-pres .av.g { width: 88px; height: 88px; font-size: 1.6rem; background: var(--cu-pulgar); color: var(--cu-pulgar-tinta); border: 0; box-shadow: 0 12px 28px -12px var(--cu-pulgar-brillo); } .dr-pres-info { display: grid; gap: 6px; min-width: 0; } .dr-pres-info h2 { margin: 0; font-size: 1.4rem; letter-spacing: -.03em; } .dr-pres-info p { margin: 0; } .dr-acoes { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 720px) { .dr-pres { grid-template-columns: auto minmax(0, 1fr); } .dr-pres .av.g { width: 64px; height: 64px; font-size: 1.2rem; } .dr-acoes { grid-column: 1 / -1; } .dr-acoes .btn { flex: 1; } } .dr-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .dr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .dr-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dr-grade li { position: relative; } .dr-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 16px 64px 16px 16px; min-height: 100px; border-radius: 22px; text-decoration: none; color: inherit; background: linear-gradient(156deg, rgba(var(--cu-vidrio), .07), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 0 var(--cu-filo); transition: border-color .25s, transform .3s var(--cu-curva); } .dr-card:hover { border-color: rgba(var(--cu-cielo), .35); transform: translateY(-1px); } .dr-card:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } .dr-card > .av { grid-row: 1 / 3; } .dr-card > .st { justify-self: start; grid-column: 2; } .dr-nome { display: grid; gap: 2px; min-width: 0; } .dr-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-nome span { font-size: .86rem; color: var(--cu-suave); } .dr-zap { position: absolute; right: 14px; top: 14px; color: rgb(var(--cu-cielo)); } .dr-novo { border-style: dashed; background: rgba(var(--cu-vidrio), .02); box-shadow: none; padding-right: 16px; } .dr-novo .ic { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--cu-cielo)); background: rgba(var(--cu-cielo), .12); } .dr-papeis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .dr-papeis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dr-papeis li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(var(--cu-vidrio), .04); border: 1px solid var(--cu-borde); } .dr-papeis li > span:nth-child(2) { font-size: .86rem; color: var(--cu-suave); } .dr-func { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .dr-func { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dr-func-op { appearance: none; text-align: left; cursor: pointer; display: grid; gap: 4px; padding: 14px 16px; min-height: 64px; border-radius: 16px; font: inherit; color: var(--cu-texto); background: rgba(var(--cu-vidrio), .04); border: 1px solid var(--cu-borde); transition: border-color .2s, background-color .2s; } .dr-func-op span { font-size: .84rem; color: var(--cu-suave); } .dr-func-op.on { border-color: rgba(var(--cu-cielo), .7); background: rgba(var(--cu-cielo), .1); box-shadow: 0 0 0 3px rgba(var(--cu-cielo), .14); } .dr-func-op:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .dr-card, .dr-func-op { transition: none; } } @media (prefers-reduced-motion: reduce) { .adm-lado { animation: none !important; } } @media (prefers-reduced-motion: reduce) { .lc, .jog, .bola, .campo-viz, .cartao, .marca-lado, .entra > *, .gira { animation: none !important; } } /* ── resultado do jogo, acompanhamento do atleta e financeiro (aprovados em prototipos/acompanhamento-financeiro.html) ── */ .placar-ed { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 12px; } .pl-time { display: grid; justify-items: center; gap: 8px; text-align: center; font-weight: 700; font-size: .92rem; min-width: 0; } .pl-num { display: flex; align-items: center; gap: 6px; } .pl-num b { font-size: 2.6rem; min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .pl-num button, .passo button { appearance: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .06); color: var(--cu-texto); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; } .pl-num button:hover, .passo button:hover { border-color: rgba(var(--cu-cielo), .5); } .pl-x { color: var(--cu-tenue); font-weight: 700; } @media (max-width: 560px) { .placar-ed { grid-template-columns: 1fr auto 1fr; row-gap: 14px; } .pl-ta { grid-column: 1; grid-row: 1; } .pl-tb { grid-column: 3; grid-row: 1; } .pl-a { grid-column: 1; grid-row: 2; justify-self: center; } .pl-x { grid-column: 2; grid-row: 1 / 3; } .pl-b { grid-column: 3; grid-row: 2; justify-self: center; } .pl-num b { font-size: 2rem; } } .cham-res { display: flex; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: var(--cu-suave); } .cham-res span { display: inline-flex; align-items: center; gap: 7px; } .cham-res i { width: 9px; height: 9px; border-radius: 50%; } .cham-res i.ok { background: rgb(var(--cu-cielo)); } .cham-res i.al { background: rgb(var(--cu-ambar)); } .cham-res i.er { background: rgb(var(--cu-coral)); } .chamada { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .chamada li { display: grid; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .03); border-left: 4px solid rgb(var(--cu-cielo)); } .chamada li.ch-atrasado { border-left-color: rgb(var(--cu-ambar)); } .chamada li.ch-faltou { border-left-color: rgb(var(--cu-coral)); opacity: .85; } @media (min-width: 900px) { .chamada li { grid-template-columns: minmax(180px, 1fr) auto; align-items: center; } .chamada .ch-num, .chamada .ch-min, .chamada li > p { grid-column: 1 / -1; } } .ch-quem { display: flex; align-items: center; gap: 12px; min-width: 0; } .escolha .chip.c-ok.on { background: rgb(var(--cu-cielo)); color: var(--cu-pulgar-tinta); } .escolha .chip.c-al.on { background: rgb(var(--cu-ambar)); color: #1E1500; box-shadow: none; } .escolha .chip.c-er.on { background: rgb(var(--cu-coral)); color: #2A0606; box-shadow: none; } .ch-min { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--cu-suave); flex-wrap: wrap; } .ch-min input { width: 76px; height: 44px; border-radius: 12px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-texto); font: inherit; text-align: center; } .ch-num { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 8px 12px; font-size: .84rem; color: var(--cu-suave); } @media (min-width: 640px) { .ch-num { grid-template-columns: repeat(4, auto auto); } } .passo { display: inline-flex; align-items: center; gap: 4px; } .passo b { min-width: 26px; text-align: center; font-size: 1.05rem; color: var(--cu-texto); font-variant-numeric: tabular-nums; } .passo button { width: 40px; height: 40px; font-size: 1.1rem; } .cart { display: inline-flex; align-items: center; gap: 6px; } .cart::before { content: ''; width: 10px; height: 14px; border-radius: 2px; } .cart.am::before { background: #F5C518; } .cart.vm::before { background: #E5484D; } .ac-cab { display: grid; gap: 22px; } @media (min-width: 1000px) { .ac-cab { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } } .ac-quem { display: flex; gap: 18px; align-items: center; min-width: 0; } .ac-quem h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; } .ac-quem p { margin: 4px 0 0; } .ac-indice { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .ac-nota { display: grid; gap: 2px; } .ac-nota b { font-size: 3.4rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .ac-aneis { display: flex; gap: 14px; } .ac-anel { position: relative; width: 88px; display: grid; justify-items: center; gap: 4px; text-align: center; } .ac-anel svg { width: 72px; height: 72px; transform: rotate(-90deg); } .ac-pista { fill: none; stroke: var(--cu-pista); stroke-width: 7; } .ac-arco { fill: none; stroke: rgb(var(--c)); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(var(--c), .5)); } .ac-anel b { position: absolute; top: 25px; left: 0; right: 0; font-size: .95rem; font-variant-numeric: tabular-nums; } .ac-anel span { font-size: .74rem; color: var(--cu-suave); } .ac-nums { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .ac-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ac-num { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--cu-borde); background: linear-gradient(156deg, rgba(var(--cu-vidrio), .06), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); } .ac-num span { font-size: .8rem; color: var(--cu-suave); } .ac-num b { font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ac-num b small { font-size: .8rem; color: var(--cu-suave); font-weight: 400; } .ac-num > small { font-size: .76rem; color: var(--cu-tenue); } .ac-num.er b { color: var(--cu-baja-tinta); } .ac-num.al b { color: rgb(var(--cu-ambar)); } .ac-grade { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1100px) { .ac-grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } } .ac-hist, .ac-oc { list-style: none; margin: 0; padding: 0; display: grid; } .ac-hist li, .ac-oc li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--cu-borde); } .ac-oc li { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; } .ac-hist li:last-child, .ac-oc li:last-child { border-bottom: 0; } .ac-d { font-size: .82rem; color: var(--cu-tenue); font-variant-numeric: tabular-nums; } .ac-j { display: grid; min-width: 0; } .ac-j span { font-size: .8rem; color: var(--cu-suave); } .ac-oc small { display: block; font-size: .74rem; color: var(--cu-tenue); margin-top: 2px; } .ac-meses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (min-width: 640px) { .ac-meses { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .ac-meses li { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; text-align: center; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .03); } .ac-meses b { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cu-suave); } .ac-meses i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; } .ac-meses i svg { width: 18px; height: 18px; } .ac-meses span { font-size: .7rem; color: var(--cu-tenue); } .am-pago i { background: rgba(var(--cu-cielo), .15); color: rgb(var(--cu-cielo)); } .am-atraso i { background: rgba(var(--cu-ambar), .18); color: rgb(var(--cu-ambar)); } .am-aberto i { background: var(--cu-pista); color: var(--cu-suave); } .fin-kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1000px) { .fin-kpis { grid-template-columns: 1.3fr 1fr 1fr 1fr; } } .fk { display: grid; gap: 4px; padding: 18px; border-radius: 22px; border: 1px solid var(--cu-borde); background: linear-gradient(156deg, rgba(var(--cu-vidrio), .07), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); box-shadow: inset 0 1px 0 var(--cu-filo); } .fk span { font-size: .82rem; color: var(--cu-suave); } .fk b { font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .fk small { font-size: .76rem; color: var(--cu-tenue); } .fk-saldo { grid-column: 1 / -1; } @media (min-width: 1000px) { .fk-saldo { grid-column: auto; } } .fk-saldo b { font-size: 2.2rem; color: rgb(var(--cu-cielo)); } .fk b.ent, .fl-entrada .fl-v { color: var(--cu-sube-tinta); } .fk b.sai, .fl-saida .fl-v { color: var(--cu-baja-tinta); } .fin-barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 190px; } .fb { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; justify-items: center; } .fb-par { display: flex; align-items: flex-end; gap: 4px; height: 100%; } .fb-par i { width: 14px; border-radius: 6px 6px 3px 3px; } .fb-par i.ent { background: rgb(var(--cu-cielo)); } .fb-par i.sai { background: rgb(var(--cu-coral)); opacity: .85; } .fb span { font-size: .72rem; color: var(--cu-tenue); text-transform: uppercase; letter-spacing: .08em; } .leg-fin { display: flex; gap: 12px; font-size: .78rem; color: var(--cu-suave); } .leg-fin span { display: inline-flex; gap: 6px; align-items: center; } .leg-fin i { width: 9px; height: 9px; border-radius: 3px; } .leg-fin i.ent { background: rgb(var(--cu-cielo)); } .leg-fin i.sai { background: rgb(var(--cu-coral)); } .fin-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .fin-cats li { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: .9rem; } .fin-cats i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--cu-coral)) var(--w), var(--cu-pista) var(--w)); } .fin-lista, .fin-mens { list-style: none; margin: 0; padding: 0; display: grid; } .fin-lista li, .fin-mens li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cu-borde); } .fin-lista li:last-child, .fin-mens li:last-child { border-bottom: 0; } .fl-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; } .fl-entrada .fl-ic { background: rgba(var(--cu-cielo), .12); color: rgb(var(--cu-cielo)); } .fl-saida .fl-ic { background: rgba(var(--cu-coral), .12); color: rgb(var(--cu-coral)); } .fl-saida .fl-ic svg { transform: rotate(90deg); } .fl-v { white-space: nowrap; font-variant-numeric: tabular-nums; } .fin-mens .st { white-space: nowrap; } @media (max-width: 560px) { .fin-mens li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'av nm z b' 'av st st st'; row-gap: 6px; } .fin-mens li > .av { grid-area: av; } .fin-mens .nome-l { grid-area: nm; } .fin-mens .fm-st { grid-area: st; } .fin-mens .fm-z { grid-area: z; } .fin-mens .fm-b { grid-area: b; } } .fin-lista, .fin-mens, .ac-hist, .chamada { min-width: 0; } .fin-lista .nome-l, .fin-mens .nome-l { min-width: 0; flex: 1 1 0; } .fin-lista .nome-l strong { white-space: normal; } .abas a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 12px; font-size: .9rem; font-weight: 700; color: var(--cu-suave); text-decoration: none; white-space: nowrap; transition: color .3s, background-color .3s; } .abas a:hover { color: var(--cu-texto); } .abas a.on { color: var(--cu-pulgar-tinta); background: var(--cu-pulgar); box-shadow: 0 8px 18px -8px var(--cu-pulgar-brillo), inset 0 1px 0 rgba(255,255,255,.45); } .ac-como { margin: -8px 0 0; grid-column: 1 / -1; } a.ac-j { color: inherit; text-decoration: none; } a.ac-j:hover b { text-decoration: underline; } .ac-oc .btn-ico { width: 40px; height: 40px; background: transparent; } .res-placar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; flex-wrap: wrap; text-align: center; } .res-placar span { font-weight: 700; color: var(--cu-suave); min-width: 0; } .res-placar b { font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .res-placar i { font-style: normal; color: var(--cu-tenue); } .fin-mes { display: inline-flex; align-items: center; gap: 6px; } .fin-mes b { min-width: 128px; text-align: center; } .fin-mes .btn-ico[disabled] { opacity: .35; cursor: default; } .fin-mes .btn-ico:last-child svg { transform: none; } a.nome-l { color: inherit; text-decoration: none; } .cv-meu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 560px) { .cv-meu { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cv-meu div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .04); } .cv-meu span { font-size: .78rem; color: var(--cu-suave); } .cv-meu b { font-size: 1.4rem; font-variant-numeric: tabular-nums; } .cv-meu b small { font-size: .8rem; color: var(--cu-suave); font-weight: 400; } .cv-meu small { font-size: .74rem; color: var(--cu-tenue); } /* ── Financeiro › Relatório (prévia em folha clara, igual ao PDF) ── */ :root { --papel-branco: #FFFFFF; --papel-pago: #E3F2E9; --papel-atraso: #FBE9E7; --papel: #FFFFFF; --papel-tinta: #1E2622; --papel-suave: #55635B; --papel-linha: #DDE5E0; --papel-fundo: #F4F7F5; --papel-verde: #056638; --papel-vermelho: #B42318; --papel-ambar: #8A5A00; } .rel-grade { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1100px) { .rel-grade { grid-template-columns: 340px minmax(0, 1fr); } .rel-op { position: sticky; top: 20px; } } .rel-chk { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .03); cursor: pointer; min-height: 44px; } .rel-chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: rgb(var(--cu-cielo)); flex: none; } .rel-chk b { display: block; font-size: .92rem; } .rel-chk small { display: block; font-size: .78rem; color: var(--cu-tenue); margin-top: 2px; } .rel-priv { border-color: rgba(var(--cu-ambar), .45); } .rel-acoes .btn { width: 100%; justify-content: center; } .rel-prev { min-width: 0; } .rel-prev-t { margin: 0 0 8px; } .rel-folha { background: var(--papel); color: var(--papel-tinta); border-radius: 18px; padding: 28px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); font-size: .88rem; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .rel-folha > section { min-width: 0; overflow-x: auto; } .rel-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; padding-bottom: 18px; border-bottom: 2px solid var(--papel-verde); } .rel-esc { width: 52px; height: 52px; border-radius: 50%; background: var(--papel-verde); color: var(--papel-branco); display: grid; place-items: center; font-weight: 700; object-fit: cover; } .rel-cab h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; } .rel-cab p { margin: 2px 0 0; color: var(--papel-suave); } .rel-over { font-size: .7rem !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--papel-verde) !important; margin: 0 !important; } .rel-emit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .76rem; color: var(--papel-suave); } @media (min-width: 700px) { .rel-cab { grid-template-columns: auto minmax(0, 1fr) auto; } .rel-emit { grid-column: auto; display: grid; text-align: right; } } .rel-folha h3 { margin: 0 0 10px; font-size: .95rem; } .rel-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 700px) { .rel-res { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .rel-res div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--papel-fundo); } .rel-res span { font-size: .76rem; color: var(--papel-suave); } .rel-res b { font-size: 1.1rem; font-variant-numeric: tabular-nums; } .rel-res .fim { background: var(--papel-verde); color: var(--papel-branco); } .rel-res .fim span { color: rgba(255,255,255,.85); } .rel-folha .e { color: var(--papel-verde); } .rel-folha .s { color: var(--papel-vermelho); } .rel-nota { margin: 8px 0 0; font-size: .8rem; color: var(--papel-suave); } .rel-duas { display: grid; gap: 16px; } @media (min-width: 760px) { .rel-duas { grid-template-columns: 1fr 1fr; } } .rel-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .rel-tab th { text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--papel-suave); padding: 6px 8px; border-bottom: 1px solid var(--papel-linha); } .rel-tab td { padding: 7px 8px; border-bottom: 1px solid var(--papel-linha); } .rel-tab tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--papel-tinta); } .rel-tab .n { text-align: right; white-space: nowrap; } .rel-tab .c { text-align: center; } .rel-lanc td:nth-child(2) { min-width: 180px; } .rel-lanc, .rel-mens { min-width: 520px; } .rel-tab { min-width: 300px; } .rel-st { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; } .rel-st.pago { background: var(--papel-pago); color: var(--papel-verde); } .rel-st.aberto { background: var(--papel-fundo); color: var(--papel-suave); } .rel-st.atraso { background: var(--papel-atraso); color: var(--papel-vermelho); } .rel-rod { display: flex; justify-content: space-between; gap: 10px; font-size: .72rem; color: var(--papel-suave); border-top: 1px solid var(--papel-linha); padding-top: 10px; } @media (max-width: 560px) { .rel-folha { padding: 18px; border-radius: 14px; } } #rel-imp { display: none; } @media print { html.imprimindo-rel, html.imprimindo-rel body { background: var(--papel-branco) !important; } html.imprimindo-rel body > *:not(#rel-imp) { display: none !important; } html.imprimindo-rel #rel-imp { display: block; } #rel-imp .rel-folha { box-shadow: none; border-radius: 0; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } #rel-imp .rel-folha > section { overflow: visible; } #rel-imp .rel-tab tr { break-inside: avoid; } #rel-imp .rel-res, #rel-imp .rel-cab { break-inside: avoid; } #rel-imp h3 { break-after: avoid; } @page { margin: 14mm; } } .rel-vazio { color: var(--papel-suave); text-align: center; } @media (max-width: 560px) { #abas-fin { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } #abas-fin button { padding: 0 8px; } } /* ── Jogos sem resultado (aviso no Início, na lista de jogos e no menu) ── */ .pend-res { display: grid; gap: 16px; padding: 22px 24px; border-radius: 26px; border: 1px solid rgba(var(--cu-ambar), .45); background: linear-gradient(156deg, rgba(var(--cu-ambar), .12), rgba(var(--cu-vidrio), .02) 55%), var(--cu-tarjeta); box-shadow: inset 0 1px 0 var(--cu-filo); } @media (min-width: 1000px) { .pend-res { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; } } .pr-cab { display: flex; gap: 14px; align-items: flex-start; } .pr-ic { flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: rgba(var(--cu-ambar), .18); color: rgb(var(--cu-ambar)); } .pr-cab h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; } .pr-cab p { margin: 4px 0 0; } .pr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pr-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(var(--cu-vidrio), .04); border: 1px solid var(--cu-borde); } .pr-data { flex: none; width: 46px; text-align: center; line-height: 1.1; } .pr-data b { display: block; font-size: 1.2rem; } .pr-data span { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cu-tenue); } .pr-lista .nome-l { flex: 1 1 0; min-width: 0; } .pr-lista .btn { flex: none; } .pr-mais { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; font-size: .84rem; } @media (max-width: 560px) { .pr-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); } .pr-lista .btn { grid-column: 1 / -1; width: 100%; justify-content: center; } } .menu-n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; background: rgb(var(--cu-ambar)); color: var(--grafite); } .inferior a { position: relative; } .inferior .menu-n { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; font-size: .66rem; } .jg-pend { display: grid; justify-items: end; gap: 6px; } /* ── Novo lançamento (aprovado em prototipos/financeiro-lancamento.html) ── */ /* ── Financeiro › Novo lançamento (janela grande: formulário + resumo) ── */ dialog.nl-janela { padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; } dialog.nl-janela::backdrop { background: rgba(4, 8, 6, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .nl-janela[open] { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--cu-hoja); color: var(--cu-texto); } @media (min-width: 900px) { .nl-janela[open] { inset: 0; margin: auto; width: min(1060px, calc(100% - 48px)); height: min(900px, calc(100dvh - 48px)); border-radius: 28px; border: 1px solid var(--cu-borde); box-shadow: inset 0 1px 0 var(--cu-filo), 0 40px 80px -30px rgba(0,0,0,.6); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } } .nl-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--cu-borde); } .nl-cab h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; } .nl-corpo { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .nl-corpo { grid-template-columns: minmax(0, 1fr) 370px; } } .nl-form { overflow-y: auto; padding: 20px; display: grid; gap: 18px; align-content: start; } @media (min-width: 900px) { .nl-form { padding: 24px 28px 32px; } } .nl-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .nl-tipo { appearance: none; display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; min-height: 64px; border-radius: 18px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .04); color: var(--cu-texto); font: inherit; cursor: pointer; } .nl-tipo b { display: block; font-size: .95rem; } .nl-tipo small { display: block; font-size: .74rem; color: var(--cu-tenue); margin-top: 2px; } .nl-ti { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--cu-vidrio), .08); } .t-entrada .nl-ti { color: rgb(var(--cu-cielo)); } .t-saida .nl-ti { color: rgb(var(--cu-coral)); } .t-saida .nl-ti svg { transform: rotate(90deg); } .t-mensalidade .nl-ti { color: rgb(var(--cu-ambar)); } .nl-tipo.on { border-color: rgba(var(--cu-cielo), .7); background: rgba(var(--cu-cielo), .1); box-shadow: 0 0 0 1px rgba(var(--cu-cielo), .5) inset; } .nl-tipo.t-saida.on { border-color: rgba(var(--cu-coral), .7); background: rgba(var(--cu-coral), .1); box-shadow: 0 0 0 1px rgba(var(--cu-coral), .5) inset; } .nl-tipo.t-mensalidade.on { border-color: rgba(var(--cu-ambar), .7); background: rgba(var(--cu-ambar), .1); box-shadow: 0 0 0 1px rgba(var(--cu-ambar), .5) inset; } @media (max-width: 560px) { .nl-tipo { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; } .nl-tipo small { display: none; } } .nl-bloco { display: grid; gap: 14px; padding: 18px; border-radius: 22px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .025); } .nl-bloco > header { display: flex; gap: 12px; align-items: flex-start; } .nl-bloco h3 { margin: 0; font-size: 1rem; } .nl-bloco header p { margin: 3px 0 0; } .nl-n { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: rgba(var(--cu-cielo), .14); color: rgb(var(--cu-cielo)); } .nl-busca { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); color: var(--cu-suave); } .nl-busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--cu-texto); font: inherit; outline: none; } .nl-busca:focus-within { border-color: rgba(var(--cu-cielo), .6); } .nl-atls { display: grid; gap: 6px; max-height: 236px; overflow-y: auto; padding-right: 2px; } @media (min-width: 640px) { .nl-atls { grid-template-columns: 1fr 1fr; } } .nl-atl { appearance: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 56px; border-radius: 14px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .03); color: var(--cu-texto); font: inherit; text-align: left; cursor: pointer; } .nl-atl .nome-l { flex: 1; min-width: 0; } .nl-atl .nome-l span { font-size: .76rem; } .nl-atl.on { border-color: rgba(var(--cu-cielo), .7); background: rgba(var(--cu-cielo), .1); } .nl-atl.on > svg { color: rgb(var(--cu-cielo)); flex: none; } .nl-atl[disabled] { opacity: .45; cursor: default; } .nl-al { color: rgb(var(--cu-ambar)); } .nl-passo { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--cu-suave); } .nl-meses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } @media (min-width: 640px) { .nl-meses { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .nl-mes { appearance: none; display: grid; justify-items: center; gap: 1px; padding: 8px 2px 6px; min-height: 64px; border-radius: 14px; border: 1px dashed var(--cu-borde); background: transparent; color: var(--cu-suave); font: inherit; cursor: pointer; } .nl-mes b { font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; } .nl-mes span { font-size: .7rem; color: var(--cu-tenue); } .nl-mes i { font-style: normal; font-size: .62rem; min-height: 1em; } .nl-mes.vai { border-style: solid; border-color: transparent; background: var(--cu-pulgar); color: var(--cu-pulgar-tinta); } .nl-mes.vai span, .nl-mes.vai i { color: inherit; opacity: .85; } .nl-mes.atr { border-style: solid; border-color: rgba(var(--cu-ambar), .6); color: rgb(var(--cu-ambar)); } .nl-mes.pago { border-style: solid; background: rgba(var(--cu-vidrio), .06); opacity: .55; cursor: default; } .nl-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: var(--cu-suave); } .nl-leg span { display: inline-flex; gap: 6px; align-items: center; } .nl-leg i { width: 10px; height: 10px; border-radius: 3px; } .nl-leg i.vai { background: var(--cu-pulgar); } .nl-leg i.atr { border: 1px solid rgb(var(--cu-ambar)); } .nl-leg i.pago { background: rgba(var(--cu-vidrio), .2); } .nl-pre { display: flex; align-items: center; height: 50px; border-radius: 16px; border: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .05); padding-left: 14px; } .nl-pre span { color: var(--cu-tenue); font-weight: 700; } .nl-pre input { border: 0 !important; background: none !important; height: 100% !important; box-shadow: none !important; } .nl-pre:focus-within { border-color: rgba(var(--cu-cielo), .6); } .nl-grande .nl-pre { height: 62px; } .nl-grande .nl-pre input { font-size: 1.5rem !important; font-weight: 700; } .nl-conta { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-radius: 16px; background: rgba(var(--cu-vidrio), .05); font-size: .9rem; color: var(--cu-suave); } .nl-conta b { text-align: right; color: var(--cu-texto); font-variant-numeric: tabular-nums; } .nl-conta b.s { color: var(--cu-baja-tinta); } .nl-conta .tot { padding-top: 8px; border-top: 1px solid var(--cu-borde); font-size: 1.05rem; color: var(--cu-texto); } .nl-anexo { appearance: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-radius: 16px; border: 1px dashed var(--cu-borde); background: transparent; color: var(--cu-suave); font: inherit; text-align: left; cursor: pointer; } .nl-anexo b { display: block; color: var(--cu-texto); font-size: .9rem; } .nl-anexo small { font-size: .76rem; color: var(--cu-tenue); } .nl-anexo.ok { border-style: solid; border-color: rgba(var(--cu-cielo), .5); color: rgb(var(--cu-cielo)); } .nl-prev { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(var(--cu-vidrio), .04); } .nl-prev ul { list-style: none; margin: 0; padding: 0; display: grid; max-height: 220px; overflow-y: auto; } .nl-prev li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--cu-borde); font-size: .86rem; font-variant-numeric: tabular-nums; } .nl-prev li:last-child { border-bottom: 0; } .nl-prev li > span:first-child { color: var(--cu-tenue); } .nl-res { display: none; } @media (min-width: 900px) { .nl-res { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-left: 1px solid var(--cu-borde); background: rgba(var(--cu-vidrio), .03); overflow-y: auto; } } .nl-res .rot { margin: 0; } .nl-res h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; } .nl-res dl { margin: 0; display: grid; gap: 10px; } .nl-res dl div { display: grid; gap: 2px; } .nl-res dt { font-size: .74rem; color: var(--cu-tenue); } .nl-res dd { margin: 0; font-size: .9rem; } .nl-tot { display: grid; gap: 2px; padding: 16px; border-radius: 18px; background: rgba(var(--cu-cielo), .1); border: 1px solid rgba(var(--cu-cielo), .35); } .nl-tot span { font-size: .8rem; color: var(--cu-suave); } .nl-tot b { font-size: 1.8rem; letter-spacing: -.03em; color: var(--cu-sube-tinta); font-variant-numeric: tabular-nums; } .nl-tot.neg { background: rgba(var(--cu-coral), .1); border-color: rgba(var(--cu-coral), .35); } .nl-tot.neg b { color: var(--cu-baja-tinta); } .nl-nota { margin: 0; line-height: 1.5; } .nl-bts { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; } .nl-bts .btn { justify-content: center; min-width: 0; padding-inline: 14px; white-space: normal; line-height: 1.15; } .nl-rodmob { display: flex; align-items: center; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cu-borde); background: var(--cu-hoja); } .nl-rodmob > div { flex: 1; display: grid; } .nl-rodmob b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .nl-rodmob .btn { min-width: 0; white-space: normal; line-height: 1.15; text-align: center; } .nl-rodmob > div { min-width: 0; } @media (min-width: 900px) { .nl-rodmob { display: none; } } @media (max-width: 899px) { .nl-janela.ver-res .nl-form { display: none; } .nl-janela.ver-res .nl-res { display: flex; flex-direction: column; gap: 14px; padding: 20px; overflow-y: auto; } .nl-janela.ver-res .nl-bts { display: none; } } .nl-form .escolha { display: flex; flex-wrap: wrap; } .nl-form .escolha .chip { flex: 1 1 auto; } @media (min-width: 640px) { .nl-form .escolha .chip { flex: 0 0 auto; } } .nl-rodmob b { white-space: nowrap; } .nl-rodmob .link { justify-self: start; padding: 2px 0; min-height: 0; } .fin-pend li { flex-wrap: wrap; } .fin-pend .fp-st { white-space: nowrap; } .fin-pend li.venc .fl-v { text-decoration: none; } @media (max-width: 560px) { .fin-pend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'ic nm v' 'ic st st' 'ic x b'; row-gap: 6px; } .fin-pend .fl-ic { grid-area: ic; } .fin-pend .nome-l { grid-area: nm; } .fin-pend .fl-v { grid-area: v; } .fin-pend .fp-st { grid-area: st; } .fin-pend .fp-x { grid-area: x; } .fin-pend .fp-b { grid-area: b; } } @media (max-width: 560px) { .fin-lista:not(.fin-pend) li { flex-wrap: wrap; row-gap: 4px; } .fin-lista:not(.fin-pend) .nome-l { flex: 1 1 calc(100% - 56px); } .fin-lista:not(.fin-pend) .fl-v { margin-left: 52px; margin-right: auto; } } /* ── Listas em grade (elenco e mensalidades) ── */ .eg-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } .eg-grupo { display: grid; gap: 12px; } .eg-grupo > h2 { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 1rem; } .eg-grupo > h2 small { font-size: .8rem; font-weight: 400; color: var(--cu-tenue); } .eg-grade { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .eg-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .eg-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .eg-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; min-height: 84px; border-radius: 20px; border: 1px solid var(--cu-borde); background: linear-gradient(156deg, rgba(var(--cu-vidrio), .06), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); color: var(--cu-texto); text-decoration: none; transition: border-color .25s, transform .25s; } .eg-card:hover { border-color: rgba(var(--cu-cielo), .45); } .eg-foto { position: relative; flex: none; } .eg-foto .av { width: 54px; height: 54px; font-size: 1rem; } .eg-num { position: absolute; right: -6px; bottom: -4px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--cu-texto); color: var(--cu-fondo); border: 2px solid var(--cu-hoja); } .eg-info { flex: 1; min-width: 0; display: grid; gap: 4px; } .eg-info strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eg-info > span { font-size: .8rem; color: var(--cu-suave); } .eg-tags { display: flex; flex-wrap: wrap; gap: 4px; } .eg-tags .st { font-size: .7rem; } .eg-card .btn-ico { flex: none; position: relative; z-index: 1; } .eg-card.fora { opacity: .6; } /* mensalidades */ .mg-filtro { display: flex; flex-wrap: wrap; gap: 6px; } .mg-card { display: grid; gap: 12px; padding: 14px; border-radius: 20px; border: 1px solid var(--cu-borde); background: linear-gradient(156deg, rgba(var(--cu-vidrio), .06), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); } .mg-card.atraso { border-color: rgba(var(--cu-coral), .45); } .mg-topo { display: flex; align-items: center; gap: 12px; min-width: 0; } .mg-topo .av { width: 46px; height: 46px; } .mg-topo .nome-l { flex: 1; min-width: 0; color: inherit; text-decoration: none; } .mg-topo .nome-l strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mg-valor { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; } .mg-acoes { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; } .mg-acoes .btn { justify-content: center; } .mg-pago { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .82rem; color: var(--cu-suave); } .mg-grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; } .mg-grupo-cab h3 { margin: 0; font-size: 1rem; display: flex; gap: 8px; align-items: center; } .mg-grupo-cab h3 i { width: 10px; height: 10px; border-radius: 50%; } .mg-grupo-cab h3 i.er { background: rgb(var(--cu-coral)); } .mg-grupo-cab h3 i.al { background: rgb(var(--cu-ambar)); } .mg-grupo-cab h3 i.ok { background: rgb(var(--cu-cielo)); } .mg-recolhe { appearance: none; border: 0; background: none; color: rgb(var(--cu-cielo)); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; min-height: 44px; } .eg-card { position: relative; } .eg-link { position: absolute; inset: 0; border-radius: inherit; z-index: 0; } .eg-link:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } .eg-card .eg-foto, .eg-card .eg-info { pointer-events: none; } .mg-val-ed { appearance: none; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; min-height: 44px; cursor: pointer; border-radius: 10px; } .mg-val-ed svg { width: 15px; height: 15px; color: var(--cu-tenue); } .mg-val-ed:hover svg { color: rgb(var(--cu-cielo)); } .mg-pago .btn { flex: none; } .fl-clica { cursor: pointer; } .fl-clica:hover strong { text-decoration: underline; } .nl-tipos2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nl-perigo { border-color: rgba(var(--cu-coral), .35); background: rgba(var(--cu-coral), .04); } .nl-perigo h3 { font-size: .95rem; } /* auditoria · celular: filtros quebram linha (nada escondido) e o fim das listas fica livre do botão flutuante */ @media (max-width: 1023px) { .chips { flex-wrap: wrap; overflow: visible; } .conteudo { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); } } .eg-card.fora { opacity: .8; } /* ── Editar sempre à vista (01/11/2026) ── */ .abas a svg { width: 16px; height: 16px; margin-right: 6px; } .eg-acoes { flex: none; display: flex; gap: 6px; position: relative; z-index: 1; } .dr-bts { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; } .dr-bts .btn-ico { width: 40px; height: 40px; } .dr-bts .btn-ico:last-child { color: rgb(var(--cu-cielo)); } .dr-grade .dr-card { padding-right: 104px; } .ac-editar { margin-top: 10px; } @media (min-width: 1024px) { .ac-editar { display: none; } } /* ── Pra hoje, carregamento e desfazer (aprovados em prototipos/inicio-pra-hoje.html) ── */ /* ── Pra hoje, carregamento e desfazer ── */ .ph { display: grid; gap: 14px; } .ph-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ph-cab h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; } .ph-grade { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .ph-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .ph-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ph-card { --c: var(--cu-cielo); display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 22px; border: 1px solid rgba(var(--c), .4); background: linear-gradient(156deg, rgba(var(--c), .12), rgba(var(--cu-vidrio), .02) 60%), var(--cu-tarjeta); } .ph-card.al { --c: var(--cu-ambar); } .ph-card.er { --c: var(--cu-coral); } .ph-card.ok { --c: var(--cu-violeta); } .ph-top { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; color: var(--cu-suave); text-transform: uppercase; letter-spacing: .08em; } .ph-top i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--c), .18); color: rgb(var(--c)); font-style: normal; } .ph-top i svg { width: 17px; height: 17px; } .ph-num { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; } .ph-num small { font-size: .95rem; color: var(--cu-suave); font-weight: 400; } .ph-txt { font-size: .86rem; color: var(--cu-suave); line-height: 1.45; margin: 0; } .ph-card .linha { margin-top: auto; } .ph-tudo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--cu-borde); color: var(--cu-suave); font-size: .9rem; } .ph-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; } .ph-sub h2 { margin: 0; font-size: 1.05rem; } /* barra de carregamento */ .carga { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; overflow: hidden; background: rgba(var(--cu-cielo), .15); } .carga i { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: rgb(var(--cu-cielo)); box-shadow: 0 0 12px rgb(var(--cu-cielo)); border-radius: 0 3px 3px 0; animation: carga 1.1s ease-in-out infinite; } @keyframes carga { 0% { transform: translateX(-100%); } 100% { transform: translateX(230%); } } @media (prefers-reduced-motion: reduce) { .carga i { animation: none; width: 60%; } } .esq { display: grid; gap: 12px; } .esq-bloco { border-radius: 20px; border: 1px solid var(--cu-borde); background: linear-gradient(90deg, rgba(var(--cu-vidrio), .03) 0%, rgba(var(--cu-vidrio), .09) 50%, rgba(var(--cu-vidrio), .03) 100%); background-size: 200% 100%; animation: brilho 1.4s linear infinite; } @keyframes brilho { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .esq-bloco { animation: none; } } /* desfazer */ .desfazer { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 95; width: min(520px, calc(100% - 32px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 18px; background: var(--cu-texto); color: var(--cu-fondo); box-shadow: 0 20px 50px -15px rgba(0,0,0,.6); overflow: hidden; } .desfazer b { font-size: .95rem; } .desfazer span { font-size: .8rem; opacity: .75; display: block; } .desfazer button { appearance: none; border: 0; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--cu-fondo); color: rgb(var(--cu-cielo)); font: inherit; font-weight: 700; cursor: pointer; } .desfazer .dz-tempo { position: absolute; left: 0; bottom: 0; height: 3px; background: rgb(var(--cu-cielo)); } .desfazer svg { width: 20px; height: 20px; } @media (max-width: 1023px) { .desfazer { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } .saindo { opacity: .35; text-decoration: line-through; } .desfazer .dz-tempo { width: 100%; transform-origin: left; animation: dz 8s linear forwards; } @keyframes dz { to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .desfazer .dz-tempo { animation: none; } } .ph-cobrar { list-style: none; margin: 0; padding: 0; display: grid; max-height: 50vh; overflow-y: auto; } .ph-cobrar li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cu-borde); } .ph-cobrar li:last-child { border-bottom: 0; } .ph-cobrar .nome-l { flex: 1; min-width: 0; } .cu-escena > .ph { margin-bottom: 4px; } /* Financeiro › Relatórios flexíveis e Categorias (01/11/2026) */ .rm-grade { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .rm-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rm-card { appearance: none; display: grid; gap: 6px; justify-items: start; text-align: left; padding: 18px; min-height: 132px; border-radius: 22px; border: 1px solid var(--cu-borde); background: linear-gradient(156deg, rgba(var(--cu-vidrio), .07), rgba(var(--cu-vidrio), .015) 60%), var(--cu-tarjeta); color: var(--cu-texto); font: inherit; cursor: pointer; transition: border-color .25s, transform .25s; } .rm-card:hover { border-color: rgba(var(--cu-cielo), .55); transform: translateY(-2px); } .rm-card b { font-size: 1.02rem; } .rm-card > span:last-child { font-size: .84rem; color: var(--cu-suave); line-height: 1.4; } .rm-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--cu-cielo), .14); color: rgb(var(--cu-cielo)); margin-bottom: 4px; } .rel-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rel-barras li { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto 42px; gap: 10px; align-items: center; font-size: .85rem; } .rel-barras i { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--papel-verde) var(--w), var(--papel-fundo) var(--w)); } .rel-barras b { font-variant-numeric: tabular-nums; } .rel-barras small { color: var(--papel-suave); text-align: right; } .rel-gr td { font-weight: 700; background: var(--papel-fundo); } .rel-mini { font-size: .74rem; color: var(--papel-suave); margin-top: 2px; } .ct-lista { list-style: none; margin: 0; padding: 0; display: grid; } .ct-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cu-borde); } .ct-lista li:last-child { border-bottom: 0; } .ct-lista .nome-l { flex: 1; min-width: 0; } .ct-cor { width: 12px; height: 12px; border-radius: 4px; flex: none; } .ct-saida { background: rgb(var(--cu-coral)); } .ct-entrada { background: rgb(var(--cu-cielo)); } .rel-op .escolha { display: flex; flex-wrap: wrap; } .rel-op .escolha .chip { height: 36px; padding: 0 12px; } .ct-arq .nome-l strong { color: var(--cu-suave); } .ct-arq .ct-cor { opacity: .4; } .ct-lista .btn-ico { flex: none; } .rel-prev-t { margin: 0 0 8px; } @media (max-width: 560px) { .rm-grade { grid-template-columns: minmax(0, 1fr); } .rm-card { min-height: 0; } .rel-barras li { grid-template-columns: minmax(0, 1fr) auto; } .rel-barras li i { grid-column: 1 / -1; grid-row: 2; } .rel-barras li small { display: none; } } /* Assinatura no rodapé do menu (01/11/2026, como no SONVI): discreta, logo acima da conta; no celular fica no fim de "Mais" */ .assinatura.menu-cred { justify-content: flex-start; padding: 2px 14px 4px; font-size: .68rem; opacity: .8; } .assinatura.menu-cred img { height: 11px; } .assinatura.menu-cred .av-marca { min-height: 28px; } .assinatura.mais-cred { padding: 8px 0 0; } /* Financeiro › meses de qualquer ano, histórico em lote e recibo (02/11/2026) */ .nl-anonav { display: inline-flex; align-items: center; gap: 6px; } .nl-anonav b { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; } @media (min-width: 600px) { .nl-meses.nl-ano { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .nl-leg i.sem { border: 1px dashed var(--cu-borde); } .nl-n.ok { background: var(--cu-pulgar); color: var(--cu-pulgar-tinta); } .nl-n.ok svg { width: 16px; height: 16px; } .cab-hs { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .hs-passo > header { gap: 12px; align-items: flex-start; } .hs-rola { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; -webkit-overflow-scrolling: touch; } .hs-rola:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; border-radius: 8px; } .hs-tab { border-collapse: separate; border-spacing: 4px; } .hs-tab th { font-size: .74rem; font-weight: 700; color: var(--cu-suave); text-align: center; } .hs-tab td { padding: 0; vertical-align: middle; } .hs-tab .hs-nome { position: sticky; left: 0; z-index: 1; background: var(--cu-hoja); text-align: left; white-space: nowrap; padding-right: 8px; font-size: .86rem; color: var(--cu-texto); } .hs-tab tbody .hs-nome { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-content: center; height: 44px; } .hs-n { grid-row: 1; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .hs-v { grid-row: 2; font-weight: 400; } .hs-lin { grid-row: 1 / 3; grid-column: 2; align-self: center; appearance: none; border: 0; background: none; color: rgb(var(--cu-cielo)); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; padding: 6px 4px; } .hs-col { appearance: none; border: 1px solid var(--cu-borde); background: transparent; color: var(--cu-suave); font: inherit; font-size: .74rem; font-weight: 700; text-transform: uppercase; border-radius: 8px; min-width: 44px; height: 32px; cursor: pointer; } .hs-col:hover { color: var(--cu-texto); border-color: rgba(var(--cu-cielo), .5); } .hs-c { appearance: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: inherit; font-weight: 700; cursor: pointer; border: 1px dashed var(--cu-borde); background: transparent; color: var(--cu-tenue); padding: 0; vertical-align: middle; } .hs-c.hs-pago { border: 0; background: var(--cu-pulgar); color: var(--cu-pulgar-tinta); } .hs-c.hs-aberto { border: 1px solid rgba(var(--cu-ambar), .7); color: rgb(var(--cu-ambar)); background: rgba(var(--cu-ambar), .08); } .hs-c.fixo { opacity: .4; cursor: default; } .hs-c svg { width: 18px; height: 18px; } .pr-ex { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--cu-borde); } .pr-ex > div { display: grid; gap: 2px; } .hs-barra { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--cu-borde); background: var(--cu-hoja); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); } .hs-barra > div { display: grid; gap: 2px; } @media (max-width: 1023px) { .hs-barra { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 600px) { .hs-c { width: 40px; height: 40px; } .hs-n { max-width: 96px; } } dialog.rc-jan { width: min(560px, calc(100% - 24px)); } .rc-ok { margin: 0; color: rgb(var(--cu-cielo)); display: inline-flex; gap: 6px; align-items: center; } .rc-prev { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); } .rc-bts .btn { flex: 1 1 auto; } .rc-folha { --v: #056638; background: #fff; color: #14201A; font-family: Inter, system-ui, sans-serif; } .rc-cab { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: var(--v); color: #fff; } .rc-esc { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--v); display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; flex: none; object-fit: contain; padding: 4px; } .rc-cab p { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .rc-cab h2 { margin: 2px 0 0; font-size: 1.2rem; line-height: 1.2; color: #fff; } .rc-miolo { padding: 18px 22px 8px; display: grid; gap: 6px; } .rc-num { display: flex; justify-content: space-between; font-size: .78rem; color: #4F5F57; } .rc-valor { margin: 6px 0 0; font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; } .rc-ext { margin: 0; font-size: .8rem; color: #4F5F57; } .rc-txt { margin: 8px 0 4px; font-size: .9rem; line-height: 1.45; } .rc-det { margin: 0; display: grid; } .rc-det div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #DCE5DF; font-size: .8rem; } .rc-det dt { color: #4F5F57; } .rc-det dd { margin: 0; font-weight: 700; text-align: right; } .rc-ass { display: grid; justify-items: center; gap: 2px; padding: 26px 0 10px; } .rc-ass i { width: 60%; border-top: 1px solid #14201A; margin-bottom: 6px; } .rc-ass b { font-size: .86rem; } .rc-ass span { font-size: .72rem; color: #4F5F57; text-align: center; } .rc-rod { padding: 8px 22px; background: #F2F6F3; font-size: .66rem; color: #4F5F57; text-align: center; } #rc-imp { display: none; } @media print { html.imprimindo-rc, html.imprimindo-rc body { background: #fff !important; } html.imprimindo-rc body > *:not(#rc-imp) { display: none !important; } html.imprimindo-rc #rc-imp { display: block; max-width: 150mm; margin: 0 auto; } html.imprimindo-rc .rc-folha { -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1px solid #DCE5DF; } } /* Frequência, comunicados, reabrir e recibo com link (05/11/2026) */ .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; } .hs-c.salvo { outline: 2px solid rgba(var(--cu-cielo), .5); outline-offset: 2px; } .hs-c.mudou { outline-style: dashed; outline-color: rgb(var(--cu-ambar)); } .nl-leg i.salvo { outline: 2px solid rgba(var(--cu-cielo), .5); outline-offset: 1px; } .kpis-fq { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .kpis-fq .card { display: grid; gap: 4px; padding: 16px 18px; align-content: start; } .kn { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .kn.kn-nome { font-size: 1.2rem; line-height: 1.25; } .fq-tab th .fq-j { display: grid; gap: 1px; min-width: 64px; font-weight: 400; color: var(--cu-suave); text-decoration: none; } .fq-j b { color: var(--cu-texto); } .fq-j span { font-size: .68rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fq-at { display: grid; text-decoration: none; color: inherit; } .fq-c { width: 40px; height: 40px; margin: auto; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: var(--cu-tenue); } .fq-c.fq-p { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; margin: 0; font-size: .7rem; } .fq-c.fq-p svg { width: 13px; height: 13px; } .fq-c svg { width: 18px; height: 18px; } .fq-h { background: rgba(var(--cu-cielo), .16); color: rgb(var(--cu-cielo)); } .fq-a { background: rgba(var(--cu-ambar), .16); color: rgb(var(--cu-ambar)); } .fq-f { background: rgba(var(--cu-coral), .16); color: var(--cu-baja-tinta); } .fq-n { border: 1px dashed var(--cu-borde); } th.fq-pct { min-width: 150px; text-align: left; padding-left: 10px; } td.fq-pct { min-width: 150px; padding: 6px 0 0 10px; vertical-align: middle; } td.fq-pct b { display: inline-block; margin-top: 4px; margin-right: 6px; } .fq-barra { height: 6px; border-radius: 6px; background: rgba(var(--cu-vidrio), .1); overflow: hidden; } .fq-barra i { display: block; height: 100%; width: var(--w); border-radius: 6px; } .fq-barra .b { background: rgb(var(--cu-cielo)); } .fq-barra .m { background: rgb(var(--cu-ambar)); } .fq-barra .r { background: rgb(var(--cu-coral)); } .fq-pc { display: grid; place-items: center; width: 44px; height: 36px; border-radius: 10px; font-size: .78rem; font-weight: 700; color: var(--cu-tenue); } .fq-pc.b { background: rgba(var(--cu-cielo), .16); color: rgb(var(--cu-cielo)); } .fq-pc.m { background: rgba(var(--cu-ambar), .16); color: rgb(var(--cu-ambar)); } .fq-pc.r { background: rgba(var(--cu-coral), .16); color: var(--cu-baja-tinta); } .cm-grade { display: grid; gap: 16px; } @media (min-width: 1100px) { .cm-grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } } .grade-f.tres { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .cm-bolha { display: grid; gap: 6px; } .cm-bolha pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .88rem; line-height: 1.45; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #1F3B2D; color: #E9F2EC; max-width: 440px; min-height: 44px; } [data-tema="claro"] .cm-bolha pre { background: #DCF8C6; color: #14201A; } .cm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cm-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--cu-borde); } .cm-lista .nome-l { flex: 1; min-width: 0; } .cm-esc { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 260px; overflow: auto; border-radius: 14px; border: 1px solid var(--cu-borde); } .cm-esc .check { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 8px; } .cm-esc .check span { margin-left: auto; } .ok-t { color: rgb(var(--cu-cielo)); } .er-t { color: var(--cu-baja-tinta); } .rp .rc-prev { border-radius: 18px; overflow: hidden; } .rp-bts { display: grid; gap: 8px; } .mg-pago { flex-wrap: wrap; gap: 8px; } .mg-pago > .linha { flex-wrap: wrap; } @media (max-width: 560px) { #abas-cm { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } #abas-cm a { justify-content: center; padding: 0 8px; } #abas-cm a:last-child:nth-child(3) { grid-column: 1 / -1; } } .cm-nomes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .cm-nomes li { padding: 4px 10px; border-radius: 999px; font-size: .8rem; background: rgba(var(--cu-vidrio), .08); border: 1px solid var(--cu-borde); } .cm-nomes li.sem { color: var(--cu-baja-tinta); border-color: rgba(var(--cu-coral), .5); } .fin-lista li.fl-clica { position: relative; } .cm-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .cm-link:focus-visible { outline: 2px solid rgb(var(--cu-cielo)); outline-offset: 2px; } .cm-barra { margin-top: 4px; }