/* ========================================================================== RifaSimples — Mobile-first Temas aplicados via classe no : .tema-esmeralda, .tema-oceano, ... ========================================================================== */ :root { --raio: 14px; --raio-mini: 9px; --sombra: 0 1px 3px rgb(15 23 42 / .08), 0 4px 14px rgb(15 23 42 / .06); --sombra-modal: 0 10px 40px rgb(15 23 42 / .25); --ok: #16a34a; --ok-fundo: #dcfce7; --alerta: #d97706; --alerta-fundo: #fef3c7; --perigo: #dc2626; --perigo-fundo: #fee2e2; } /* Paletas ------------------------------------------------------------------ */ .tema-esmeralda { --bg: #f3f7f4; --superficie: #ffffff; --texto: #14261c; --texto-suave: #5c7065; --borda: #dbe5df; --primario: #059669; --primario-forte: #047857; --primario-suave: #d9f2e6; --sobre-primario: #ffffff; --foco: #34d399; } .tema-oceano { --bg: #f2f6fa; --superficie: #ffffff; --texto: #12202e; --texto-suave: #587083; --borda: #d9e4ee; --primario: #0284c7; --primario-forte: #0369a1; --primario-suave: #ddeefb; --sobre-primario: #ffffff; --foco: #38bdf8; } .tema-violeta { --bg: #f6f4fa; --superficie: #ffffff; --texto: #201a30; --texto-suave: #6b6484; --borda: #e3def0; --primario: #7c3aed; --primario-forte: #6d28d9; --primario-suave: #ece5fc; --sobre-primario: #ffffff; --foco: #a78bfa; } .tema-coral { --bg: #faf5f2; --superficie: #ffffff; --texto: #2d1c14; --texto-suave: #7c6459; --borda: #eddfd7; --primario: #ea580c; --primario-forte: #c2410c; --primario-suave: #fdeade; --sobre-primario: #ffffff; --foco: #fb923c; } .tema-ambar { --bg: #faf7ef; --superficie: #ffffff; --texto: #291f10; --texto-suave: #77694d; --borda: #ecdfc4; --primario: #b45309; --primario-forte: #92400e; --primario-suave: #fbeed3; --sobre-primario: #ffffff; --foco: #f59e0b; } .tema-grafite { --bg: #10151d; --superficie: #1b2230; --texto: #f2f5f9; --texto-suave: #98a4b5; --borda: #2c3648; --primario: #34d399; --primario-forte: #6ee7b7; --primario-suave: #17322a; --sobre-primario: #06281d; --foco: #34d399; --ok: #4ade80; --ok-fundo: #14321f; --alerta: #fbbf24; --alerta-fundo: #33260c; --perigo: #f87171; --perigo-fundo: #3a1616; --sombra: 0 1px 3px rgb(0 0 0 / .5); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.tema-esmeralda, body[class^='tema-'] { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--texto); line-height: 1.45; font-size: 16px; } .container { width: min(100%, 780px); margin-inline: auto; padding-inline: 16px; } .principal { padding-block: 16px 48px; min-height: 70vh; } a { color: var(--primario); } /* Topo ---------------------------------------------------------------------- */ .topo { position: sticky; top: 0; z-index: 20; background: var(--primario); color: var(--sobre-primario); box-shadow: var(--sombra); } .topo__conteudo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 10px; flex-wrap: wrap; } .topo__marca { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: 1.05rem; } .topo__logo { font-size: 1.35rem; } .topo__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .navlink { color: var(--sobre-primario); text-decoration: none; padding: 7px 10px; border-radius: 999px; font-size: .92rem; background: transparent; border: 0; cursor: pointer; } .navlink:hover { background: rgb(255 255 255 / .18); } .form-inline { display: inline; } /* Tipografia e blocos base --------------------------------------------------- */ .pagina-titulo { font-size: 1.45rem; margin: 8px 0 4px; line-height: 1.2; } .pagina-titulo--menor { font-size: 1.25rem; margin-top: 0; } .secao-titulo { font-size: 1.12rem; margin: 28px 0 8px; } .texto-suave { color: var(--texto-suave); font-size: .95rem; } .voltar { display: inline-block; margin-bottom: 6px; text-decoration: none; color: var(--texto-suave); font-size: .92rem; } .cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .vazio { text-align: center; padding: 42px 16px; color: var(--texto-suave); background: var(--superficie); border: 1px dashed var(--borda); border-radius: var(--raio); } .dica-toque { text-align: center; color: var(--texto-suave); font-size: .88rem; } .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 14px; } .corpo-centralizado .principal { display: grid; place-items: start center; padding-top: 8vh; } .cartao--login { width: min(100%, 420px); } .cartao--aviso { width: min(100%, 520px); } .cartao--destaque { border-color: var(--primario); } .lista-cartoes { display: grid; gap: 14px; } .rifa-cabecalho { display: flex; justify-content: space-between; align-items: start; gap: 8px; } .rifa-titulo { margin: 0; font-size: 1.08rem; } .rifa-titulo a { color: inherit; text-decoration: none; } .rifa-titulo a:hover { color: var(--primario); } .rifa-foto { width: 100%; height: 150px; object-fit: cover; border-radius: var(--raio-mini); margin-top: 10px; } .linha-dados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; margin: 12px 0 0; padding: 0; } .linha-dados dt { font-size: .75rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; } .linha-dados dd { margin: 0; font-weight: 600; } .linha-dados--centralizada { margin-bottom: 14px; } .etiqueta { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .etiqueta--ativa { background: var(--ok-fundo); color: var(--ok); } .etiqueta--pausada { background: var(--alerta-fundo); color: var(--alerta); } .etiqueta--concluida { background: var(--primario-suave); color: var(--primario); } .metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 18px; } .metrica { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px; display: flex; flex-direction: column; gap: 2px; } .metrica__valor { font-size: 1.3rem; font-weight: 800; color: var(--primario); word-break: break-all; } .metrica__rotulo { font-size: .78rem; color: var(--texto-suave); } .barra { display: flex; overflow: hidden; height: 10px; border-radius: 999px; background: var(--primario-suave); margin-top: 12px; } .barra__preenchimento { height: 100%; } .barra__pago { background: var(--ok); } .barra__reservado { background: var(--alerta); } .mini-status { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 10px 0 0; font-size: .85rem; color: var(--texto-suave); } .mini-status li { display: flex; align-items: center; gap: 6px; } .ponto { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .ponto--livre { background: var(--borda); border: 1px solid var(--texto-suave); } .ponto--reservado { background: var(--alerta); } .ponto--pago { background: var(--ok); } /* Botões --------------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--raio-mini); font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: filter .15s ease, transform .05s ease; font-family: inherit; } .botao:active { transform: scale(.98); } .botao:disabled { opacity: .55; cursor: not-allowed; } .botao--primario { background: var(--primario); color: var(--sobre-primario); } .botao--primario:hover { background: var(--primario-forte); } .botao--neutro { background: var(--superficie); color: var(--texto); border-color: var(--borda); } .botao--neutro:hover { border-color: var(--primario); color: var(--primario); } .botao--ok { background: var(--ok); color: #fff; } .botao--alerta { background: var(--alerta); color: #fff; } .botao--perigo { background: var(--perigo); color: #fff; } .botao--largo { width: 100%; } .botao--mini { padding: 4px 8px; font-size: .78rem; border-radius: 7px; } .acoes-lado-a-lado { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .zona-perigo { margin-top: 14px; border-top: 1px dashed var(--borda); padding-top: 10px; } .zona-perigo summary { cursor: pointer; color: var(--perigo); font-weight: 700; font-size: .9rem; } /* Mensagens -------------------------------------------------------------------- */ .mensagens { display: grid; gap: 8px; margin-bottom: 14px; } .mensagem { padding: 11px 14px; border-radius: var(--raio-mini); font-size: .93rem; border: 1px solid transparent; animation: entrar .25s ease; } .mensagem--success { background: var(--ok-fundo); color: var(--ok); border-color: currentColor; } .mensagem--warning { background: var(--alerta-fundo); color: var(--alerta); border-color: currentColor; } .mensagem--error { background: var(--perigo-fundo); color: var(--perigo); border-color: currentColor; } .mensagem--info { background: var(--primario-suave); color: var(--primario); border-color: currentColor; } @keyframes entrar { from { opacity: 0; transform: translateY(-4px); } } /* Formulários -------------------------------------------------------------------- */ .formulario { display: grid; gap: 12px; margin: 0; } .formulario--largo { max-width: 560px; } .grade-2 { display: grid; gap: 12px; } .campo { display: grid; gap: 5px; } .campo label, .campo legend { font-size: .88rem; font-weight: 600; } .campo input[type="text"], .campo input[type="number"], .campo input[type="date"], .campo input[type="password"], .campo textarea, .campo select, .filtros input[type="search"] { width: 100%; padding: 11px 12px; border: 1px solid var(--borda); border-radius: var(--raio-mini); background: var(--superficie); color: var(--texto); font-size: 1rem; font-family: inherit; } .campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible, .filtros input:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--primario); } .campo--opcoes { border: 0; padding: 0; display: grid; gap: 6px; margin: 0; } .campo--opcoes label { display: flex; align-items: center; gap: 8px; font-weight: 500; padding: 9px 12px; border: 1px solid var(--borda); border-radius: var(--raio-mini); cursor: pointer; } .campo--opcoes label:has(input:checked) { border-color: var(--primario); background: var(--primario-suave); font-weight: 700; } .campo--opcoes input { accent-color: var(--primario); width: 18px; height: 18px; } .ajuda { color: var(--texto-suave); font-size: .82rem; } .errorlist { color: var(--perigo); font-size: .85rem; margin: 0; padding: 0; list-style: none; } .filtros { display: flex; gap: 8px; margin: 14px 0 10px; } .filtros input[type="search"] { flex: 1; } /* Chips de filtro ------------------------------------------------------------------ */ .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; } .chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; text-decoration: none; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-suave); font-size: .87rem; font-weight: 600; } .chip--ativo { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); } /* Grade de números ------------------------------------------------------------------ */ .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 7px; margin: 10px 0; } .numero { position: relative; aspect-ratio: 1 / 1; padding: 0; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; border-radius: var(--raio-mini); border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto-suave); cursor: pointer; font-family: inherit; transition: transform .08s ease; } .numero:hover:not(:disabled) { transform: translateY(-2px); } .numero:disabled { cursor: default; } .numero--reservado { background: var(--alerta-fundo); border-color: var(--alerta); color: var(--alerta); } .numero--pago { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); } .numero--ganhador, .numero[aria-pressed='true'] { outline: 3px solid var(--foco); outline-offset: 1px; } .grade--leitura .numero { cursor: help; aspect-ratio: auto; padding: 8px 2px; } .cartao--grade summary { cursor: pointer; font-weight: 700; } .cartao--grade[open] summary { margin-bottom: 8px; } .legenda { display: flex; gap: 16px; font-size: .84rem; color: var(--texto-suave); margin: 8px 0; } .legenda span { display: flex; align-items: center; gap: 6px; } /* Tabelas ---------------------------------------------------------------------------- */ .tabela--rolagem { overflow-x: auto; display: block; margin-bottom: 12px; } .tabela { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; } .tabela th, .tabela td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borda); } .tabela th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); } .linha-total td { font-weight: 800; border-top: 2px solid var(--primario); } .celula-link { max-width: 230px; } .copiar-linha { display: flex; gap: 6px; align-items: center; } .copiar-linha input { flex: 1; width: 60px; min-width: 0; padding: 7px 9px; font-size: .9rem; border: 1px solid var(--borda); border-radius: 7px; background: var(--bg); color: var(--texto-suave); font-family: monospace; } .acoes-inline { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .acoes-inline form { margin: 0; } /* Modal (bottom sheet no celular) ------------------------------------------------------ */ html.modal-aberto, html.modal-aberto body { overflow: hidden; } .modal { border: 0; padding: 0; max-width: min(94vw, 480px); width: min(94vw, 480px); max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--raio); box-shadow: var(--sombra-modal); background: var(--superficie); color: var(--texto); } .modal::backdrop { background: rgb(10 15 22 / .55); backdrop-filter: blur(2px); } .modal[open] { animation: subir .22s ease; } @keyframes subir { from { opacity: 0; transform: translateY(24px); } } @media (max-width: 639px) { .modal { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; border-radius: var(--raio) var(--raio) 0 0; margin: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); } } .formulario--modal { padding: 18px; display: grid; gap: 13px; } .modal__cabecalho { display: flex; align-items: center; justify-content: space-between; } .modal__cabecalho h3 { margin: 0; font-size: 1.15rem; } #modal-numero { color: var(--primario); font-variant-numeric: tabular-nums; } .modal__fechar { border: 0; background: var(--primario-suave); color: var(--primario); width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; line-height: 1; } .etiqueta-situacao { justify-self: start; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; text-transform: uppercase; } .etiqueta-situacao--livre { background: var(--primario-suave); color: var(--primario); } .etiqueta-situacao--reservado { background: var(--alerta-fundo); color: var(--alerta); } .etiqueta-situacao--pago { background: var(--ok-fundo); color: var(--ok); } #botao-liberar[hidden] { display: none; } /* Cartão do vendedor ------------------------------------------------------------------------ */ .cartao--vendedor-cabecalho { margin-top: 4px; } .faixa-info { margin: 10px 0 0; } .cartao--ganhador { background: linear-gradient(135deg, var(--primario-suave), var(--superficie) 70%); border-color: var(--primario); } .cartao--ganhador h2 { margin: 0 0 6px; } /* Página de confirmação de exclusão -------------------------------------------------- */ .cartao--exclusao { border: 2px solid var(--perigo); max-width: 560px; } .cartao--exclusao .pagina-titulo { color: var(--perigo); } .lista-perdas { margin: 10px 0; padding-left: 20px; } .lista-perdas li { margin-bottom: 6px; } .acoes-exclusao { display: grid; gap: 8px; margin-top: 16px; border-top: 1px dashed var(--borda); padding-top: 14px; } /* Página de temas ------------------------------------------------------------------------- */ .lista-temas { display: grid; gap: 10px; max-width: 520px; } .cartao--tema { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color .15s ease; margin: 0; } .cartao--tema-selecionado { border-color: var(--primario); border-width: 2px; padding: 15px; } .tema-radio { width: 20px; height: 20px; accent-color: var(--primario); flex-shrink: 0; } .tema-info { flex: 1; display: grid; } .tema-info small { color: var(--texto-suave); } .paleta { display: inline-flex; gap: 4px; } .paleta i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .7); box-shadow: 0 0 0 1px rgb(0 0 0 / .08); } .paleta--esmeralda i:nth-child(1) { background: #059669; } .paleta--esmeralda i:nth-child(2) { background: #34d399; } .paleta--esmeralda i:nth-child(3) { background: #d9f2e6; } .paleta--esmeralda i:nth-child(4) { background: #f3f7f4; } .paleta--oceano i:nth-child(1) { background: #0284c7; } .paleta--oceano i:nth-child(2) { background: #38bdf8; } .paleta--oceano i:nth-child(3) { background: #ddeefb; } .paleta--oceano i:nth-child(4) { background: #f2f6fa; } .paleta--violeta i:nth-child(1) { background: #7c3aed; } .paleta--violeta i:nth-child(2) { background: #a78bfa; } .paleta--violeta i:nth-child(3) { background: #ece5fc; } .paleta--violeta i:nth-child(4) { background: #f6f4fa; } .paleta--coral i:nth-child(1) { background: #ea580c; } .paleta--coral i:nth-child(2) { background: #fb923c; } .paleta--coral i:nth-child(3) { background: #fdeade; } .paleta--coral i:nth-child(4) { background: #faf5f2; } .paleta--ambar i:nth-child(1) { background: #b45309; } .paleta--ambar i:nth-child(2) { background: #f59e0b; } .paleta--ambar i:nth-child(3) { background: #fbeed3; } .paleta--ambar i:nth-child(4) { background: #faf7ef; } .paleta--grafite i:nth-child(1) { background: #34d399; } .paleta--grafite i:nth-child(2) { background: #1b2230; } .paleta--grafite i:nth-child(3) { background: #2c3648; } .paleta--grafite i:nth-child(4) { background: #10151d; } /* Rodapé ------------------------------------------------------------------------------------ */ .rodape { border-top: 1px solid var(--borda); padding: 18px 0 26px; color: var(--texto-suave); font-size: .82rem; text-align: center; } /* Telas maiores -------------------------------------------------------------------------------- */ @media (min-width: 640px) { .pagina-titulo { font-size: 1.7rem; } .grade { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } .metricas { grid-template-columns: repeat(4, 1fr); } .linha-dados { grid-template-columns: repeat(4, 1fr); } .rifa-foto { height: 190px; } .modal { margin: auto; } .formulario--modal { padding: 24px; } .grade-2 { grid-template-columns: 1fr 1fr; } } @media print { .topo, .rodape, .filtros, .chips, .acoes-lado-a-lado, .zona-perigo { display: none !important; } }