/* ============================================================
Wine Casino — Casino Theme
============================================================ */
/* ---------- Fontes — Montserrat local ---------- */
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }
/* ============================================================
TEMAS
------------------------------------------------------------
O tema CLARO ("Marfim e vinho") e o padrao e vive no :root.
O tema ESCURO ("Casino") entra por [data-tema="escuro"] no
e apenas redefine os mesmos tokens.
Os nomes dos tokens sao herdados do tema escuro original
(--ivory, --mogno...). Leia-os pelo PAPEL, nao pela cor:
--ivory = cor do texto principal
--ivory-dim = texto secundario
--mogno* = superficies (cards, campos, estrutura)
--bg-card = fundo de card
Assim os 280+ usos existentes continuam valendo nos dois temas.
============================================================ */
:root {
/* Paleta herdada do app Vamos Degustar (/club), para os dois
apps da casa terem a mesma linguagem visual. */
/* Vinho */
--vinho: #981540;
--vinho-deep: #7a1033;
--vinho-bright: #b01a4b;
--vinho-claro: #fbeef2; /* fundo suave de destaque */
/* Dourado dessaturado — usado em detalhe, nunca em texto pequeno */
--dourado: #8a7548; /* versão legível, p/ texto */
--dourado-hi: #B09A6A; /* o gold do Vamos Degustar, p/ bordas e ícones */
--dourado-lo: #6f5d38;
/* Feltro / Mesa */
--felt: #a98d5c;
--felt-deep: #f4ecdd;
--felt-edge: #dfcfae;
--felt-mid: #faf5ea;
/* Superfícies / Estrutura */
--mogno: #ffffff;
--mogno-hi: #F7F4EF;
--mogno-lo: #F2EDE6;
--mogno-borda: #E8E3DC;
/* Texto — três níveis, como no Vamos Degustar */
--ivory: #1A1A1A;
--ivory-dim: #5A5A5A;
--bone: #1A1A1A;
--smoke: #9A9A9A;
--texto-suave: #5A5A5A;
/* Estado */
--warn: #a35c00;
--danger: #c62828;
--verde: #97794a;
--verde-claro: #f4ecdd;
--azul: #1565c0;
--azul-claro: #e7f0fa;
--erro-bg: #fdeaea;
--erro-cor: #b3261e;
/* Estrutura */
--bg-html: #E4DED4;
--bg-app: #F2EDE6;
--bg-card: #FFFFFF;
--bg-campo: #F7F4EF;
--borda: #E8E3DC;
--sombra: 0 1px 3px rgba(0,0,0,.06);
--sombra-media: 0 2px 10px rgba(0,0,0,.09);
--sombra-ouro: 0 2px 10px rgba(0,0,0,.09);
--raio: 8px;
--raio-grande: 14px;
/* fundo do menu lateral — no claro acompanha o card */
--menu-bg: #ffffff;
/* Superfícies translúcidas (cards sobre o fundo) */
--card-vidro: rgba(255, 255, 255, 0.86);
--card-vidro-2: rgba(250, 247, 242, 0.92);
--hover-linha: rgba(0, 0, 0, 0.035);
--linha-sutil: rgba(0, 0, 0, 0.07);
/* Barra de navegação */
--nav-bg: rgba(255, 255, 255, 0.92);
--nav-borda: rgba(139, 26, 42, 0.15);
--nav-icone: rgba(139, 26, 42, 0.70);
--nav-icone-bg: rgba(139, 26, 42, 0.08);
--nav-sombra: 0 2px 16px rgba(80, 60, 40, 0.10);
/* Fundo da tela: no claro a foto some e fica o marfim */
--overlay-fundo: linear-gradient(var(--bg-app), var(--bg-app));
--grain-opacidade: 0;
--sombra-container: 0 0 40px rgba(80, 60, 40, 0.12);
--focus-ring: 0 0 0 3px rgba(139, 26, 42, 0.15);
--borda-ouro: rgba(139, 26, 42, 0.22);
--realce-ouro: rgba(139, 26, 42, 0.06);
/* Brilhos: sem glow no tema claro */
--glow-ouro-forte: none;
--glow-ouro-suave: none;
--texto-glow: none;
/* Texto que fica POR CIMA de fundo vinho sólido */
--sobre-vinho: #ffffff;
/* Texto colorido sobre fundo claro */
--sucesso-texto: #8a6d3f;
--info-texto: #1565c0;
--warn-texto: #a35c00;
/* Tipografia */
--fonte-titulo: 'Montserrat', sans-serif;
--fonte-corpo: 'Montserrat', sans-serif;
}
/* ---------- Tema escuro — grafite e vinho
Superfícies em cinza-grafite neutro; o VINHO é a cor de ação, no
mesmo papel que o rosa cumpre na referência. Dourado só em detalhe.
------------------------------------------------------------------ */
html[data-tema="escuro"] {
/* vinho um pouco mais vivo que o do tema claro: precisa saltar do grafite */
--vinho: #b0244f;
--vinho-deep: #8e1a3e;
--vinho-bright: #c93063;
--vinho-claro: #2b1620;
--dourado: #c9a24a;
--dourado-hi: #e0bd68;
--dourado-lo: #8d7132;
--felt: #a98d5c;
--felt-deep: #1b1b21;
--felt-edge: #b39a6d;
--felt-mid: #23232b;
/* superfícies — grafite neutro */
--mogno: #33333c;
--mogno-hi: #3d3d47;
--mogno-lo: #26262d;
--mogno-borda: #43434f;
--ivory: #f2f2f5;
--ivory-dim: #a8a8b5;
--bone: #e4e4ea;
--smoke: #7c7c8a;
--texto-suave: #a8a8b5;
--warn: #d9a441;
--danger: #e05c6e;
--verde: #c9b083;
--verde-claro: #332e23;
--azul: #5b9fd6;
--azul-claro: #1c2a38;
--erro-bg: rgba(224, 92, 110, 0.13);
--erro-cor: #f08497;
--bg-html: #1c1c22;
--bg-app: #2a2a32;
--bg-card: #33333c;
--bg-campo: #26262d;
--borda: #43434f;
--sombra: 0 6px 22px rgba(0, 0, 0, 0.40);
--sombra-ouro: 0 0 18px rgba(176, 36, 79, 0.22);
--card-vidro: rgba(51, 51, 60, 0.86);
--card-vidro-2: rgba(38, 38, 45, 0.90);
--hover-linha: rgba(255, 255, 255, 0.045);
--linha-sutil: rgba(255, 255, 255, 0.08);
/* menu lateral em cinza mais fechado que os cards */
--menu-bg: #26262d;
--nav-bg: rgba(28, 28, 34, 0.92);
--nav-borda: rgba(255, 255, 255, 0.08);
--nav-icone: rgba(242, 242, 245, 0.62);
--nav-icone-bg: rgba(176, 36, 79, 0.16);
--nav-sombra: 0 2px 20px rgba(0, 0, 0, 0.45);
--overlay-fundo: linear-gradient(rgba(28, 28, 34, 0.72), rgba(28, 28, 34, 0.86));
--grain-opacidade: 0.10;
--sombra-container: 0 0 60px rgba(0, 0, 0, 0.7);
--focus-ring: 0 0 0 3px rgba(176, 36, 79, 0.25);
--borda-ouro: rgba(255, 255, 255, 0.12);
--realce-ouro: rgba(176, 36, 79, 0.10);
--glow-ouro-forte: drop-shadow(0 6px 22px rgba(212,175,55,0.55));
--glow-ouro-suave: drop-shadow(0 6px 16px rgba(212,175,55,0.35));
--texto-glow: 0 0 20px rgba(212,175,55,0.3);
--sobre-vinho: #ffffff;
--sucesso-texto: #d8c39a;
--info-texto: #90caf9;
--warn-texto: #ffcc80;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-color: var(--bg-html);
font-family: var(--fonte-corpo);
font-weight: 400;
color: var(--ivory);
/* 100vh é a altura MÁXIMA do viewport — a que existiria com a barra do
navegador recolhida, ou por baixo das barras do sistema no app
instalado. A página fica sempre um pouco mais alta do que se vê, e dá
aquela rolagem de sobra que parece "maior que a tela".
100dvh é a altura que está de fato na tela. O vh vem antes como
reserva para navegador que não conhece dvh. */
min-height: 100vh;
min-height: 100dvh;
display: flex;
justify-content: center;
/* Sem isto a tela "anda" ao ser arrastada mesmo quando não há nada
depois do último botão: é o efeito elástico do Android, não conteúdo.
Medi a página com conteúdo curto e a sobra é 0px — o que se move é o
overscroll. `none` também tira o puxar-para-recarregar, que num app
instalado só atrapalha. */
overscroll-behavior: none;
}
html { overscroll-behavior: none; }
/* Títulos — leves e espaçados. O peso vem do tamanho e do ar em volta,
não da espessura da letra. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fonte-titulo);
line-height: 1.25;
letter-spacing: -0.01em;
}
h1 { font-weight: 300; font-size: 1.75rem; margin: 0 0 0.35em; }
h2 { font-weight: 300; font-size: 1.4rem; margin: 0 0 0.4em; }
h3 { font-weight: 400; font-size: 1.1rem; margin: 0 0 0.45em; }
h4, h5, h6 { font-weight: 500; letter-spacing: 0; }
/* Textos de suporte — pesos leves e linha arejada */
p, li, td, th { font-weight: 400; line-height: 1.6; }
small, .text-muted, .texto-suave, .smoke { font-weight: 300; }
/* Placeholder itálico em todos os inputs */
::placeholder { font-style: italic; font-weight: 300; }
img, table { max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ============================================================
LAYOUT PRINCIPAL — mobile-only container
============================================================ */
.app-container {
width: 100%;
max-width: 430px;
min-height: 100vh;
min-height: 100dvh;
background: transparent;
display: flex;
flex-direction: column;
position: relative;
box-shadow: var(--sombra-container);
}
.app-container::before {
content: '';
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 430px;
/* A arte de fundo acompanha a mesma altura do corpo: com 100vh ela
sobrava por baixo e o degradê terminava fora da vista. */
height: 100vh;
height: 100dvh;
background-image:
var(--overlay-fundo),
url('../img/fundoapp.webp');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}
body.fundo-login .app-container::before {
background-image:
var(--overlay-fundo),
url('../img/fundoapp-login.webp');
}
.pagina-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - 54px);
min-height: calc(100dvh - 54px);
padding: 24px 0;
}
.pagina-login .login-logo {
height: 110px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 4px 24px rgba(212,175,55,0.40));
margin-bottom: 24px;
}
.pagina-login .card-formulario {
width: 100%;
margin: 0;
}
.main-content {
flex: 1;
width: 100%;
box-sizing: border-box;
padding: 12px;
}
/* Grain overlay — acima do background, abaixo do conteúdo */
.app-container::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.18;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* ============================================================
NAVEGAÇÃO — icon-only com logo centralizada
============================================================ */
.top-nav {
background: var(--nav-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--nav-borda);
padding: 0 2px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--nav-sombra);
overflow: visible;
}
.top-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 54px;
overflow: visible;
}
.top-nav ul li {
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
padding: 2px;
}
.top-nav ul li.nav-logo-item {
flex: 1;
position: relative;
overflow: visible;
z-index: 2;
}
.top-nav ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--nav-icone);
border-radius: 50%;
border-bottom: none;
padding: 0;
margin: 0;
font-size: 0;
text-decoration: none;
transition: color 0.2s, background 0.2s;
}
.top-nav ul li a svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.top-nav ul li a:hover,
.top-nav ul li a.ativo {
color: var(--dourado);
background: var(--nav-icone-bg);
border-bottom: none;
}
.top-nav ul li:first-child a {
color: var(--nav-icone);
font-family: inherit;
font-weight: normal;
font-size: 0;
padding: 0;
}
.nav-logo {
height: 70px;
width: auto;
max-width: 100px;
display: block;
object-fit: contain;
position: relative;
top: 14px;
filter: var(--glow-ouro-suave);
transition: filter 0.2s, transform 0.2s;
}
.nav-logo:hover {
filter: var(--glow-ouro-forte);
transform: translateY(1px);
}
.nav-sair {
color: rgba(255, 80, 80, 0.62) !important;
}
.nav-sair:hover {
color: #ff5050 !important;
background: rgba(255, 76, 76, 0.12) !important;
}
.auth-rodape {
margin-top: 20px;
text-align: center;
font-size: 0.88em;
border-top: 1px solid var(--linha-sutil);
padding-top: 16px;
color: rgba(212,175,55,0.55);
}
.auth-rodape a {
color: var(--dourado);
text-decoration: none;
font-weight: 500;
}
.auth-rodape a:hover { color: var(--dourado-hi); }
/* ============================================================
FORMULÁRIOS
============================================================ */
.campo, .field-group { margin-bottom: 16px; }
.rotulo, .form-label {
display: block;
margin-bottom: 5px;
color: var(--ivory-dim);
font-size: 0.85em;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.rotulo-destaque {
display: block;
margin-bottom: 5px;
color: var(--dourado);
font-weight: 500;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.entrada, .form-input {
width: 100%;
padding: 11px 14px;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
background: var(--mogno-lo);
color: var(--ivory);
font-size: 0.95em;
font-family: var(--fonte-corpo);
transition: border-color 0.2s, box-shadow 0.2s;
}
.entrada:focus, .form-input:focus {
outline: none;
border-color: var(--dourado);
box-shadow: var(--focus-ring);
}
.entrada::placeholder, .form-input::placeholder {
color: var(--smoke);
}
.entrada-clara {
width: 100%;
padding: 11px 14px;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
background: var(--mogno-lo);
color: var(--ivory);
font-size: 0.95em;
font-family: var(--fonte-corpo);
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.entrada-clara:focus {
outline: none;
border-color: var(--dourado);
box-shadow: var(--focus-ring);
}
.entrada-clara option {
background: var(--mogno);
color: var(--ivory);
}
select.entrada, select.form-input, select.entrada-clara {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.linha-dinamica {
display: flex;
gap: 8px;
margin-bottom: 8px;
align-items: center;
}
/* ============================================================
BOTÕES
============================================================ */
.btn-primario {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
background: linear-gradient(135deg, var(--vinho) 0%, var(--vinho-deep) 100%);
color: var(--sobre-vinho);
border: 1px solid var(--borda-ouro);
border-radius: var(--raio);
font-weight: 500;
font-size: 0.95em;
font-family: var(--fonte-corpo);
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
text-align: center;
letter-spacing: 0.02em;
}
.btn-primario:hover {
background: linear-gradient(135deg, var(--vinho-bright) 0%, var(--vinho) 100%);
border-color: var(--dourado-lo);
box-shadow: 0 4px 12px rgba(139,26,42,0.4);
color: var(--sobre-vinho);
}
.btn-primario.largura-total { width: 100%; }
.btn-secundario {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
background: transparent;
color: var(--ivory-dim);
border: 1px solid var(--mogno-borda);
border-radius: var(--raio);
font-weight: 500;
font-size: 0.9em;
font-family: var(--fonte-corpo);
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
text-align: center;
}
.btn-secundario:hover {
background: var(--mogno-hi);
border-color: var(--ivory-dim);
color: var(--ivory);
}
/* Botão dourado (ação principal de destaque) */
.btn-dourado, .btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
background: linear-gradient(135deg, var(--dourado) 0%, var(--dourado-lo) 100%);
color: var(--mogno-lo);
border: none;
border-radius: var(--raio);
font-weight: 600;
font-size: 1em;
font-family: var(--fonte-corpo);
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
text-align: center;
letter-spacing: 0.12em;
box-sizing: border-box;
width: 100%;
}
.btn-dourado:hover, .btn-submit:hover {
background: linear-gradient(135deg, var(--dourado-hi) 0%, var(--dourado) 100%);
box-shadow: 0 0 16px rgba(212,175,55,0.4);
color: var(--mogno-lo);
}
.btn-verde {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
background: linear-gradient(135deg, #a98d5c 0%, #8a6d3f 100%);
color: #fff;
border: none;
border-radius: var(--raio);
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
text-align: center;
}
.btn-verde:hover {
background: linear-gradient(135deg, #b99d6b 0%, #a98d5c 100%);
box-shadow: 0 4px 12px rgba(169,141,92,0.45);
}
.btn-pequeno {
padding: 6px 14px;
font-size: 0.8em;
border-radius: 5px;
}
.btn-link {
background: none;
border: none;
color: var(--dourado);
font-weight: 500;
cursor: pointer;
padding: 0;
text-decoration: none;
font-family: var(--fonte-corpo);
}
.btn-link:hover { color: var(--dourado-hi); text-decoration: underline; }
.btn-desativado {
padding: 6px 14px;
background: var(--mogno-hi);
color: var(--smoke);
border: 1px solid var(--mogno-borda);
border-radius: 5px;
cursor: not-allowed;
font-size: 0.8em;
opacity: 0.6;
}
/* ============================================================
ALERTAS E MENSAGENS
============================================================ */
.alerta {
padding: 13px 16px;
border-radius: var(--raio);
margin-bottom: 16px;
font-size: 0.9em;
line-height: 1.5;
}
.alerta-erro, .alert-error {
background: var(--erro-bg);
color: var(--erro-cor);
border: 1px solid rgba(198,40,40,0.4);
border-left: 4px solid var(--erro-cor);
padding: 13px 16px;
border-radius: var(--raio);
margin-bottom: 16px;
font-size: 0.9em;
}
.alerta-sucesso, .alert-success {
background: rgba(169,141,92,0.16);
color: var(--sucesso-texto);
border: 1px solid rgba(169,141,92,0.45);
border-left: 4px solid var(--verde);
padding: 13px 16px;
border-radius: var(--raio);
margin-bottom: 16px;
font-size: 0.9em;
}
.alerta-info {
background: rgba(21,101,192,0.15);
color: var(--info-texto);
border-left: 4px solid var(--azul);
padding: 13px 16px;
border-radius: var(--raio);
margin-bottom: 16px;
font-size: 0.9em;
}
.alerta-aviso {
background: rgba(201,122,0,0.15);
color: var(--warn-texto);
border-left: 4px solid var(--warn);
padding: 13px 16px;
border-radius: var(--raio);
margin-bottom: 16px;
font-size: 0.9em;
}
.alerta-dourado {
background: var(--nav-icone-bg);
color: var(--dourado);
border: 1px solid var(--borda-ouro);
border-left: 4px solid var(--dourado);
padding: 15px 18px;
border-radius: var(--raio);
margin-bottom: 16px;
}
/* ============================================================
PAINEL / DASHBOARD
============================================================ */
.painel-container {
padding: 20px 16px 40px;
color: var(--ivory);
}
.painel-boas-vindas {
padding: 20px 0 10px;
border-bottom: 1px solid var(--mogno-borda);
margin-bottom: 20px;
}
.painel-boas-vindas h1 {
color: var(--dourado);
margin: 0 0 4px 0;
font-family: var(--fonte-titulo);
font-size: 1.7em;
text-shadow: var(--texto-glow);
}
.painel-boas-vindas p {
color: var(--ivory-dim);
margin: 0;
font-size: 0.9em;
}
.acoes-principais {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 20px 0;
}
/* Os dois botões dividem a linha por igual, sem quebrar quando o texto cresce */
.acoes-principais > * { width: 100%; }
.secao-jogos {
background: var(--card-vidro);
backdrop-filter: blur(2px);
padding: 18px;
border-radius: var(--raio-grande);
border: 1px solid var(--mogno-borda);
margin-top: 20px;
box-shadow: var(--sombra);
}
.secao-titulo {
color: var(--dourado);
border-bottom: 1px solid var(--mogno-borda);
padding-bottom: 10px;
margin-top: 0;
font-size: 1em;
font-family: var(--fonte-titulo);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.secao-titulo-escuro {
color: var(--ivory);
border-bottom: 1px solid var(--mogno-borda);
padding-bottom: 10px;
margin-top: 0;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.texto-vazio {
color: var(--smoke);
font-style: italic;
padding: 10px 0;
font-size: 0.9em;
}
/* ============================================================
CARD DE JOGO (painel index)
============================================================ */
.card-jogo {
background: var(--card-vidro-2);
padding: 14px 16px;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
margin-bottom: 12px;
transition: border-color 0.2s;
}
.card-jogo:hover {
border-color: var(--dourado-lo);
}
.card-jogo-titulo {
color: var(--dourado);
font-size: 1.05em;
display: block;
margin-bottom: 4px;
font-weight: 500;
font-family: var(--fonte-titulo);
}
.card-jogo-meta {
font-size: 0.82em;
color: var(--ivory-dim);
margin-bottom: 10px;
}
.tabela-participantes {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 0.82em;
}
.tabela-participantes tr {
border-top: 1px solid var(--linha-sutil);
}
.tabela-participantes td {
padding: 5px 4px;
color: var(--ivory-dim);
}
.tabela-participantes .td-vinho-status {
text-align: right;
width: 28px;
font-size: 1em;
}
.card-jogo-info {
font-size: 0.82em;
color: var(--ivory-dim);
background: var(--realce-ouro);
border-left: 2px solid rgba(212,175,55,0.35);
border-radius: 0 6px 6px 0;
padding: 8px 10px;
margin-bottom: 10px;
line-height: 1.5;
}
.card-jogo-acoes {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.card-jogo-acoes a,
.card-jogo-acoes button {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
line-height: 1.1;
padding: 7px 8px !important;
min-height: 48px;
}
.card-jogo-acoes .bi {
font-size: 1.3em;
line-height: 1;
}
.card-jogo-acoes .bt {
font-size: 0.72em;
font-weight: 500;
letter-spacing: 0.01em;
}
.btn-copiar-link {
width: 100%;
margin-top: 8px;
margin-bottom: 10px;
padding: 7px 12px;
background: transparent;
color: var(--dourado-lo);
border: 1px dashed var(--dourado-lo);
border-radius: var(--raio);
font-size: 0.82em;
font-family: var(--fonte-corpo);
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.btn-copiar-link:hover {
background: var(--realce-ouro);
color: var(--dourado);
border-color: var(--dourado);
}
.badge-status {
font-size: 0.72em;
font-weight: 500;
padding: 3px 9px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.12em;
}
.badge-ativo {
background: rgba(169,141,92,0.22);
color: var(--sucesso-texto);
border: 1px solid rgba(169,141,92,0.45);
}
.badge-encerrado {
background: rgba(122,114,104,0.2);
color: var(--smoke);
border: 1px solid rgba(122,114,104,0.3);
}
/* ---------- Modal de convite que chega com o app aberto ---------- */
.aviso-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.62);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: aviso-entra 0.18s ease-out;
}
.aviso-modal[hidden] { display: none; }
body.com-modal { overflow: hidden; }
/* ---------- Editor da foto de perfil ----------
* Mesma moldura do modal de aviso; o que muda é o miolo: um palco quadrado
* com o círculo do avatar por cima, para a pessoa enquadrar vendo o
* resultado, e não imaginando.
*/
.editor-foto {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: aviso-entra 0.18s ease-out;
}
.editor-foto[hidden] { display: none; }
.editor-foto-caixa {
width: 100%;
max-width: 340px;
padding: 16px 16px 14px;
border: 1px solid var(--vinho);
border-radius: var(--raio-grande);
background: var(--mogno);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
animation: aviso-sobe 0.22s ease-out;
}
.editor-foto-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.editor-foto-topo strong { font-size: 1rem; font-weight: 400; color: var(--ivory); }
.editor-foto-dica {
margin: 0 0 12px;
font-size: 0.78rem;
color: var(--smoke);
}
/* O palco é quadrado de verdade (aspect-ratio), senão o círculo da máscara
vira elipse em tela estreita. */
.editor-palco {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--raio);
background: #000;
touch-action: none; /* o arrasto é nosso, não da rolagem da página */
cursor: grab;
user-select: none;
}
.editor-palco:active { cursor: grabbing; }
.editor-palco canvas { display: block; width: 100%; height: 100%; }
/* O box-shadow gigante escurece tudo que está FORA do círculo — é ele que
mostra o que vai sobrar depois do corte. */
.editor-mascara {
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.55);
border: 2px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
pointer-events: none;
}
.editor-controles {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 12px;
}
.editor-controles .btn-secundario { flex-shrink: 0; white-space: nowrap; }
.editor-zoom {
flex: 1;
min-width: 0;
height: 4px;
-webkit-appearance: none;
appearance: none;
border-radius: 3px;
background: var(--linha-sutil);
cursor: pointer;
}
.editor-zoom::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--vinho);
border: 2px solid var(--mogno);
cursor: pointer;
}
.editor-zoom::-moz-range-thumb {
width: 18px;
height: 18px;
border: 2px solid var(--mogno);
border-radius: 50%;
background: var(--vinho);
cursor: pointer;
}
.editor-acoes { display: flex; flex-direction: column; gap: 8px; }
@keyframes aviso-entra {
from { opacity: 0; }
to { opacity: 1; }
}
.aviso-modal-caixa {
width: 100%;
max-width: 340px;
padding: 20px 18px 16px;
border: 1px solid var(--vinho);
border-radius: var(--raio-grande);
background: var(--mogno);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
animation: aviso-sobe 0.22s ease-out;
}
@keyframes aviso-sobe {
from { transform: translateY(14px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.aviso-modal-selo {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--vinho-bright);
margin-bottom: 10px;
}
.aviso-modal-selo .ico { width: 14px; height: 14px; margin: 0; }
.aviso-modal-caixa h3 {
margin: 0 0 8px;
font-size: 16px;
font-weight: 500;
color: var(--ivory);
}
.aviso-modal-caixa p {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.5;
color: var(--ivory-dim);
}
.aviso-modal-quando,
.aviso-modal-mais {
font-size: 11.5px !important;
color: var(--smoke) !important;
}
.aviso-modal-acoes {
display: flex;
gap: 8px;
margin-top: 14px;
}
.aviso-modal-acoes a,
.aviso-modal-acoes button {
flex: 1;
text-align: center;
}
/* ---------- Licenca: atalho trancado e planos ---------- */
.atalho-trancado {
border-style: dashed !important;
opacity: 0.72;
}
.atalho-trancado .ico { color: var(--smoke); }
.atalho-nota {
display: block;
margin-top: 2px;
font-size: 9.5px;
letter-spacing: 0.04em;
color: var(--smoke);
}
/* ============================================================
AMBIENTE PROFISSIONAL
Quem entra aqui precisa sentir que trocou de lugar. Em vez de repintar
cada componente, redefino os tokens de destaque no : tudo que era
vinho vira dourado por herança, e os componentes seguem os mesmos.
============================================================ */
body.ambiente-pro {
--vinho: var(--dourado);
--vinho-bright: var(--dourado-hi);
}
/* O topo ganha um fio dourado, que é o sinal mais barato de "outro modo" */
body.ambiente-pro .barra-topo {
border-bottom: 1px solid var(--dourado);
box-shadow: 0 1px 12px rgba(201, 162, 74, 0.14);
}
body.ambiente-pro .licenca-cabecalho h1 { color: var(--dourado-hi); }
/* Botão principal em dourado, com texto escuro para manter o contraste */
body.ambiente-pro .btn-primario {
background: var(--dourado);
color: #241c0c;
}
body.ambiente-pro .btn-primario:hover { background: var(--dourado-hi); }
body.ambiente-pro .btn-primario .ico { color: #241c0c; }
body.ambiente-pro .secao-titulo-escuro,
body.ambiente-pro .card-formulario-cabecalho h2 { color: var(--dourado-hi); }
body.ambiente-pro .voltar-link { color: var(--dourado-lo); }
html[data-tema="escuro"] body.ambiente-pro .voltar-link { color: var(--dourado-hi); }
/* Faixa que identifica o evento no topo de cada tela do painel */
.pro-faixa {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 12px;
border: 1px solid var(--dourado);
border-left-width: 3px;
border-radius: var(--raio);
background: rgba(201, 162, 74, 0.08);
font-size: 11.5px;
color: var(--ivory-dim);
}
.pro-faixa strong { color: var(--dourado-hi); font-weight: 500; }
.pro-faixa .ico { width: 13px; height: 13px; margin: 0; color: var(--dourado); }
/* A faixa é o atalho de volta ao evento */
a.pro-faixa { text-decoration: none; transition: background 0.16s; }
a.pro-faixa:hover { background: rgba(201, 162, 74, 0.16); }
.pro-faixa-ir { margin-left: auto; display: flex; align-items: center; }
.pro-faixa-ir .ico { width: 14px; height: 14px; }
/* Grade de acesso às seções do evento */
.pro-secoes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 16px;
}
.pro-secao {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 10px;
border: 1px solid var(--borda);
border-radius: var(--raio-grande);
background: var(--card-vidro);
color: var(--ivory);
text-decoration: none;
text-align: center;
transition: transform 0.16s ease, border-color 0.16s;
}
.pro-secao:hover { transform: translateY(-2px); border-color: var(--dourado); }
.pro-secao .ico { width: 22px; height: 22px; margin: 0; color: var(--dourado); }
.pro-secao-nome { font-size: 12.5px; }
.pro-secao-nota { font-size: 10px; color: var(--smoke); }
/* Aviso de que o organizador está cobrindo alguém da equipe */
.aviso-cobertura {
padding: 10px 13px;
margin-bottom: 12px;
border: 1px solid var(--dourado);
border-radius: var(--raio);
background: rgba(201, 162, 74, 0.12);
font-size: 12px;
color: var(--ivory-dim);
line-height: 1.45;
}
.aviso-cobertura strong { color: var(--dourado-hi); }
/* Saida da cobertura, dentro do proprio aviso */
.aviso-cobertura-sair { margin: 10px 0 0; }
.aviso-cobertura-sair button { width: 100%; }
/* Confirmar e desistir lado a lado, no pé de um formulário longo */
.acoes-formulario {
display: flex;
gap: 8px;
align-items: stretch;
}
.acoes-formulario .btn-primario { flex: 2; justify-content: center; }
.acoes-formulario .btn-secundario {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* Número da ordem na sequência às cegas */
.ordem-tasting {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 6px;
border-radius: 50%;
background: var(--dourado);
color: #241c0c;
font-size: 11px;
font-weight: 600;
vertical-align: -3px;
}
/* ---------- Pontuacao por evento ---------- */
.item-pontuacao {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 13px;
margin-bottom: 8px;
border: 1px solid var(--borda);
border-radius: var(--raio-grande);
background: var(--card-vidro);
}
.item-desligado { opacity: 0.55; }
.item-pontuacao-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-pontuacao-info strong { font-size: 13px; font-weight: 500; color: var(--ivory); }
.item-pontuacao-nota { font-size: 11px; color: var(--smoke); }
.item-mudado { color: var(--dourado-hi); }
.item-pontuacao-liga {
display: flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
color: var(--smoke);
cursor: pointer;
white-space: nowrap;
}
.item-pontuacao-valor {
width: 68px;
flex-shrink: 0;
text-align: center;
padding: 7px 6px;
}
/* ---------- Telao ----------
O body do app é `display:flex; justify-content:center` para centralizar o
container de 430px. Aqui não há container, e naquele flex o palco encolhe
para a largura do conteúdo e fica uma tira no meio da parede. Por isso o
`display:block` explícito — sem ele, a tela nasce espremida. */
body.tela-tv {
display: block;
padding: 0;
background: #14100e;
min-height: 100vh;
}
/* Todo o conteúdo mora dentro do palco, e não solto no body, porque é ele
que gira quando a TV está de pé: girar o quebraria a rolagem e o
dimensionamento da página inteira. */
.tv-palco {
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
padding: 2.2vmin 2.4vw;
min-height: 100vh;
}
/* o placar ocupa o meio; o apoio desce para o pé da tela */
body.tela-tv #tv-placar { flex: 1; }
/* Alturas e letras saem de vmin, o lado CURTO da tela. Deitado isso é
idêntico a vh, que era o que estava aqui antes; de pé, é o que impede a
letra de crescer junto com a altura e estourar a linha. */
.tv-topo {
display: flex;
align-items: center;
gap: 18px;
padding-bottom: 1.6vmin;
margin-bottom: 2vmin;
border-bottom: 2px solid var(--dourado);
}
.tv-logo { height: 7vmin; max-height: 76px; }
.tv-titulo { display: flex; flex-direction: column; gap: 2px; }
.tv-titulo strong { font-size: 3.4vmin; font-weight: 400; color: var(--dourado-hi); line-height: 1.1; }
.tv-titulo span { font-size: 1.7vmin; color: var(--smoke); }
.tv-tabela { width: 100%; border-collapse: collapse; }
.tv-tabela td {
padding: 1.1vmin 0.8vw;
border-bottom: 1px solid rgba(255,255,255,0.07);
font-size: 3vmin;
color: var(--ivory);
}
.tv-pos { width: 4vw; text-align: center; color: var(--smoke); font-size: 2.4vmin; }
.tv-cor { width: 3vw; }
.tv-bolinha {
display: inline-block;
width: 2.4vmin; height: 2.4vmin;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.35);
}
.tv-nome { font-weight: 400; }
.tv-mesa { width: 16vw; color: var(--smoke); font-size: 2.2vmin; }
.tv-pontos { width: 12vw; text-align: right; color: var(--dourado-hi); font-weight: 500; }
/* pódio: o topo precisa saltar de longe */
.tv-podio td { font-size: 3.6vmin; }
.tv-pos-1 td { color: #e8c96a; }
.tv-pos-1 .tv-pos::after { content: '°'; }
.tv-pos-2 td { color: #cfd3d8; }
.tv-pos-3 td { color: #d0a07a; }
.tv-vazio { font-size: 3vmin; color: var(--smoke); text-align: center; padding: 8vmin 0; }
.tv-parceiros {
display: flex;
align-items: center;
gap: 2.4vw;
flex-wrap: wrap;
padding-top: 1.6vmin;
margin-top: 2vmin;
border-top: 1px solid rgba(255,255,255,0.09);
}
.tv-parceiros-rotulo {
font-size: 1.4vmin;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--smoke);
}
.tv-parceiros img { max-height: 6vmin; max-width: 14vw; object-fit: contain; }
.tv-parceiro-nome { font-size: 2vmin; color: var(--ivory-dim); }
/* Campo só de leitura com o endereço do telão. Fonte menor e monoespaçada
porque a pessoa vai CONFERIR o link, não lê-lo — e um endereço longo em
fonte de texto vira uma linha ilegível de letras coladas. */
.link-telao {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.72rem;
letter-spacing: 0;
margin-bottom: 8px;
cursor: text;
}
/* ---------- Telão vertical (TV de pé) ----------
*
* Quase nenhum aparelho gira o sinal: Chromecast, mini-PC e notebook seguem
* mandando paisagem mesmo com a TV virada na parede. Então o giro é nosso —
* e mora dentro do @media de paisagem, porque num aparelho que JÁ entrega
* retrato (player de sinalização, tablet) girar de novo deitaria tudo.
*/
@media (orientation: landscape) {
body.tv-vertical { overflow: hidden; }
body.tv-vertical .tv-palco {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vw;
min-height: 0;
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
}
}
/* Dentro do palco girado, vw continua sendo a tela FÍSICA — o lado longo,
que ali virou a altura. Por isso as larguras deixam de sair de vw e passam
a ser porcentagem da tabela, que já está na medida certa. */
body.tv-vertical .tv-palco { padding: 2.2vmin 3vmin; }
body.tv-vertical .tv-tabela td { padding: 1.4vmin 1.5%; }
body.tv-vertical .tv-pos { width: 8%; }
body.tv-vertical .tv-cor { width: 8%; }
body.tv-vertical .tv-mesa { width: 24%; }
body.tv-vertical .tv-pontos { width: 18%; }
body.tv-vertical .tv-parceiros { gap: 4%; }
body.tv-vertical .tv-parceiros img { max-width: 26%; }
/* ---------- Parceiros ---------- */
.grade-parceiros {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.parceiro-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 14px 10px;
border: 1px solid var(--borda);
border-radius: var(--raio-grande);
background: var(--card-vidro);
text-align: center;
}
.parceiro-card img {
max-width: 100%;
max-height: 66px;
object-fit: contain;
}
.parceiro-card strong { font-size: 12.5px; font-weight: 500; color: var(--ivory); overflow-wrap: anywhere; }
.parceiro-sem-logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 66px;
border-radius: var(--raio);
background: rgba(255,255,255,0.04);
}
.parceiro-sem-logo .ico { width: 24px; height: 24px; margin: 0; color: var(--smoke); }
.parceiro-site {
font-size: 11px;
color: var(--dourado);
text-decoration: none;
overflow-wrap: anywhere;
}
/* Cor já ocupada por alguém: dá para ver, não dá para desmarcar */
.cor-travada { opacity: 0.55; cursor: not-allowed; }
/* ---------- Crupiê: rodadas e cadastro de equipe ---------- */
.rodadas-crupie {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.rodadas-crupie a { flex: 1 1 auto; min-width: 88px; text-align: center; }
.form-equipe {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--borda);
}
.mesa-pro-topo .bolinha-cor { margin-right: 6px; }
/* ---------- Evento profissional: mesas e cores ---------- */
.mesa-pro {
padding: 13px 14px;
margin-bottom: 10px;
border: 1px solid var(--borda);
border-radius: var(--raio-grande);
background: var(--card-vidro);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.mesa-pro-minha { border-color: var(--vinho); }
html[data-tema="escuro"] .mesa-pro-minha { border-color: var(--dourado); }
.mesa-pro-cheia { opacity: 0.6; }
.mesa-pro-topo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.mesa-pro-topo strong { font-size: 14px; font-weight: 500; color: var(--ivory); }
.mesa-pro-vagas { font-size: 11px; color: var(--smoke); white-space: nowrap; }
.mesa-pro-lugares { list-style: none; margin: 0 0 10px; padding: 0; }
.mesa-pro-lugares li {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
border-bottom: 1px solid var(--borda);
font-size: 12.5px;
}
.mesa-pro-lugares li:last-child { border-bottom: none; }
.mesa-pro-nome { flex: 1; color: var(--ivory-dim); overflow-wrap: anywhere; }
.mesa-pro-cor { font-size: 11px; color: var(--smoke); white-space: nowrap; }
.mesa-pro-vazia { margin: 0; font-size: 12px; color: var(--smoke); font-style: italic; }
.bolinha-cor {
display: inline-block;
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.28);
flex-shrink: 0;
vertical-align: -2px;
}
.mesa-pro-alocar {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.mesa-pro-alocar select { flex: 1; min-width: 110px; padding: 7px 9px; font-size: 12px; }
.mesa-pro-alocar button { flex-shrink: 0; }
/* Escolha da cor pelo jogador */
.cores-escolha {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 4px 0 12px;
}
/* Cada opção é uma pílula com a bolinha da cor e o nome ao lado. O nome
importa: quem não distingue bem as cores precisa de outra pista. */
.cor-opcao {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px 6px 8px;
border: 1px solid var(--borda);
border-radius: 999px;
font-size: 12px;
color: var(--ivory-dim);
cursor: pointer;
}
.cor-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.cor-opcao .cor-bola {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.3);
flex-shrink: 0;
}
.cor-opcao:has(input:checked) {
border-color: var(--vinho);
background: rgba(152,21,64,0.14);
color: var(--ivory);
}
html[data-tema="escuro"] .cor-opcao:has(input:checked) { border-color: var(--dourado); }
/* :has() é recente; sem ele a seleção some. O contorno no foco garante que
dá para saber o que está marcado mesmo no navegador antigo. */
.cor-opcao input:focus-visible + .cor-bola { outline: 2px solid var(--vinho-bright); outline-offset: 2px; }
/* ---------- Cards comparativos de plano ---------- */
.licenca-cabecalho { margin-bottom: 14px; }
.licenca-cabecalho h1 {
margin: 0 0 3px;
font-size: 22px;
font-weight: 300;
color: var(--ivory);
}
.licenca-cabecalho p { margin: 0; font-size: 12.5px; color: var(--ivory-dim); }
/* chave mensal x anual */
.ciclo-chave {
display: flex;
gap: 4px;
padding: 4px;
margin-bottom: 14px;
border: 1px solid var(--borda);
border-radius: 999px;
background: var(--card-vidro);
}
.ciclo-opcao {
flex: 1;
padding: 8px 10px;
border-radius: 999px;
text-align: center;
font-size: 12.5px;
color: var(--ivory-dim);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.ciclo-opcao.ativa { background: var(--vinho); color: #fff; }
.ciclo-desconto {
font-size: 9.5px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
letter-spacing: 0.04em;
}
.cards-planos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.card-plano {
padding: 16px 15px;
border: 1px solid var(--borda);
border-radius: var(--raio-grande);
background: var(--card-vidro);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.card-plano-atual { border-color: var(--vinho); }
.card-plano-futuro { opacity: 0.8; }
/* No escuro o plano atual sai no dourado da marca, que conversa com a logo */
html[data-tema="escuro"] .card-plano-atual { border-color: var(--dourado); }
.card-plano-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.card-plano-nome { font-size: 16px; font-weight: 500; color: var(--ivory); }
.card-plano-resumo {
margin: 0 0 12px;
font-size: 12px;
color: var(--smoke);
line-height: 1.45;
}
.card-plano-preco {
display: flex;
align-items: baseline;
flex-wrap: wrap; /* o vitalício desce para a própria linha */
gap: 7px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--borda);
}
.preco-valor { font-size: 24px; font-weight: 300; color: var(--ivory); }
.preco-indefinido { font-size: 17px; color: var(--smoke); }
.preco-ciclo { font-size: 11.5px; color: var(--smoke); }
.card-plano-recursos {
list-style: none;
margin: 0 0 12px;
padding: 0;
}
.card-plano-recursos li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 4px 0;
font-size: 12.5px;
line-height: 1.4;
}
.card-plano-recursos .ico { width: 13px; height: 13px; margin: 2px 0 0; flex-shrink: 0; }
.recurso-sim { color: var(--ivory-dim); }
.recurso-sim .ico { color: var(--verde); }
.recurso-nao { color: var(--smoke); opacity: 0.55; }
.recurso-nao .ico { color: var(--smoke); }
.card-plano-nota {
margin: 0 0 12px;
font-size: 11.5px;
line-height: 1.45;
color: var(--smoke);
}
.card-plano-acao button:disabled { opacity: 0.5; cursor: default; }
.minha-assinatura {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 14px;
margin-bottom: 14px;
border: 1px solid var(--vinho);
border-radius: var(--raio-grande);
background: var(--card-vidro);
}
.minha-assinatura form { flex-shrink: 0; margin: 0; }
/* O selo "Seu plano" / "Em breve" é o que sobrou da primeira versão desta
tela; o resto virou .card-plano-* logo acima. */
.plano-selo {
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: rgba(152,21,64,0.18);
border: 1px solid rgba(152,21,64,0.42);
color: var(--vinho-bright);
white-space: nowrap;
}
.plano-selo-breve {
background: rgba(122,114,104,0.2);
border-color: rgba(122,114,104,0.32);
color: var(--smoke);
}
.campo-serial {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
letter-spacing: 0.10em;
text-transform: uppercase;
}
/* ---------- Zona de perigo: excluir a mesa ---------- */
.zona-perigo {
margin: 4px 0 14px;
padding: 14px;
border: 1px solid var(--borda);
border-radius: var(--raio-grande);
background: var(--card-vidro);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.btn-perigo-abrir {
width: 100%;
padding: 9px 12px;
background: transparent;
border: 1px dashed var(--smoke);
border-radius: var(--raio);
color: var(--smoke);
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.btn-perigo-abrir:hover { color: var(--vinho-bright); border-color: var(--vinho); }
.btn-perigo-abrir .ico { width: 13px; height: 13px; margin: 0; }
/* a caixa de confirmar so aparece depois do primeiro clique */
#caixa-exclusao { margin-top: 4px; }
.zona-perigo-titulo {
font-size: 11px !important;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--vinho-bright) !important;
margin: 0 0 10px !important;
}
.zona-perigo p {
font-size: 12.5px;
color: var(--ivory-dim);
line-height: 1.5;
margin: 0 0 8px;
}
.zona-perigo-lista {
margin: 0 0 12px;
padding-left: 18px;
font-size: 12px;
color: var(--smoke);
line-height: 1.7;
}
.zona-perigo-aviso {
font-size: 12px !important;
color: var(--ivory) !important;
}
/* .largura-total só existe casada com btn-primario/btn-secundario, então
este aqui já nasce ocupando a linha inteira */
.btn-perigo {
display: block;
width: 100%;
padding: 11px 14px;
border: none;
border-radius: var(--raio);
background: var(--vinho);
color: #fff;
font-family: inherit;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
}
.btn-perigo:hover { background: var(--vinho-bright); }
/* Mesa criada, ainda enchendo: nem parada nem em jogo */
.badge-aberto {
background: rgba(152,21,64,0.16);
color: var(--vinho-bright);
border: 1px solid rgba(152,21,64,0.4);
}
/* ============================================================
TABELAS
============================================================ */
.tabela-padrao {
width: 100%;
border-collapse: collapse;
text-align: left;
color: var(--ivory);
font-size: 0.9em;
}
.tabela-padrao thead tr {
background: var(--mogno-hi);
border-bottom: 2px solid var(--dourado-lo);
}
.tabela-padrao thead th {
padding: 12px 14px;
font-weight: 500;
color: var(--dourado);
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tabela-padrao tbody tr {
border-bottom: 1px solid var(--mogno-borda);
transition: background 0.15s;
}
.tabela-padrao tbody tr:hover { background: var(--hover-linha); }
.tabela-padrao tbody td {
padding: 13px 14px;
vertical-align: middle;
}
.tabela-padrao .col-direita { text-align: right; }
/* ---------- Trocar a ordem da sequencia (evento profissional) ---------- */
.form-mover {
display: inline-flex;
gap: 4px;
margin: 0;
}
.btn-mover {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: transparent;
color: var(--ivory-dim);
cursor: pointer;
transition: border-color 0.16s, color 0.16s;
}
.btn-mover:hover:not(:disabled) { border-color: var(--vinho); color: var(--ivory); }
.btn-mover:disabled { opacity: 0.25; cursor: not-allowed; }
.btn-mover .ico { width: 14px; height: 14px; margin: 0; }
.badge-codigo {
background: rgba(212,175,55,0.15);
color: var(--dourado);
padding: 4px 10px;
border-radius: 5px;
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
font-size: 0.9em;
letter-spacing: 0.06em;
border: 1px solid var(--borda-ouro);
}
.acoes-tabela {
display: flex;
gap: 10px;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
}
/* ============================================================
CARD FORMULÁRIO (novo jogo, adicionar vinho, etc.)
============================================================ */
.card-formulario, .form-card {
background: var(--card-vidro);
backdrop-filter: blur(2px);
border-radius: var(--raio-grande);
box-shadow: var(--sombra);
border: 1px solid var(--mogno-borda);
border-top: 3px solid var(--dourado);
padding: 24px 20px;
max-width: 620px;
margin: 24px auto;
color: var(--ivory);
}
.card-formulario-cabecalho, .form-header {
text-align: center;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--mogno-borda);
}
.card-formulario-cabecalho h2,
.form-header h2 {
color: var(--dourado);
margin-top: 0;
font-family: var(--fonte-titulo);
font-size: 1.6em;
text-shadow: var(--texto-glow);
}
.card-formulario-cabecalho p,
.form-header p {
color: var(--ivory-dim);
font-size: 0.88em;
margin: 0;
}
.caixa-info {
background: var(--card-vidro-2);
padding: 14px 16px;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
margin-bottom: 16px;
}
.caixa-info p {
font-size: 0.85em;
color: var(--ivory-dim);
margin: 6px 0 0 0;
}
.caixa-destaque {
background: var(--realce-ouro);
padding: 14px 16px;
border-radius: var(--raio);
border-left: 3px solid var(--dourado);
margin-bottom: 18px;
}
.caixa-destaque label,
.caixa-destaque .rotulo-destaque {
color: var(--dourado);
}
/* ============================================================
PAINEL DO CRUPIÊ
============================================================ */
.painel-crupie {
padding: 20px 16px 32px;
}
.painel-crupie h2 {
color: var(--dourado);
margin-bottom: 4px;
font-family: var(--fonte-titulo);
font-size: 1.5em;
text-shadow: var(--texto-glow);
}
.seletor-rodada {
margin: 16px 0;
padding: 14px 16px;
background: var(--card-vidro);
backdrop-filter: blur(2px);
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
display: flex;
flex-direction: column;
gap: 8px;
}
.seletor-rodada label {
color: var(--ivory-dim);
font-size: 0.82em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.tabela-crupie {
width: 100%;
border-collapse: collapse;
background: var(--card-vidro);
backdrop-filter: blur(2px);
border-radius: var(--raio);
overflow: hidden;
box-shadow: var(--sombra);
border: 1px solid var(--mogno-borda);
font-size: 0.9em;
}
.tabela-crupie thead tr {
background: var(--mogno-hi);
border-bottom: 2px solid var(--dourado-lo);
}
.tabela-crupie thead th {
padding: 13px 12px;
font-size: 0.78em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--dourado);
font-weight: 500;
}
.tabela-crupie tbody tr {
border-bottom: 1px solid var(--mogno-borda);
transition: background 0.15s;
}
.tabela-crupie tbody tr:hover { background: var(--hover-linha); }
.tabela-crupie tbody td {
padding: 13px 12px;
vertical-align: middle;
color: var(--ivory);
}
.tag-dealer {
color: var(--dourado);
font-weight: 600;
font-size: 0.82em;
background: rgba(212,175,55,0.12);
padding: 3px 8px;
border-radius: 4px;
border: 1px solid var(--borda-ouro);
letter-spacing: 0.14em;
}
.tr-dealer {
background: var(--realce-ouro) !important;
}
.tag-na-mesa {
color: var(--sucesso-texto);
font-weight: 500;
font-size: 0.82em;
}
/* Revelar header no painel crupie */
.revelar-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.btn-revelar-tag {
background: linear-gradient(135deg, var(--vinho) 0%, var(--vinho-deep) 100%);
color: var(--sobre-vinho);
border: 1px solid var(--borda-ouro);
padding: 9px 16px;
border-radius: 6px;
font-size: 0.85em;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
font-family: var(--fonte-corpo);
}
.btn-revelar-tag:hover {
background: linear-gradient(135deg, var(--vinho-bright) 0%, var(--vinho) 100%);
box-shadow: 0 0 12px rgba(139,26,42,0.5);
}
.btn-revelado-tag {
background: linear-gradient(135deg, #a98d5c 0%, #8a6d3f 100%);
color: #fff;
border: none;
padding: 9px 16px;
border-radius: 6px;
font-size: 0.85em;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
font-family: var(--fonte-corpo);
transition: all 0.2s;
}
.btn-revelado-tag:hover {
box-shadow: 0 0 12px rgba(169,141,92,0.45);
}
.aviso-bloqueado {
background: rgba(201,122,0,0.12);
color: var(--warn-texto);
border: 1px solid rgba(201,122,0,0.3);
border-radius: 6px;
padding: 10px 16px;
font-size: 0.85em;
margin: 10px 0 14px;
text-align: center;
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
backdrop-filter: blur(2px);
}
.modal-caixa {
background: var(--bg-app);
backdrop-filter: blur(3px);
border-radius: 10px;
border: 1px solid var(--dourado-lo);
border-top: 3px solid var(--dourado);
padding: 28px 24px 24px;
width: 100%;
max-width: 400px;
position: relative;
box-shadow: var(--sombra), var(--sombra-ouro);
max-height: 90vh;
overflow-y: auto;
}
.modal-fechar {
position: absolute;
top: 12px;
right: 14px;
background: none;
border: none;
font-size: 1.1em;
cursor: pointer;
color: var(--smoke);
line-height: 1;
transition: color 0.15s;
}
.modal-fechar:hover { color: var(--ivory); }
.modal-titulo {
color: var(--dourado);
margin: 0 0 16px;
font-size: 1.15em;
font-family: var(--fonte-titulo);
text-shadow: var(--texto-glow);
}
.revelacao-grid-modal {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 14px;
font-size: 0.88em;
color: var(--ivory);
background: var(--mogno-lo);
border-radius: 8px;
padding: 14px;
border: 1px solid var(--mogno-borda);
}
.revelacao-grid-modal div { line-height: 1.5; }
.revelacao-grid-modal strong { color: var(--dourado); }
/* ============================================================
PÁGINA DE RANKING
============================================================ */
.pagina-ranking {
padding: 20px 8px 40px;
}
.ranking-cabecalho {
text-align: center;
margin-bottom: 24px;
padding: 28px 0 20px;
border-bottom: 1px solid var(--mogno-borda);
}
.ranking-titulo-jogo {
position: relative;
z-index: 1;
color: var(--dourado);
margin: 0;
font-family: var(--fonte-titulo);
font-size: 1.5em;
font-weight: 600;
text-shadow: var(--texto-glow);
letter-spacing: 0.02em;
}
.tabela-ranking {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.88em;
table-layout: fixed;
}
.tabela-ranking thead tr {
background: var(--mogno-hi);
border-bottom: 2px solid var(--dourado-lo);
}
.tabela-ranking thead th {
padding: 10px 5px;
font-size: 0.72em;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--dourado);
font-weight: 500;
text-align: center;
overflow: hidden;
}
.tabela-ranking tbody tr {
border-bottom: 1px solid var(--mogno-borda);
color: var(--ivory);
transition: background 0.15s;
}
.tabela-ranking tbody tr:hover { background: var(--hover-linha); }
.tabela-ranking tbody td { padding: 11px 5px; vertical-align: middle; overflow: hidden; }
.col-pos { text-align: center; width: 32px; font-size: 1.1em; }
.col-fichas {
text-align: center;
width: 44px;
font-size: 1.1em;
font-weight: 600;
color: var(--dourado);
text-shadow: var(--texto-glow);
font-family: var(--fonte-titulo);
}
.col-desempate {
text-align: center;
width: 32px;
color: var(--ivory-dim);
font-size: 0.95em;
}
.linha-ouro {
background: linear-gradient(90deg, rgba(212,175,55,0.18) 0%, rgba(0,0,0,0) 100%);
font-weight: 600;
}
.linha-prata {
background: linear-gradient(90deg, rgba(192,192,192,0.12) 0%, rgba(0,0,0,0) 100%);
}
.linha-bronze {
background: linear-gradient(90deg, rgba(205,127,50,0.12) 0%, rgba(0,0,0,0) 100%);
}
.nome-jogador {
font-size: 1em;
color: var(--ivory);
font-weight: 500;
}
.card-ranking {
position: relative;
background: var(--card-vidro);
backdrop-filter: blur(2px);
border-radius: var(--raio-grande);
border: 1px solid var(--mogno-borda);
box-shadow: var(--sombra);
overflow: hidden;
}
.card-ranking .tabela-ranking {
position: relative;
z-index: 1;
}
.ranking-rodape {
margin-top: 18px;
text-align: center;
color: var(--smoke);
font-size: 0.82em;
padding: 14px 12px;
background: var(--card-vidro-2);
border: 1px solid var(--mogno-borda);
border-radius: var(--raio);
}
.ranking-rodape strong { color: var(--ivory-dim); }
.ranking-rodape .desempate-desc {
font-size: 0.85em;
color: var(--smoke);
margin-top: 5px;
}
/* ============================================================
REVELAÇÃO DO VINHO
============================================================ */
.pagina-revelacao {
padding: 20px 16px;
color: var(--ivory);
}
.pagina-revelacao h2 {
color: var(--dourado);
text-align: center;
font-family: var(--fonte-titulo);
font-size: 1.7em;
}
.pagina-revelacao .subtitulo {
text-align: center;
color: var(--ivory-dim);
margin-bottom: 24px;
}
.seletor-garrafa {
background: var(--mogno);
padding: 16px;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
text-align: center;
margin-bottom: 24px;
}
.seletor-garrafa label {
font-weight: 500;
display: block;
margin-bottom: 8px;
color: var(--ivory-dim);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.seletor-garrafa select {
padding: 10px;
width: 100%;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
background: var(--mogno-lo);
color: var(--ivory);
-webkit-appearance: none;
}
.card-revelacao {
background: var(--mogno);
border-radius: var(--raio-grande);
box-shadow: var(--sombra), var(--sombra-ouro);
border: 1px solid var(--dourado-lo);
border-top: 3px solid var(--dourado);
padding: 28px 20px;
text-align: center;
animation: fadeInUp 0.6s ease-out;
}
.revelacao-icone { font-size: 3.5em; margin-bottom: 8px; }
.revelacao-nome {
color: var(--dourado);
margin: 0 0 10px 0;
font-family: var(--fonte-titulo);
font-size: 2em;
text-shadow: var(--texto-glow);
}
.revelacao-tag {
display: inline-block;
background: linear-gradient(135deg, var(--vinho), var(--vinho-deep));
color: var(--sobre-vinho);
padding: 5px 16px;
border-radius: 20px;
font-weight: 500;
font-size: 0.85em;
margin-bottom: 22px;
border: 1px solid var(--borda-ouro);
}
.revelacao-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
text-align: left;
background: var(--mogno-lo);
padding: 16px;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
margin-bottom: 16px;
}
.revelacao-grid p { margin: 6px 0; font-size: 0.9em; color: var(--ivory); }
.revelacao-maturacao {
text-align: left;
background: var(--realce-ouro);
padding: 14px;
border-radius: var(--raio);
border-left: 3px solid var(--dourado);
margin-bottom: 20px;
}
.revelacao-maturacao h4 {
color: var(--dourado);
margin: 0 0 8px 0;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.revelacao-maturacao ul {
margin: 0;
padding-left: 18px;
color: var(--ivory-dim);
font-size: 0.9em;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* ============================================================
GERAR SEQUÊNCIA
============================================================ */
.pagina-sequencia {
padding: 20px 16px;
color: var(--ivory);
}
.pagina-sequencia h2 {
color: var(--dourado);
font-family: var(--fonte-titulo);
}
.form-sequencia {
margin-bottom: 24px;
padding: 16px;
background: var(--card-vidro);
backdrop-filter: blur(2px);
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
}
.card-vinho-seq {
border: 1px solid var(--mogno-borda);
padding: 16px;
margin-bottom: 14px;
border-radius: var(--raio);
background: var(--card-vidro);
backdrop-filter: blur(2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
color: var(--ivory);
}
.card-vinho-seq h3 {
margin-top: 0;
color: var(--dourado);
display: flex;
align-items: center;
gap: 10px;
font-family: var(--fonte-titulo);
}
.numero-ordem {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--dourado), var(--dourado-lo));
color: var(--mogno-lo);
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.88em;
font-weight: 600;
flex-shrink: 0;
}
.card-vinho-seq .grid-detalhes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.card-vinho-seq p { margin: 4px 0; font-size: 0.9em; color: var(--ivory-dim); }
.score-peso {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--mogno-borda);
font-size: 0.78em;
color: var(--smoke);
text-align: right;
}
.tabela-breakdown {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
font-size: 0.85em;
color: var(--ivory);
}
.tabela-breakdown th,
.tabela-breakdown td {
padding: 7px 10px;
border-bottom: 1px solid var(--mogno-borda);
text-align: left;
vertical-align: top;
}
.tabela-breakdown thead th {
background: var(--mogno-hi);
color: var(--dourado);
font-size: 0.78em;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 500;
}
.tabela-breakdown .col-pts {
text-align: right;
white-space: nowrap;
width: 60px;
font-variant-numeric: tabular-nums;
color: var(--dourado);
}
.tabela-breakdown tfoot .linha-total td {
border-top: 2px solid var(--dourado-lo);
border-bottom: none;
padding-top: 8px;
background: var(--realce-ouro);
color: var(--dourado);
font-size: 1em;
font-weight: 600;
}
.carregando {
display: none;
text-align: center;
padding: 20px;
color: var(--ivory-dim);
}
/* ============================================================
REGRAS
============================================================ */
.pagina-regras {
padding: 20px 16px 40px;
color: var(--ivory);
}
.regras-cabecalho {
text-align: center;
margin-bottom: 28px;
padding-top: 8px;
}
.regras-cabecalho h1 {
color: var(--dourado);
font-family: var(--fonte-titulo);
font-size: 2.4em;
margin-bottom: 4px;
text-shadow: var(--texto-glow);
}
.secao-regra {
background: var(--card-vidro);
backdrop-filter: blur(2px);
padding: 20px;
border-radius: var(--raio);
border: 1px solid var(--mogno-borda);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
margin-bottom: 16px;
color: var(--ivory);
}
.secao-regra h3 {
color: var(--dourado);
margin-top: 0;
border-bottom: 1px solid var(--mogno-borda);
padding-bottom: 8px;
font-family: var(--fonte-titulo);
}
.secao-regra ol, .secao-regra ul { padding-left: 22px; }
.secao-regra li { margin-bottom: 8px; font-size: 0.92em; color: var(--ivory-dim); }
.tabela-pontos {
width: 100%;
border-collapse: collapse;
margin-top: 14px;
font-size: 0.9em;
}
.tabela-pontos thead tr {
background: var(--mogno-hi);
border-bottom: 2px solid var(--dourado-lo);
}
.tabela-pontos thead th {
color: var(--dourado);
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 10px 12px;
}
.tabela-pontos tbody tr { border-bottom: 1px solid var(--mogno-borda); }
.tabela-pontos th, .tabela-pontos td { padding: 10px 12px; color: var(--ivory); }
.tabela-pontos .col-pontos {
text-align: center;
font-weight: 600;
color: var(--dourado);
font-size: 1.1em;
}
.secao-regra-aviso {
background: rgba(201,122,0,0.1);
padding: 20px;
border-radius: var(--raio);
border-left: 4px solid var(--warn);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
margin-bottom: 16px;
color: var(--ivory);
}
.secao-regra-aviso h3 { color: var(--warn-texto); margin-top: 0; }
/* ============================================================
ADICIONAR VINHO
============================================================ */
.pagina-adicionar {
padding: 20px 16px 40px;
}
/* ============================================================
VERIFICAÇÃO DE EMAIL / ERRO GERAL
============================================================ */
.pagina-verificacao {
max-width: 100%;
text-align: center;
padding: 60px 20px;
color: var(--ivory);
}
.pagina-verificacao h2 { font-size: 1.7em; color: var(--dourado); font-family: var(--fonte-titulo); }
.pagina-verificacao p { font-size: 1em; color: var(--ivory-dim); }
.pagina-erro {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 20px;
}
.caixa-erro {
background: var(--mogno);
border-radius: var(--raio-grande);
border: 1px solid var(--mogno-borda);
border-top: 3px solid var(--danger);
padding: 30px 24px;
max-width: 100%;
text-align: center;
}
.caixa-erro h2 { color: var(--dourado); font-family: var(--fonte-titulo); }
.detalhe-erro { font-size: 0.82em; color: var(--smoke); font-family: monospace; }
/* ============================================================
ENTRAR NO JOGO (PARTICIPANTE)
============================================================ */
.pagina-entrar {
padding: 40px 16px;
}
/* ============================================================
SIMULADOR DE EMAIL (WAMP / desenvolvimento)
============================================================ */
.caixa-dev {
background: var(--mogno-lo);
padding: 14px;
border-radius: var(--raio);
font-size: 0.85em;
margin-top: 12px;
border: 1px solid var(--mogno-borda);
}
.caixa-dev strong { color: var(--ivory); }
.caixa-dev a { color: var(--dourado); font-weight: 600; }
/* ============================================================
CHIP (pontos / ficha visual)
============================================================ */
.chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--dourado-hi), var(--dourado-lo));
border: 3px solid rgba(255,255,255,0.25);
color: var(--mogno-lo);
font-weight: 600;
font-size: 0.85em;
box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* ============================================================
UTILITÁRIOS
============================================================ */
.texto-centro { text-align: center; }
.texto-direita { text-align: right; }
.texto-suave { color: var(--ivory-dim); }
.texto-vinho { color: var(--vinho-bright); }
.texto-verde { color: var(--sucesso-texto); }
.texto-erro { color: var(--erro-cor); }
.negrito { font-weight: 500; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.oculto { display: none; }
.text-muted { color: var(--smoke); font-size: 0.88em; }
.text-center { text-align: center; }
/* Container genérico */
.container {
padding: 16px;
}
/* ============================================================
RESPONSIVIDADE — o layout já é mobile-first
Em telas largas mantém o container centralizado
============================================================ */
@media (min-width: 431px) {
body {
background-color: var(--bg-html);
}
}
@media (max-width: 430px) {
.grid-2,
.revelacao-grid,
.card-vinho-seq .grid-detalhes {
grid-template-columns: 1fr;
}
.acoes-tabela { flex-direction: column; align-items: flex-start; }
}
/* Suporte — acessível via página de perfil */
/* ============================================================
PÁGINA DE PERFIL
============================================================ */
.perfil-container {
padding: 20px 12px;
}
.perfil-header {
display: flex;
align-items: center;
gap: 16px;
background: var(--mogno);
border: 1px solid var(--dourado-lo);
border-top: 3px solid var(--dourado);
border-radius: var(--raio-grande);
padding: 20px;
margin-bottom: 20px;
}
.perfil-avatar {
font-size: 2.8em;
line-height: 1;
}
.perfil-nome {
font-family: var(--fonte-titulo);
font-size: 1.2em;
color: var(--ivory);
margin: 0 0 4px;
}
.perfil-email {
color: var(--smoke);
font-size: 0.85em;
margin: 0;
}
.perfil-card {
background: var(--card-vidro);
border: 1px solid var(--mogno-borda);
border-radius: var(--raio-grande);
padding: 20px;
margin-bottom: 16px;
}
.perfil-secao-titulo {
color: var(--dourado);
font-family: var(--fonte-titulo);
font-size: 1em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--mogno-borda);
}
.btn-secundario.largura-total {
width: 100%;
}
/* ============================================================
BOTÃO DE TEMA (claro / escuro)
============================================================ */
.btn-tema {
position: fixed;
bottom: 18px;
right: calc(50% - 215px + 14px); /* ancorado à direita do app-container de 430px */
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--borda-ouro);
background: var(--card-vidro);
color: var(--vinho);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--sombra);
cursor: pointer;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-tema:hover { transform: scale(1.08); }
.btn-tema:active { transform: scale(0.94); }
.btn-tema svg { width: 20px; height: 20px; }
/* No claro mostra a lua (o que você vai ativar); no escuro, o sol */
.btn-tema .icone-sol { display: none; }
.btn-tema .icone-lua { display: block; }
html[data-tema="escuro"] .btn-tema .icone-sol { display: block; }
html[data-tema="escuro"] .btn-tema .icone-lua { display: none; }
html[data-tema="escuro"] .btn-tema { color: var(--dourado); }
@media (max-width: 460px) {
.btn-tema { right: 14px; }
}
/* ---------- Logo conforme o tema ---------- */
.logo-tema-claro { display: inline-block; }
.logo-tema-escuro { display: none; }
html[data-tema="escuro"] .logo-tema-claro { display: none; }
html[data-tema="escuro"] .logo-tema-escuro { display: inline-block; }
/* ============================================================
BARRA DE TOPO + MENU LATERAL
============================================================ */
.barra-topo {
display: flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 0 14px;
position: sticky;
top: 0;
z-index: 100;
background: var(--nav-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--linha-sutil);
}
.btn-menu {
width: 38px;
height: 38px;
border: none;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 0 8px;
cursor: pointer;
flex-shrink: 0;
}
.btn-menu span {
display: block;
height: 1.5px;
border-radius: 2px;
background: var(--ivory-dim);
transition: background 0.2s;
}
.btn-menu span:nth-child(2) { width: 70%; }
.btn-menu:hover span { background: var(--vinho); }
.topo-logo { display: flex; align-items: center; margin: 0 auto; }
.topo-logo img { height: 38px; width: auto; }
.topo-espaco { width: 38px; flex-shrink: 0; }
/* ---------- Fundo escurecido atrás do menu ---------- */
.menu-fundo {
position: fixed;
inset: 0;
background: rgba(20, 12, 8, 0.45);
backdrop-filter: blur(2px);
z-index: 150;
}
/* ---------- O painel lateral ---------- */
.menu-lateral {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 82vw;
max-width: 300px;
background: var(--bg-card);
border-right: 1px solid var(--borda);
z-index: 160;
transform: translateX(-102%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
padding: 26px 0 18px;
display: flex;
flex-direction: column;
}
.menu-lateral.aberto { transform: translateX(0); }
/* ---------- Cabeçalho do menu: avatar + nome ---------- */
.menu-perfil {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 6px 22px 22px;
border-bottom: 1px solid var(--linha-sutil);
margin-bottom: 6px;
}
.menu-avatar {
width: 68px;
height: 68px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--mogno-hi);
border: 1px solid var(--borda);
flex-shrink: 0;
}
.menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-iniciais {
font-size: 1.35rem;
font-weight: 300;
letter-spacing: 0.04em;
color: var(--vinho);
}
.menu-perfil-nome {
font-size: 0.98rem;
font-weight: 400;
color: var(--ivory);
text-align: center;
line-height: 1.3;
}
/* ---------- Rótulo de grupo ---------- */
.menu-grupo {
padding: 20px 22px 6px;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--smoke);
}
.menu-grupo::after {
content: '';
display: block;
height: 1px;
background: var(--linha-sutil);
margin-top: 7px;
}
/* ---------- Itens ---------- */
.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 11px 22px;
font-family: var(--fonte-corpo);
font-size: 0.94rem;
font-weight: 300;
color: var(--ivory);
text-decoration: none;
background: none;
border: none;
border-left: 2px solid transparent;
text-align: left;
cursor: pointer;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.menu-item:hover { background: var(--hover-linha); color: var(--vinho); }
.menu-item.ativo {
color: var(--vinho);
border-left-color: var(--vinho);
font-weight: 400;
background: var(--realce-ouro);
}
.menu-item.desativado {
color: var(--smoke);
cursor: default;
}
.menu-item.desativado:hover { background: none; color: var(--smoke); }
.menu-item em {
font-style: normal;
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--smoke);
border: 1px solid var(--linha-sutil);
border-radius: 20px;
padding: 2px 8px;
white-space: nowrap;
}
/* ---------- Chave liga/desliga fora do menu ----------
*
* Mesma peça visual do botão de tema, mas como SUBMIT de um formulário: o
* estado vem do servidor, não do navegador. Uma chave que só mexe no DOM
* mentiria depois de um F5, e aqui ela decide se um evento inteiro entra
* ou não no app.
*/
.chave-liga {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 9px 12px;
margin-top: 4px;
font-family: var(--fonte-corpo);
font-size: 0.86rem;
font-weight: 300;
color: var(--ivory-dim);
text-align: left;
background: none;
border: 1px solid var(--linha-sutil);
border-radius: var(--raio);
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.chave-liga:hover { border-color: var(--borda); background: var(--hover-linha); }
.chave-liga .chave {
width: 38px;
height: 21px;
border-radius: 20px;
background: var(--mogno-hi);
border: 1px solid var(--borda);
position: relative;
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s;
}
.chave-liga .chave-bolinha {
position: absolute;
top: 2px;
left: 2px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--smoke);
transition: transform 0.22s ease, background 0.22s;
}
.chave-liga.ligado { color: var(--ivory); border-color: var(--dourado); }
.chave-liga.ligado .chave { background: var(--dourado); border-color: var(--dourado); }
.chave-liga.ligado .chave-bolinha { transform: translateX(17px); background: #241c0c; }
/* Card de evento que não sincroniza: continua legível, mas recua. A lista
inteira da conta Sympla passa por aqui, e a maior parte não é nossa. */
.mesa-pro-apagada { opacity: 0.62; }
.mesa-pro-apagada:hover { opacity: 1; }
/* ---------- Fichário do evento ----------
*
* Barra vertical à esquerda, só com os ícones, e um botão que abre os
* rótulos. Em pé cabem as doze seções de uma vez — deitada, a faixa rolava
* e metade delas vivia fora da vista.
*
* Fica FIXA: numa tela longa como a de participantes, poder pular de seção
* sem subir até o topo é o ponto todo.
*/
:root { --topo-app: 56px; --trilho: 52px; --trilho-aberto: 176px; }
.fichario {
position: fixed;
top: var(--topo-app);
bottom: 0;
/* Acompanha o container de 430px centralizado; em tela estreita ele
começa na borda, e o max(0px) evita valor negativo. */
left: max(0px, calc(50% - 215px));
z-index: 60;
width: var(--trilho);
display: flex;
flex-direction: column;
background: var(--nav-bg);
border-right: 1px solid var(--linha-sutil);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: width 0.18s ease;
}
/* Aberto ele COBRE o conteúdo em vez de espremê-lo: numa tela de 430px,
empurrar 176px deixaria 250px de conteúdo, o que não serve para nada. */
.fichario.aberto {
width: var(--trilho-aberto);
box-shadow: 6px 0 22px rgba(0, 0, 0, 0.4);
}
/* O conteúdo abre espaço para o trilho fechado, e só para ele. Vai no
.main-content, que embrulha todas as telas — assim as treze seções
recuam juntas, sem depender de qual container cada uma usa por dentro. */
body.com-fichario .main-content { padding-left: calc(var(--trilho) + 10px); }
.fichario-abrir {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
width: 100%;
/* Cresce se o nome do evento ocupar duas linhas */
min-height: 42px;
/* 19px à esquerda = os 16px da ficha mais os 3px da borda que marca a
seção atual, para a seta cair no mesmo eixo dos ícones. */
padding: 0 15px 0 19px;
border: none;
border-bottom: 1px solid var(--linha-sutil);
background: none;
color: var(--smoke);
cursor: pointer;
font-family: var(--fonte-corpo);
font-size: 0.76rem;
text-align: left;
white-space: nowrap;
overflow: hidden;
}
.fichario-abrir:hover { color: var(--ivory); background: var(--hover-linha); }
.fichario-abrir .ico { flex-shrink: 0; transition: transform 0.18s ease; }
.fichario.aberto .fichario-abrir .ico { transform: rotate(180deg); }
/* O nome do evento. Até duas linhas — nome comprido é a regra, não a
exceção, e cortar em "Noite das Uvas…" perde justamente o que distingue
um evento do outro. */
.fichario-nome {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
line-height: 1.25;
font-size: 0.76rem;
color: var(--ivory);
}
body.ambiente-pro .fichario-nome { color: var(--dourado-hi); }
/* Fechado, ele sai do fluxo em vez de só ficar transparente: com opacity o
trilho de 52px ficaria alto do tamanho de duas linhas de texto invisível. */
.fichario:not(.aberto) .fichario-nome { display: none; }
.fichario-abas {
display: flex;
flex-direction: column;
gap: 1px;
padding: 6px 0 20px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.fichario-abas::-webkit-scrollbar { display: none; }
.ficha {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
padding: 11px 0 11px 16px;
font-size: 0.79rem;
line-height: 1;
white-space: nowrap;
overflow: hidden;
color: var(--smoke);
text-decoration: none;
background: transparent;
/* A marca da seção atual entra por esta borda — reservada em todas para
o ícone não dançar 3px ao trocar de aba. */
border-left: 3px solid transparent;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ficha:hover { color: var(--ivory); background: var(--hover-linha); }
.ficha .ico { width: 1.15em; height: 1.15em; }
.ficha.ativa {
color: var(--vinho-bright);
background: var(--realce-ouro);
border-left-color: var(--vinho);
}
body.ambiente-pro .ficha.ativa { color: var(--dourado-hi); border-left-color: var(--dourado); }
/* Fechado, o rótulo existe mas não ocupa lugar — some sem tirar o ícone do
eixo, e reaparece na abertura sem a lista pular. */
.ficha-rotulo, .fichario-abrir span:not(.ico) {
opacity: 1;
transition: opacity 0.14s ease;
}
.fichario:not(.aberto) .ficha-rotulo,
.fichario:not(.aberto) .fichario-abrir span:not(.ico) {
opacity: 0;
pointer-events: none;
}
/* Fundo que fecha o trilho ao tocar fora dele */
.fichario-fundo {
position: fixed;
inset: 0;
z-index: 59;
background: rgba(0, 0, 0, 0.4);
}
.fichario-fundo[hidden] { display: none; }
@media (max-width: 380px) { :root { --topo-app: 50px; } }
@media (min-width: 431px) { :root { --topo-app: 58px; } }
/* ---------- Ficha do evento (a primeira aba) ---------- */
.evento-ficha {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
margin-bottom: 14px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--borda);
overflow: hidden;
}
.evento-dado {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
background: var(--card-vidro);
}
.evento-dado-rotulo {
font-size: 0.64rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--smoke);
}
.evento-dado strong { font-size: 0.92rem; font-weight: 400; color: var(--ivory); }
.evento-dado small { font-size: 0.7rem; color: var(--smoke); }
.evento-dado-largo { grid-column: 1 / -1; }
/* ---------- Lista do que falta ----------
*
* Substitui os cards de seção: a navegação virou trilho, então o corpo
* mostra o que ainda não está pronto. Cada linha leva à tela que resolve.
*/
.checklist {
border: 1px solid var(--borda);
border-radius: var(--raio);
overflow: hidden;
margin-bottom: 14px;
}
.checklist-topo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 11px 14px;
background: var(--card-vidro);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--smoke);
}
.checklist-topo strong {
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--ivory);
}
.check-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-top: 1px solid var(--borda);
background: var(--card-vidro);
color: var(--ivory);
text-decoration: none;
transition: background 0.15s;
}
.check-item:hover { background: var(--hover-linha); }
.check-marca {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 19px;
height: 19px;
border: 1.5px solid var(--borda);
border-radius: 50%;
}
.check-marca .ico { width: 11px; height: 11px; opacity: 0; }
.check-item.feito .check-marca { background: var(--vinho); border-color: var(--vinho); }
.check-item.feito .check-marca .ico { opacity: 1; color: #fff; }
body.ambiente-pro .check-item.feito .check-marca {
background: var(--dourado);
border-color: var(--dourado);
}
body.ambiente-pro .check-item.feito .check-marca .ico { color: #241c0c; }
/* 0.84/0.73rem é o ponto em que os rótulos longos ("Solicitações a
responder", "Ingressos na portaria") ainda cabem numa linha junto do
valor, num trilho de 52px sobre tela de 360px. */
.check-texto { flex: 1; min-width: 0; font-size: 0.84rem; line-height: 1.3; }
.check-item.feito .check-texto { color: var(--smoke); }
.check-valor {
flex-shrink: 0;
font-size: 0.73rem;
color: var(--smoke);
text-align: right;
}
.check-item:not(.feito) .check-valor { color: var(--vinho-bright); }
body.ambiente-pro .check-item:not(.feito) .check-valor { color: var(--dourado-hi); }
/* Botão desabilitado tem de PARECER desabilitado.
As duas regras que existiam estavam presas a `.card-plano-acao` e
`.card-jogo-acoes`; fora delas um btn-primario travado saía igualzinho ao
ativo, e só o cursor denunciava. */
.btn-primario:disabled,
.btn-secundario:disabled,
.btn-primario:disabled:hover,
.btn-secundario:disabled:hover {
opacity: 0.42;
cursor: not-allowed;
filter: grayscale(0.6);
}
/* Selo de partida aberta, no lugar do botão de começar */
.jogo-aberto {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin-bottom: 10px;
border: 1px solid var(--dourado);
border-radius: var(--raio);
background: var(--realce-ouro);
}
.jogo-aberto .ico { flex-shrink: 0; width: 20px; height: 20px; color: var(--dourado-hi); }
.jogo-aberto div { display: flex; flex-direction: column; gap: 2px; }
.jogo-aberto strong { font-size: 0.88rem; font-weight: 400; color: var(--dourado-hi); }
.jogo-aberto span { font-size: 0.75rem; color: var(--smoke); }
/* ---------- Documentos legais ----------
* Texto longo numa tela de 430px. Linha mais alta e parágrafos separados —
* quem abre isto está lendo de verdade, não passando o olho.
*/
.documento-legal {
padding: 16px 16px 20px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--card-vidro);
font-size: 0.86rem;
line-height: 1.65;
color: var(--ivory-dim);
}
.documento-legal h2 {
margin: 22px 0 8px;
font-size: 0.98rem;
font-weight: 400;
color: var(--vinho-bright);
}
.documento-legal h2:first-child { margin-top: 0; }
.documento-legal h3 {
margin: 14px 0 6px;
font-size: 0.88rem;
font-weight: 400;
color: var(--ivory);
}
.documento-legal p { margin: 0 0 10px; }
.documento-legal ul { margin: 0 0 12px; padding-left: 18px; }
.documento-legal li { margin-bottom: 5px; }
.documento-legal strong { color: var(--ivory); font-weight: 400; }
.documento-legal a { color: var(--vinho-bright); }
.documento-rodape {
margin-top: 20px;
padding-top: 12px;
border-top: 1px solid var(--linha-sutil);
font-size: 0.8rem;
color: var(--smoke);
}
/* Aceite dos termos: a caixa e o texto na mesma linha, e o texto pode quebrar
sem arrastar a caixa junto. */
.aceite-termos {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 4px 0 16px;
font-size: 0.82rem;
line-height: 1.5;
color: var(--ivory-dim);
cursor: pointer;
}
.aceite-termos input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
accent-color: var(--vinho);
cursor: pointer;
}
.aceite-termos a { color: var(--vinho-bright); }
/* A terceira via do Anfitrião: pagar uma vez, na caixa. Fica logo abaixo do
preço porque é ali que a pessoa compara, e não no rodapé do card. */
/* Largura cheia para quebrar a linha do flex acima: sem isso ele se espreme
ao lado do valor e o "R$ 19,70" parte no meio. */
.preco-vitalicio {
display: flex;
align-items: center;
width: 100%;
gap: 6px;
margin-top: 2px;
font-size: 0.76rem;
color: var(--smoke);
}
.preco-vitalicio strong { color: var(--vinho-bright); font-weight: 400; }
.preco-vitalicio .ico { width: 13px; height: 13px; margin: 0; color: var(--vinho); }
/* ---------- Administração ----------
* Telas de listagem longa: o que importa é caber muita linha na tela e
* cada uma se ler de relance, então nada de card gordo aqui.
*/
.menu-item.menu-adm {
justify-content: flex-start;
gap: 10px;
width: auto;
margin: 4px 14px;
padding: 12px 14px;
font-weight: 400;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--card-vidro);
}
.menu-item.menu-adm:hover { border-color: var(--vinho); color: var(--vinho); }
.menu-item.menu-adm.ativo { border-color: var(--vinho); }
.adm-numeros {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.adm-numero {
display: flex;
flex-direction: column;
gap: 1px;
padding: 12px 14px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--card-vidro);
}
.adm-numero strong { font-size: 1.5rem; font-weight: 400; color: var(--vinho-bright); line-height: 1.1; }
.adm-numero-rotulo { font-size: 0.82rem; color: var(--ivory); }
.adm-numero-nota { font-size: 0.7rem; color: var(--smoke); }
/* Filtros em fita: rolam de lado quando não cabem, em vez de quebrar em
duas linhas e empurrar a lista para baixo da dobra. */
.adm-filtros {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 4px;
margin-bottom: 12px;
-webkit-overflow-scrolling: touch;
}
.adm-filtro {
flex-shrink: 0;
padding: 6px 12px;
font-size: 0.78rem;
color: var(--ivory-dim);
text-decoration: none;
white-space: nowrap;
border: 1px solid var(--linha-sutil);
border-radius: 20px;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.adm-filtro:hover { border-color: var(--borda); color: var(--ivory); }
.adm-filtro.ativo {
color: var(--vinho-bright);
border-color: var(--vinho);
background: var(--realce-ouro);
}
.adm-linha {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
margin-bottom: 7px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--card-vidro);
}
.adm-linha-pro { border-color: var(--dourado); }
.adm-linha-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--mogno-hi);
border: 1px solid var(--borda);
font-size: 0.8rem;
color: var(--smoke);
}
.adm-linha-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-linha-dados { min-width: 0; flex: 1; }
.adm-linha-topo {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 3px;
}
.adm-linha-topo strong { font-size: 0.94rem; font-weight: 400; color: var(--ivory); }
.adm-linha-meta {
display: block;
font-size: 0.74rem;
color: var(--smoke);
line-height: 1.5;
word-break: break-word;
}
.adm-linha-meta strong { font-size: inherit; color: var(--ivory-dim); }
/* Catálogo grande (151 uvas) numa tela de 430px: a tabela rola sozinha em
vez de espremer as colunas ou estourar a página para os lados. */
.adm-tabela-rolagem {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--borda);
border-radius: var(--raio);
}
.adm-tabela-rolagem .tabela-padrao { margin: 0; }
/* Divisor sem rótulo, para separar blocos que se explicam sozinhos.
O .menu-grupo continua existindo para quando o título ajuda. */
.menu-divisor {
height: 1px;
margin: 12px 22px;
background: var(--linha-sutil);
}
/* ---------- Painel Profissional ----------
Um botão, não mais um item de lista: é a porta de outro ambiente, e precisa
se distinguir dos atalhos do dia a dia.
As regras vêm DEPOIS de .menu-item:hover e .menu-item.ativo de propósito —
elas têm a mesma especificidade, então quem vence é a última. Subir este
bloco faz o dourado sumir no hover. */
.menu-item.menu-pro {
justify-content: flex-start;
gap: 10px;
width: auto;
margin: 4px 14px;
padding: 12px 14px;
font-weight: 400;
color: var(--dourado-lo);
border: 1px solid var(--dourado);
border-radius: var(--raio);
background: linear-gradient(180deg, rgba(201, 162, 74, 0.16), rgba(201, 162, 74, 0.05));
}
html[data-tema="escuro"] .menu-item.menu-pro { color: var(--dourado-hi); }
.menu-item.menu-pro .ico { color: var(--dourado); }
.menu-item.menu-pro:hover {
color: var(--dourado-hi);
border-color: var(--dourado-hi);
background: linear-gradient(180deg, rgba(201, 162, 74, 0.26), rgba(201, 162, 74, 0.10));
}
/* Na própria tela do painel: o realce vira preenchimento, não borda esquerda */
.menu-item.menu-pro.ativo {
color: var(--dourado-hi);
border-color: var(--dourado-hi);
background: linear-gradient(180deg, rgba(201, 162, 74, 0.30), rgba(201, 162, 74, 0.12));
}
/* ---------- Rodapé do menu ---------- */
.menu-rodape {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--linha-sutil);
}
.menu-sair { color: var(--erro-cor); }
.menu-sair:hover { color: var(--erro-cor); background: rgba(198, 40, 40, 0.07); }
/* Chave liga/desliga do tema */
.menu-tema .chave {
width: 38px;
height: 21px;
border-radius: 20px;
background: var(--mogno-hi);
border: 1px solid var(--borda);
position: relative;
flex-shrink: 0;
transition: background 0.2s;
}
.menu-tema .chave-bolinha {
position: absolute;
top: 2px;
left: 2px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--smoke);
transition: transform 0.22s ease, background 0.22s;
}
.menu-tema.ligado .chave { background: var(--vinho); border-color: var(--vinho); }
.menu-tema.ligado .chave-bolinha { transform: translateX(17px); background: #fff; }
/* ---------- Botão de tema solto (telas sem menu, ex. login) ---------- */
.btn-tema-solto {
position: fixed;
bottom: 18px;
right: 18px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--borda);
background: var(--card-vidro);
color: var(--vinho);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--sombra);
cursor: pointer;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.2s ease;
}
.btn-tema-solto:hover { transform: scale(1.06); }
.btn-tema-solto svg { width: 18px; height: 18px; }
.btn-tema-solto .icone-sol { display: none; }
.btn-tema-solto .icone-lua { display: block; }
html[data-tema="escuro"] .btn-tema-solto .icone-sol { display: block; }
html[data-tema="escuro"] .btn-tema-solto .icone-lua { display: none; }
html[data-tema="escuro"] .btn-tema-solto { color: var(--dourado); }
/* ---------- Logo conforme o tema ---------- */
.logo-tema-claro { display: inline-block; }
.logo-tema-escuro { display: none; }
html[data-tema="escuro"] .logo-tema-claro { display: none; }
html[data-tema="escuro"] .logo-tema-escuro { display: inline-block; }
/* ---------- Foto de perfil ---------- */
.perfil-foto-form { flex-shrink: 0; }
.perfil-avatar {
position: relative;
width: 76px;
height: 76px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--mogno-hi);
border: 1px solid var(--borda);
cursor: pointer;
font-size: 1.4rem;
}
.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.perfil-avatar-editar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 3px 0;
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
color: #fff;
background: rgba(30, 18, 12, 0.66);
opacity: 0;
transition: opacity 0.2s;
}
.perfil-avatar:hover .perfil-avatar-editar { opacity: 1; }
.btn-remover-foto {
font-size: 0.78rem;
font-weight: 300;
color: var(--smoke);
padding: 0;
}
.btn-remover-foto:hover { color: var(--erro-cor); }
/* ============================================================
AFINAMENTO — rótulos e títulos de seção mais discretos
============================================================ */
.rotulo, .rotulo-destaque {
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--smoke);
margin-bottom: 7px;
}
.rotulo-destaque { color: var(--dourado); }
/* Títulos de seção dentro dos cards */
.perfil-secao-titulo,
.secao-titulo-escuro,
.card-titulo {
font-size: 0.72rem !important;
font-weight: 400 !important;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dourado);
padding-bottom: 12px;
margin-bottom: 4px;
}
/* Campos com mais ar e cantos suaves */
.entrada, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], select, textarea {
border-radius: var(--raio);
font-weight: 300;
}
/* Botões: menos peso visual, mais respiro */
.btn-primario, .btn-secundario, .btn-verde, .btn-dourado, .btn-submit {
font-weight: 400;
letter-spacing: 0.06em;
padding-top: 13px;
padding-bottom: 13px;
}
/* O gradiente forte dava aspecto de botão de jogo antigo; cor chapada é mais limpo */
.btn-primario { background: var(--vinho); }
.btn-primario:hover { background: var(--vinho-deep); }
.btn-verde { background: var(--verde); }
.btn-verde:hover { background: #276b2a; }
/* Cards com respiro maior */
.perfil-card, .card-formulario, .secao-jogos, .card-jogo {
border-radius: var(--raio-grande);
}
/* ============================================================
ICONES - SVG de traco fino no lugar dos emojis.
Usam máscara, então herdam a cor e o tamanho do texto.
============================================================ */
.ico {
display: inline-block;
width: 1.05em;
height: 1.05em;
background-color: currentColor;
vertical-align: -0.16em;
flex-shrink: 0;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.ico-grande { width: 1.5em; height: 1.5em; }
.ico-tv { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20512'%3E%3Cpath%20d='M576%200H64C28.654%200%200%2028.654%200%2064V384C0%20419.346%2028.654%20448%2064%20448H576C611.348%20448%20640%20419.346%20640%20384V64C640%2028.654%20611.348%200%20576%200ZM608%20384C608%20401.645%20593.645%20416%20576%20416H64C46.355%20416%2032%20401.645%2032%20384V64C32%2046.355%2046.355%2032%2064%2032H576C593.645%2032%20608%2046.355%20608%2064V384ZM528%20480H112C103.164%20480%2096%20487.162%2096%20496C96%20504.836%20103.164%20512%20112%20512H528C536.838%20512%20544%20504.836%20544%20496C544%20487.162%20536.838%20480%20528%20480Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20512'%3E%3Cpath%20d='M576%200H64C28.654%200%200%2028.654%200%2064V384C0%20419.346%2028.654%20448%2064%20448H576C611.348%20448%20640%20419.346%20640%20384V64C640%2028.654%20611.348%200%20576%200ZM608%20384C608%20401.645%20593.645%20416%20576%20416H64C46.355%20416%2032%20401.645%2032%20384V64C32%2046.355%2046.355%2032%2064%2032H576C593.645%2032%20608%2046.355%20608%2064V384ZM528%20480H112C103.164%20480%2096%20487.162%2096%20496C96%20504.836%20103.164%20512%20112%20512H528C536.838%20512%20544%20504.836%20544%20496C544%20487.162%20536.838%20480%20528%20480Z'/%3E%3C/svg%3E"); }
.ico-mais { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M432%20256C432%20264.844%20424.844%20272%20416%20272H240V448C240%20456.844%20232.844%20464%20224%20464S208%20456.844%20208%20448V272H32C23.156%20272%2016%20264.844%2016%20256S23.156%20240%2032%20240H208V64C208%2055.156%20215.156%2048%20224%2048S240%2055.156%20240%2064V240H416C424.844%20240%20432%20247.156%20432%20256Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M432%20256C432%20264.844%20424.844%20272%20416%20272H240V448C240%20456.844%20232.844%20464%20224%20464S208%20456.844%20208%20448V272H32C23.156%20272%2016%20264.844%2016%20256S23.156%20240%2032%20240H208V64C208%2055.156%20215.156%2048%20224%2048S240%2055.156%20240%2064V240H416C424.844%20240%20432%20247.156%20432%20256Z'/%3E%3C/svg%3E"); }
.ico-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M475.312%20123.312L203.312%20395.312C200.188%20398.438%20196.094%20400%20192%20400S183.812%20398.438%20180.688%20395.312L36.688%20251.312C30.438%20245.062%2030.438%20234.937%2036.688%20228.688S53.063%20222.438%2059.312%20228.688L192%20361.375L452.687%20100.688C458.937%2094.438%20469.063%2094.438%20475.312%20100.688S481.562%20117.062%20475.312%20123.312Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M475.312%20123.312L203.312%20395.312C200.188%20398.438%20196.094%20400%20192%20400S183.812%20398.438%20180.688%20395.312L36.688%20251.312C30.438%20245.062%2030.438%20234.937%2036.688%20228.688S53.063%20222.438%2059.312%20228.688L192%20361.375L452.687%20100.688C458.937%2094.438%20469.063%2094.438%20475.312%20100.688S481.562%20117.062%20475.312%20123.312Z'/%3E%3C/svg%3E"); }
.ico-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20512'%3E%3Cpath%20d='M315.31%20411.31C309.056%20417.563%20298.936%20417.563%20292.682%20411.31L160%20278.627L27.318%20411.31C21.064%20417.563%2010.944%20417.563%204.69%20411.31C-1.563%20405.056%20-1.563%20394.936%204.69%20388.682L137.373%20256L4.69%20123.318C-1.563%20117.064%20-1.563%20106.944%204.69%20100.69C10.944%2094.437%2021.064%2094.437%2027.318%20100.69L160%20233.373L292.682%20100.69C298.936%2094.437%20309.056%2094.437%20315.31%20100.69C321.563%20106.944%20321.563%20117.064%20315.31%20123.318L182.627%20256L315.31%20388.682C321.563%20394.936%20321.563%20405.056%20315.31%20411.31Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20512'%3E%3Cpath%20d='M315.31%20411.31C309.056%20417.563%20298.936%20417.563%20292.682%20411.31L160%20278.627L27.318%20411.31C21.064%20417.563%2010.944%20417.563%204.69%20411.31C-1.563%20405.056%20-1.563%20394.936%204.69%20388.682L137.373%20256L4.69%20123.318C-1.563%20117.064%20-1.563%20106.944%204.69%20100.69C10.944%2094.437%2021.064%2094.437%2027.318%20100.69L160%20233.373L292.682%20100.69C298.936%2094.437%20309.056%2094.437%20315.31%20100.69C321.563%20106.944%20321.563%20117.064%20315.31%20123.318L182.627%20256L315.31%20388.682C321.563%20394.936%20321.563%20405.056%20315.31%20411.31Z'/%3E%3C/svg%3E"); }
.ico-seta-esq { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M448.004%20256C448.004%20264.844%20440.848%20272%20432.004%20272H68.174L203.848%20421.25C209.785%20427.781%20209.301%20437.906%20202.77%20443.844C199.707%20446.625%20195.848%20448%20192.004%20448C187.66%20448%20183.316%20446.25%20180.16%20442.75L20.16%20266.75C14.613%20260.656%2014.613%20251.344%2020.16%20245.25L180.16%2069.25C186.129%2062.688%20196.254%2062.25%20202.77%2068.156C209.301%2074.094%20209.785%2084.219%20203.848%2090.75L68.174%20240H432.004C440.848%20240%20448.004%20247.156%20448.004%20256Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M448.004%20256C448.004%20264.844%20440.848%20272%20432.004%20272H68.174L203.848%20421.25C209.785%20427.781%20209.301%20437.906%20202.77%20443.844C199.707%20446.625%20195.848%20448%20192.004%20448C187.66%20448%20183.316%20446.25%20180.16%20442.75L20.16%20266.75C14.613%20260.656%2014.613%20251.344%2020.16%20245.25L180.16%2069.25C186.129%2062.688%20196.254%2062.25%20202.77%2068.156C209.301%2074.094%20209.785%2084.219%20203.848%2090.75L68.174%20240H432.004C440.848%20240%20448.004%20247.156%20448.004%20256Z'/%3E%3C/svg%3E"); }
.ico-seta-dir { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M427.844%20266.75L267.844%20442.75C264.688%20446.25%20260.344%20448%20256%20448C252.156%20448%20248.297%20446.625%20245.234%20443.844C238.703%20437.906%20238.219%20427.781%20244.156%20421.25L379.83%20272H16C7.156%20272%200%20264.844%200%20256S7.156%20240%2016%20240H379.83L244.156%2090.75C238.219%2084.219%20238.703%2074.094%20245.234%2068.156C251.781%2062.25%20261.891%2062.688%20267.844%2069.25L427.844%20245.25C433.391%20251.344%20433.391%20260.656%20427.844%20266.75Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M427.844%20266.75L267.844%20442.75C264.688%20446.25%20260.344%20448%20256%20448C252.156%20448%20248.297%20446.625%20245.234%20443.844C238.703%20437.906%20238.219%20427.781%20244.156%20421.25L379.83%20272H16C7.156%20272%200%20264.844%200%20256S7.156%20240%2016%20240H379.83L244.156%2090.75C238.219%2084.219%20238.703%2074.094%20245.234%2068.156C251.781%2062.25%20261.891%2062.688%20267.844%2069.25L427.844%20245.25C433.391%20251.344%20433.391%20260.656%20427.844%20266.75Z'/%3E%3C/svg%3E"); }
/* Presente das cortesias: laco, fita e caixa, no tracado desenhado a mao. */
.ico-presente { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='7'%20width='19'%20height='3.6'%20rx='1'/%3E%3Cpath%20d='M4%2010.6V19a1.5%201.5%200%200%200%201.5%201.5h13A1.5%201.5%200%200%200%2020%2019v-8.4'/%3E%3Cpath%20d='M12%207v13.5'/%3E%3Cpath%20d='M12%207C10.8%204.2%209.6%203.2%208.4%203.2a1.9%201.9%200%200%200%200%203.8H12Z'/%3E%3Cpath%20d='M12%207c1.2-2.8%202.4-3.8%203.6-3.8a1.9%201.9%200%200%201%200%203.8H12Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='7'%20width='19'%20height='3.6'%20rx='1'/%3E%3Cpath%20d='M4%2010.6V19a1.5%201.5%200%200%200%201.5%201.5h13A1.5%201.5%200%200%200%2020%2019v-8.4'/%3E%3Cpath%20d='M12%207v13.5'/%3E%3Cpath%20d='M12%207C10.8%204.2%209.6%203.2%208.4%203.2a1.9%201.9%200%200%200%200%203.8H12Z'/%3E%3Cpath%20d='M12%207c1.2-2.8%202.4-3.8%203.6-3.8a1.9%201.9%200%200%201%200%203.8H12Z'/%3E%3C/svg%3E"); }
/* Setas de subir/descer da sequencia: chevron simples, no tracado dos icones
desenhados a mao (ico-uva, ico-barril) e nao no da Font Awesome. */
.ico-seta-cima { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2015L12%209L6%2015'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2015L12%209L6%2015'/%3E%3C/svg%3E"); }
.ico-seta-baixo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209L12%2015L18%209'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209L12%2015L18%209'/%3E%3C/svg%3E"); }
.ico-editar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M493.256%2056.262L455.744%2018.748C443.248%206.252%20426.868%200%20410.489%200C394.106%200%20377.729%206.25%20365.229%2018.75L45.114%20338.885C36.545%20347.451%2030.586%20358.275%2027.928%20370.094L0.319%20492.854C-1.701%20502.967%206.159%20512%2015.948%20512C16.994%20512%2018.063%20511.896%2019.145%20511.68C19.145%20511.68%20103.76%20493.73%20141.907%20484.748C153.446%20482.031%20163.774%20476.225%20172.155%20467.844C221.284%20418.719%20406.686%20233.33%20493.346%20146.676C518.34%20121.684%20518.248%2081.256%20493.256%2056.262ZM149.528%20445.217C145.309%20449.436%20140.276%20452.256%20134.573%20453.6C109.897%20459.41%2064.936%20469.148%2037.108%20475.121L59.149%20377.115C60.481%20371.197%2063.452%20365.803%2067.743%20361.512L315.307%20113.932L398.069%20196.693L149.528%20445.217ZM470.721%20124.047L420.696%20174.07L337.932%2091.307L387.86%2041.375C393.905%2035.33%20401.942%2032%20410.489%2032S427.073%2035.33%20433.118%2041.375L470.629%2078.889C483.104%2091.365%20483.145%20111.623%20470.721%20124.047Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M493.256%2056.262L455.744%2018.748C443.248%206.252%20426.868%200%20410.489%200C394.106%200%20377.729%206.25%20365.229%2018.75L45.114%20338.885C36.545%20347.451%2030.586%20358.275%2027.928%20370.094L0.319%20492.854C-1.701%20502.967%206.159%20512%2015.948%20512C16.994%20512%2018.063%20511.896%2019.145%20511.68C19.145%20511.68%20103.76%20493.73%20141.907%20484.748C153.446%20482.031%20163.774%20476.225%20172.155%20467.844C221.284%20418.719%20406.686%20233.33%20493.346%20146.676C518.34%20121.684%20518.248%2081.256%20493.256%2056.262ZM149.528%20445.217C145.309%20449.436%20140.276%20452.256%20134.573%20453.6C109.897%20459.41%2064.936%20469.148%2037.108%20475.121L59.149%20377.115C60.481%20371.197%2063.452%20365.803%2067.743%20361.512L315.307%20113.932L398.069%20196.693L149.528%20445.217ZM470.721%20124.047L420.696%20174.07L337.932%2091.307L387.86%2041.375C393.905%2035.33%20401.942%2032%20410.489%2032S427.073%2035.33%20433.118%2041.375L470.629%2078.889C483.104%2091.365%20483.145%20111.623%20470.721%20124.047Z'/%3E%3C/svg%3E"); }
.ico-salvar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M350.062%2055.438C334.938%2040.328%20314.875%2032%20293.5%2032H80C35.875%2032%200%2067.891%200%20112V400C0%20444.109%2035.875%20480%2080%20480H368C412.125%20480%20448%20444.109%20448%20400V186.516C448%20165.141%20439.688%20145.047%20424.562%20129.938L350.062%2055.438ZM96%2064H288V160H96V64ZM416%20400C416%20426.469%20394.469%20448%20368%20448H80C53.531%20448%2032%20426.469%2032%20400V112C32%2091.168%2045.416%2073.574%2064%2066.947V160C64%20177.672%2078.326%20192%2096%20192H288C305.674%20192%20320%20177.672%20320%20160V72.02C322.664%2073.777%20325.166%2075.791%20327.438%2078.063L401.938%20152.563C411%20161.641%20416%20173.688%20416%20186.516V400ZM224%20240C179.875%20240%20144%20275.891%20144%20320S179.875%20400%20224%20400S304%20364.109%20304%20320S268.125%20240%20224%20240ZM224%20368C197.531%20368%20176%20346.469%20176%20320S197.531%20272%20224%20272S272%20293.531%20272%20320S250.469%20368%20224%20368Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M350.062%2055.438C334.938%2040.328%20314.875%2032%20293.5%2032H80C35.875%2032%200%2067.891%200%20112V400C0%20444.109%2035.875%20480%2080%20480H368C412.125%20480%20448%20444.109%20448%20400V186.516C448%20165.141%20439.688%20145.047%20424.562%20129.938L350.062%2055.438ZM96%2064H288V160H96V64ZM416%20400C416%20426.469%20394.469%20448%20368%20448H80C53.531%20448%2032%20426.469%2032%20400V112C32%2091.168%2045.416%2073.574%2064%2066.947V160C64%20177.672%2078.326%20192%2096%20192H288C305.674%20192%20320%20177.672%20320%20160V72.02C322.664%2073.777%20325.166%2075.791%20327.438%2078.063L401.938%20152.563C411%20161.641%20416%20173.688%20416%20186.516V400ZM224%20240C179.875%20240%20144%20275.891%20144%20320S179.875%20400%20224%20400S304%20364.109%20304%20320S268.125%20240%20224%20240ZM224%20368C197.531%20368%20176%20346.469%20176%20320S197.531%20272%20224%20272S272%20293.531%20272%20320S250.469%20368%20224%20368Z'/%3E%3C/svg%3E"); }
.ico-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20512'%3E%3Cpath%20d='M222.382%20404.723L177.529%20449.594C136.958%20490.135%2070.976%20490.135%2030.406%20449.594C-10.135%20409.035%20-10.135%20343.02%2030.406%20302.463L158.431%20174.43C199.003%20133.889%20264.986%20133.889%20305.556%20174.43C341.97%20210.861%20346.126%20269.312%20315.246%20310.402C309.931%20317.467%20311.353%20327.5%20318.417%20332.799C325.466%20338.111%20335.515%20336.705%20340.814%20329.625C381.228%20275.893%20375.804%20199.436%20328.185%20151.799C275.144%2098.754%20188.843%2098.785%20135.802%20151.799L7.775%20279.832C-45.25%20332.877%20-45.25%20419.18%207.775%20472.225C34.296%20498.746%2069.132%20512%20103.966%20512C138.802%20512%20173.638%20498.73%20200.16%20472.225L245.011%20427.354C251.263%20421.102%20251.263%20410.975%20245.011%20404.723C238.761%20398.471%20228.634%20398.471%20222.382%20404.723ZM568.236%2039.771C515.193%20-13.273%20428.894%20-13.242%20375.851%2039.771L331%2084.643C324.748%2090.893%20324.748%20101.021%20331%20107.273C337.25%20113.523%20347.376%20113.523%20353.628%20107.273L398.482%2062.402C439.052%2021.861%20505.035%2021.861%20545.605%2062.402C586.146%20102.959%20586.146%20168.977%20545.605%20209.533L417.58%20337.564C377.007%20378.105%20311.025%20378.105%20270.455%20337.564C234.041%20301.135%20229.884%20242.682%20260.765%20201.594C266.08%20194.529%20264.658%20184.496%20257.593%20179.197C250.544%20173.852%20240.496%20175.305%20235.197%20182.369C194.783%20236.102%20200.207%20312.559%20247.826%20360.195C274.347%20386.719%20309.181%20399.971%20344.017%20399.971S413.687%20386.703%20440.208%20360.195L568.236%20232.164C621.261%20179.119%20621.261%2092.816%20568.236%2039.771Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20512'%3E%3Cpath%20d='M222.382%20404.723L177.529%20449.594C136.958%20490.135%2070.976%20490.135%2030.406%20449.594C-10.135%20409.035%20-10.135%20343.02%2030.406%20302.463L158.431%20174.43C199.003%20133.889%20264.986%20133.889%20305.556%20174.43C341.97%20210.861%20346.126%20269.312%20315.246%20310.402C309.931%20317.467%20311.353%20327.5%20318.417%20332.799C325.466%20338.111%20335.515%20336.705%20340.814%20329.625C381.228%20275.893%20375.804%20199.436%20328.185%20151.799C275.144%2098.754%20188.843%2098.785%20135.802%20151.799L7.775%20279.832C-45.25%20332.877%20-45.25%20419.18%207.775%20472.225C34.296%20498.746%2069.132%20512%20103.966%20512C138.802%20512%20173.638%20498.73%20200.16%20472.225L245.011%20427.354C251.263%20421.102%20251.263%20410.975%20245.011%20404.723C238.761%20398.471%20228.634%20398.471%20222.382%20404.723ZM568.236%2039.771C515.193%20-13.273%20428.894%20-13.242%20375.851%2039.771L331%2084.643C324.748%2090.893%20324.748%20101.021%20331%20107.273C337.25%20113.523%20347.376%20113.523%20353.628%20107.273L398.482%2062.402C439.052%2021.861%20505.035%2021.861%20545.605%2062.402C586.146%20102.959%20586.146%20168.977%20545.605%20209.533L417.58%20337.564C377.007%20378.105%20311.025%20378.105%20270.455%20337.564C234.041%20301.135%20229.884%20242.682%20260.765%20201.594C266.08%20194.529%20264.658%20184.496%20257.593%20179.197C250.544%20173.852%20240.496%20175.305%20235.197%20182.369C194.783%20236.102%20200.207%20312.559%20247.826%20360.195C274.347%20386.719%20309.181%20399.971%20344.017%20399.971S413.687%20386.703%20440.208%20360.195L568.236%20232.164C621.261%20179.119%20621.261%2092.816%20568.236%2039.771Z'/%3E%3C/svg%3E"); }
.ico-copiar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M272%20416C263.164%20416%20256%20423.162%20256%20432V448C256%20465.672%20241.674%20480%20224%20480H64C46.326%20480%2032%20465.672%2032%20448V192C32%20174.326%2046.326%20160%2064%20160H176C184.836%20160%20192%20152.836%20192%20144C192%20135.162%20184.836%20128%20176%20128H64C28.654%20128%200%20156.652%200%20192V448C0%20483.346%2028.654%20512%2064%20512H224C259.346%20512%20288%20483.346%20288%20448V432C288%20423.162%20280.836%20416%20272%20416ZM502.627%2086.627L425.373%209.373C419.371%203.371%20411.232%200%20402.746%200H288C252.654%200%20224%2028.652%20224%2064V320C224%20355.346%20252.654%20384%20288%20384H448C483.346%20384%20512%20355.346%20512%20320V109.254C512%20100.768%20508.629%2092.629%20502.627%2086.627ZM416%2045.254L466.746%2096H416V45.254ZM480%20320C480%20337.672%20465.674%20352%20448%20352H288C270.326%20352%20256%20337.672%20256%20320V64C256%2046.326%20270.326%2032%20288%2032H384V96C384%20113.672%20398.326%20128%20416%20128H480V320Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M272%20416C263.164%20416%20256%20423.162%20256%20432V448C256%20465.672%20241.674%20480%20224%20480H64C46.326%20480%2032%20465.672%2032%20448V192C32%20174.326%2046.326%20160%2064%20160H176C184.836%20160%20192%20152.836%20192%20144C192%20135.162%20184.836%20128%20176%20128H64C28.654%20128%200%20156.652%200%20192V448C0%20483.346%2028.654%20512%2064%20512H224C259.346%20512%20288%20483.346%20288%20448V432C288%20423.162%20280.836%20416%20272%20416ZM502.627%2086.627L425.373%209.373C419.371%203.371%20411.232%200%20402.746%200H288C252.654%200%20224%2028.652%20224%2064V320C224%20355.346%20252.654%20384%20288%20384H448C483.346%20384%20512%20355.346%20512%20320V109.254C512%20100.768%20508.629%2092.629%20502.627%2086.627ZM416%2045.254L466.746%2096H416V45.254ZM480%20320C480%20337.672%20465.674%20352%20448%20352H288C270.326%20352%20256%20337.672%20256%20320V64C256%2046.326%20270.326%2032%20288%2032H384V96C384%20113.672%20398.326%20128%20416%20128H480V320Z'/%3E%3C/svg%3E"); }
.ico-taca { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20512'%3E%3Cpath%20d='M240.002%20480H176V349.842C252.682%20341.098%20310.565%20272.619%20303.401%20192.658L288.748%2029.104C287.272%2012.621%20273.654%200%20257.344%200H62.656C46.346%200%2032.729%2012.621%2031.252%2029.104L16.6%20192.658C9.436%20272.619%2067.318%20341.098%20144%20349.842V480H79.998C71.162%20480%2063.998%20487.162%2063.998%20496C63.998%20504.836%2071.162%20512%2079.998%20512H240.002C248.838%20512%20256.002%20504.836%20256.002%20496C256.002%20487.162%20248.838%20480%20240.002%20480ZM256.879%2032L265.479%20128H54.328L62.656%2032H256.879ZM154.078%20319.217C123.676%20317.568%2095.861%20303.873%2075.756%20280.656C55.354%20257.094%2045.664%20226.855%2048.473%20195.514L51.553%20160H268.346L271.527%20195.514C274.336%20226.855%20264.647%20257.094%20244.244%20280.656C224.139%20303.873%20196.324%20317.568%20165.922%20319.217C158.649%20319.609%20161.463%20319.615%20154.078%20319.217Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20512'%3E%3Cpath%20d='M240.002%20480H176V349.842C252.682%20341.098%20310.565%20272.619%20303.401%20192.658L288.748%2029.104C287.272%2012.621%20273.654%200%20257.344%200H62.656C46.346%200%2032.729%2012.621%2031.252%2029.104L16.6%20192.658C9.436%20272.619%2067.318%20341.098%20144%20349.842V480H79.998C71.162%20480%2063.998%20487.162%2063.998%20496C63.998%20504.836%2071.162%20512%2079.998%20512H240.002C248.838%20512%20256.002%20504.836%20256.002%20496C256.002%20487.162%20248.838%20480%20240.002%20480ZM256.879%2032L265.479%20128H54.328L62.656%2032H256.879ZM154.078%20319.217C123.676%20317.568%2095.861%20303.873%2075.756%20280.656C55.354%20257.094%2045.664%20226.855%2048.473%20195.514L51.553%20160H268.346L271.527%20195.514C274.336%20226.855%20264.647%20257.094%20244.244%20280.656C224.139%20303.873%20196.324%20317.568%20165.922%20319.217C158.649%20319.609%20161.463%20319.615%20154.078%20319.217Z'/%3E%3C/svg%3E"); }
.ico-garrafa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M507.312%2084.688L427.312%204.688C421.062%20-1.562%20410.937%20-1.562%20404.688%204.688C399.561%209.814%20398.875%2017.441%20402.16%2023.508L309.594%20115.875C260.969%2099.625%20207.469%20112%20170.719%20148.75L22.219%20297.25C-7.406%20327%20-7.406%20375.125%2022.219%20404.875L107.094%20489.75C121.344%20504.125%20140.469%20512%20160.719%20512C181.094%20512%20200.219%20504.125%20214.469%20489.75L363.094%20341.125C399.719%20304.5%20412.094%20250.875%20395.844%20202.125L488.449%20109.811C490.83%20111.109%20493.361%20112%20496%20112C500.094%20112%20504.188%20110.438%20507.312%20107.312C513.562%20101.062%20513.562%2090.938%20507.312%2084.688ZM191.969%20467.125C175.219%20483.75%20146.344%20483.75%20129.719%20467.125L44.844%20382.25C27.719%20365%2027.719%20337.125%2044.844%20319.875L59.094%20305.625L206.219%20452.875L191.969%20467.125ZM228.844%20430.125L81.719%20283L171.094%20193.625L318.219%20340.75L228.844%20430.125ZM340.844%20318.125L193.719%20171C244.594%20120.75%20305.469%20148.5%20307.344%20149.25L317.344%20153.5L352.281%20118.906L393.156%20159.781L358.344%20194.5L362.469%20204.375C379.094%20243.5%20370.469%20288%20340.844%20318.125ZM415.812%20137.188L375.018%2096.393L424.635%2047.26L465.256%2087.881L415.812%20137.188Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M507.312%2084.688L427.312%204.688C421.062%20-1.562%20410.937%20-1.562%20404.688%204.688C399.561%209.814%20398.875%2017.441%20402.16%2023.508L309.594%20115.875C260.969%2099.625%20207.469%20112%20170.719%20148.75L22.219%20297.25C-7.406%20327%20-7.406%20375.125%2022.219%20404.875L107.094%20489.75C121.344%20504.125%20140.469%20512%20160.719%20512C181.094%20512%20200.219%20504.125%20214.469%20489.75L363.094%20341.125C399.719%20304.5%20412.094%20250.875%20395.844%20202.125L488.449%20109.811C490.83%20111.109%20493.361%20112%20496%20112C500.094%20112%20504.188%20110.438%20507.312%20107.312C513.562%20101.062%20513.562%2090.938%20507.312%2084.688ZM191.969%20467.125C175.219%20483.75%20146.344%20483.75%20129.719%20467.125L44.844%20382.25C27.719%20365%2027.719%20337.125%2044.844%20319.875L59.094%20305.625L206.219%20452.875L191.969%20467.125ZM228.844%20430.125L81.719%20283L171.094%20193.625L318.219%20340.75L228.844%20430.125ZM340.844%20318.125L193.719%20171C244.594%20120.75%20305.469%20148.5%20307.344%20149.25L317.344%20153.5L352.281%20118.906L393.156%20159.781L358.344%20194.5L362.469%20204.375C379.094%20243.5%20370.469%20288%20340.844%20318.125ZM415.812%20137.188L375.018%2096.393L424.635%2047.26L465.256%2087.881L415.812%20137.188Z'/%3E%3C/svg%3E"); }
.ico-uva { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%207V3.5'/%3E%3Cpath%20d='M12.5%203.5c1.5-1%203-1%204-.5'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.1'/%3E%3Ccircle%20cx='8.4'%20cy='13.5'%20r='2.1'/%3E%3Ccircle%20cx='15.6'%20cy='13.5'%20r='2.1'/%3E%3Ccircle%20cx='12'%20cy='17.5'%20r='2.1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%207V3.5'/%3E%3Cpath%20d='M12.5%203.5c1.5-1%203-1%204-.5'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.1'/%3E%3Ccircle%20cx='8.4'%20cy='13.5'%20r='2.1'/%3E%3Ccircle%20cx='15.6'%20cy='13.5'%20r='2.1'/%3E%3Ccircle%20cx='12'%20cy='17.5'%20r='2.1'/%3E%3C/svg%3E"); }
.ico-barril { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='6'%20rx='6'%20ry='2.4'/%3E%3Cpath%20d='M6%206v12c0%201.3%202.7%202.4%206%202.4s6-1.1%206-2.4V6'/%3E%3Cpath%20d='M4.6%2012h14.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='6'%20rx='6'%20ry='2.4'/%3E%3Cpath%20d='M6%206v12c0%201.3%202.7%202.4%206%202.4s6-1.1%206-2.4V6'/%3E%3Cpath%20d='M4.6%2012h14.8'/%3E%3C/svg%3E"); }
.ico-tubo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20512'%3E%3Cpath%20d='M186.562%2051.361C182.932%2038.596%20171.479%2032%20159.99%2032C148.74%2032%20137.457%2038.32%20133.438%2051.361C90.938%20189.283%200%20226.908%200%20324.141C0%20410.219%2071.562%20480%20160%20480S320%20410.219%20320%20324.141C320%20226.361%20229.273%20190.049%20186.562%2051.361ZM160%20448C89.42%20448%2032%20392.438%2032%20324.141C32%20283.428%2052.559%20255.07%2081.014%20215.82C106.684%20180.412%20138.256%20136.867%20159.998%2073.17C181.848%20137.256%20213.457%20180.715%20239.158%20216.049C267.512%20255.033%20288%20283.201%20288%20324.141C288%20392.438%20230.58%20448%20160%20448ZM128%20264C128%20250.688%20117.312%20240%20104%20240S80%20250.688%2080%20264S90.688%20288%20104%20288S128%20277.312%20128%20264ZM219.312%20260.688C213.062%20254.438%20202.937%20254.438%20196.688%20260.688L100.688%20356.688C94.438%20362.938%2094.438%20373.063%20100.688%20379.312C103.812%20382.438%20107.906%20384%20112%20384S120.188%20382.438%20123.312%20379.312L219.312%20283.312C225.562%20277.062%20225.562%20266.938%20219.312%20260.688ZM216%20352C202.688%20352%20192%20362.688%20192%20376S202.688%20400%20216%20400S240%20389.312%20240%20376S229.312%20352%20216%20352Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20512'%3E%3Cpath%20d='M186.562%2051.361C182.932%2038.596%20171.479%2032%20159.99%2032C148.74%2032%20137.457%2038.32%20133.438%2051.361C90.938%20189.283%200%20226.908%200%20324.141C0%20410.219%2071.562%20480%20160%20480S320%20410.219%20320%20324.141C320%20226.361%20229.273%20190.049%20186.562%2051.361ZM160%20448C89.42%20448%2032%20392.438%2032%20324.141C32%20283.428%2052.559%20255.07%2081.014%20215.82C106.684%20180.412%20138.256%20136.867%20159.998%2073.17C181.848%20137.256%20213.457%20180.715%20239.158%20216.049C267.512%20255.033%20288%20283.201%20288%20324.141C288%20392.438%20230.58%20448%20160%20448ZM128%20264C128%20250.688%20117.312%20240%20104%20240S80%20250.688%2080%20264S90.688%20288%20104%20288S128%20277.312%20128%20264ZM219.312%20260.688C213.062%20254.438%20202.937%20254.438%20196.688%20260.688L100.688%20356.688C94.438%20362.938%2094.438%20373.063%20100.688%20379.312C103.812%20382.438%20107.906%20384%20112%20384S120.188%20382.438%20123.312%20379.312L219.312%20283.312C225.562%20277.062%20225.562%20266.938%20219.312%20260.688ZM216%20352C202.688%20352%20192%20362.688%20192%20376S202.688%20400%20216%20400S240%20389.312%20240%20376S229.312%20352%20216%20352Z'/%3E%3C/svg%3E"); }
.ico-globo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2016C123.451%2016%2016%20123.451%2016%20256S123.451%20496%20256%20496S496%20388.549%20496%20256S388.549%2016%20256%2016ZM464%20256C464%20278.336%20460.367%20299.816%20453.82%20320H379.256C382.264%20299.596%20384%20278.199%20384%20256S382.264%20212.404%20379.256%20192H453.82C460.367%20212.184%20464%20233.664%20464%20256ZM256%20464C223.77%20464%20189.018%20420.82%20171.51%20352H340.49C322.982%20420.82%20288.23%20464%20256%20464ZM164.875%20320C161.754%20300.143%20160%20278.719%20160%20256S161.754%20211.857%20164.875%20192H347.125C350.246%20211.857%20352%20233.281%20352%20256S350.246%20300.143%20347.125%20320H164.875ZM48%20256C48%20233.664%2051.633%20212.184%2058.18%20192H132.744C129.736%20212.404%20128%20233.801%20128%20256S129.736%20299.596%20132.744%20320H58.18C51.633%20299.816%2048%20278.336%2048%20256ZM256%2048C288.23%2048%20322.982%2091.18%20340.49%20160H171.51C189.018%2091.18%20223.77%2048%20256%2048ZM440.338%20160H373.279C364.148%20120.846%20349.576%2087.291%20331.396%2062.359C378.412%2080.734%20417.135%20115.627%20440.338%20160ZM180.604%2062.359C162.424%2087.291%20147.852%20120.846%20138.721%20160H71.662C94.865%20115.627%20133.588%2080.734%20180.604%2062.359ZM71.662%20352H138.721C147.852%20391.154%20162.424%20424.709%20180.604%20449.641C133.588%20431.266%2094.865%20396.373%2071.662%20352ZM331.396%20449.641C349.576%20424.709%20364.148%20391.154%20373.279%20352H440.338C417.135%20396.373%20378.412%20431.266%20331.396%20449.641Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2016C123.451%2016%2016%20123.451%2016%20256S123.451%20496%20256%20496S496%20388.549%20496%20256S388.549%2016%20256%2016ZM464%20256C464%20278.336%20460.367%20299.816%20453.82%20320H379.256C382.264%20299.596%20384%20278.199%20384%20256S382.264%20212.404%20379.256%20192H453.82C460.367%20212.184%20464%20233.664%20464%20256ZM256%20464C223.77%20464%20189.018%20420.82%20171.51%20352H340.49C322.982%20420.82%20288.23%20464%20256%20464ZM164.875%20320C161.754%20300.143%20160%20278.719%20160%20256S161.754%20211.857%20164.875%20192H347.125C350.246%20211.857%20352%20233.281%20352%20256S350.246%20300.143%20347.125%20320H164.875ZM48%20256C48%20233.664%2051.633%20212.184%2058.18%20192H132.744C129.736%20212.404%20128%20233.801%20128%20256S129.736%20299.596%20132.744%20320H58.18C51.633%20299.816%2048%20278.336%2048%20256ZM256%2048C288.23%2048%20322.982%2091.18%20340.49%20160H171.51C189.018%2091.18%20223.77%2048%20256%2048ZM440.338%20160H373.279C364.148%20120.846%20349.576%2087.291%20331.396%2062.359C378.412%2080.734%20417.135%20115.627%20440.338%20160ZM180.604%2062.359C162.424%2087.291%20147.852%20120.846%20138.721%20160H71.662C94.865%20115.627%20133.588%2080.734%20180.604%2062.359ZM71.662%20352H138.721C147.852%20391.154%20162.424%20424.709%20180.604%20449.641C133.588%20431.266%2094.865%20396.373%2071.662%20352ZM331.396%20449.641C349.576%20424.709%20364.148%20391.154%20373.279%20352H440.338C417.135%20396.373%20378.412%20431.266%20331.396%20449.641Z'/%3E%3C/svg%3E"); }
.ico-mapa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M568.984%20130.762C564.578%20127.793%20559.031%20127.199%20554.078%20129.137L436.521%20175.934C430.387%20191.434%20416.404%20218.398%20416.594%20218.322L544%20167.605V425.471L416%20473.27V304C416%20295.162%20408.836%20288%20400%20288S384%20295.162%20384%20304V474.51L192%20419.555V304C192%20295.162%20184.836%20288%20176%20288S160%20295.162%20160%20304V419.047L32%20472.062V214.541L138.898%20174.627C134.699%20163.832%20131.893%20153.566%20130.113%20143.73L10.41%20188.445C4.15%20190.783%200%20196.764%200%20203.447V496C0%20501.344%202.672%20506.344%207.109%20509.312S17.203%20512.812%2022.125%20510.781L174.297%20447.752L396.484%20511.375C397.922%20511.781%20399.406%20512%20400.891%20512C402.797%20512%20404.687%20511.656%20406.484%20511L565.59%20451.564C571.85%20449.227%20576%20443.246%20576%20436.564V144.012C576%20138.699%20573.375%20133.762%20568.984%20130.762ZM288%20320C297.551%20320%20306.604%20315.734%20312.682%20308.367C343.746%20270.721%20416%20177.596%20416%20126.029C416%2056.537%20358.58%200%20288%200S160%2056.537%20160%20126.029C160%20177.596%20232.254%20270.721%20263.318%20308.367C269.398%20315.734%20278.449%20320%20288%20320ZM288%2032C340.875%2032%20384%2074.107%20384%20126.029C384%20153.93%20345.875%20217.865%20288%20288C230.125%20217.865%20192%20153.93%20192%20126.029C192%2074.107%20235.125%2032%20288%2032ZM312%20128C312%20114.744%20301.254%20104%20288%20104S264%20114.744%20264%20128C264%20141.254%20274.746%20152%20288%20152S312%20141.254%20312%20128Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M568.984%20130.762C564.578%20127.793%20559.031%20127.199%20554.078%20129.137L436.521%20175.934C430.387%20191.434%20416.404%20218.398%20416.594%20218.322L544%20167.605V425.471L416%20473.27V304C416%20295.162%20408.836%20288%20400%20288S384%20295.162%20384%20304V474.51L192%20419.555V304C192%20295.162%20184.836%20288%20176%20288S160%20295.162%20160%20304V419.047L32%20472.062V214.541L138.898%20174.627C134.699%20163.832%20131.893%20153.566%20130.113%20143.73L10.41%20188.445C4.15%20190.783%200%20196.764%200%20203.447V496C0%20501.344%202.672%20506.344%207.109%20509.312S17.203%20512.812%2022.125%20510.781L174.297%20447.752L396.484%20511.375C397.922%20511.781%20399.406%20512%20400.891%20512C402.797%20512%20404.687%20511.656%20406.484%20511L565.59%20451.564C571.85%20449.227%20576%20443.246%20576%20436.564V144.012C576%20138.699%20573.375%20133.762%20568.984%20130.762ZM288%20320C297.551%20320%20306.604%20315.734%20312.682%20308.367C343.746%20270.721%20416%20177.596%20416%20126.029C416%2056.537%20358.58%200%20288%200S160%2056.537%20160%20126.029C160%20177.596%20232.254%20270.721%20263.318%20308.367C269.398%20315.734%20278.449%20320%20288%20320ZM288%2032C340.875%2032%20384%2074.107%20384%20126.029C384%20153.93%20345.875%20217.865%20288%20288C230.125%20217.865%20192%20153.93%20192%20126.029C192%2074.107%20235.125%2032%20288%2032ZM312%20128C312%20114.744%20301.254%20104%20288%20104S264%20114.744%20264%20128C264%20141.254%20274.746%20152%20288%20152S312%20141.254%20312%20128Z'/%3E%3C/svg%3E"); }
.ico-doce { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M8%2012%203%208.5v7z'/%3E%3Cpath%20d='M16%2012l5-3.5v7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M8%2012%203%208.5v7z'/%3E%3Cpath%20d='M16%2012l5-3.5v7z'/%3E%3C/svg%3E"); }
.ico-dado { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M384%2032H64C28.625%2032%200%2060.625%200%2096V416C0%20451.375%2028.625%20480%2064%20480H384C419.375%20480%20448%20451.375%20448%20416V96C448%2060.625%20419.375%2032%20384%2032ZM416%20416C416%20433.625%20401.625%20448%20384%20448H64C46.375%20448%2032%20433.625%2032%20416V96C32%2078.375%2046.375%2064%2064%2064H384C401.625%2064%20416%2078.375%20416%2096V416ZM128%20136C114.75%20136%20104%20146.75%20104%20160S114.75%20184%20128%20184S152%20173.25%20152%20160S141.25%20136%20128%20136ZM128%20232C114.75%20232%20104%20242.75%20104%20256C104%20269.25%20114.75%20280%20128%20280S152%20269.25%20152%20256C152%20242.75%20141.25%20232%20128%20232ZM320%20232C306.75%20232%20296%20242.75%20296%20256C296%20269.25%20306.75%20280%20320%20280S344%20269.25%20344%20256C344%20242.75%20333.25%20232%20320%20232ZM128%20328C114.75%20328%20104%20338.75%20104%20352S114.75%20376%20128%20376S152%20365.25%20152%20352S141.25%20328%20128%20328ZM320%20136C306.75%20136%20296%20146.75%20296%20160S306.75%20184%20320%20184S344%20173.25%20344%20160S333.25%20136%20320%20136ZM320%20328C306.75%20328%20296%20338.75%20296%20352S306.75%20376%20320%20376S344%20365.25%20344%20352S333.25%20328%20320%20328Z%20'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M384%2032H64C28.625%2032%200%2060.625%200%2096V416C0%20451.375%2028.625%20480%2064%20480H384C419.375%20480%20448%20451.375%20448%20416V96C448%2060.625%20419.375%2032%20384%2032ZM416%20416C416%20433.625%20401.625%20448%20384%20448H64C46.375%20448%2032%20433.625%2032%20416V96C32%2078.375%2046.375%2064%2064%2064H384C401.625%2064%20416%2078.375%20416%2096V416ZM128%20136C114.75%20136%20104%20146.75%20104%20160S114.75%20184%20128%20184S152%20173.25%20152%20160S141.25%20136%20128%20136ZM128%20232C114.75%20232%20104%20242.75%20104%20256C104%20269.25%20114.75%20280%20128%20280S152%20269.25%20152%20256C152%20242.75%20141.25%20232%20128%20232ZM320%20232C306.75%20232%20296%20242.75%20296%20256C296%20269.25%20306.75%20280%20320%20280S344%20269.25%20344%20256C344%20242.75%20333.25%20232%20320%20232ZM128%20328C114.75%20328%20104%20338.75%20104%20352S114.75%20376%20128%20376S152%20365.25%20152%20352S141.25%20328%20128%20328ZM320%20136C306.75%20136%20296%20146.75%20296%20160S306.75%20184%20320%20184S344%20173.25%20344%20160S333.25%20136%20320%20136ZM320%20328C306.75%20328%20296%20338.75%20296%20352S306.75%20376%20320%20376S344%20365.25%20344%20352S333.25%20328%20320%20328Z%20'%3E%3C/path%3E%3C/svg%3E"); }
.ico-cartola { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M328.228%20312.627C326.732%20312.141%20325.21%20311.91%20323.706%20311.91C317.536%20311.91%20311.671%20315.779%20309.087%20321.697L273.751%20402.637L246.206%20320H255.997C264.841%20320%20271.997%20312.844%20271.997%20304S264.841%20288%20255.997%20288H191.997C183.154%20288%20175.997%20295.156%20175.997%20304S183.154%20320%20191.997%20320H201.788L174.244%20402.637L138.908%20321.697C136.324%20315.781%20130.458%20311.912%20124.288%20311.912C122.785%20311.912%20121.265%20312.141%20119.767%20312.627C49.804%20335.348%20-0.692%20401.217%200.007%20478.922C0.173%20497.426%2016.158%20512%2034.661%20512H413.333C431.837%20512%20447.822%20497.426%20447.988%20478.922C448.687%20401.217%20398.195%20335.346%20328.228%20312.627ZM34.661%20480C33.15%20480%2032.117%20478.936%2032.005%20478.635C31.494%20421.73%2064.562%20371.127%20115.66%20348.424L173.101%20480H34.661ZM239.997%20479.953H207.997L193.38%20446.473L223.997%20354.594L254.615%20446.473L239.997%20479.953ZM413.333%20480H274.894L332.335%20348.424C383.431%20371.123%20416.501%20421.727%20415.999%20478.598C415.878%20478.936%20414.845%20480%20413.333%20480ZM223.997%20256C294.747%20256%20351.997%20198.75%20351.997%20128S294.747%200%20223.997%200S95.997%2057.25%2095.997%20128S153.247%20256%20223.997%20256ZM223.997%2032C276.933%2032%20319.997%2075.064%20319.997%20128C319.997%20180.934%20276.933%20224%20223.997%20224S127.997%20180.934%20127.997%20128C127.997%2075.064%20171.062%2032%20223.997%2032Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M328.228%20312.627C326.732%20312.141%20325.21%20311.91%20323.706%20311.91C317.536%20311.91%20311.671%20315.779%20309.087%20321.697L273.751%20402.637L246.206%20320H255.997C264.841%20320%20271.997%20312.844%20271.997%20304S264.841%20288%20255.997%20288H191.997C183.154%20288%20175.997%20295.156%20175.997%20304S183.154%20320%20191.997%20320H201.788L174.244%20402.637L138.908%20321.697C136.324%20315.781%20130.458%20311.912%20124.288%20311.912C122.785%20311.912%20121.265%20312.141%20119.767%20312.627C49.804%20335.348%20-0.692%20401.217%200.007%20478.922C0.173%20497.426%2016.158%20512%2034.661%20512H413.333C431.837%20512%20447.822%20497.426%20447.988%20478.922C448.687%20401.217%20398.195%20335.346%20328.228%20312.627ZM34.661%20480C33.15%20480%2032.117%20478.936%2032.005%20478.635C31.494%20421.73%2064.562%20371.127%20115.66%20348.424L173.101%20480H34.661ZM239.997%20479.953H207.997L193.38%20446.473L223.997%20354.594L254.615%20446.473L239.997%20479.953ZM413.333%20480H274.894L332.335%20348.424C383.431%20371.123%20416.501%20421.727%20415.999%20478.598C415.878%20478.936%20414.845%20480%20413.333%20480ZM223.997%20256C294.747%20256%20351.997%20198.75%20351.997%20128S294.747%200%20223.997%200S95.997%2057.25%2095.997%20128S153.247%20256%20223.997%20256ZM223.997%2032C276.933%2032%20319.997%2075.064%20319.997%20128C319.997%20180.934%20276.933%20224%20223.997%20224S127.997%20180.934%20127.997%20128C127.997%2075.064%20171.062%2032%20223.997%2032Z'/%3E%3C/svg%3E"); }
.ico-trofeu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M572.226%2076.719C570.664%2069.312%20564.135%2064%20556.575%2064H447.953C447.94%2057.828%20447.864%2051.992%20447.733%2046.656C447.077%2020.5%20425.989%200%20399.747%200H176.253C150.011%200%20128.923%2020.5%20128.267%2046.656C128.136%2051.992%20128.06%2057.828%20128.047%2064H19.425C11.865%2064%205.336%2069.312%203.774%2076.719C2.899%2080.906%20-17.189%20180.781%2045.043%20272.844C86.715%20334.487%20154.919%20376.863%20247.576%20399.539C261.87%20403.037%20272.004%20415.769%20272.004%20430.489L272.005%20480H176.034C167.2%20480%20160.039%20487.163%20160.039%20496V496C160.039%20504.837%20167.2%20512%20176.034%20512H399.966C408.8%20512%20415.961%20504.837%20415.961%20496V496C415.961%20487.163%20408.8%20480%20399.966%20480H303.995L303.996%20430.489C303.996%20415.769%20314.13%20403.037%20328.424%20399.539C421.082%20376.863%20489.285%20334.487%20530.957%20272.844C593.189%20180.781%20573.101%2080.906%20572.226%2076.719ZM160.258%2047.469C160.476%2038.781%20167.505%2032%20176.253%2032H399.747C408.495%2032%20415.524%2038.781%20415.742%2047.469C417.742%20128.375%20409.088%20320.156%20288%20374.625C166.912%20320.156%20158.258%20128.375%20160.258%2047.469ZM71.784%20255.281C29.204%20192.562%2030.547%20123.812%2033.327%2096H128.712C131.729%20173.707%20148.003%20284.602%20209.907%20354.977C148.39%20332.875%20101.906%20299.648%2071.784%20255.281ZM504.216%20255.281C474.096%20299.648%20427.61%20332.875%20366.093%20354.977C427.997%20284.602%20444.271%20173.707%20447.288%2096H542.673C545.453%20123.812%20546.796%20192.562%20504.216%20255.281Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M572.226%2076.719C570.664%2069.312%20564.135%2064%20556.575%2064H447.953C447.94%2057.828%20447.864%2051.992%20447.733%2046.656C447.077%2020.5%20425.989%200%20399.747%200H176.253C150.011%200%20128.923%2020.5%20128.267%2046.656C128.136%2051.992%20128.06%2057.828%20128.047%2064H19.425C11.865%2064%205.336%2069.312%203.774%2076.719C2.899%2080.906%20-17.189%20180.781%2045.043%20272.844C86.715%20334.487%20154.919%20376.863%20247.576%20399.539C261.87%20403.037%20272.004%20415.769%20272.004%20430.489L272.005%20480H176.034C167.2%20480%20160.039%20487.163%20160.039%20496V496C160.039%20504.837%20167.2%20512%20176.034%20512H399.966C408.8%20512%20415.961%20504.837%20415.961%20496V496C415.961%20487.163%20408.8%20480%20399.966%20480H303.995L303.996%20430.489C303.996%20415.769%20314.13%20403.037%20328.424%20399.539C421.082%20376.863%20489.285%20334.487%20530.957%20272.844C593.189%20180.781%20573.101%2080.906%20572.226%2076.719ZM160.258%2047.469C160.476%2038.781%20167.505%2032%20176.253%2032H399.747C408.495%2032%20415.524%2038.781%20415.742%2047.469C417.742%20128.375%20409.088%20320.156%20288%20374.625C166.912%20320.156%20158.258%20128.375%20160.258%2047.469ZM71.784%20255.281C29.204%20192.562%2030.547%20123.812%2033.327%2096H128.712C131.729%20173.707%20148.003%20284.602%20209.907%20354.977C148.39%20332.875%20101.906%20299.648%2071.784%20255.281ZM504.216%20255.281C474.096%20299.648%20427.61%20332.875%20366.093%20354.977C427.997%20284.602%20444.271%20173.707%20447.288%2096H542.673C545.453%20123.812%20546.796%20192.562%20504.216%20255.281Z'/%3E%3C/svg%3E"); }
.ico-bandeira { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M498.535%206.234C478.777%20-5.758%20459.604%203.02%20456.914%204.246C415.16%2023.305%20380.9%2032.18%20349.092%2032.18C320.168%2032.18%20297.35%2024.852%20273.193%2017.086C247.523%208.844%20220.979%200.316%20185.211%200.312C159.012%200.312%20121.332%202.641%2032%2038.836V16.008C32%207.172%2024.836%200.012%2016%200.012S0%207.172%200%2016.008V496C0%20504.836%207.164%20512%2016%20512S32%20504.836%2032%20496V391.094C46.475%20384.652%20109.742%20352.164%20180.844%20352.164C217.648%20352.164%20247.982%20359.875%20280.096%20368.047C310.834%20375.867%20342.586%20383.945%20379.4%20383.945C414.859%20383.945%20451.482%20376.391%20491.365%20360.852H491.367C503.648%20356.07%20511.74%20344.246%20511.75%20331.066L512%2032.352C512.008%2022.008%20507.375%2011.598%20498.535%206.234ZM479.748%20331.039C443.639%20345.105%20410.816%20351.945%20379.4%20351.945C346.594%20351.945%20318.141%20344.707%20288.014%20337.043C255.395%20328.746%20221.668%20320.164%20180.844%20320.164C134.953%20320.164%2087.238%20331.477%2034.973%20354.746L32%20356.07V73.367L60.01%2062.016C109.348%2042.031%20150.303%2032.312%20185.207%2032.312C215.951%2032.312%20239.004%2039.719%20263.406%2047.555C288.848%2055.727%20315.156%2064.18%20349.092%2064.18C418.52%2064.18%20479.998%2032.008%20479.998%2032.008L479.748%20331.039Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M498.535%206.234C478.777%20-5.758%20459.604%203.02%20456.914%204.246C415.16%2023.305%20380.9%2032.18%20349.092%2032.18C320.168%2032.18%20297.35%2024.852%20273.193%2017.086C247.523%208.844%20220.979%200.316%20185.211%200.312C159.012%200.312%20121.332%202.641%2032%2038.836V16.008C32%207.172%2024.836%200.012%2016%200.012S0%207.172%200%2016.008V496C0%20504.836%207.164%20512%2016%20512S32%20504.836%2032%20496V391.094C46.475%20384.652%20109.742%20352.164%20180.844%20352.164C217.648%20352.164%20247.982%20359.875%20280.096%20368.047C310.834%20375.867%20342.586%20383.945%20379.4%20383.945C414.859%20383.945%20451.482%20376.391%20491.365%20360.852H491.367C503.648%20356.07%20511.74%20344.246%20511.75%20331.066L512%2032.352C512.008%2022.008%20507.375%2011.598%20498.535%206.234ZM479.748%20331.039C443.639%20345.105%20410.816%20351.945%20379.4%20351.945C346.594%20351.945%20318.141%20344.707%20288.014%20337.043C255.395%20328.746%20221.668%20320.164%20180.844%20320.164C134.953%20320.164%2087.238%20331.477%2034.973%20354.746L32%20356.07V73.367L60.01%2062.016C109.348%2042.031%20150.303%2032.312%20185.207%2032.312C215.951%2032.312%20239.004%2039.719%20263.406%2047.555C288.848%2055.727%20315.156%2064.18%20349.092%2064.18C418.52%2064.18%20479.998%2032.008%20479.998%2032.008L479.748%20331.039Z'/%3E%3C/svg%3E"); }
.ico-baralho { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M374.459%20176.156C380.518%20161.273%20384%20145.061%20384%20128C384%2057.307%20326.693%200%20256%200S128%2057.307%20128%20128C128%20145.061%20131.482%20161.273%20137.541%20176.156C60.014%20175.295%200%20237.852%200%20312C0%20387.109%2060.889%20448%20136%20448C178.125%20448%20215.211%20428.467%20240%20398.297V480H176C167.164%20480%20160%20487.162%20160%20496C160%20504.836%20167.164%20512%20176%20512H336C344.836%20512%20352%20504.836%20352%20496C352%20487.162%20344.836%20480%20336%20480H272V398.297C296.789%20428.467%20333.875%20448%20376%20448C451.111%20448%20512%20387.109%20512%20312C512%20237.783%20451.912%20175.295%20374.459%20176.156ZM376%20416C337.611%20416%20302.49%20394.49%20284.344%20359.865C278.799%20349.291%20267.939%20342.723%20256%20342.723S233.199%20349.293%20227.656%20359.867C209.51%20394.49%20174.389%20415.998%20136.002%20415.998C75.326%20415.998%2035.607%20366.977%2032.266%20319.518C27.881%20257.279%2077.953%20208.385%20134.162%20208.006C135.455%20208.172%20161.377%20208.418%20161.436%20208.418C172.834%20208.418%20180.516%20196.854%20176.256%20186.385C169.281%20169.252%20160%20151.4%20160%20128C160%2075.064%20203.066%2032%20256%2032C308.936%2032%20352%2075.064%20352%20128C352%20151.971%20343.146%20168.203%20335.746%20186.385C331.455%20196.922%20339.246%20208.418%20350.564%20208.418C350.623%20208.418%20350.682%20208.418%20350.74%20208.416C378.738%20208.094%20377.568%20208.018%20377.621%20208.014C428.969%20208.816%20484.486%20252.318%20479.734%20319.549C476.367%20367.135%20436.402%20416%20376%20416Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M374.459%20176.156C380.518%20161.273%20384%20145.061%20384%20128C384%2057.307%20326.693%200%20256%200S128%2057.307%20128%20128C128%20145.061%20131.482%20161.273%20137.541%20176.156C60.014%20175.295%200%20237.852%200%20312C0%20387.109%2060.889%20448%20136%20448C178.125%20448%20215.211%20428.467%20240%20398.297V480H176C167.164%20480%20160%20487.162%20160%20496C160%20504.836%20167.164%20512%20176%20512H336C344.836%20512%20352%20504.836%20352%20496C352%20487.162%20344.836%20480%20336%20480H272V398.297C296.789%20428.467%20333.875%20448%20376%20448C451.111%20448%20512%20387.109%20512%20312C512%20237.783%20451.912%20175.295%20374.459%20176.156ZM376%20416C337.611%20416%20302.49%20394.49%20284.344%20359.865C278.799%20349.291%20267.939%20342.723%20256%20342.723S233.199%20349.293%20227.656%20359.867C209.51%20394.49%20174.389%20415.998%20136.002%20415.998C75.326%20415.998%2035.607%20366.977%2032.266%20319.518C27.881%20257.279%2077.953%20208.385%20134.162%20208.006C135.455%20208.172%20161.377%20208.418%20161.436%20208.418C172.834%20208.418%20180.516%20196.854%20176.256%20186.385C169.281%20169.252%20160%20151.4%20160%20128C160%2075.064%20203.066%2032%20256%2032C308.936%2032%20352%2075.064%20352%20128C352%20151.971%20343.146%20168.203%20335.746%20186.385C331.455%20196.922%20339.246%20208.418%20350.564%20208.418C350.623%20208.418%20350.682%20208.418%20350.74%20208.416C378.738%20208.094%20377.568%20208.018%20377.621%20208.014C428.969%20208.816%20484.486%20252.318%20479.734%20319.549C476.367%20367.135%20436.402%20416%20376%20416Z'/%3E%3C/svg%3E"); }
.ico-embaralhar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M427.312%20292.688C421.062%20286.438%20410.937%20286.438%20404.688%20292.688S398.438%20309.063%20404.688%20315.312L457.375%20368H336C331%20368%20326.219%20365.594%20323.219%20361.594L284.812%20310.406C279.5%20303.312%20269.437%20301.906%20262.406%20307.188C255.344%20312.5%20253.906%20322.531%20259.188%20329.594L297.594%20380.781C306.594%20392.812%20320.969%20400%20336%20400H457.375L404.688%20452.688C398.438%20458.938%20398.438%20469.063%20404.688%20475.312C407.812%20478.438%20411.906%20480%20416%20480S424.188%20478.438%20427.312%20475.312L507.312%20395.312C513.562%20389.062%20513.562%20378.937%20507.312%20372.688L427.312%20292.688ZM336%20144H457.375L404.688%20196.688C398.438%20202.938%20398.438%20213.063%20404.688%20219.312C407.812%20222.438%20411.906%20224%20416%20224S424.188%20222.438%20427.312%20219.312L507.312%20139.312C513.562%20133.062%20513.562%20122.937%20507.312%20116.688L427.312%2036.688C421.062%2030.438%20410.937%2030.438%20404.688%2036.688S398.438%2053.063%20404.688%2059.312L457.375%20112H336C320.969%20112%20306.594%20119.188%20297.594%20131.219L124.781%20361.594C121.781%20365.594%20117%20368%20112%20368H16C7.156%20368%200%20375.156%200%20384S7.156%20400%2016%20400H112C127.031%20400%20141.406%20392.812%20150.406%20380.781L323.219%20150.406C326.219%20146.406%20331%20144%20336%20144ZM16%20144H112C117%20144%20121.781%20146.406%20124.781%20150.406L163.188%20201.594C166.344%20205.781%20171.156%20208%20176%20208C179.344%20208%20182.719%20206.969%20185.594%20204.812C192.656%20199.5%20194.094%20189.469%20188.812%20182.406L150.406%20131.219C141.406%20119.188%20127.031%20112%20112%20112H16C7.156%20112%200%20119.156%200%20128S7.156%20144%2016%20144Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M427.312%20292.688C421.062%20286.438%20410.937%20286.438%20404.688%20292.688S398.438%20309.063%20404.688%20315.312L457.375%20368H336C331%20368%20326.219%20365.594%20323.219%20361.594L284.812%20310.406C279.5%20303.312%20269.437%20301.906%20262.406%20307.188C255.344%20312.5%20253.906%20322.531%20259.188%20329.594L297.594%20380.781C306.594%20392.812%20320.969%20400%20336%20400H457.375L404.688%20452.688C398.438%20458.938%20398.438%20469.063%20404.688%20475.312C407.812%20478.438%20411.906%20480%20416%20480S424.188%20478.438%20427.312%20475.312L507.312%20395.312C513.562%20389.062%20513.562%20378.937%20507.312%20372.688L427.312%20292.688ZM336%20144H457.375L404.688%20196.688C398.438%20202.938%20398.438%20213.063%20404.688%20219.312C407.812%20222.438%20411.906%20224%20416%20224S424.188%20222.438%20427.312%20219.312L507.312%20139.312C513.562%20133.062%20513.562%20122.937%20507.312%20116.688L427.312%2036.688C421.062%2030.438%20410.937%2030.438%20404.688%2036.688S398.438%2053.063%20404.688%2059.312L457.375%20112H336C320.969%20112%20306.594%20119.188%20297.594%20131.219L124.781%20361.594C121.781%20365.594%20117%20368%20112%20368H16C7.156%20368%200%20375.156%200%20384S7.156%20400%2016%20400H112C127.031%20400%20141.406%20392.812%20150.406%20380.781L323.219%20150.406C326.219%20146.406%20331%20144%20336%20144ZM16%20144H112C117%20144%20121.781%20146.406%20124.781%20150.406L163.188%20201.594C166.344%20205.781%20171.156%20208%20176%20208C179.344%20208%20182.719%20206.969%20185.594%20204.812C192.656%20199.5%20194.094%20189.469%20188.812%20182.406L150.406%20131.219C141.406%20119.188%20127.031%20112%20112%20112H16C7.156%20112%200%20119.156%200%20128S7.156%20144%2016%20144Z'/%3E%3C/svg%3E"); }
.ico-ampulheta { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%3E%3Cpath%20d='M352%2080C352%2071.156%20344.844%2064%20336%2064S320%2071.156%20320%2080C320%20107.5%20310.906%20134.781%20294.406%20156.812L227.203%20246.406C222.937%20252.094%20222.937%20259.906%20227.203%20265.594L294.406%20355.188C310.906%20377.219%20320%20404.5%20320%20432C320%20440.844%20327.156%20448%20336%20448S352%20440.844%20352%20432C352%20397.625%20340.641%20363.531%20320%20336L260%20256L320%20176C340.641%20148.469%20352%20114.375%20352%2080ZM32%20432C32%20440.844%2039.156%20448%2048%20448S64%20440.844%2064%20432C64%20404.5%2073.094%20377.219%2089.594%20355.188L156.797%20265.594C161.063%20259.906%20161.063%20252.094%20156.797%20246.406L89.594%20156.812C73.094%20134.781%2064%20107.5%2064%2080C64%2071.156%2056.844%2064%2048%2064S32%2071.156%2032%2080C32%20114.375%2043.359%20148.469%2064%20176L124%20256L64%20336C43.359%20363.531%2032%20397.625%2032%20432ZM368%20480H16C7.156%20480%200%20487.156%200%20496S7.156%20512%2016%20512H368C376.844%20512%20384%20504.844%20384%20496S376.844%20480%20368%20480ZM16%2032H368C376.844%2032%20384%2024.844%20384%2016S376.844%200%20368%200H16C7.156%200%200%207.156%200%2016S7.156%2032%2016%2032ZM112%20448H272C280.844%20448%20288%20440.844%20288%20432C288%20407.188%20281.547%20382.406%20269.359%20360.281C266.547%20355.156%20261.172%20352%20255.344%20352H128.656C122.828%20352%20117.453%20355.156%20114.641%20360.281C102.453%20382.406%2096%20407.188%2096%20432C96%20440.844%20103.156%20448%20112%20448ZM138.516%20384H245.484C250.141%20394.25%20253.297%20405.031%20254.859%20416H129.141C130.703%20405.031%20133.859%20394.25%20138.516%20384ZM179.703%20234.25C182.75%20237.875%20187.25%20240%20192%20240S201.25%20237.875%20204.297%20234.25L253.547%20175.125C259.266%20168.281%20264.422%20160.625%20269.344%20151.75C272.078%20146.781%20272%20140.75%20269.125%20135.875S261.016%20128%20255.344%20128H128.656C122.984%20128%20117.75%20131%20114.875%20135.875S111.922%20146.781%20114.656%20151.75C119.578%20160.625%20124.734%20168.281%20130.438%20175.125L179.703%20234.25ZM224.5%20160L192%20199L159.5%20160H224.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%3E%3Cpath%20d='M352%2080C352%2071.156%20344.844%2064%20336%2064S320%2071.156%20320%2080C320%20107.5%20310.906%20134.781%20294.406%20156.812L227.203%20246.406C222.937%20252.094%20222.937%20259.906%20227.203%20265.594L294.406%20355.188C310.906%20377.219%20320%20404.5%20320%20432C320%20440.844%20327.156%20448%20336%20448S352%20440.844%20352%20432C352%20397.625%20340.641%20363.531%20320%20336L260%20256L320%20176C340.641%20148.469%20352%20114.375%20352%2080ZM32%20432C32%20440.844%2039.156%20448%2048%20448S64%20440.844%2064%20432C64%20404.5%2073.094%20377.219%2089.594%20355.188L156.797%20265.594C161.063%20259.906%20161.063%20252.094%20156.797%20246.406L89.594%20156.812C73.094%20134.781%2064%20107.5%2064%2080C64%2071.156%2056.844%2064%2048%2064S32%2071.156%2032%2080C32%20114.375%2043.359%20148.469%2064%20176L124%20256L64%20336C43.359%20363.531%2032%20397.625%2032%20432ZM368%20480H16C7.156%20480%200%20487.156%200%20496S7.156%20512%2016%20512H368C376.844%20512%20384%20504.844%20384%20496S376.844%20480%20368%20480ZM16%2032H368C376.844%2032%20384%2024.844%20384%2016S376.844%200%20368%200H16C7.156%200%200%207.156%200%2016S7.156%2032%2016%2032ZM112%20448H272C280.844%20448%20288%20440.844%20288%20432C288%20407.188%20281.547%20382.406%20269.359%20360.281C266.547%20355.156%20261.172%20352%20255.344%20352H128.656C122.828%20352%20117.453%20355.156%20114.641%20360.281C102.453%20382.406%2096%20407.188%2096%20432C96%20440.844%20103.156%20448%20112%20448ZM138.516%20384H245.484C250.141%20394.25%20253.297%20405.031%20254.859%20416H129.141C130.703%20405.031%20133.859%20394.25%20138.516%20384ZM179.703%20234.25C182.75%20237.875%20187.25%20240%20192%20240S201.25%20237.875%20204.297%20234.25L253.547%20175.125C259.266%20168.281%20264.422%20160.625%20269.344%20151.75C272.078%20146.781%20272%20140.75%20269.125%20135.875S261.016%20128%20255.344%20128H128.656C122.984%20128%20117.75%20131%20114.875%20135.875S111.922%20146.781%20114.656%20151.75C119.578%20160.625%20124.734%20168.281%20130.438%20175.125L179.703%20234.25ZM224.5%20160L192%20199L159.5%20160H224.5Z'/%3E%3C/svg%3E"); }
.ico-numeros { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M208%20112H496C504.801%20112%20512%20104.799%20512%2096C512%2087.199%20504.801%2080%20496%2080H208C199.201%2080%20192%2087.199%20192%2096C192%20104.799%20199.201%20112%20208%20112ZM32%20224H128C136.844%20224%20144%20216.844%20144%20208C144%20199.158%20136.844%20192.002%20128%20192.002H96V48.008C96%2042.273%2092.937%2036.992%2087.969%2034.133S76.906%2031.289%2071.937%2034.18L36.375%2054.914C28.75%2059.365%2026.156%2069.162%2030.625%2076.803C35.062%2084.428%2044.875%2086.943%2052.5%2082.568L64%2075.85V192.002H32C23.156%20192.002%2016%20199.158%2016%20208C16%20216.844%2023.156%20224%2032%20224ZM496%20400H208C199.201%20400%20192%20407.199%20192%20416C192%20424.799%20199.201%20432%20208%20432H496C504.801%20432%20512%20424.799%20512%20416C512%20407.199%20504.801%20400%20496%20400ZM144%20448H58.435L119.873%20393.984C148.531%20369.281%20151.969%20325.75%20127.594%20296.938C115.342%20282.5%2098.154%20273.719%2079.154%20272.219C59.842%20270.594%2041.652%20276.703%2027.246%20289.125L13.465%20301C6.777%20306.766%206.027%20316.875%2011.777%20323.562C17.558%20330.281%2027.715%20331%2034.34%20325.25L48.123%20313.375C55.998%20306.594%2065.935%20303.203%2076.623%20304.125C87.06%20304.937%2096.498%20309.734%20103.154%20317.625C116.467%20333.344%20114.654%20356.234%2098.873%20369.844L5.433%20451.984C0.433%20456.375%20-1.317%20463.422%201.027%20469.641C3.371%20475.875%209.34%20480%2015.996%20480H144C152.844%20480%20160%20472.844%20160%20464S152.844%20448%20144%20448ZM496%20240H208C199.201%20240%20192%20247.199%20192%20256C192%20264.799%20199.201%20272%20208%20272H496C504.801%20272%20512%20264.799%20512%20256C512%20247.199%20504.801%20240%20496%20240Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M208%20112H496C504.801%20112%20512%20104.799%20512%2096C512%2087.199%20504.801%2080%20496%2080H208C199.201%2080%20192%2087.199%20192%2096C192%20104.799%20199.201%20112%20208%20112ZM32%20224H128C136.844%20224%20144%20216.844%20144%20208C144%20199.158%20136.844%20192.002%20128%20192.002H96V48.008C96%2042.273%2092.937%2036.992%2087.969%2034.133S76.906%2031.289%2071.937%2034.18L36.375%2054.914C28.75%2059.365%2026.156%2069.162%2030.625%2076.803C35.062%2084.428%2044.875%2086.943%2052.5%2082.568L64%2075.85V192.002H32C23.156%20192.002%2016%20199.158%2016%20208C16%20216.844%2023.156%20224%2032%20224ZM496%20400H208C199.201%20400%20192%20407.199%20192%20416C192%20424.799%20199.201%20432%20208%20432H496C504.801%20432%20512%20424.799%20512%20416C512%20407.199%20504.801%20400%20496%20400ZM144%20448H58.435L119.873%20393.984C148.531%20369.281%20151.969%20325.75%20127.594%20296.938C115.342%20282.5%2098.154%20273.719%2079.154%20272.219C59.842%20270.594%2041.652%20276.703%2027.246%20289.125L13.465%20301C6.777%20306.766%206.027%20316.875%2011.777%20323.562C17.558%20330.281%2027.715%20331%2034.34%20325.25L48.123%20313.375C55.998%20306.594%2065.935%20303.203%2076.623%20304.125C87.06%20304.937%2096.498%20309.734%20103.154%20317.625C116.467%20333.344%20114.654%20356.234%2098.873%20369.844L5.433%20451.984C0.433%20456.375%20-1.317%20463.422%201.027%20469.641C3.371%20475.875%209.34%20480%2015.996%20480H144C152.844%20480%20160%20472.844%20160%20464S152.844%20448%20144%20448ZM496%20240H208C199.201%20240%20192%20247.199%20192%20256C192%20264.799%20199.201%20272%20208%20272H496C504.801%20272%20512%20264.799%20512%20256C512%20247.199%20504.801%20240%20496%20240Z'/%3E%3C/svg%3E"); }
.ico-slot { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M448%2032H64C28.654%2032%200%2060.652%200%2096V416C0%20451.346%2028.654%20480%2064%20480H448C483.346%20480%20512%20451.346%20512%20416V96C512%2060.652%20483.346%2032%20448%2032ZM240%20448H64C46.355%20448%2032%20433.645%2032%20416V192H240V448ZM480%20416C480%20433.645%20465.645%20448%20448%20448H272V192H480V416ZM480%20160H32V96C32%2078.355%2046.355%2064%2064%2064H448C465.645%2064%20480%2078.355%20480%2096V160Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M448%2032H64C28.654%2032%200%2060.652%200%2096V416C0%20451.346%2028.654%20480%2064%20480H448C483.346%20480%20512%20451.346%20512%20416V96C512%2060.652%20483.346%2032%20448%2032ZM240%20448H64C46.355%20448%2032%20433.645%2032%20416V192H240V448ZM480%20416C480%20433.645%20465.645%20448%20448%20448H272V192H480V416ZM480%20160H32V96C32%2078.355%2046.355%2064%2064%2064H448C465.645%2064%20480%2078.355%20480%2096V160Z'/%3E%3C/svg%3E"); }
.ico-cadeado { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M416%20224H384V128C384%2057.406%20326.594%200%20256%200S128%2057.406%20128%20128V224H96C60.654%20224%2032%20252.652%2032%20288V448C32%20483.346%2060.654%20512%2096%20512H416C451.348%20512%20480%20483.346%20480%20448V288C480%20252.652%20451.348%20224%20416%20224ZM160%20128C160%2075.062%20203.062%2032%20256%2032S352%2075.062%20352%20128V224H160V128ZM448%20448C448%20465.645%20433.645%20480%20416%20480H96C78.355%20480%2064%20465.645%2064%20448V288C64%20270.355%2078.355%20256%2096%20256H416C433.645%20256%20448%20270.355%20448%20288V448Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M416%20224H384V128C384%2057.406%20326.594%200%20256%200S128%2057.406%20128%20128V224H96C60.654%20224%2032%20252.652%2032%20288V448C32%20483.346%2060.654%20512%2096%20512H416C451.348%20512%20480%20483.346%20480%20448V288C480%20252.652%20451.348%20224%20416%20224ZM160%20128C160%2075.062%20203.062%2032%20256%2032S352%2075.062%20352%20128V224H160V128ZM448%20448C448%20465.645%20433.645%20480%20416%20480H96C78.355%20480%2064%20465.645%2064%20448V288C64%20270.355%2078.355%20256%2096%20256H416C433.645%20256%20448%20270.355%20448%20288V448Z'/%3E%3C/svg%3E"); }
.ico-cadeado-aberto { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M448%200C377.406%200%20320%2057.406%20320%20128V224H64C28.654%20224%200%20252.652%200%20288V448C0%20483.346%2028.654%20512%2064%20512H384C419.348%20512%20448%20483.346%20448%20448V288C448%20252.652%20419.348%20224%20384%20224H352V128C352%2075.062%20395.062%2032%20448%2032S544%2075.062%20544%20128V208C544%20216.844%20551.156%20224%20560%20224S576%20216.844%20576%20208V128C576%2057.406%20518.594%200%20448%200ZM384%20256C401.645%20256%20416%20270.355%20416%20288V448C416%20465.645%20401.645%20480%20384%20480H64C46.355%20480%2032%20465.645%2032%20448V288C32%20270.355%2046.355%20256%2064%20256H384Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M448%200C377.406%200%20320%2057.406%20320%20128V224H64C28.654%20224%200%20252.652%200%20288V448C0%20483.346%2028.654%20512%2064%20512H384C419.348%20512%20448%20483.346%20448%20448V288C448%20252.652%20419.348%20224%20384%20224H352V128C352%2075.062%20395.062%2032%20448%2032S544%2075.062%20544%20128V208C544%20216.844%20551.156%20224%20560%20224S576%20216.844%20576%20208V128C576%2057.406%20518.594%200%20448%200ZM384%20256C401.645%20256%20416%20270.355%20416%20288V448C416%20465.645%20401.645%20480%20384%20480H64C46.355%20480%2032%20465.645%2032%20448V288C32%20270.355%2046.355%20256%2064%20256H384Z'/%3E%3C/svg%3E"); }
.ico-chave { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M336%200C238.875%200%20160%2078.75%20160%20176C160%20191.25%20162%20206.375%20165.75%20221L7%20379.75C2.5%20384.25%200%20390.375%200%20396.625V488C0%20501.25%2010.75%20512%2024%20512H136C149.25%20512%20160%20501.25%20160%20488V448H200C213.25%20448%20224%20437.25%20224%20424V384H243.375C249.625%20384%20255.75%20381.5%20260.25%20377L291%20346.25C305.625%20350%20320.75%20352%20336%20352C433.125%20352%20512%20273.25%20512%20176C512%2078.875%20433.25%200%20336%200ZM336%20320C317%20320%20298.875%20316.375%20282.375%20309.625L240%20352H192V416H128V480H32V400L202.375%20229.625C195.625%20213.125%20192%20195%20192%20176C192%2096.5%20256.5%2032%20336%2032S480%2096.5%20480%20176S415.5%20320%20336%20320ZM384%20104C370.746%20104%20360%20114.744%20360%20128C360%20141.254%20370.746%20152%20384%20152S408%20141.254%20408%20128C408%20114.744%20397.254%20104%20384%20104Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M336%200C238.875%200%20160%2078.75%20160%20176C160%20191.25%20162%20206.375%20165.75%20221L7%20379.75C2.5%20384.25%200%20390.375%200%20396.625V488C0%20501.25%2010.75%20512%2024%20512H136C149.25%20512%20160%20501.25%20160%20488V448H200C213.25%20448%20224%20437.25%20224%20424V384H243.375C249.625%20384%20255.75%20381.5%20260.25%20377L291%20346.25C305.625%20350%20320.75%20352%20336%20352C433.125%20352%20512%20273.25%20512%20176C512%2078.875%20433.25%200%20336%200ZM336%20320C317%20320%20298.875%20316.375%20282.375%20309.625L240%20352H192V416H128V480H32V400L202.375%20229.625C195.625%20213.125%20192%20195%20192%20176C192%2096.5%20256.5%2032%20336%2032S480%2096.5%20480%20176S415.5%20320%20336%20320ZM384%20104C370.746%20104%20360%20114.744%20360%20128C360%20141.254%20370.746%20152%20384%20152S408%20141.254%20408%20128C408%20114.744%20397.254%20104%20384%20104Z'/%3E%3C/svg%3E"); }
.ico-olho { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M288%20128C217.334%20128%20160%20185.348%20160%20256S217.334%20384%20288%20384H288.057C358.695%20384%20416%20326.68%20416%20256.055V256C416%20185.348%20358.666%20128%20288%20128ZM288%20352C235.066%20352%20192%20308.936%20192%20256S235.066%20160%20288%20160C340.936%20160%20384%20203.064%20384%20256.055C384%20308.959%20340.959%20352%20288%20352ZM572.531%20238.973C518.281%20115.525%20410.938%2032%20288%2032S57.688%20115.58%203.469%20238.973C1.562%20243.402%200%20251.041%200%20256C0%20260.977%201.562%20268.596%203.469%20273.025C57.719%20396.473%20165.062%20480%20288%20480S518.312%20396.418%20572.531%20273.025C574.438%20268.596%20576%20260.957%20576%20256C576%20251.023%20574.438%20243.402%20572.531%20238.973ZM543.234%20260.152C492.322%20376.021%20394.521%20448%20288%20448C181.484%20448%2083.686%20376.02%2032.975%20260.65C32.58%20259.57%2032.051%20256.939%2031.996%20256.209C32.051%20255.063%2032.582%20252.426%2032.766%20251.846C83.678%20135.979%20181.479%2064%20288%2064C394.516%2064%20492.316%20135.979%20543.025%20251.348C543.42%20252.428%20543.949%20255.061%20544.004%20255.791C543.949%20256.936%20543.418%20259.574%20543.234%20260.152Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M288%20128C217.334%20128%20160%20185.348%20160%20256S217.334%20384%20288%20384H288.057C358.695%20384%20416%20326.68%20416%20256.055V256C416%20185.348%20358.666%20128%20288%20128ZM288%20352C235.066%20352%20192%20308.936%20192%20256S235.066%20160%20288%20160C340.936%20160%20384%20203.064%20384%20256.055C384%20308.959%20340.959%20352%20288%20352ZM572.531%20238.973C518.281%20115.525%20410.938%2032%20288%2032S57.688%20115.58%203.469%20238.973C1.562%20243.402%200%20251.041%200%20256C0%20260.977%201.562%20268.596%203.469%20273.025C57.719%20396.473%20165.062%20480%20288%20480S518.312%20396.418%20572.531%20273.025C574.438%20268.596%20576%20260.957%20576%20256C576%20251.023%20574.438%20243.402%20572.531%20238.973ZM543.234%20260.152C492.322%20376.021%20394.521%20448%20288%20448C181.484%20448%2083.686%20376.02%2032.975%20260.65C32.58%20259.57%2032.051%20256.939%2031.996%20256.209C32.051%20255.063%2032.582%20252.426%2032.766%20251.846C83.678%20135.979%20181.479%2064%20288%2064C394.516%2064%20492.316%20135.979%20543.025%20251.348C543.42%20252.428%20543.949%20255.061%20544.004%20255.791C543.949%20256.936%20543.418%20259.574%20543.234%20260.152Z'/%3E%3C/svg%3E"); }
.ico-olho-fechado { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20512'%3E%3Cpath%20d='M272.859%20137.234L303.773%20161.641C309.074%20160.73%20314.443%20160%20320%20160C370.775%20160%20412.045%20199.742%20415.363%20249.74L446.183%20274.072C447.029%20268.135%20448%20262.227%20448%20256.055V256C448%20185.348%20390.666%20128%20320%20128C303.316%20128%20287.478%20131.422%20272.859%20137.234ZM320%20448C213.484%20448%20115.685%20376.02%2064.975%20260.65C64.58%20259.57%2064.051%20256.939%2063.996%20256.209C64.051%20255.063%2064.582%20252.426%2064.766%20251.846C77.607%20222.621%2093.461%20196.232%20111.654%20173.043L86.601%20153.266C66.539%20178.789%2049.266%20207.572%2035.469%20238.973C33.562%20243.402%2032%20251.041%2032%20256C32%20260.977%2033.562%20268.596%2035.469%20273.025C89.719%20396.473%20197.062%20480%20320%20480C368.131%20480%20413.805%20467.039%20454.91%20444.043L427.17%20422.141C393.572%20438.67%20357.4%20448%20320%20448ZM320%2064C426.516%2064%20524.316%20135.979%20575.025%20251.348C575.42%20252.428%20575.949%20255.061%20576.004%20255.791C575.949%20256.936%20575.418%20259.574%20575.234%20260.152C562.394%20289.373%20546.547%20315.76%20528.355%20338.947L553.404%20358.725C573.465%20333.203%20590.734%20304.422%20604.531%20273.025C606.437%20268.596%20608%20260.957%20608%20256C608%20251.023%20606.437%20243.402%20604.531%20238.973C550.281%20115.525%20442.937%2032%20320%2032C271.875%2032%20226.203%2044.959%20185.101%2067.949L212.846%2089.854C246.439%2073.328%20282.605%2064%20320%2064ZM320.057%20384C336.732%20384%20352.558%20380.58%20367.17%20374.771L336.248%20350.357C330.941%20351.27%20325.564%20352%20320%20352C269.201%20352%20227.914%20312.221%20224.631%20262.236L193.824%20237.916C192.973%20243.875%20192%20249.807%20192%20256C192%20326.652%20249.334%20384%20320%20384H320.057ZM633.908%20483.438L25.904%203.42C18.998%20-2.033%208.935%20-0.83%203.435%206.061C-2.033%2012.998%20-0.846%2023.062%206.092%2028.547L614.096%20508.563C617.033%20510.875%20620.533%20512%20624.002%20512C628.721%20512%20633.408%20509.906%20636.564%20505.922C642.033%20498.984%20640.846%20488.922%20633.908%20483.438Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20512'%3E%3Cpath%20d='M272.859%20137.234L303.773%20161.641C309.074%20160.73%20314.443%20160%20320%20160C370.775%20160%20412.045%20199.742%20415.363%20249.74L446.183%20274.072C447.029%20268.135%20448%20262.227%20448%20256.055V256C448%20185.348%20390.666%20128%20320%20128C303.316%20128%20287.478%20131.422%20272.859%20137.234ZM320%20448C213.484%20448%20115.685%20376.02%2064.975%20260.65C64.58%20259.57%2064.051%20256.939%2063.996%20256.209C64.051%20255.063%2064.582%20252.426%2064.766%20251.846C77.607%20222.621%2093.461%20196.232%20111.654%20173.043L86.601%20153.266C66.539%20178.789%2049.266%20207.572%2035.469%20238.973C33.562%20243.402%2032%20251.041%2032%20256C32%20260.977%2033.562%20268.596%2035.469%20273.025C89.719%20396.473%20197.062%20480%20320%20480C368.131%20480%20413.805%20467.039%20454.91%20444.043L427.17%20422.141C393.572%20438.67%20357.4%20448%20320%20448ZM320%2064C426.516%2064%20524.316%20135.979%20575.025%20251.348C575.42%20252.428%20575.949%20255.061%20576.004%20255.791C575.949%20256.936%20575.418%20259.574%20575.234%20260.152C562.394%20289.373%20546.547%20315.76%20528.355%20338.947L553.404%20358.725C573.465%20333.203%20590.734%20304.422%20604.531%20273.025C606.437%20268.596%20608%20260.957%20608%20256C608%20251.023%20606.437%20243.402%20604.531%20238.973C550.281%20115.525%20442.937%2032%20320%2032C271.875%2032%20226.203%2044.959%20185.101%2067.949L212.846%2089.854C246.439%2073.328%20282.605%2064%20320%2064ZM320.057%20384C336.732%20384%20352.558%20380.58%20367.17%20374.771L336.248%20350.357C330.941%20351.27%20325.564%20352%20320%20352C269.201%20352%20227.914%20312.221%20224.631%20262.236L193.824%20237.916C192.973%20243.875%20192%20249.807%20192%20256C192%20326.652%20249.334%20384%20320%20384H320.057ZM633.908%20483.438L25.904%203.42C18.998%20-2.033%208.935%20-0.83%203.435%206.061C-2.033%2012.998%20-0.846%2023.062%206.092%2028.547L614.096%20508.563C617.033%20510.875%20620.533%20512%20624.002%20512C628.721%20512%20633.408%20509.906%20636.564%20505.922C642.033%20498.984%20640.846%20488.922%20633.908%20483.438Z'/%3E%3C/svg%3E"); }
.ico-alerta { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256.003%20360C242.75%20360%20232.005%20370.744%20232.005%20384C232.005%20397.254%20242.75%20408%20256.003%20408C269.256%20408%20280.001%20397.254%20280.001%20384C280.001%20370.744%20269.256%20360%20256.003%20360ZM256.003%20320C264.846%20320%20272.002%20312.844%20272.002%20304V160C272.002%20151.156%20264.846%20144%20256.003%20144S240.004%20151.156%20240.004%20160V304C240.004%20312.844%20247.16%20320%20256.003%20320ZM504.343%20397.344L304.452%2059.375C294.375%2042.266%20276.314%2032.031%20256.112%2032H256.018C235.817%2032%20217.693%2042.219%20207.538%2059.359L7.647%20397.359C-2.399%20414.328%20-2.555%20434.703%207.226%20451.859C17.287%20469.484%2035.551%20480%2056.097%20480H455.987C476.501%20480%20494.734%20469.469%20504.796%20451.828C514.56%20434.672%20514.389%20414.312%20504.343%20397.344ZM476.985%20435.984C472.704%20443.5%20464.846%20448%20455.987%20448H56.097C47.191%20448%2039.317%20443.516%2035.02%20436C30.942%20428.844%2031.005%20420.703%2035.177%20413.641L235.067%2075.656C239.395%2068.359%20247.222%2064%20256.034%2064C256.034%2064%20256.05%2064%20256.065%2064C264.83%2064.016%20272.611%2068.359%20276.907%2075.641L476.813%20413.641V413.656C480.985%20420.703%20481.063%20428.844%20476.985%20435.984Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256.003%20360C242.75%20360%20232.005%20370.744%20232.005%20384C232.005%20397.254%20242.75%20408%20256.003%20408C269.256%20408%20280.001%20397.254%20280.001%20384C280.001%20370.744%20269.256%20360%20256.003%20360ZM256.003%20320C264.846%20320%20272.002%20312.844%20272.002%20304V160C272.002%20151.156%20264.846%20144%20256.003%20144S240.004%20151.156%20240.004%20160V304C240.004%20312.844%20247.16%20320%20256.003%20320ZM504.343%20397.344L304.452%2059.375C294.375%2042.266%20276.314%2032.031%20256.112%2032H256.018C235.817%2032%20217.693%2042.219%20207.538%2059.359L7.647%20397.359C-2.399%20414.328%20-2.555%20434.703%207.226%20451.859C17.287%20469.484%2035.551%20480%2056.097%20480H455.987C476.501%20480%20494.734%20469.469%20504.796%20451.828C514.56%20434.672%20514.389%20414.312%20504.343%20397.344ZM476.985%20435.984C472.704%20443.5%20464.846%20448%20455.987%20448H56.097C47.191%20448%2039.317%20443.516%2035.02%20436C30.942%20428.844%2031.005%20420.703%2035.177%20413.641L235.067%2075.656C239.395%2068.359%20247.222%2064%20256.034%2064C256.034%2064%20256.05%2064%20256.065%2064C264.83%2064.016%20272.611%2068.359%20276.907%2075.641L476.813%20413.641V413.656C480.985%20420.703%20481.063%20428.844%20476.985%20435.984Z'/%3E%3C/svg%3E"); }
.ico-relogio { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2016C123.42%2016%2016%20123.418%2016%20256C16%20388.58%20123.42%20496%20256%20496S496%20388.58%20496%20256C496%20123.418%20388.58%2016%20256%2016ZM256%20464C141.309%20464%2048%20370.691%2048%20256S141.309%2048%20256%2048S464%20141.309%20464%20256S370.691%20464%20256%20464ZM272.014%20249.375V128C272.014%20119.156%20264.857%20112%20256.014%20112S240.014%20119.156%20240.014%20128V256C240.014%20260.25%20241.701%20264.312%20244.701%20267.312L324.701%20347.312C327.826%20350.438%20331.92%20352%20336.014%20352S344.201%20350.438%20347.326%20347.312C353.576%20341.062%20353.576%20330.937%20347.326%20324.688L272.014%20249.375Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2016C123.42%2016%2016%20123.418%2016%20256C16%20388.58%20123.42%20496%20256%20496S496%20388.58%20496%20256C496%20123.418%20388.58%2016%20256%2016ZM256%20464C141.309%20464%2048%20370.691%2048%20256S141.309%2048%20256%2048S464%20141.309%20464%20256S370.691%20464%20256%20464ZM272.014%20249.375V128C272.014%20119.156%20264.857%20112%20256.014%20112S240.014%20119.156%20240.014%20128V256C240.014%20260.25%20241.701%20264.312%20244.701%20267.312L324.701%20347.312C327.826%20350.438%20331.92%20352%20336.014%20352S344.201%20350.438%20347.326%20347.312C353.576%20341.062%20353.576%20330.937%20347.326%20324.688L272.014%20249.375Z'/%3E%3C/svg%3E"); }
.ico-calendario { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M384%2064H352V16C352%207.163%20344.837%200%20336%200H336C327.163%200%20320%207.163%20320%2016V64H128V16C128%207.163%20120.837%200%20112%200H112C103.163%200%2096%207.163%2096%2016V64H64C28.654%2064%200%2092.654%200%20128V448C0%20483.346%2028.654%20512%2064%20512H384C419.346%20512%20448%20483.346%20448%20448V128C448%2092.654%20419.346%2064%20384%2064ZM64%2096H384C401.673%2096%20416%20110.327%20416%20128V160H32V128C32%20110.327%2046.327%2096%2064%2096ZM384%20480H64C46.327%20480%2032%20465.673%2032%20448V192H416V448C416%20465.673%20401.673%20480%20384%20480Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M384%2064H352V16C352%207.163%20344.837%200%20336%200H336C327.163%200%20320%207.163%20320%2016V64H128V16C128%207.163%20120.837%200%20112%200H112C103.163%200%2096%207.163%2096%2016V64H64C28.654%2064%200%2092.654%200%20128V448C0%20483.346%2028.654%20512%2064%20512H384C419.346%20512%20448%20483.346%20448%20448V128C448%2092.654%20419.346%2064%20384%2064ZM64%2096H384C401.673%2096%20416%20110.327%20416%20128V160H32V128C32%20110.327%2046.327%2096%2064%2096ZM384%20480H64C46.327%20480%2032%20465.673%2032%20448V192H416V448C416%20465.673%20401.673%20480%20384%20480Z'/%3E%3C/svg%3E"); }
.ico-pessoa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M224%20256C294.695%20256%20352%20198.691%20352%20128S294.695%200%20224%200C153.312%200%2096%2057.309%2096%20128S153.312%20256%20224%20256ZM224%2032C276.936%2032%20320%2075.064%20320%20128C320%20180.934%20276.936%20224%20224%20224S128%20180.934%20128%20128C128%2075.064%20171.064%2032%20224%2032ZM274.664%20304H173.336C77.609%20304%200%20381.602%200%20477.332C0%20496.477%2015.523%20512%2034.664%20512H413.336C432.477%20512%20448%20496.477%20448%20477.332C448%20381.602%20370.398%20304%20274.664%20304ZM413.336%20480H34.664C33.195%20480%2032%20478.803%2032%20477.332C32%20399.4%2095.402%20336%20173.336%20336H274.664C352.598%20336%20416%20399.4%20416%20477.332C416%20478.803%20414.805%20480%20413.336%20480Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M224%20256C294.695%20256%20352%20198.691%20352%20128S294.695%200%20224%200C153.312%200%2096%2057.309%2096%20128S153.312%20256%20224%20256ZM224%2032C276.936%2032%20320%2075.064%20320%20128C320%20180.934%20276.936%20224%20224%20224S128%20180.934%20128%20128C128%2075.064%20171.064%2032%20224%2032ZM274.664%20304H173.336C77.609%20304%200%20381.602%200%20477.332C0%20496.477%2015.523%20512%2034.664%20512H413.336C432.477%20512%20448%20496.477%20448%20477.332C448%20381.602%20370.398%20304%20274.664%20304ZM413.336%20480H34.664C33.195%20480%2032%20478.803%2032%20477.332C32%20399.4%2095.402%20336%20173.336%20336H274.664C352.598%20336%20416%20399.4%20416%20477.332C416%20478.803%20414.805%20480%20413.336%20480Z'/%3E%3C/svg%3E"); }
.ico-prancheta { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%3E%3Cpath%20d='M112%20128H272C280.844%20128%20288%20120.844%20288%20112S280.844%2096%20272%2096H247.123C252.621%2086.555%20256%2075.717%20256%2064C256%2028.654%20227.346%200%20192%200S128%2028.654%20128%2064C128%2075.717%20131.379%2086.555%20136.877%2096H112C103.156%2096%2096%20103.156%2096%20112S103.156%20128%20112%20128ZM192%2032C209.645%2032%20224%2046.355%20224%2064S209.645%2096%20192%2096S160%2081.645%20160%2064S174.355%2032%20192%2032ZM320%2064C311.156%2064%20304%2071.156%20304%2080S311.156%2096%20320%2096C337.641%2096%20352%20110.344%20352%20128V448C352%20465.656%20337.641%20480%20320%20480H64C46.359%20480%2032%20465.656%2032%20448V128C32%20110.344%2046.359%2096%2064%2096C72.844%2096%2080%2088.844%2080%2080S72.844%2064%2064%2064C28.703%2064%200%2092.719%200%20128V448C0%20483.281%2028.703%20512%2064%20512H320C355.297%20512%20384%20483.281%20384%20448V128C384%2092.719%20355.297%2064%20320%2064ZM72%20256C72%20269.254%2082.746%20280%2096%20280C109.256%20280%20120%20269.254%20120%20256C120%20242.744%20109.256%20232%2096%20232C82.746%20232%2072%20242.744%2072%20256ZM96%20328C82.746%20328%2072%20338.744%2072%20352C72%20365.254%2082.746%20376%2096%20376C109.256%20376%20120%20365.254%20120%20352C120%20338.744%20109.256%20328%2096%20328ZM304%20240H176C167.156%20240%20160%20247.156%20160%20256S167.156%20272%20176%20272H304C312.844%20272%20320%20264.844%20320%20256S312.844%20240%20304%20240ZM304%20336H176C167.156%20336%20160%20343.156%20160%20352S167.156%20368%20176%20368H304C312.844%20368%20320%20360.844%20320%20352S312.844%20336%20304%20336Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%3E%3Cpath%20d='M112%20128H272C280.844%20128%20288%20120.844%20288%20112S280.844%2096%20272%2096H247.123C252.621%2086.555%20256%2075.717%20256%2064C256%2028.654%20227.346%200%20192%200S128%2028.654%20128%2064C128%2075.717%20131.379%2086.555%20136.877%2096H112C103.156%2096%2096%20103.156%2096%20112S103.156%20128%20112%20128ZM192%2032C209.645%2032%20224%2046.355%20224%2064S209.645%2096%20192%2096S160%2081.645%20160%2064S174.355%2032%20192%2032ZM320%2064C311.156%2064%20304%2071.156%20304%2080S311.156%2096%20320%2096C337.641%2096%20352%20110.344%20352%20128V448C352%20465.656%20337.641%20480%20320%20480H64C46.359%20480%2032%20465.656%2032%20448V128C32%20110.344%2046.359%2096%2064%2096C72.844%2096%2080%2088.844%2080%2080S72.844%2064%2064%2064C28.703%2064%200%2092.719%200%20128V448C0%20483.281%2028.703%20512%2064%20512H320C355.297%20512%20384%20483.281%20384%20448V128C384%2092.719%20355.297%2064%20320%2064ZM72%20256C72%20269.254%2082.746%20280%2096%20280C109.256%20280%20120%20269.254%20120%20256C120%20242.744%20109.256%20232%2096%20232C82.746%20232%2072%20242.744%2072%20256ZM96%20328C82.746%20328%2072%20338.744%2072%20352C72%20365.254%2082.746%20376%2096%20376C109.256%20376%20120%20365.254%20120%20352C120%20338.744%20109.256%20328%2096%20328ZM304%20240H176C167.156%20240%20160%20247.156%20160%20256S167.156%20272%20176%20272H304C312.844%20272%20320%20264.844%20320%20256S312.844%20240%20304%20240ZM304%20336H176C167.156%20336%20160%20343.156%20160%20352S167.156%20368%20176%20368H304C312.844%20368%20320%20360.844%20320%20352S312.844%20336%20304%20336Z'/%3E%3C/svg%3E"); }
.ico-livro { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M541.047%2056.781C495.094%2040.125%20450.781%2032.656%20411.047%2032C352.094%2032.938%20309.094%2049.5%20288%2059.766C266.891%2049.5%20223.891%2032.938%20164.797%2032C124.766%2031.953%2080.266%2040.359%2034.969%2056.781C14.047%2064.344%200%2084.406%200%20106.703V409.578C0%20424.234%206.875%20437.641%2018.891%20446.375C30.703%20454.906%2045.531%20457.359%2059.625%20453.156C178.516%20416.813%20268.875%20472.203%20273.891%20475.344C277.84%20477.613%20281.184%20480%20288%20480C294.52%20480%20298.107%20477.627%20302.062%20475.422C312.844%20468.734%20400.359%20417.766%20516.406%20453.156C530.516%20457.406%20545.266%20454.906%20557.156%20446.344C569.125%20437.641%20576%20424.234%20576%20409.578V106.703C576%2084.422%20561.953%2064.359%20541.047%2056.781ZM272%20438.121C247.053%20426.088%20200.986%20408.75%20141.531%20408.75C113.703%20408.75%2083.031%20412.562%2050.344%20422.516C45.938%20423.859%2041.344%20423.109%2037.656%20420.469C34.016%20417.812%2032%20413.953%2032%20409.578V106.703C32%2097.844%2037.562%2089.875%2045.859%2086.875C87.656%2071.703%20127.938%2063.953%20164.453%2064C216.256%2064.811%20254.15%2079.262%20272%2087.662V438.121ZM544%20409.578C544%20413.953%20541.984%20417.812%20538.406%20420.422C534.641%20423.125%20530.109%20423.844%20525.719%20422.547C424.08%20391.557%20341.311%20420.439%20304%20438.289V87.662C321.846%2079.262%20359.719%2064.811%20411.391%2064C446.703%2063.938%20487.734%2071.484%20530.141%2086.875H530.156C538.438%2089.875%20544%2097.844%20544%20106.703V409.578Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M541.047%2056.781C495.094%2040.125%20450.781%2032.656%20411.047%2032C352.094%2032.938%20309.094%2049.5%20288%2059.766C266.891%2049.5%20223.891%2032.938%20164.797%2032C124.766%2031.953%2080.266%2040.359%2034.969%2056.781C14.047%2064.344%200%2084.406%200%20106.703V409.578C0%20424.234%206.875%20437.641%2018.891%20446.375C30.703%20454.906%2045.531%20457.359%2059.625%20453.156C178.516%20416.813%20268.875%20472.203%20273.891%20475.344C277.84%20477.613%20281.184%20480%20288%20480C294.52%20480%20298.107%20477.627%20302.062%20475.422C312.844%20468.734%20400.359%20417.766%20516.406%20453.156C530.516%20457.406%20545.266%20454.906%20557.156%20446.344C569.125%20437.641%20576%20424.234%20576%20409.578V106.703C576%2084.422%20561.953%2064.359%20541.047%2056.781ZM272%20438.121C247.053%20426.088%20200.986%20408.75%20141.531%20408.75C113.703%20408.75%2083.031%20412.562%2050.344%20422.516C45.938%20423.859%2041.344%20423.109%2037.656%20420.469C34.016%20417.812%2032%20413.953%2032%20409.578V106.703C32%2097.844%2037.562%2089.875%2045.859%2086.875C87.656%2071.703%20127.938%2063.953%20164.453%2064C216.256%2064.811%20254.15%2079.262%20272%2087.662V438.121ZM544%20409.578C544%20413.953%20541.984%20417.812%20538.406%20420.422C534.641%20423.125%20530.109%20423.844%20525.719%20422.547C424.08%20391.557%20341.311%20420.439%20304%20438.289V87.662C321.846%2079.262%20359.719%2064.811%20411.391%2064C446.703%2063.938%20487.734%2071.484%20530.141%2086.875H530.156C538.438%2089.875%20544%2097.844%20544%20106.703V409.578Z'/%3E%3C/svg%3E"); }
.ico-moeda { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2016C123.451%2016%2016%20123.451%2016%20256S123.451%20496%20256%20496S496%20388.549%20496%20256S388.549%2016%20256%2016ZM256%20464C141.309%20464%2048%20370.691%2048%20256S141.309%2048%20256%2048S464%20141.309%20464%20256S370.691%20464%20256%20464ZM260.359%20240.578L252.016%20238.172C214.688%20227.203%20205.344%20219.078%20208.578%20200.391C212.641%20177.016%20244.156%20173.391%20269.844%20177.437C277.391%20178.609%20286.844%20181.203%20298.766%20185.328C307.109%20188.187%20316.219%20183.766%20319.125%20175.437C322.016%20167.094%20317.578%20157.969%20309.234%20155.078C295.313%20150.266%20284.375%20147.328%20274.797%20145.812C273.834%20145.66%20272.955%20145.682%20272%20145.549V112C272%20103.156%20264.844%2096%20256%2096S240%20103.156%20240%20112V144.705C205.953%20148.223%20181.98%20166.41%20177.047%20194.938C168.078%20246.844%20216.812%20261.172%20243%20268.875L251.562%20271.344C294.297%20283.562%20307.031%20290.719%20303.422%20311.609C299.359%20335.016%20267.781%20338.578%20242.062%20334.547C230.297%20332.781%20216.281%20327.734%20203.906%20323.266L197.344%20320.922C189%20317.938%20179.875%20322.344%20176.922%20330.656C173.969%20338.984%20178.328%20348.125%20186.656%20351.078L193.062%20353.375C206.812%20358.328%20222.406%20363.953%20237.203%20366.187C238.174%20366.34%20239.039%20366.281%20240%20366.414V400C240%20408.844%20247.156%20416%20256%20416S272%20408.844%20272%20400V367.258C306.027%20363.727%20330.02%20345.592%20334.953%20317.062C344.031%20264.5%20295.672%20250.672%20260.359%20240.578Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2016C123.451%2016%2016%20123.451%2016%20256S123.451%20496%20256%20496S496%20388.549%20496%20256S388.549%2016%20256%2016ZM256%20464C141.309%20464%2048%20370.691%2048%20256S141.309%2048%20256%2048S464%20141.309%20464%20256S370.691%20464%20256%20464ZM260.359%20240.578L252.016%20238.172C214.688%20227.203%20205.344%20219.078%20208.578%20200.391C212.641%20177.016%20244.156%20173.391%20269.844%20177.437C277.391%20178.609%20286.844%20181.203%20298.766%20185.328C307.109%20188.187%20316.219%20183.766%20319.125%20175.437C322.016%20167.094%20317.578%20157.969%20309.234%20155.078C295.313%20150.266%20284.375%20147.328%20274.797%20145.812C273.834%20145.66%20272.955%20145.682%20272%20145.549V112C272%20103.156%20264.844%2096%20256%2096S240%20103.156%20240%20112V144.705C205.953%20148.223%20181.98%20166.41%20177.047%20194.938C168.078%20246.844%20216.812%20261.172%20243%20268.875L251.562%20271.344C294.297%20283.562%20307.031%20290.719%20303.422%20311.609C299.359%20335.016%20267.781%20338.578%20242.062%20334.547C230.297%20332.781%20216.281%20327.734%20203.906%20323.266L197.344%20320.922C189%20317.938%20179.875%20322.344%20176.922%20330.656C173.969%20338.984%20178.328%20348.125%20186.656%20351.078L193.062%20353.375C206.812%20358.328%20222.406%20363.953%20237.203%20366.187C238.174%20366.34%20239.039%20366.281%20240%20366.414V400C240%20408.844%20247.156%20416%20256%20416S272%20408.844%20272%20400V367.258C306.027%20363.727%20330.02%20345.592%20334.953%20317.062C344.031%20264.5%20295.672%20250.672%20260.359%20240.578Z'/%3E%3C/svg%3E"); }
.ico-lupa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M507.312%20484.688L365.85%20343.227C397.041%20306.848%20416%20259.676%20416%20208C416%2093.125%20322.875%200%20208%200S0%2093.125%200%20208S93.125%20416%20208%20416C259.676%20416%20306.848%20397.039%20343.225%20365.852L484.687%20507.312C487.812%20510.438%20491.906%20512%20496%20512S504.188%20510.438%20507.312%20507.312C513.562%20501.062%20513.562%20490.938%20507.312%20484.688ZM208%20384C110.953%20384%2032%20305.047%2032%20208S110.953%2032%20208%2032S384%20110.953%20384%20208S305.047%20384%20208%20384Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M507.312%20484.688L365.85%20343.227C397.041%20306.848%20416%20259.676%20416%20208C416%2093.125%20322.875%200%20208%200S0%2093.125%200%20208S93.125%20416%20208%20416C259.676%20416%20306.848%20397.039%20343.225%20365.852L484.687%20507.312C487.812%20510.438%20491.906%20512%20496%20512S504.188%20510.438%20507.312%20507.312C513.562%20501.062%20513.562%20490.938%20507.312%20484.688ZM208%20384C110.953%20384%2032%20305.047%2032%20208S110.953%2032%20208%2032S384%20110.953%20384%20208S305.047%20384%20208%20384Z'/%3E%3C/svg%3E"); }
/* Ícones dentro de botões e itens precisam de respiro do texto */
.btn-primario, .btn-secundario, .btn-verde, .btn-dourado, .btn-submit,
.btn-copiar-link, .btn-link, .card-jogo-acoes a, .card-jogo-acoes button {
gap: 0.5em;
}
/* Fora de flex, o ícone ganha margem manual */
p .ico, td .ico, li .ico, h1 .ico, h2 .ico, h3 .ico, .card-jogo-meta .ico, .alerta .ico {
margin-right: 0.35em;
}
/* Quem já mandou o vinho aparece em verde; quem falta, apagado */
.td-vinho-status { text-align: right; }
.td-vinho-status .ico-check { color: var(--verde); }
.td-vinho-status .ico-ampulheta { color: var(--smoke); }
/* O ícone ao lado do nome no cumprimento é decorativo: fica no tom do título */
.painel-boas-vindas .ico { opacity: 0.75; }
.td-vinho-status .ico { width: 1.2em; height: 1.2em; }
/* ============================================================
ESCALA COMPACTA — medidas herdadas do app Vamos Degustar
Rotulo 10px / texto 13px / titulo 20px, respiro lateral fixo
de 16px e sombras quase invisiveis. Este bloco vem por ultimo
de proposito: e ele que define a escala final do app.
============================================================ */
body { font-size: 14px; }
h1 { font-size: 20px; font-weight: 400; letter-spacing: -0.2px; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 400; margin: 0 0 6px; }
h3 { font-size: 14px; font-weight: 500; margin: 0 0 6px; }
p, li, td, th { font-size: 13px; line-height: 1.55; }
small { font-size: 11px; }
/* Respiro lateral unico em todo o app */
.main-content { padding: 0; }
.painel-container { padding: 16px 16px 32px; }
.perfil-container { padding: 16px; }
/* Rotulos e titulos de secao: pequenos, cinza, espacados */
.rotulo, .rotulo-destaque,
.perfil-secao-titulo, .secao-titulo-escuro, .card-titulo, .section-title {
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--smoke) !important;
margin-bottom: 8px;
padding-bottom: 8px;
}
.rotulo, .rotulo-destaque { padding-bottom: 0; }
/* Cartoes: sombra minima, borda so quando precisa separar */
.secao-jogos, .perfil-card, .card-formulario, .form-card {
padding: 14px;
border-radius: var(--raio-grande);
box-shadow: var(--sombra);
border: 1px solid var(--borda);
margin-top: 0;
margin-bottom: 12px;
}
.card-jogo {
padding: 12px 14px;
border-radius: var(--raio);
margin-bottom: 10px;
}
.card-jogo-titulo { font-size: 14px; font-weight: 500; }
.card-jogo-meta { font-size: 12px; line-height: 1.7; }
.painel-boas-vindas { padding: 4px 0 12px; margin-bottom: 14px; }
.painel-boas-vindas h1 { font-size: 20px; }
.painel-boas-vindas p { font-size: 12px; color: var(--ivory-dim); }
/* Campos */
.entrada, .entrada-clara, .form-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], select, textarea {
padding: 11px 13px;
font-size: 13px;
border-radius: var(--raio);
}
.campo { margin-bottom: 14px; }
/* Botoes */
.btn-primario, .btn-secundario, .btn-verde, .btn-dourado, .btn-submit {
padding: 13px 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2px;
border-radius: var(--raio-grande);
}
.btn-pequeno { padding: 8px 12px; font-size: 11px; border-radius: var(--raio); }
.btn-copiar-link { font-size: 12px; padding: 8px 12px; }
.acoes-principais { gap: 8px; margin: 14px 0; }
/* Barra de topo e menu tambem encolhem */
.barra-topo { height: 50px; padding: 0 12px; }
.topo-logo img { height: 32px; }
.menu-item { font-size: 13px; padding: 10px 18px; }
.menu-grupo { font-size: 10px; letter-spacing: 0.7px; padding: 16px 18px 5px; }
.menu-perfil { padding: 4px 18px 16px; gap: 8px; }
.menu-avatar { width: 58px; height: 58px; }
.avatar-iniciais{ font-size: 1.1rem; }
.menu-perfil-nome { font-size: 13px; }
.menu-item em { font-size: 9px; padding: 2px 7px; }
/* Tabelas mais leves */
.tabela-participantes td { padding: 8px 2px; font-size: 12px; }
.tabela-padrao th, .tabela-padrao td { padding: 8px 10px; font-size: 12px; }
/* Badges */
.badge-status { font-size: 10px; padding: 3px 9px; letter-spacing: 0.5px; }
/* O topo dourado dos cards de formulario ficava pesado */
.card-formulario, .form-card { border-top: 1px solid var(--borda); }
/* Icones adicionais do menu lateral */
.ico-casa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M576.001%20256.01C576.001%20251.575%20574.169%20247.161%20570.577%20244L511.947%20192.266C511.949%20192.172%20511.999%20192.094%20511.999%20192V48C511.999%2039.156%20504.843%2032%20495.999%2032H400C391.156%2032%20384%2039.156%20384%2048V79.373L298.579%204C295.563%201.344%20291.782%200.016%20288.001%200.016S280.438%201.344%20277.422%204L5.424%20244C1.832%20247.161%200%20251.575%200%20256.01C0%20264.934%207.243%20271.993%2016.05%20271.993C19.808%20271.993%2023.57%20270.68%2026.58%20268L64.002%20234.982V432C64.002%20476.125%2099.892%20512%20144.001%20512H432C476.109%20512%20511.999%20476.125%20511.999%20432V234.982L549.421%20268C552.452%20270.688%20556.233%20272%20559.999%20272C568.726%20272%20576.001%20264.947%20576.001%20256.01ZM416%2064H479.999V164.078L416%20107.608V64ZM479.999%20208V432C479.999%20458.469%20458.468%20480%20432%20480H144.001C117.533%20480%2096.002%20458.469%2096.002%20432V208C96.002%20207.623%2095.812%20207.309%2095.787%20206.938L288.001%2037.344L480.214%20206.938C480.189%20207.309%20479.999%20207.623%20479.999%20208ZM208.421%20218.625V325.375C208.421%20340%20220.421%20352%20235.046%20352H341.67C356.42%20352%20368.42%20340%20368.42%20325.375V218.625C368.42%20204%20356.42%20192%20341.67%20192H235.046C220.421%20192%20208.421%20204%20208.421%20218.625ZM240.421%20224H336.42V320H240.421V224Z%20'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M576.001%20256.01C576.001%20251.575%20574.169%20247.161%20570.577%20244L511.947%20192.266C511.949%20192.172%20511.999%20192.094%20511.999%20192V48C511.999%2039.156%20504.843%2032%20495.999%2032H400C391.156%2032%20384%2039.156%20384%2048V79.373L298.579%204C295.563%201.344%20291.782%200.016%20288.001%200.016S280.438%201.344%20277.422%204L5.424%20244C1.832%20247.161%200%20251.575%200%20256.01C0%20264.934%207.243%20271.993%2016.05%20271.993C19.808%20271.993%2023.57%20270.68%2026.58%20268L64.002%20234.982V432C64.002%20476.125%2099.892%20512%20144.001%20512H432C476.109%20512%20511.999%20476.125%20511.999%20432V234.982L549.421%20268C552.452%20270.688%20556.233%20272%20559.999%20272C568.726%20272%20576.001%20264.947%20576.001%20256.01ZM416%2064H479.999V164.078L416%20107.608V64ZM479.999%20208V432C479.999%20458.469%20458.468%20480%20432%20480H144.001C117.533%20480%2096.002%20458.469%2096.002%20432V208C96.002%20207.623%2095.812%20207.309%2095.787%20206.938L288.001%2037.344L480.214%20206.938C480.189%20207.309%20479.999%20207.623%20479.999%20208ZM208.421%20218.625V325.375C208.421%20340%20220.421%20352%20235.046%20352H341.67C356.42%20352%20368.42%20340%20368.42%20325.375V218.625C368.42%20204%20356.42%20192%20341.67%20192H235.046C220.421%20192%20208.421%20204%20208.421%20218.625ZM240.421%20224H336.42V320H240.421V224Z%20'%3E%3C/path%3E%3C/svg%3E"); }
.ico-sacola { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M416%20128H319.998V96C319.998%2043.062%20276.936%200%20224%200C171.062%200%20128%2043.062%20128%2096V128H32C14.326%20128%200%20142.326%200%20160V416C0%20469.02%2042.98%20512%2096%20512H352C405.02%20512%20448%20469.02%20448%20416V160C448%20142.326%20433.674%20128%20416%20128ZM160%2096C160%2060.703%20188.703%2032%20224%2032C259.295%2032%20287.998%2060.703%20287.998%2096V128H160V96ZM416%20416C416%20451.289%20387.289%20480%20352%20480H96C60.711%20480%2032%20451.289%2032%20416V160H128V240C128%20248.844%20135.156%20256%20144%20256S160%20248.844%20160%20240V160H287.998V240C287.998%20248.844%20295.154%20256%20303.998%20256S319.998%20248.844%20319.998%20240V160H416V416Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M416%20128H319.998V96C319.998%2043.062%20276.936%200%20224%200C171.062%200%20128%2043.062%20128%2096V128H32C14.326%20128%200%20142.326%200%20160V416C0%20469.02%2042.98%20512%2096%20512H352C405.02%20512%20448%20469.02%20448%20416V160C448%20142.326%20433.674%20128%20416%20128ZM160%2096C160%2060.703%20188.703%2032%20224%2032C259.295%2032%20287.998%2060.703%20287.998%2096V128H160V96ZM416%20416C416%20451.289%20387.289%20480%20352%20480H96C60.711%20480%2032%20451.289%2032%20416V160H128V240C128%20248.844%20135.156%20256%20144%20256S160%20248.844%20160%20240V160H287.998V240C287.998%20248.844%20295.154%20256%20303.998%20256S319.998%20248.844%20319.998%20240V160H416V416Z'/%3E%3C/svg%3E"); }
.ico-interrogacao { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M285.625%20128H226.375C189.781%20128%20160%20157.766%20160%20194.359V204C160%20212.844%20167.156%20220%20176%20220S192%20212.844%20192%20204V194.359C192%20175.406%20207.406%20160%20226.375%20160H285.625C304.594%20160%20320%20175.406%20320%20194.359C320%20206.844%20313.219%20218.359%20302.938%20224.078L242.5%20254.297C231.094%20260.656%20224%20272.703%20224%20285.766V304C224%20312.844%20231.156%20320%20240%20320S256%20312.844%20256%20304V285.766C256%20284.312%20256.781%20282.969%20257.438%20282.594L317.844%20252.375C338.906%20240.703%20352%20218.469%20352%20194.359C352%20157.766%20322.219%20128%20285.625%20128ZM240%20344C226.746%20344%20216%20354.746%20216%20368S226.746%20392%20240%20392S264%20381.254%20264%20368S253.254%20344%20240%20344ZM256%2016C123.451%2016%2016%20123.451%2016%20256S123.451%20496%20256%20496S496%20388.549%20496%20256S388.549%2016%20256%2016ZM256%20464C141.309%20464%2048%20370.691%2048%20256S141.309%2048%20256%2048S464%20141.309%20464%20256S370.691%20464%20256%20464Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M285.625%20128H226.375C189.781%20128%20160%20157.766%20160%20194.359V204C160%20212.844%20167.156%20220%20176%20220S192%20212.844%20192%20204V194.359C192%20175.406%20207.406%20160%20226.375%20160H285.625C304.594%20160%20320%20175.406%20320%20194.359C320%20206.844%20313.219%20218.359%20302.938%20224.078L242.5%20254.297C231.094%20260.656%20224%20272.703%20224%20285.766V304C224%20312.844%20231.156%20320%20240%20320S256%20312.844%20256%20304V285.766C256%20284.312%20256.781%20282.969%20257.438%20282.594L317.844%20252.375C338.906%20240.703%20352%20218.469%20352%20194.359C352%20157.766%20322.219%20128%20285.625%20128ZM240%20344C226.746%20344%20216%20354.746%20216%20368S226.746%20392%20240%20392S264%20381.254%20264%20368S253.254%20344%20240%20344ZM256%2016C123.451%2016%2016%20123.451%2016%20256S123.451%20496%20256%20496S496%20388.549%20496%20256S388.549%2016%20256%2016ZM256%20464C141.309%20464%2048%20370.691%2048%20256S141.309%2048%20256%2048S464%20141.309%20464%20256S370.691%20464%20256%20464Z'/%3E%3C/svg%3E"); }
.ico-sair { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M507.312%20244.688L363.312%20100.688C357.062%2094.438%20346.937%2094.438%20340.688%20100.688S334.438%20117.063%20340.688%20123.312L457.375%20240H176C167.156%20240%20160%20247.156%20160%20256S167.156%20272%20176%20272H457.375L340.688%20388.688C334.438%20394.938%20334.438%20405.063%20340.688%20411.312S357.063%20417.562%20363.312%20411.312L507.312%20267.312C510.438%20264.188%20512%20260.094%20512%20256S510.438%20247.812%20507.312%20244.688ZM176%20448H80C53.531%20448%2032%20426.469%2032%20400V112C32%2085.531%2053.531%2064%2080%2064H176C184.844%2064%20192%2056.844%20192%2048S184.844%2032%20176%2032H80C35.875%2032%200%2067.875%200%20112V400C0%20444.125%2035.875%20480%2080%20480H176C184.844%20480%20192%20472.844%20192%20464S184.844%20448%20176%20448Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M507.312%20244.688L363.312%20100.688C357.062%2094.438%20346.937%2094.438%20340.688%20100.688S334.438%20117.063%20340.688%20123.312L457.375%20240H176C167.156%20240%20160%20247.156%20160%20256S167.156%20272%20176%20272H457.375L340.688%20388.688C334.438%20394.938%20334.438%20405.063%20340.688%20411.312S357.063%20417.562%20363.312%20411.312L507.312%20267.312C510.438%20264.188%20512%20260.094%20512%20256S510.438%20247.812%20507.312%20244.688ZM176%20448H80C53.531%20448%2032%20426.469%2032%20400V112C32%2085.531%2053.531%2064%2080%2064H176C184.844%2064%20192%2056.844%20192%2048S184.844%2032%20176%2032H80C35.875%2032%200%2067.875%200%20112V400C0%20444.125%2035.875%20480%2080%20480H176C184.844%20480%20192%20472.844%20192%20464S184.844%20448%20176%20448Z'/%3E%3C/svg%3E"); }
.ico-lua { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M428.25%20367.5C422.641%20358.188%20412.172%20353.594%20401.5%20355.531C359.109%20363.719%20315.672%20352.594%20282.312%20325.031C248.359%20297%20228.891%20255.531%20228.891%20211.25C228.891%20158.5%20257.094%20109.5%20302.484%2083.406C311.938%2078%20316.859%2067.531%20315.031%2056.75C313.219%2046%20305.141%2037.75%20294.422%2035.75C283.094%2033.656%20265.281%2032%20253.891%2032C131.547%2032%2032%20132.5%2032%20256S131.547%20480%20253.891%20480C321.078%20480%20383.906%20449.75%20426.312%20397C433.141%20388.438%20433.906%20376.875%20428.25%20367.5ZM253.891%20448C149.188%20448%2064%20361.875%2064%20256S149.188%2064%20253.891%2064C258.781%2064%20265.422%2064.406%20271.984%2065.031C225.281%2098.344%20196.891%20152.906%20196.891%20211.25C196.891%20265.094%20220.594%20315.562%20261.937%20349.719C298.187%20379.656%20344.109%20393.594%20390.469%20389.406C354.75%20426.844%20305.828%20448%20253.891%20448Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M428.25%20367.5C422.641%20358.188%20412.172%20353.594%20401.5%20355.531C359.109%20363.719%20315.672%20352.594%20282.312%20325.031C248.359%20297%20228.891%20255.531%20228.891%20211.25C228.891%20158.5%20257.094%20109.5%20302.484%2083.406C311.938%2078%20316.859%2067.531%20315.031%2056.75C313.219%2046%20305.141%2037.75%20294.422%2035.75C283.094%2033.656%20265.281%2032%20253.891%2032C131.547%2032%2032%20132.5%2032%20256S131.547%20480%20253.891%20480C321.078%20480%20383.906%20449.75%20426.312%20397C433.141%20388.438%20433.906%20376.875%20428.25%20367.5ZM253.891%20448C149.188%20448%2064%20361.875%2064%20256S149.188%2064%20253.891%2064C258.781%2064%20265.422%2064.406%20271.984%2065.031C225.281%2098.344%20196.891%20152.906%20196.891%20211.25C196.891%20265.094%20220.594%20315.562%20261.937%20349.719C298.187%20379.656%20344.109%20393.594%20390.469%20389.406C354.75%20426.844%20305.828%20448%20253.891%20448Z'/%3E%3C/svg%3E"); }
.ico-sol { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%20112C247.156%20112%20240%20104.844%20240%2096V16C240%207.156%20247.156%200%20256%200S272%207.156%20272%2016V96C272%20104.844%20264.844%20112%20256%20112ZM272%20496V416C272%20407.156%20264.844%20400%20256%20400S240%20407.156%20240%20416V496C240%20504.844%20247.156%20512%20256%20512S272%20504.844%20272%20496ZM512%20256C512%20247.156%20504.844%20240%20496%20240H416C407.156%20240%20400%20247.156%20400%20256S407.156%20272%20416%20272H496C504.844%20272%20512%20264.844%20512%20256ZM112%20256C112%20247.156%20104.844%20240%2096%20240H16C7.156%20240%200%20247.156%200%20256S7.156%20272%2016%20272H96C104.844%20272%20112%20264.844%20112%20256ZM380.453%20154.188L437.016%2097.594C443.266%2091.344%20443.266%2081.219%20437.016%2074.969S420.641%2068.719%20414.391%2074.969L357.828%20131.563C351.578%20137.813%20351.578%20147.938%20357.828%20154.188C360.953%20157.312%20365.047%20158.875%20369.141%20158.875S377.328%20157.312%20380.453%20154.188ZM97.609%20437.031L154.172%20380.438C160.422%20374.188%20160.422%20364.062%20154.172%20357.813S137.797%20351.563%20131.547%20357.813L74.984%20414.406C68.734%20420.656%2068.734%20430.781%2074.984%20437.031C78.109%20440.156%2082.203%20441.719%2086.297%20441.719S94.484%20440.156%2097.609%20437.031ZM437.016%20437.031C443.266%20430.781%20443.266%20420.656%20437.016%20414.406L380.453%20357.813C374.203%20351.563%20364.078%20351.563%20357.828%20357.813S351.578%20374.188%20357.828%20380.438L414.391%20437.031C417.516%20440.156%20421.609%20441.719%20425.703%20441.719S433.891%20440.156%20437.016%20437.031ZM154.172%20154.188C160.422%20147.938%20160.422%20137.812%20154.172%20131.563L97.609%2074.969C91.359%2068.719%2081.234%2068.719%2074.984%2074.969S68.734%2091.344%2074.984%2097.594L131.547%20154.187C134.672%20157.312%20138.766%20158.875%20142.859%20158.875S151.047%20157.312%20154.172%20154.188ZM368%20256C368%20194.25%20317.75%20144%20256%20144S144%20194.25%20144%20256S194.25%20368%20256%20368S368%20317.75%20368%20256ZM336%20256C336%20300.125%20300.109%20336%20256%20336S176%20300.125%20176%20256S211.891%20176%20256%20176S336%20211.875%20336%20256Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%20112C247.156%20112%20240%20104.844%20240%2096V16C240%207.156%20247.156%200%20256%200S272%207.156%20272%2016V96C272%20104.844%20264.844%20112%20256%20112ZM272%20496V416C272%20407.156%20264.844%20400%20256%20400S240%20407.156%20240%20416V496C240%20504.844%20247.156%20512%20256%20512S272%20504.844%20272%20496ZM512%20256C512%20247.156%20504.844%20240%20496%20240H416C407.156%20240%20400%20247.156%20400%20256S407.156%20272%20416%20272H496C504.844%20272%20512%20264.844%20512%20256ZM112%20256C112%20247.156%20104.844%20240%2096%20240H16C7.156%20240%200%20247.156%200%20256S7.156%20272%2016%20272H96C104.844%20272%20112%20264.844%20112%20256ZM380.453%20154.188L437.016%2097.594C443.266%2091.344%20443.266%2081.219%20437.016%2074.969S420.641%2068.719%20414.391%2074.969L357.828%20131.563C351.578%20137.813%20351.578%20147.938%20357.828%20154.188C360.953%20157.312%20365.047%20158.875%20369.141%20158.875S377.328%20157.312%20380.453%20154.188ZM97.609%20437.031L154.172%20380.438C160.422%20374.188%20160.422%20364.062%20154.172%20357.813S137.797%20351.563%20131.547%20357.813L74.984%20414.406C68.734%20420.656%2068.734%20430.781%2074.984%20437.031C78.109%20440.156%2082.203%20441.719%2086.297%20441.719S94.484%20440.156%2097.609%20437.031ZM437.016%20437.031C443.266%20430.781%20443.266%20420.656%20437.016%20414.406L380.453%20357.813C374.203%20351.563%20364.078%20351.563%20357.828%20357.813S351.578%20374.188%20357.828%20380.438L414.391%20437.031C417.516%20440.156%20421.609%20441.719%20425.703%20441.719S433.891%20440.156%20437.016%20437.031ZM154.172%20154.188C160.422%20147.938%20160.422%20137.812%20154.172%20131.563L97.609%2074.969C91.359%2068.719%2081.234%2068.719%2074.984%2074.969S68.734%2091.344%2074.984%2097.594L131.547%20154.187C134.672%20157.312%20138.766%20158.875%20142.859%20158.875S151.047%20157.312%20154.172%20154.188ZM368%20256C368%20194.25%20317.75%20144%20256%20144S144%20194.25%20144%20256S194.25%20368%20256%20368S368%20317.75%20368%20256ZM336%20256C336%20300.125%20300.109%20336%20256%20336S176%20300.125%20176%20256S211.891%20176%20256%20176S336%20211.875%20336%20256Z'/%3E%3C/svg%3E"); }
.ico-jogos { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M384%2032H64C28.625%2032%200%2060.625%200%2096V416C0%20451.375%2028.625%20480%2064%20480H384C419.375%20480%20448%20451.375%20448%20416V96C448%2060.625%20419.375%2032%20384%2032ZM416%20416C416%20433.625%20401.625%20448%20384%20448H64C46.375%20448%2032%20433.625%2032%20416V96C32%2078.375%2046.375%2064%2064%2064H384C401.625%2064%20416%2078.375%20416%2096V416ZM128%20136C114.75%20136%20104%20146.75%20104%20160S114.75%20184%20128%20184S152%20173.25%20152%20160S141.25%20136%20128%20136ZM224%20232C210.75%20232%20200%20242.75%20200%20256C200%20269.25%20210.75%20280%20224%20280S248%20269.25%20248%20256C248%20242.75%20237.25%20232%20224%20232ZM128%20328C114.75%20328%20104%20338.75%20104%20352S114.75%20376%20128%20376S152%20365.25%20152%20352S141.25%20328%20128%20328ZM320%20136C306.75%20136%20296%20146.75%20296%20160S306.75%20184%20320%20184S344%20173.25%20344%20160S333.25%20136%20320%20136ZM320%20328C306.75%20328%20296%20338.75%20296%20352S306.75%20376%20320%20376S344%20365.25%20344%20352S333.25%20328%20320%20328Z%20'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20fill='%23000'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M384%2032H64C28.625%2032%200%2060.625%200%2096V416C0%20451.375%2028.625%20480%2064%20480H384C419.375%20480%20448%20451.375%20448%20416V96C448%2060.625%20419.375%2032%20384%2032ZM416%20416C416%20433.625%20401.625%20448%20384%20448H64C46.375%20448%2032%20433.625%2032%20416V96C32%2078.375%2046.375%2064%2064%2064H384C401.625%2064%20416%2078.375%20416%2096V416ZM128%20136C114.75%20136%20104%20146.75%20104%20160S114.75%20184%20128%20184S152%20173.25%20152%20160S141.25%20136%20128%20136ZM224%20232C210.75%20232%20200%20242.75%20200%20256C200%20269.25%20210.75%20280%20224%20280S248%20269.25%20248%20256C248%20242.75%20237.25%20232%20224%20232ZM128%20328C114.75%20328%20104%20338.75%20104%20352S114.75%20376%20128%20376S152%20365.25%20152%20352S141.25%20328%20128%20328ZM320%20136C306.75%20136%20296%20146.75%20296%20160S306.75%20184%20320%20184S344%20173.25%20344%20160S333.25%20136%20320%20136ZM320%20328C306.75%20328%20296%20338.75%20296%20352S306.75%20376%20320%20376S344%20365.25%20344%20352S333.25%20328%20320%20328Z%20'%3E%3C/path%3E%3C/svg%3E"); }
/* ============================================================
MENU LATERAL — versao compacta com icones
============================================================ */
.menu-lateral { padding: 16px 0 10px; }
.menu-perfil {
padding: 2px 16px 12px;
gap: 7px;
margin-bottom: 2px;
}
.menu-avatar { width: 52px; height: 52px; }
.avatar-iniciais { font-size: 0.98rem; }
.menu-perfil-nome{ font-size: 12.5px; }
.menu-grupo {
padding: 12px 16px 4px;
font-size: 9.5px;
letter-spacing: 0.9px;
}
.menu-grupo::after { margin-top: 5px; }
/* Icone a esquerda, texto ao lado, etiqueta "em breve" empurrada p/ direita */
.menu-item {
justify-content: flex-start;
gap: 11px;
padding: 7px 16px;
font-size: 13px;
}
.menu-item .ico {
width: 15px;
height: 15px;
opacity: 0.75;
vertical-align: middle;
margin-right: 0;
}
.menu-item:hover .ico,
.menu-item.ativo .ico { opacity: 1; }
.menu-item.desativado .ico { opacity: 0.4; }
.menu-item em { margin-left: auto; }
.menu-tema .chave { margin-left: auto; }
.menu-rodape { padding-top: 8px; }
/* Icone do tema acompanha o tema ativo */
.so-tema-claro { display: inline-block; }
.so-tema-escuro { display: none; }
html[data-tema="escuro"] .so-tema-claro { display: none; }
html[data-tema="escuro"] .so-tema-escuro { display: inline-block; }
/* ============================================================
MENU — altura real no celular + botao de sair
------------------------------------------------------------
100vh no celular inclui a faixa da barra de endereco, entao o
rodape do menu (Ajuda / Sair) caia fora da area visivel.
100dvh acompanha a altura que esta realmente na tela.
============================================================ */
.menu-lateral {
height: 100vh; /* navegador antigo */
height: 100dvh; /* navegador atual */
max-height: 100vh;
max-height: 100dvh;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
overscroll-behavior: contain;
}
/* o rodape nao pode ser espremido quando a lista e longa */
.menu-rodape {
flex-shrink: 0;
padding-top: 8px;
padding-bottom: 2px;
}
/* ---------- Botao de sair ---------- */
.btn-sair {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 10px 16px 0;
padding: 10px 14px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--bg-campo);
color: var(--erro-cor);
font-family: var(--fonte-corpo);
font-size: 12.5px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.btn-sair .ico { width: 15px; height: 15px; }
.btn-sair:hover {
background: var(--erro-bg);
border-color: var(--erro-cor);
color: var(--erro-cor);
}
html[data-tema="escuro"] .btn-sair:hover { background: rgba(198, 40, 40, 0.14); }
/* ============================================================
MENU — rodape sempre visivel
------------------------------------------------------------
So a lista de links rola; Tema / Ajuda / Sair ficam ancorados
no pe do menu, entao nao somem em telas baixas.
============================================================ */
.menu-lateral {
overflow: hidden; /* quem rola agora e o .menu-corpo */
padding-top: 16px;
padding-bottom: 0;
}
.menu-corpo {
flex: 1 1 auto;
min-height: 0; /* sem isso o flex nao deixa encolher e o scroll nao aparece */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.menu-rodape {
flex: 0 0 auto;
margin-top: 0;
padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--linha-sutil);
background: var(--bg-card);
}
/* ============================================================
TELA DE LOGIN
------------------------------------------------------------
O .main-content ficou sem respiro lateral quando a escala
compacta passou o padding para os containers de cada tela;
a tela de login nao tinha o seu, e o card colava nas bordas.
============================================================ */
.pagina-login {
padding: 20px 16px 28px;
gap: 0;
}
.pagina-login .login-logo { height: 96px; margin-bottom: 18px; }
.pagina-login .card-formulario {
width: 100%;
margin: 0;
}
/* Chamada de cadastro, fora do card */
.login-cadastro {
width: 100%;
margin-top: 16px;
text-align: center;
}
.login-cadastro p {
margin: 0 0 8px;
font-size: 12px;
color: var(--ivory-dim);
}
.login-cadastro .btn-secundario {
background: var(--bg-card);
border: 1px solid var(--borda);
color: var(--vinho);
box-shadow: var(--sombra);
}
.login-cadastro .btn-secundario:hover {
background: var(--vinho);
border-color: var(--vinho);
color: var(--sobre-vinho);
}
/* O link de senha usava um dourado fixo que nao acompanha o tema */
.pagina-login .link-senha {
color: var(--ivory-dim);
font-size: 12px;
text-decoration: none;
}
.pagina-login .link-senha:hover { color: var(--vinho); }
/* No escuro o botao de cadastro precisa de texto claro:
vinho sobre fundo escuro nao tem contraste suficiente. */
html[data-tema="escuro"] .login-cadastro .btn-secundario {
background: var(--card-vidro);
border-color: var(--borda-ouro);
color: var(--ivory);
}
html[data-tema="escuro"] .login-cadastro .btn-secundario:hover {
background: var(--vinho);
border-color: var(--vinho);
color: var(--sobre-vinho);
}
html[data-tema="escuro"] .login-cadastro .btn-secundario .ico { color: var(--dourado); }
/* ============================================================
LOGIN — cabecalho com a arte e conteudo abaixo das bandeiras
------------------------------------------------------------
A arte tem 1080x1920 e as bandeiras terminam por volta de 890px
de altura. O hero usa essa proporcao (1080/890) e ancora a
imagem pelo topo, entao ele termina exatamente onde a mesa
acaba, em qualquer largura de tela.
============================================================ */
.pagina-login {
display: block;
/* Respiro mínimo embaixo: cada pixel aqui é a diferença entre caber e
rolar num aparelho de 740px de altura, que é o mais comum. */
padding: 0 0 4px;
min-height: auto;
}
.login-hero {
position: relative;
width: 100%;
aspect-ratio: 1080 / 890;
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
background-color: #0a0504;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 7%;
}
/* navegador sem aspect-ratio: aproxima pela altura da viewport */
@supports not (aspect-ratio: 1 / 1) {
.login-hero { height: 46vh; min-height: 260px; }
}
/* A altura do hero vem do aspect-ratio da arte, não da logo — então a logo
cresce aqui dentro sem empurrar nada para baixo. */
.pagina-login .login-logo,
.login-hero .login-logo {
height: 152px;
width: auto;
max-width: 88%;
object-fit: contain;
/* Duas sombras: a preta descola a logo da foto (que tem luzes claras ao
fundo e engolia o contorno), e o brilho dourado por cima. A ordem
importa — o filtro é aplicado da esquerda para a direita. */
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.75))
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55))
var(--glow-ouro-suave);
margin: 0;
}
/* Costura o fim da arte com o fundo. Vai para PRETO, não para o cinza do
app: abaixo da foto a tela de login é preta. */
.login-hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 90px;
background: linear-gradient(to bottom, rgba(0,0,0,0), #000);
pointer-events: none;
}
.login-conteudo {
padding: 0 16px;
/* Sobe para dentro do degradê. Com o botão do Google somando ~75px, é
aqui que se recupera a maior parte deles — sem cortar a arte, que é
o que perderia as legendas dos países. */
margin-top: -12px;
position: relative;
z-index: 1;
}
/* Na tela de login a arte vive no cabecalho, entao o fundo fixo sai de cena.
O preto de baixo da foto é pintado mais adiante, na regra que fecha o
arquivo — esta aqui perderia para ela. */
body.fundo-login { background-color: #000; }
body.fundo-login .app-container::before { background-image: var(--overlay-fundo); }
/* ---------- Botao de criar conta (agora vem primeiro) ---------- */
.btn-criar-conta { margin-bottom: 2px; }
/* ---------- Separador "ou" ---------- */
.separador-ou {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
color: var(--smoke);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.separador-ou::before,
.separador-ou::after {
content: '';
flex: 1;
height: 1px;
background: var(--borda);
}
.linha-esqueci { text-align: right; margin-bottom: 16px; }
.pagina-login .card-formulario { margin: 0; }
/* ---------- Linha de jogo com o bloco de data ----------
*
* O bloco tomou 70px da linha, e o nome passou a perder a disputa com o
* selo: "Degustação Beneficente…" virava "D...". Agora o selo desce de
* linha quando não cabe, e o nome usa duas linhas em vez de sumir — numa
* lista, o nome é o que se procura.
*/
/* ---------- Seção que contém lista, sem card em volta ----------
*
* `.secao-jogos` é um card inteiro — fundo, borda, sombra. Com cada evento
* já sendo um card, ficava card dentro de card: duas bordas, dois fundos e
* o conteúdo empurrado 14px para dentro sem motivo.
*
* `:has()` evita marcar as três telas à mão. Onde ele não existir (navegador
* antigo), a seção continua com o card de antes — que era o estado anterior,
* não um defeito.
*/
.secao-jogos:has(.jogo-linha) {
background: none;
border: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0;
margin-bottom: 22px;
}
.secao-jogos:has(.jogo-linha) .secao-titulo-escuro {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 10px;
}
/* ---------- A data ocupa a altura da linha ----------
Com nome em duas linhas e selo embaixo, a linha cresce e o bloco de 62px
ficava boiando no meio. Estica junto; o resto continua centralizado. */
.jogo-linha { align-items: stretch; }
.jogo-linha .jogo-linha-dados,
.jogo-linha .jogo-linha-entrar { align-self: center; }
.jogo-linha .jogo-data { min-height: 0; }
/* Seletor com dois níveis de propósito: as regras originais destas classes
ficam MAIS ADIANTE no arquivo, e no empate de especificidade a última
vence. Depender de posição num arquivo de 5 mil linhas é frágil. */
.jogo-linha .jogo-linha-topo { flex-wrap: wrap; row-gap: 4px; }
.jogo-linha .jogo-linha-nome {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: unset;
line-height: 1.3;
}
/* A linha inteira já é o link; o rótulo do botão era a terceira vez que se
dizia "entrar". Encolhe para dar o espaço ao nome. */
.jogo-linha .jogo-linha-entrar { padding: 7px 10px; font-size: 11.5px; gap: 4px; }
@media (max-width: 380px) {
/* Em tela estreita fica só a seta: o texto do botão custa 46px que o
nome precisa mais. */
.jogo-linha .jogo-linha-entrar { font-size: 0; padding: 9px; gap: 0; }
.jogo-linha .jogo-linha-entrar .ico { font-size: 1rem; }
}
/* ---------- Bloco de data das listas ----------
*
* Numa lista, "quando" é o que se procura primeiro. Fora do texto e num
* bloco de cor, o olho acha sem ler.
*/
.jogo-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 58px;
min-height: 62px;
padding: 8px 4px;
border-radius: var(--raio-grande);
background: linear-gradient(160deg, var(--vinho) 0%, var(--vinho-deep) 100%);
color: var(--sobre-vinho);
line-height: 1;
text-align: center;
}
.jogo-data b {
font-size: 1.5rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.jogo-data i {
margin-top: 4px;
font-style: normal;
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.14em;
opacity: 0.85;
}
/* Só aparece quando o ano não é o corrente — ver data_bloco() */
.jogo-data u {
margin-top: 3px;
text-decoration: none;
font-size: 0.55rem;
letter-spacing: 0.08em;
opacity: 0.62;
font-variant-numeric: tabular-nums;
}
/* Evento profissional é dourado, como o resto daquele ambiente. O texto
escuro porque o dourado é claro demais para carregar branco. */
.jogo-linha-pro .jogo-data {
background: linear-gradient(160deg, var(--dourado-hi) 0%, var(--dourado) 100%);
color: #241c0c;
}
/* Mesa encerrada perde a cor: a lista de "já aconteceram" não precisa
gritar tanto quanto a dos próximos. */
.jogo-linha-fim .jogo-data {
background: var(--painel-neutro, rgba(255, 255, 255, 0.07));
color: var(--smoke);
}
@media (max-width: 380px) {
.jogo-data { width: 52px; min-height: 56px; }
.jogo-data b { font-size: 1.3rem; }
}
/* ---------- Entrar com o Google ----------
O botão é desenhado pelo próprio Google dentro deste div, então aqui só
se cuida do lugar dele: centralizado e com o mesmo respiro dos outros
botões da tela de login. */
.google-btn-caixa {
display: block;
min-height: 42px;
margin-bottom: 0;
}
/* O Google desenha o botão dentro deste div e fixa a largura em pixel — o
JS mede o card e passa o número. Aqui só garantimos que nada dentro
estoure, e que o canto arredonde igual ao "Criar conta" logo acima.
O alvo é `[role="button"]`, que é semântico: as classes que o Google
gera são embaralhadas e mudam sem aviso. */
.google-btn-caixa > div,
.google-btn-caixa [role="button"] {
width: 100% !important;
max-width: 100%;
border-radius: var(--raio-grande) !important;
}
.google-btn-caixa [role="button"] { box-sizing: border-box; }
.google-erro {
margin: 8px 0 0;
font-size: 0.82rem;
text-align: center;
color: var(--vinho-bright);
}
body.ambiente-pro .google-erro { color: var(--dourado-hi); }
/* ---------- Passos numerados (telas de configuração) ---------- */
.lista-passos {
margin: 0;
padding-left: 20px;
font-size: 0.92rem;
line-height: 1.6;
color: var(--smoke);
}
.lista-passos li { margin-bottom: 9px; }
.lista-passos strong { color: var(--ivory); font-weight: 500; }
.lista-passos code,
.lista-origens code {
font-family: ui-monospace, "Consolas", monospace;
font-size: 0.86em;
padding: 1px 5px;
border-radius: 4px;
background: var(--bg-campo);
color: var(--dourado-hi);
}
.lista-origens {
margin: 7px 0 0;
padding-left: 16px;
list-style: none;
}
.lista-origens li { margin: 4px 0; }
/* ---------- Bolinha de contagem no menu ----------
Convite esperando resposta é a única coisa do menu com prazo; por isso o
vermelho, que não é usado em mais nada da navegação. */
.menu-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 19px;
height: 19px;
margin-left: auto;
padding: 0 5px;
border-radius: 10px;
background: #d32d4a;
color: #fff;
font-size: 0.66rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
flex-shrink: 0;
}
/* ---------- Campo opcional e seletor de arquivo ---------- */
/* Deixa claro no rótulo o que dá para pular. Sem isso a pessoa preenche por
via das dúvidas, ou abandona por não querer dar o número. */
.rotulo-opcional,
.rotulo-obrigatorio {
margin-left: 6px;
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--smoke);
font-weight: 400;
}
/* "obrigatório" não é uma etiqueta neutra: é o que falta fazer. */
.rotulo-obrigatorio {
padding: 2px 8px;
border-radius: 20px;
border: 1px solid var(--vinho);
color: var(--vinho-bright);
}
body.ambiente-pro .rotulo-obrigatorio {
border-color: var(--dourado);
color: var(--dourado-hi);
}
/* O não aceita estilo; o de verdade some e o