/* Portal do Condomínio Bela Vista — identidade visual: textura, logo, capa, agendas e prestadores */
:root {
/* cores por papel (temas: troque os valores aqui; nos dois temas de hoje elas são iguais) */
--sobre-cor: #fff; /* texto e ícone sobre fundo colorido */
--branco: #fff; /* fundos que ficam brancos nos dois temas (logo, selos) */
--azul-sobre-escuro: #9dbcff; /* azul de texto no tema escuro */
--tinta-sobre-claro: #0b1f26; /* texto escuro sobre cor clara no tema escuro */
--ocupado: #9fb2b8;
--whatsapp: #25a35a;
--petroleo-luz: #1d7d85;
--ouro-2: #b98a2a;
--fundo-noturno: #071d25;
--menu-texto: #e6f4f4;
--texto-sobre-petroleo: #cfeeee;
--serifa: var(--fonte); /* títulos: Roboto, como o resto (DESIGN_SYSTEM.md) */
--ouro-luz: #f3c969;
--vermelho: #d93b47;
--vermelho-2: #b8232f;
--azul: #2f6bea;
--azul-2: #1d4fc4;
--livre-borda: #d8dee8;
--cursiva: "Great Vibes", "Segoe Script", cursive;
/* frase do condomínio na capa do Início (exceção de marca, DESIGN_SYSTEM.md §5) */
--letra-frase: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
:root[data-modo="escuro"] { --livre-borda: #3a4a5e; --vermelho: #e5505b; --azul: #4a82f5; }
/* ---------- fundo geral liso (DESIGN_SYSTEM.md: background.default) ---------- */
body { background: var(--fundo); }
/* títulos: Roboto 500 (DESIGN_SYSTEM.md §5) */
.conteudo h1, .conteudo h2, dialog h2 { font-weight: 500; }
/* ---------- menu lateral: a cena dos blocos Alfa e Beta no lugar do logo ---------- */
.menu a.marca {
display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 6px 18px; margin: 0 0 14px; min-height: 0;
border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: center;
}
.menu a.marca:hover { background: transparent; }
.cena-logo {
display: block; flex: none; width: 100%; aspect-ratio: 580 / 400; overflow: hidden; border-radius: 18px;
background:
radial-gradient(70% 55% at 50% 100%, rgba(var(--agua-rgb), .28), transparent 70%),
radial-gradient(40% 40% at 86% 8%, rgba(255, 236, 180, .10), transparent 70%),
linear-gradient(180deg, var(--ceu-1) 0%, var(--ceu-2) 45%, var(--ceu-3) 100%);
box-shadow: 0 10px 24px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 4px rgba(var(--agua-claro-rgb), .1);
}
.cena-logo .cena-svg { display: block; width: 100%; height: 100%; }
.menu .rodape .nome { color: var(--sobre-cor); font-weight: 700; }
.menu .rodape .link { color: var(--agua-claro); }
.menu {
background:
radial-gradient(420px 260px at 0% 100%, rgba(var(--agua-rgb), .22), transparent 70%),
linear-gradient(180deg, var(--petroleo) 0%, var(--petroleo-3) 100%);
overflow-y: auto;
/* o espaço da barra de rolagem fica sempre reservado: sem isso, a barra aparecia, estreitava o menu, a cena dos
prédios (altura proporcional à largura) encolhia, a barra sumia, o menu alargava... e o menu tremia sem parar */
scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
/* em telas baixas o menu rola; nada encolhe (senão a cena dos prédios invade o primeiro item) */
.menu > * { flex-shrink: 0; }
/* barra superior com o logo, só no celular */
.topo-movel { display: none; }
.btn-icone {
display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--linha);
background: var(--superficie); color: var(--texto); cursor: pointer; transition: border-color .15s ease, transform .15s ease;
}
.btn-icone svg { width: 20px; height: 20px; }
.btn-icone:hover:not(:disabled) { border-color: var(--agua); }
.btn-icone:active:not(:disabled) { transform: scale(.94); }
.btn-icone:disabled { opacity: .4; cursor: not-allowed; }
.btn-icone.gira svg { transform: rotate(180deg); }
@media (max-width: 860px) {
.topo-movel {
display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 15;
padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--linha);
}
/* a altura que sobra em telas curtas vai para o conteúdo, não para o topo */
.casca { grid-template-rows: auto 1fr; }
.topo-movel .cena-logo { width: 72px; border-radius: 12px; box-shadow: 0 4px 12px rgba(var(--petroleo-rgb), .18); }
.topo-movel .quem { flex: 1; min-width: 0; line-height: 1.2; text-align: right; }
.topo-movel .quem b { display: block; font-size: .92rem; }
.topo-movel .quem span { display: block; font-size: .76rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { background: linear-gradient(180deg, var(--petroleo), var(--petroleo-3)); overflow-y: hidden; }
.menu a.marca { display: none; }
}
@media (max-width: 860px) {
:root[data-modo="escuro"] .topo-movel { background: rgba(var(--fundo-noturno-rgb), .86); }
}
/* ---------- capa: primeira tela depois do login (início) ---------- */
.capa {
position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; color: var(--sobre-cor);
/* margem lateral fixa: a saudação fica sempre no mesmo lugar, à esquerda, em qualquer largura de tela */
display: grid; grid-template-rows: auto 1fr auto; padding: 0 32px;
background: var(--petroleo-3);
}
.capa-foto {
position: absolute; inset: -2%; z-index: -2;
background: var(--foto, url("../img/fundo-padrao.svg")) center 58% / cover no-repeat;
animation: aproximar 18s cubic-bezier(.2, .6, .2, 1) both;
}
/* a imagem da tela inicial é a mesma em qualquer cor do portal: nem filtro de cor nem véu com a cor do tema */
.capa-foto.suave { inset: -4%; filter: blur(5px) saturate(1.1) brightness(.62); animation: none; transform: scale(1.04); }
.acesso .cartao.vidro { position: relative; background: rgba(var(--petroleo-3-rgb), .72); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
/* fundo das telas de acesso: círculos entrelaçados e dois brilhos suaves sobre o petróleo */
.acesso {
background:
url("../img/padrao-acesso.svg") center / 96px 96px,
radial-gradient(55% 45% at 12% 88%, rgba(var(--agua-rgb), .30), transparent 70%),
radial-gradient(45% 40% at 88% 10%, rgba(var(--ouro-luz-rgb), .14), transparent 70%),
linear-gradient(160deg, var(--capa-1) 0%, var(--petroleo-4) 55%, var(--capa-2) 100%);
background-color: var(--petroleo-4);
}
/* vinheta nas bordas, para o cartão ganhar destaque no centro */
.acesso::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3, 14, 19, .55) 100%); }
.capa-veu {
--veu-capa-rgb: 8, 30, 38; /* escuro neutro, fixo: escurece a foto para o texto sem tingi-la */
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(60% 55% at 50% 48%, rgba(var(--veu-capa-rgb), .7) 0%, rgba(var(--veu-capa-rgb), .42) 60%, rgba(var(--veu-capa-rgb), .25) 100%),
linear-gradient(0deg, rgba(var(--veu-capa-rgb), .92) 0%, rgba(var(--veu-capa-rgb), 0) 42%),
linear-gradient(180deg, rgba(var(--veu-capa-rgb), .7) 0%, rgba(var(--veu-capa-rgb), 0) 24%);
}
.capa-topo { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: calc(18px + env(safe-area-inset-top, 0px)) 0 18px; width: 100%; margin: 0; }
/* a saudação fica sempre presa à esquerda, em qualquer largura de tela */
.capa-saudacao { justify-self: start; }
.capa-marca {
margin: 0 0 14px; font-family: var(--cursiva); font-weight: 400; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.15; color: var(--agua-viva);
text-shadow: 0 2px 16px rgba(0, 0, 0, .45); text-wrap: balance;
}
.capa-corpo { align-self: center; justify-self: center; max-width: 52rem; width: 100%; margin: 0 auto; padding: 24px 0 40px; text-align: center; }
.capa-corpo > * { margin-left: auto; margin-right: auto; animation: surgir 400ms ease-out both; }
.capa-saudacao { margin: 0; text-align: left; color: var(--texto-sobre-petroleo); font-size: .875rem; line-height: 1.4; animation: surgir 400ms ease-out .1s both; }
.capa-saudacao p { margin: 0; }
.capa-saudacao .saudacao { font-family: var(--cursiva); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; color: #fdf3d6; text-shadow: 0 0 24px rgba(var(--ouro-luz-rgb), .35); }
.capa-saudacao .data { color: var(--agua-claro); font-size: .8125rem; font-weight: 500; }
/* versão do portal, em letras pequenas no canto inferior direito da capa (fixa no canto, fora do grid: um nome
de condomínio largo não a empurra para fora da tela) */
.capa-rodape { position: absolute; z-index: 1; right: 32px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.capa-versao { margin: 0; color: var(--texto-sobre-petroleo); font-size: .6875rem; letter-spacing: .02em; opacity: .8; animation: surgir 400ms ease-out .8s both; }
/* ---------- encomendas aguardando na portaria (js/telas/entregas.js → entregasNaCapa) ----------
Ilustração da capa (DESIGN_SYSTEM.md): uma "etiqueta de encomenda" em vidro petróleo sobre a foto, com uma fita
dourada no topo e a caixa animada encaixada na borda. Igual nos temas claro e escuro, como o resto da capa. */
.capa-entregas { justify-self: center; width: 100%; max-width: 380px; margin: 34px auto 48px; position: relative; z-index: 1; }
.cartao-capa-entregas {
position: relative; padding: 34px 24px 20px; border-radius: var(--raio-g); text-align: center; color: var(--texto-sobre-petroleo);
background:
linear-gradient(90deg, transparent 30%, rgba(var(--ouro-luz-rgb), .9) 30%, rgba(var(--ouro-luz-rgb), .9) 70%, transparent 70%) top / 100% 6px no-repeat,
radial-gradient(90% 60% at 50% 0%, rgba(var(--ouro-luz-rgb), .14), transparent 70%),
rgba(var(--petroleo-3-rgb), .82);
border: 1px solid rgba(var(--ouro-luz-rgb), .35);
box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
animation: surgir 400ms ease-out .6s both;
}
/* a caixa num círculo dourado, metade para fora da borda de cima */
.selo-caixa {
position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
width: 60px; height: 60px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff3cf, var(--ouro-luz) 70%);
box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 4px rgba(var(--petroleo-3-rgb), .9);
}
.capa-entregas-frase { margin: 0; font-family: var(--cursiva); font-size: 2.1rem; line-height: 1.2; color: var(--ouro-luz); text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.cartao-capa-entregas h2 { margin: 2px 0 4px; font-size: 1.0625rem; font-weight: 500; color: #fff; }
.capa-entregas-detalhe { margin: 0 0 14px; font-size: .875rem; color: var(--texto-sobre-petroleo); opacity: .9; }
.qr-capa { display: block; margin: 0 auto 14px; padding: 0; border: 0; background: none; border-radius: var(--raio); cursor: zoom-in; }
.qr-capa:focus-visible { outline: 2px solid var(--ouro-luz); outline-offset: 3px; }
.qr-capa img { display: block; width: min(180px, 52vw); height: auto; image-rendering: pixelated; border-radius: var(--raio); background: #fff; padding: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
/* as palavras de retirada num carimbo tracejado */
.palavras-capa { display: grid; gap: 2px; margin: 0 auto 14px; padding: 8px 18px 10px; width: fit-content; border: 1.5px dashed rgba(var(--ouro-luz-rgb), .7); border-radius: var(--raio-p); background: rgba(var(--ouro-luz-rgb), .08); }
.palavras-capa small { font-size: .75rem; color: var(--texto-sobre-petroleo); }
.palavras-capa b { font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; color: var(--ouro-luz); }
.lista-capa-entregas { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; text-align: left; }
.lista-capa-entregas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .16); font-size: .875rem; color: #fff; }
.lista-capa-entregas li:first-child { border-top: 1px dashed rgba(255, 255, 255, .16); }
.botao-qr-capa {
flex: none; min-height: 36px; padding: 0 12px; border-radius: var(--raio-p); border: 1px solid rgba(var(--ouro-luz-rgb), .6);
background: rgba(var(--ouro-luz-rgb), .1); color: var(--ouro-luz); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer;
transition: background-color var(--rapido) ease;
}
.botao-qr-capa:hover { background: rgba(var(--ouro-luz-rgb), .22); }
.botao-qr-capa:focus-visible { outline: 2px solid var(--ouro-luz); outline-offset: 2px; }
.capa-entregas-rodape { display: grid; gap: 4px; margin: 0; font-size: .8125rem; color: var(--texto-sobre-petroleo); opacity: .95; }
.capa-entregas-rodape a { color: var(--ouro-luz); font-weight: 500; text-underline-offset: 3px; }
/* a caixa: cai e quica (.5 s), as abas da tampa abrem e sai um brilho, uma vez (1,1 s no total) */
.caixa-frente { fill: #c98a3c; stroke: #6b4316; stroke-width: 1.4; stroke-linejoin: round; }
.caixa-aba { fill: #dfa456; stroke: #6b4316; stroke-width: 1.4; stroke-linejoin: round; }
.caixa-fita { fill: rgba(255, 255, 255, .45); }
.caixa-etiqueta { fill: #fff; stroke: #6b4316; stroke-width: 1; }
.caixa-g { transform-box: view-box; transform-origin: 24px 42px; animation: caixa-cair .55s cubic-bezier(.3, 0, .4, 1) .7s both; }
.caixa-tampa-esq { transform-box: view-box; transform-origin: 9px 20px; animation: aba-esq .4s cubic-bezier(.3, 1.4, .5, 1) 1.2s both; }
.caixa-tampa-dir { transform-box: view-box; transform-origin: 39px 20px; animation: aba-dir .4s cubic-bezier(.3, 1.4, .5, 1) 1.2s both; }
.caixa-brilho path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.caixa-brilho { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: caixa-brilho .5s ease-out 1.4s both; }
@keyframes caixa-cair {
0% { opacity: 0; transform: translateY(-18px); }
55% { opacity: 1; transform: translateY(0) scale(1.06, .92); }
75% { transform: translateY(-4px); }
100% { opacity: 1; transform: none; }
}
@keyframes aba-esq { from { transform: none; } to { transform: rotate(-28deg); } }
@keyframes aba-dir { from { transform: none; } to { transform: rotate(28deg); } }
@keyframes caixa-brilho { 0% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; } 100% { opacity: .9; transform: none; } }
/* a mesma caixa no título da tela Entregas: começa logo ao abrir a tela e o brilho fica dourado (o branco some no tema claro) */
.titulo-vinheta .caixa-g { animation-delay: .2s; }
.titulo-vinheta .caixa-tampa-esq, .titulo-vinheta .caixa-tampa-dir { animation-delay: .7s; }
.titulo-vinheta .caixa-brilho { animation-delay: .9s; }
.titulo-vinheta .caixa-brilho path { stroke: var(--ouro); }
.conteudo .capa-frase {
font-family: var(--letra-frase); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.3; letter-spacing: .01em;
color: var(--capa-texto); max-width: 22em;
text-wrap: balance; text-shadow: 0 2px 16px rgba(4, 24, 30, .55); animation-delay: .15s;
}
.capa-frase::after { content: ""; display: block; width: 64px; height: 2px; margin: 22px auto 0; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--agua-claro), transparent); }
.btn.claro:hover { background: rgba(255, 255, 255, .22); }
@media (max-width: 640px) {
.capa { padding: 0 16px; }
.capa-rodape { right: 16px; }
.capa-veu { background: linear-gradient(0deg, rgba(var(--petroleo-4-rgb), .96) 0%, rgba(var(--petroleo-4-rgb), .78) 45%, rgba(var(--petroleo-4-rgb), .3) 78%, rgba(var(--petroleo-4-rgb), .72) 100%); }
.capa-foto { background-position: 40% 50%; }
.capa-corpo { padding: 8px 0 20px; }
}
/* ---------- cena noturna dos blocos Alfa e Beta (logo do menu, js/cena.js) ---------- */
.cena-svg .estrela { fill: #fff; opacity: .75; }
.cena-svg .estrela.pisca { animation: piscar 3.2s ease-in-out infinite; }
.cena-svg .lua { fill: #fbeec4; }
.cena-svg .lua-sombra { fill: var(--petroleo-3); opacity: .55; }
.cena-svg .cidade { fill: var(--cidade); opacity: .55; }
.cena-svg .fachada-alto { stop-color: var(--fachada-alto); }
.cena-svg .fachada-baixo { stop-color: var(--fachada-baixo); }
.cena-svg .fachada { fill: var(--fachada); stroke: rgba(var(--texto-sobre-petroleo-rgb), .3); stroke-width: 1.5; }
.cena-svg .faixa { fill: rgba(var(--agua-claro-rgb), .35); }
.cena-svg .laje { stroke: rgba(var(--texto-sobre-petroleo-rgb), .14); stroke-width: 1.5; }
.cena-svg .caixa-agua { fill: var(--caixa-agua); stroke: rgba(var(--texto-sobre-petroleo-rgb), .25); }
.cena-svg .antena { stroke: rgba(var(--texto-sobre-petroleo-rgb), .45); stroke-width: 1.5; }
.cena-svg .luz-antena { fill: #ff6b6b; animation: piscar 1.8s ease-in-out infinite; }
.cena-svg .janela { fill: rgba(var(--texto-sobre-petroleo-rgb), .10); }
.cena-svg .janela { transition: fill 1.2s ease; }
.cena-svg .janela.acesa { animation: acender .8s ease forwards; filter: var(--luz); }
/* depois da sequência inicial, algumas janelas apagam e outras acendem de vez em quando (cena.js) */
.cena-svg .janela.acesa.apagada { animation: none; fill: rgba(var(--texto-sobre-petroleo-rgb), .10); filter: none; }
.cena-svg .janela.ligada { fill: var(--ouro-luz); filter: var(--luz); }
.cena-svg .porta { fill: var(--ouro-luz); opacity: .85; filter: var(--luz); }
.cena-svg .marquise { fill: var(--marquise); }
.cena-svg .bloco.seu .fachada { stroke: var(--agua-claro); stroke-width: 2.4; }
.cena-svg .aura { fill: rgba(var(--agua-claro-rgb), .07); }
.cena-svg .rotulo { fill: var(--rotulo); font: 400 40px var(--cursiva); text-anchor: middle; filter: drop-shadow(0 0 10px rgba(var(--rotulo-rgb), .45)); }
.cena-svg.predios-3 .rotulo { font-size: 32px; }
.cena-svg.predios-4 .rotulo { font-size: 26px; }
.cena-svg .arvore circle { fill: #1f6b55; }
.cena-svg .arvore .tronco { fill: #3a2f25; }
.cena-svg .arbusto { fill: #2b8566; }
.cena-svg .gramado { fill: #0d3a33; }
.cena-svg .chao { stroke: rgba(var(--agua-claro-rgb), .35); stroke-width: 1.5; }
.cena-svg .poste line { stroke: #9fbcc2; stroke-width: 3; }
.cena-svg .lampada { fill: #fff3c8; }
.cena-svg .halo { fill: var(--halo); animation: respirar 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes piscar { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }
@keyframes respirar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(.88); } }
.conteudo.tela-cheia { padding: 0; max-width: none; }
.tela-cheia .capa-inicio { min-height: 100vh; min-height: 100svh; }
.iot-quadro { display: block; width: 100%; height: 100vh; height: 100svh; border: 0; background: #e9edf0; }
@media (max-width: 860px) {
.conteudo.tela-cheia { padding: 0; }
/* topo do celular (~63px) e menu fixo no rodapé (~76px) */
.tela-cheia .capa-inicio { min-height: calc(100svh - 63px); padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
/* acima do menu fixo do rodapé */
.tela-cheia .capa-inicio .capa-rodape { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
.iot-quadro { height: calc(100svh - 63px - 76px - env(safe-area-inset-bottom, 0px)); }
}
.data-bloco.minha { background: linear-gradient(160deg, var(--azul), var(--azul-2)); }
.data-bloco.apagada { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--linha); }
.etiqueta.azul { background: rgba(47, 107, 234, .12); border-color: rgba(47, 107, 234, .45); color: var(--azul-2); }
:root[data-modo="escuro"] .etiqueta.azul { color: var(--azul-sobre-escuro); }
/* ---------- reservas: duas agendas ---------- */
.agenda-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.mes-nav { display: flex; align-items: center; gap: 10px; }
.mes-nav h2 { font-family: var(--serifa); font-weight: 600; font-size: 1.45rem; min-width: 11.5ch; text-align: center; }
.legenda { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0; font-size: .86rem; color: var(--texto-2); font-weight: 600; }
.legenda span { display: inline-flex; align-items: center; }
.legenda i { display: inline-block; width: 16px; height: 16px; border-radius: 5px; margin-right: 7px; vertical-align: middle; }
.legenda i.livre { background: var(--superficie); border: 1.5px solid var(--livre-borda); }
.legenda i.ocupado { background: var(--vermelho); }
.legenda i.meu { background: var(--azul); }
.seletor-salao { display: none; }
.agendas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 20px; }
.agenda {
position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px;
overflow: hidden;
}
/* cada salão com a sua cor no ícone: azul no primeiro, ouro no segundo */
.agenda-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.agenda-icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-p); color: var(--sobre-primaria); background: var(--primaria); box-shadow: 0 6px 16px rgba(var(--petroleo-2-rgb), .3); }
.agenda.tom-1 .agenda-icone { background: var(--ouro); color: #3b2c06; box-shadow: none; }
.agenda-icone svg { width: 22px; height: 22px; }
.agenda-titulo { flex: 1; min-width: 0; }
.agenda-titulo h2 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin: 0; }
.agenda-resumo { text-align: right; line-height: 1.1; }
.agenda-resumo b { display: block; font-size: 1.5rem; font-weight: 500; color: var(--destaque); font-variant-numeric: tabular-nums; }
.agenda-resumo span { font-size: .76rem; color: var(--texto-2); font-weight: 600; }
.agenda-aviso { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 12px; border-radius: 12px; font-size: .86rem; font-weight: 600; color: var(--azul-2); background: rgba(47, 107, 234, .09); }
:root[data-modo="escuro"] .agenda-aviso { color: var(--azul-sobre-escuro); }
.agenda .cal { gap: 6px; }
.agenda .dia {
min-height: 56px; padding: 6px 8px; border-radius: var(--raio-p); align-items: flex-start; justify-content: space-between;
border: 1px solid var(--livre-borda); background: var(--superficie);
transition: background-color var(--rapido) ease, border-color var(--rapido) ease;
}
.agenda .dia .n { font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.marca-dia { font-size: .75rem; font-weight: 700; letter-spacing: .02em; opacity: .92; line-height: 1; }
.agenda .dia.livre:hover:not(:disabled) { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 6%, var(--superficie)); }
.agenda .dia.ocupado {
color: var(--sobre-cor); border-color: transparent;
background: var(--vermelho);
}
.agenda .dia.meu {
color: var(--sobre-cor); border-color: transparent;
background: var(--azul);
}
.agenda .dia.ocupado:hover:not(:disabled), .agenda .dia.meu:hover:not(:disabled) { filter: brightness(1.06); }
.agenda .dia:disabled, .agenda .dia.passado { cursor: default; opacity: 1; background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-2); }
.agenda .dia.passado .n { opacity: .45; }
.agenda .dia.passado.ocupado, .agenda .dia.passado.meu { color: var(--sobre-cor); opacity: .35; }
.agenda .dia.passado.ocupado { background: var(--vermelho); }
.agenda .dia.passado.meu { background: var(--azul); }
.agenda .dia.hoje { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--agua); }
.agendas.vai .agenda { animation: entrar .3s ease both; }
.agendas.volta .agenda { animation: entrar .3s ease both; }
@media (max-width: 1100px) {
.seletor-salao { display: flex; width: 100%; margin-bottom: 14px; }
.seletor-salao button { flex: 1; min-width: 0; padding: 0 10px; font-size: 1rem; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agendas { grid-template-columns: 1fr; }
.agenda.escondida { display: none; }
}
@media (max-width: 560px) {
.agenda { padding: 16px 10px 12px; border-radius: var(--raio); }
.agenda-topo { padding: 0 4px; }
.agenda .cal { gap: 4px; }
.agenda .dia { min-height: 46px; padding: 5px 4px; border-radius: 10px; align-items: center; justify-content: center; }
.agenda .dia .n { font-size: .88rem; }
.marca-dia { display: none; }
.mes-nav { width: 100%; justify-content: space-between; }
.legenda { font-size: .8rem; gap: 6px 14px; }
}
/* diálogo do dia */
.dia-cabeca { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dia-cabeca h2 { margin: 0; }
.dia-cabeca p { margin: 2px 0 0; }
.dia-cabeca.ocupado .data-bloco { background: var(--vermelho); }
.dia-cabeca.meu .data-bloco { background: var(--azul); }
.estado-dia { font-weight: 700; padding: 10px 14px; border-radius: 12px; }
.estado-dia.ocupado { color: var(--vermelho-2); background: rgba(217, 59, 71, .1); }
.estado-dia.meu { color: var(--azul-2); background: rgba(47, 107, 234, .1); }
:root[data-modo="escuro"] .estado-dia.ocupado { color: #ff9aa2; }
:root[data-modo="escuro"] .estado-dia.meu { color: var(--azul-sobre-escuro); }
dialog[open] { animation: entrar .25s ease both; }
/* ---------- prestadores de serviço ---------- */
.busca { position: relative; flex: 1 1 260px; max-width: 360px; display: block; }
.busca svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-2); pointer-events: none; }
.filtros .busca input[type=search] { padding-left: 42px; max-width: none; }
.prestadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.prestador { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.prestador-topo { display: flex; gap: 14px; align-items: center; }
.prestador-topo h3 { margin-bottom: 4px; overflow-wrap: anywhere; }
.avatar { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--raio); font-weight: 700; color: var(--sobre-cor); background: var(--agua); letter-spacing: .02em; }
.prestador .obs { margin: 0; color: var(--texto-2); font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; }
.prestador > .acoes:not(.admin-linha) { margin-top: auto; }
.prestador .zap svg { color: var(--whatsapp); }
.admin-linha { padding-top: 10px; border-top: 1px dashed var(--linha); justify-content: space-between; }
/* ---------- paleta de cores dos cartões (documentos, classificados e prestadores) ---------- */
/* --cat-forte: fundo cheio com texto branco (botões da Administração); o mesmo nos temas claro e escuro */
.cor-0 { --cat-forte: #17766b; } .cor-1 { --cat-forte: #3567c9; } .cor-2 { --cat-forte: #8a6420; }
.cor-3 { --cat-forte: #7a5aa8; } .cor-4 { --cat-forte: #a8445f; } .cor-5 { --cat-forte: #4b5d68; }
.cor-0 { --cat: #1a8a7c; --cat-fundo: #e9f6f3; --cat-linha: #c4e6df; }
.cor-1 { --cat: #3567c9; --cat-fundo: #edf2fc; --cat-linha: #cddbf4; }
.cor-2 { --cat: #b0832a; --cat-fundo: #fbf5e8; --cat-linha: #eedcb6; }
.cor-3 { --cat: #7a5aa8; --cat-fundo: #f4f0fa; --cat-linha: #ddd2ee; }
.cor-4 { --cat: #b8506e; --cat-fundo: #fcf0f3; --cat-linha: #f0d0da; }
.cor-5 { --cat: #4b5d68; --cat-fundo: #eef1f3; --cat-linha: #d3dbe0; }
:root[data-modo="escuro"] .cor-5 { --cat: #a9bac4; --cat-fundo: #1c2a31; --cat-linha: #33464f; }
:root[data-modo="escuro"] .cor-0 { --cat: #5fd1c1; --cat-fundo: #0f3036; --cat-linha: #1f4f57; }
:root[data-modo="escuro"] .cor-1 { --cat: #8fb0ff; --cat-fundo: #13284a; --cat-linha: #24406e; }
:root[data-modo="escuro"] .cor-2 { --cat: #e6be6a; --cat-fundo: #33291a; --cat-linha: #574427; }
:root[data-modo="escuro"] .cor-3 { --cat: #c3a6ee; --cat-fundo: #2a2140; --cat-linha: #45386a; }
:root[data-modo="escuro"] .cor-4 { --cat: #f29bb5; --cat-fundo: #3a1f29; --cat-linha: #5c3242; }
.colorido { background: var(--superficie); border-color: var(--linha); position: relative; overflow: hidden; }
/* documentos */
.painel.categoria > h2 { display: flex; align-items: center; gap: 12px; }
.cat-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--raio-p); background: var(--cat-fundo); color: var(--cat); flex: none; }
.cat-icone svg { width: 20px; height: 20px; }
.cat-qtd { margin-left: auto; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; font-size: .82rem; font-weight: 700; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--linha); }
.painel.categoria .icone-doc { color: var(--cat); }
/* classificados e prestadores coloridos */
.anuncio.colorido .preco { color: var(--texto); background: var(--superficie-2); border: 1px solid var(--linha); }
.anuncio.colorido .foto { background: var(--cat-fundo); color: var(--cat); }
.prestador.colorido .avatar { background: var(--cat-fundo); color: var(--cat); box-shadow: none; }
/* finanças: cada painel do topo com seu tom (receitas, despesas, resultado, aplicações) */
.numero.colorido span { color: var(--cat); font-weight: 500; }
.numero.colorido b { color: var(--texto); }
.numero.colorido.positivo b { color: var(--ok); }
.numero.colorido.negativo b { color: var(--perigo); }
/* reservas: aviso do limite de convidados */
.limite-convidados { font-weight: 600; }
.limite-convidados.excedido { color: var(--perigo); }
/* minha conta: título colorido e um tom por painel */
/* minha conta: o título segue o texto principal */
/* mural de avisos: cada aviso com seu tom no painel e no título */
.aviso.colorido .topo h2 { display: flex; align-items: center; gap: 12px; }
.aviso.colorido.fixado { border-color: color-mix(in srgb, var(--destaque) 45%, var(--linha)); }
.agenda .dia.passado:not(:disabled) { cursor: pointer; }
/* ---------- listas zebradas em azul claro (usuários e convidados da portaria) ---------- */
:root { --zebra-azul: color-mix(in srgb, var(--destaque) 5%, transparent); --zebra-azul-forte: color-mix(in srgb, var(--destaque) 10%, transparent); }
.lista-convidados > .convidado { border-radius: var(--raio-p); }
.lista-convidados > .convidado:hover { background: var(--zebra-azul); }
.lista-convidados > .convidado.chegou { background: color-mix(in srgb, var(--ok) 12%, transparent); }
/* ---------- administração: painéis coloridos ---------- */
.painel.colorido .cabecalho-tela h2 { display: flex; align-items: center; gap: 12px; }
/* cada item da lista marcado pela cor da sua categoria */
.lista > li.item-cor { position: relative; padding-left: 16px; }
.lista > li.item-cor::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--cat); }
/* ---------- painel do síndico: editar reserva ---------- */
:root { --edicao-fundo: #f1f5fb; --edicao-foco: var(--foco-fundo); }
:root[data-modo="escuro"] { --edicao-fundo: #1a2430; --edicao-foco: var(--foco-fundo); }
dialog.dialogo-edicao { background: var(--edicao-fundo); }
.titulo-caixa {
margin: -6px -6px 20px; padding: 16px 18px; border-radius: var(--raio); color: var(--sobre-cor);
background: var(--petroleo);
box-shadow: 0 8px 20px rgba(var(--petroleo-rgb), .25);
}
.titulo-caixa h2 { margin: 0 0 4px; color: var(--sobre-cor); }
.titulo-caixa p { margin: 0; color: var(--texto-sobre-petroleo); font-size: .88rem; }
.painel-edicao .campo > span { color: var(--petroleo-2); }
:root[data-modo="escuro"] .painel-edicao .campo > span { color: var(--agua-claro); }
.painel-edicao .campo:focus-within > span, :root[data-modo="escuro"] .painel-edicao .campo:focus-within > span { color: var(--foco-rotulo); }
.painel-edicao input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.painel-edicao select:focus, .painel-edicao textarea:focus {
background: var(--foco-fundo); border-color: var(--foco-borda); box-shadow: inset 0 0 0 1px var(--foco-borda), 0 0 0 3px var(--foco-anel);
}
.painel-edicao .acoes .espacador { flex: 1; }
.linha-edicao { display: flex; flex: 1; gap: 8px; align-items: center; }
.linha-edicao input { min-height: 38px !important; padding: 7px 11px !important; }
/* ---------- lista de convidados ---------- */
.painel-convidados .caixa-incluir {
padding: 14px 14px 12px; border-radius: var(--raio); background: var(--superficie);
border: 1.5px dashed var(--agua); margin-bottom: 18px;
}
.painel-convidados .caixa-incluir .campo { margin-bottom: 10px; }
.painel-convidados .caixa-incluir textarea { min-height: 90px; }
.painel-convidados .caixa-incluir .acoes { margin-top: 0; }
.convidados-topo {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px; border-radius: 12px 12px 0 0; color: var(--sobre-cor);
background: var(--petroleo-2);
}
.convidados-topo h3 { margin: 0; font-size: 1rem; color: var(--sobre-cor); }
.convidados-topo .contador { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lista-zebra {
max-height: 46vh; overflow-y: auto; border: 1px solid var(--linha); border-top: 0; border-radius: 0 0 12px 12px;
background: var(--superficie);
}
.lista-zebra > li { gap: 10px; padding: 9px 14px; border-top: 0; }
.lista-zebra > li:nth-child(even) { background: var(--zebra-azul); }
.lista-zebra > li:hover { background: var(--zebra-azul-forte); }
.lista-zebra .ordem { flex: none; width: 26px; color: var(--texto-2); font-size: .8rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lista-zebra .principal { font-weight: 600; overflow-wrap: anywhere; }
.lista-zebra .principal { flex: 1; min-width: 0; }
.lista-zebra .acoes-convidado { display: flex; gap: 6px; flex: none; margin-left: auto; }
/* botões pequenos de ícone (alterar, remover, salvar, desistir), na mesma linha do nome */
.btn-mini {
display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 10px; cursor: pointer;
border: 1.5px solid var(--linha); background: var(--superficie); color: var(--texto-2); transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.btn-mini:hover { border-color: var(--agua); color: var(--destaque); }
.btn-mini.perigo:hover { border-color: var(--perigo); color: var(--perigo); background: rgba(220, 60, 60, .06); }
.btn-mini.ok { border-color: var(--agua); background: var(--agua); color: var(--sobre-cor); }
.linha-edicao input { flex: 1; min-width: 0; }
.lista-zebra .link.perigo { color: var(--perigo); }
.lista-zebra .vazio-lista { justify-content: center; padding: 18px; color: var(--texto-2); }
@media (max-width: 560px) {
dialog.dialogo-edicao { width: 100vw; max-width: none; max-height: 100svh; border-radius: var(--raio) 20px 0 0; margin-bottom: 0; }
dialog.dialogo-edicao .corpo { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
.titulo-caixa { margin: 0 0 16px; }
.lista-zebra { max-height: 40svh; }
.lista-zebra > li { padding: 7px 8px; gap: 8px; }
.painel-edicao .acoes .btn { flex: 1; }
.painel-edicao .acoes .espacador { display: none; }
}
/* ---------- classificados: cartão compacto, foto inteira e pequena (amplia ao tocar) ---------- */
.anuncios { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
.anuncio { flex-direction: row; align-items: stretch; gap: 0; border-radius: var(--raio); box-shadow: 0 6px 18px rgba(var(--petroleo-rgb), .07); transition: transform .2s ease, box-shadow .2s ease; }
.anuncio:hover { box-shadow: 0 12px 26px rgba(var(--petroleo-rgb), .12); }
.anuncio .foto {
flex: none; align-self: flex-start; width: 92px; height: 92px; aspect-ratio: 1; margin: 10px 0 10px 10px; border-radius: 13px;
box-shadow: inset 0 0 0 1px var(--cat-linha, var(--linha));
}
.anuncio .foto svg { width: 30px; height: 30px; }
.anuncio .foto img, .anuncio .foto .ampliar img { object-fit: contain; padding: 4px; }
.anuncio .foto .ampliar { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.anuncio .foto .ampliar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.anuncio .foto .ampliar::after {
content: ""; position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 7px; opacity: .85;
background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310303a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 14px no-repeat;
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.anuncio .info { padding: 10px 12px 10px; gap: 4px; min-width: 0; }
.anuncio-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.anuncio-topo .etiqueta { font-size: .7rem; padding: 1px 8px; }
.anuncio .preco { margin-left: auto; padding: 1px 10px; border-radius: 999px; font-size: .86rem; font-weight: 700; white-space: nowrap; }
.anuncio h3 { margin: 2px 0 0; font-size: .98rem; line-height: 1.25; text-align: left; }
.anuncio .desc {
margin: 0; font-size: .82rem; line-height: 1.35; white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.anuncio-rodape { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--cat-linha, var(--linha)); }
.anuncio-rodape .quem { font-size: .76rem; color: var(--texto-2); font-weight: 600; }
.anuncio-rodape .acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.anuncio-rodape .btn.peq { min-height: 32px; padding: 4px 11px; font-size: .8rem; }
.anuncio-rodape .zap { background: var(--whatsapp); box-shadow: var(--sombra); }
.anuncio-rodape .zap svg { color: var(--sobre-cor); }
.anuncio-rodape .link { font-size: .8rem; }
/* ---------- documentos e prestadores: lista só de títulos; tocar abre a janela com os detalhes ---------- */
.lista-titulos { list-style: none; margin: 4px 0 0; padding: 0; }
.lista-titulos li + li { border-top: 1px solid var(--cat-linha, var(--linha)); }
.titulo-doc {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 10px;
background: none; color: var(--texto); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer;
transition: background-color .15s ease;
}
.titulo-doc:hover { background: rgba(255, 255, 255, .6); }
.titulo-doc > svg:first-child { flex: none; color: var(--cat, var(--agua)); }
.titulo-doc > span:not(.esp-icone):not(.cat-qtd) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.titulo-doc .seta { flex: none; transform: rotate(180deg); color: var(--texto-2); opacity: .6; }
.titulo-doc .cat-qtd { margin-left: 0; min-width: 24px; height: 22px; font-size: .75rem; }
.painel.especialidades .titulo-doc { --cat-linha: var(--linha); }
.painel.especialidades .cat-qtd { color: var(--cat); border-color: var(--cat-linha); background: var(--cat-fundo); }
.titulo-doc .esp-icone { background: var(--cat); }
.doc-detalhe, .esp-cabeca { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.doc-detalhe h2, .esp-cabeca h2 { margin: 4px 0 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.doc-detalhe .etiqueta { margin: 0; }
.doc-icone, .esp-icone {
flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--raio); color: var(--sobre-cor);
background: var(--agua); box-shadow: 0 6px 16px rgba(var(--petroleo-2-rgb), .25);
}
.esp-cabeca .esp-icone { width: 42px; height: 42px; border-radius: 13px; }
.titulo-doc .esp-icone { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.doc-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.doc-dados div { padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha); }
.doc-dados dt { font-size: .76rem; color: var(--texto-2); font-weight: 600; }
.doc-dados dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.painel.especialidades { padding-top: 10px; padding-bottom: 10px; }
.painel.especialidades .lista-titulos { margin: 0; }
dialog.janela-prestadores { width: min(560px, 94vw); }
.janela-prestadores .lista-janela { grid-template-columns: 1fr; gap: 10px; max-height: 60svh; overflow-y: auto; padding: 2px; }
/* prestadores com letras menores */
.prestador { gap: 8px; padding: 12px 14px; border-radius: var(--raio); }
.prestador-topo { gap: 10px; }
.prestador-topo h3 { margin: 0; font-size: .98rem; }
.avatar { width: 38px; height: 38px; border-radius: 12px; font-size: .82rem; }
.prestador .obs { font-size: .82rem; }
.prestador .btn.peq { min-height: 32px; padding: 4px 11px; font-size: .8rem; }
.prestador .acoes { justify-content: flex-start; }
.prestador .admin-linha { justify-content: flex-end; }
/* janela do documento: fechar no canto, baixar e abrir lado a lado */
.doc-detalhe { position: relative; padding-right: 44px; }
.doc-detalhe .fechar-janela { position: absolute; top: -6px; right: -6px; }
.acoes.doc-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* ---------- reservas: confirmação com o convite para incluir os convidados ---------- */
.reserva-feita { text-align: center; }
.reserva-feita h2 { margin: 10px 0 4px; }
.reserva-feita p { margin: 4px auto 0; max-width: 26rem; }
.selo-ok { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--raio); color: var(--sobre-cor); background: var(--agua); box-shadow: 0 10px 22px rgba(var(--petroleo-2-rgb), .3); }
dialog.foto-ampliada { padding: 0; max-width: min(94vw, 1100px); max-height: 92vh; background: var(--fundo-noturno); overflow: hidden; }
dialog.foto-ampliada .corpo { padding: 0; position: relative; }
dialog.foto-ampliada img { display: block; max-width: min(94vw, 1100px); max-height: 92vh; object-fit: contain; margin: auto; }
dialog.foto-ampliada .fechar-foto { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .92); border-color: transparent; color: #1f2937; }
/* ---------- celular: telas mais compactas ---------- */
@media (max-width: 560px) {
.sem-celular { display: none; }
.conteudo { padding-top: 14px; }
.conteudo h1 { font-size: 1.55rem; }
.cabecalho-tela { margin-bottom: 12px; gap: 10px; }
/* reservas: o mês inteiro cabe entre o topo e o menu do rodapé */
.abas { margin-bottom: 10px; }
.abas button { min-height: 38px; padding: 6px 10px; }
.agenda-barra { gap: 6px; margin-bottom: 8px; }
.mes-nav { width: 100%; justify-content: space-between; }
.mes-nav h2 { font-size: 1.15rem; min-width: 0; }
.mes-nav .btn-icone { width: 36px; height: 36px; }
.legenda { gap: 4px 12px; font-size: .76rem; }
.legenda i { width: 12px; height: 12px; margin-right: 5px; }
.seletor-salao { margin-bottom: 8px; }
.seletor-salao button { min-height: 38px; font-size: .9rem; }
.agenda { padding: 10px 8px 8px; }
.agenda-topo { gap: 8px; margin-bottom: 8px; }
.agenda-icone { width: 34px; height: 34px; border-radius: 10px; }
.agenda-icone svg { width: 18px; height: 18px; }
.agenda-titulo h2 { font-size: 1.15rem; }
.agenda-resumo b { font-size: 1.15rem; }
.agenda .cal { gap: 3px; }
.agenda .cal .sem { font-size: .7rem; padding-bottom: 0; }
.agenda .dia { min-height: 38px; border-radius: 8px; }
.agenda .dia .n { font-size: .82rem; }
.agenda-aviso { margin-top: 8px; padding: 6px 10px; font-size: .78rem; }
/* prestação de contas: os quatro totais lado a lado, dois por linha */
#numeros.grade.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#numeros .numero { padding: 10px 12px; }
#numeros .numero span { font-size: .75rem; }
#numeros .numero b { font-size: 1.02rem; margin-top: 2px; letter-spacing: -0.03em; }
}
/* ---------- administração: configurações do condomínio ---------- */
/* grupos em abas no topo (tela inicial, salões, bombas, tags) */
.abas-config { flex-wrap: wrap; margin-bottom: 18px; }
/* salões e regras lado a lado, com a mesma altura */
.grade-saloes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.grade-saloes > .painel + .painel { margin-top: 0; }
.config-tela-inicial textarea { min-height: 120px; }
/* bombas: as fichas de cada controlador juntas, com o nome e o bloco no topo do grupo */
/* cada controlador num painel de fundo colorido: as bombas do mesmo controlador ficam na mesma cor */
.grupo-controlador { padding: 12px 14px 14px; border-radius: var(--raio); background: var(--cat-fundo); border: 1px solid var(--cat-linha); box-shadow: inset 4px 0 0 var(--cat); }
.grupo-controlador + .grupo-controlador { margin-top: 26px; }
.grupo-controlador .controlador-cab { border-bottom-color: var(--cat-linha); }
.grupo-controlador .controlador-cab h3 { color: var(--cat); }
.grupo-controlador .plaqueta-faixa { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), inset 0 -3px 0 var(--cat); }
.controlador-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.controlador-cab h3 { margin: 0; font-family: var(--serifa); font-size: 1.2rem; color: var(--destaque); }
@media (max-width: 900px) { .grade-saloes { grid-template-columns: 1fr; } }
/* configurações mais compactas: letras, painéis, campos e botões menores em todos os grupos */
.config-condominio { font-size: .9rem; gap: 14px; }
.config-condominio .painel { padding: 14px 16px; border-radius: var(--raio); }
.config-condominio .painel h2 { font-size: 1.05rem; gap: 8px; margin-bottom: 10px; }
.config-condominio .cat-icone { width: 28px; height: 28px; border-radius: 9px; }
.config-condominio .cat-icone svg { width: 15px; height: 15px; }
.config-condominio .campo { margin-bottom: 8px; }
.config-condominio .campo > span { font-size: .78rem; margin-bottom: 3px; }
.config-condominio input:not([type=checkbox]):not([type=radio]):not([type=file]), .config-condominio select {
min-height: 36px; padding: 6px 10px; border-radius: 9px; font-size: .9rem;
}
.config-condominio textarea { min-height: 90px; padding: 8px 10px; border-radius: 9px; font-size: .9rem; }
.config-condominio .btn { min-height: 36px; padding: 0 14px; font-size: .86rem; border-radius: 10px; }
.config-condominio .btn.peq { min-height: 32px; padding: 0 12px; font-size: .8rem; }
.config-condominio .marcar { min-height: 32px; font-size: .86rem; }
.config-condominio .mudo, .config-condominio .pequeno, .config-condominio .ajuda { font-size: .76rem; }
.config-condominio .config-faixa, .config-condominio .grade-saloes { gap: 14px; }
.config-condominio .form-salao + .form-salao { margin-top: 10px; padding-top: 10px; }
.config-condominio .escolha { padding: 7px 10px; }
.config-condominio .escolha strong { font-size: .9rem; }
.config-condominio .escolha small { font-size: .78rem; }
.config-condominio .previa-marca { min-height: 90px; }
.config-condominio .previa-marca img, .config-condominio .previa-marca.foto img { max-height: 120px; }
/* bombas: plaquetas menores, mais por linha */
.config-condominio .plaquetas-motor { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 12px; }
.config-condominio .plaqueta-motor { gap: 7px 10px; padding: 0 14px 12px; }
.config-condominio .plaqueta-faixa { margin: 10px 4px 2px; padding: 7px 12px; }
.config-condominio .plaqueta-faixa strong { font-size: .92rem; }
.config-condominio .plaqueta-faixa span { font-size: .78rem; }
.config-condominio .placa-campo > span { font-size: .78rem; }
.config-condominio .placa-campo input, .config-condominio .placa-campo select { min-height: 32px; padding: 4px 8px; font-size: .9rem; }
.config-condominio .controlador-cab h3 { font-size: 1.05rem; }
.config-condominio .grupo-controlador + .grupo-controlador { margin-top: 18px; }
.abas-portaria.abas-config { margin-bottom: 14px; }
.abas-portaria.abas-config button { min-height: 34px; padding: 0 14px; font-size: .9rem; gap: 6px; }
.abas-portaria.abas-config button svg { width: 15px; height: 15px; }
/* um cartão só (tags): não estica na largura toda */
.config-condominio .config-faixa:has(> .config-cartao:only-child) { grid-template-columns: minmax(0, 360px); }
/* Faixa de cartões compactos em cima, tela inicial e bombas em largura total embaixo. */
.config-condominio { display: grid; gap: 18px; }
.config-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr)); gap: 18px; align-items: stretch; }
/* na faixa, todos os cartões começam na mesma linha (sem o espaço de .painel + .painel) */
.config-faixa > .painel + .painel { margin-top: 0; }
.config-cartao { display: flex; flex-direction: column; }
.config-form { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.config-form > .acoes { margin-top: auto; padding-top: 10px; }
.config-cartao .campo input[type=number] { max-width: 9em; }
.escolhas-topo { display: grid; gap: 8px; margin-bottom: 6px; }
.escolha { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cat-linha); background: var(--superficie); cursor: pointer; }
.escolha:has(input:checked) { border-color: var(--cat); box-shadow: inset 4px 0 0 var(--cat); }
.escolha:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.escolha input { margin-top: 3px; accent-color: var(--cat); }
.escolha strong { display: block; font-size: .95rem; }
.escolha small { color: var(--texto-2); }
.previa-marca { position: relative; display: grid; place-items: center; min-height: 112px; border-radius: var(--raio); overflow: hidden; background: var(--superficie-2); border: 1px dashed var(--cat-linha, var(--linha)); cursor: pointer; text-align: center; padding: 8px; }
.previa-marca:hover, .previa-marca:focus-within { border-color: var(--cat); border-style: solid; }
.previa-marca img { display: block; max-width: 100%; max-height: 150px; object-fit: contain; }
.previa-marca.foto img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; }
.previa-marca .mudo { font-size: .85rem; }
.arquivo-oculto { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn-mini:disabled { opacity: .35; cursor: default; }
/* bombas d'água: cada ficha é uma plaqueta de identificação de motor (metal escovado, parafusos, faixa gravada) */
.config-bombas > h2 { display: flex; align-items: center; gap: 10px; color: #2f5d73; }
.config-bombas .cat-icone { background: #2f5d73; }
.config-bombas > p.mudo { max-width: 72ch; margin-bottom: 14px; }
.plaquetas-motor { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }
.plaqueta-motor {
--metal-1: #eef1f4; --metal-2: #d5dbe1; --gravado: #1d3440; --rotulo: #4a5c68;
position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 0 18px 16px;
border-radius: 10px; border: 1px solid #a9b4be;
background:
radial-gradient(circle at 12px 12px, #8b97a2 0 3px, #f6f8fa 3.6px 4.5px, transparent 5px),
radial-gradient(circle at calc(100% - 12px) 12px, #8b97a2 0 3px, #f6f8fa 3.6px 4.5px, transparent 5px),
radial-gradient(circle at 12px calc(100% - 12px), #8b97a2 0 3px, #f6f8fa 3.6px 4.5px, transparent 5px),
radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8b97a2 0 3px, #f6f8fa 3.6px 4.5px, transparent 5px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, rgba(0, 0, 0, .025) 1px 3px),
var(--metal-1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 4px rgba(255, 255, 255, .25), 0 6px 18px rgba(15, 23, 42, .12);
}
.plaqueta-faixa { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin: 14px 8px 4px; padding: 10px 14px; border-radius: 6px; background: var(--gravado); color: #e8f0f3; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.plaqueta-faixa strong { font-size: 1.05rem; letter-spacing: .02em; }
.plaqueta-faixa span { font-size: .82rem; color: #a9c2cc; }
.placa-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.placa-campo.largo { grid-column: 1 / -1; }
.placa-campo > span { font-size: .78rem; font-weight: 700; color: var(--rotulo); }
.placa-campo input, .placa-campo select {
width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 6px; border: 1px solid #9eabb6; background: rgba(255, 255, 255, .78);
color: var(--gravado); font: inherit; font-weight: 700; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}
/* a placa mantém o foco próprio (contorno), com especificidade maior que o realce geral dos campos */
.placa-campo input:is(:focus):not([type=checkbox]):not([type=radio]):not([type=file]), .placa-campo select:focus {
outline: 2px solid #2f5d73; outline-offset: 1px; background: #fff; border-color: #9eabb6; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}
.placa-campo.com-erro input, .placa-campo.com-erro select { border-color: var(--perigo); outline-color: var(--perigo); }
.placa-campo.com-erro input:is(:focus):not([type=checkbox]):not([type=radio]):not([type=file]), .placa-campo.com-erro select:focus { border-color: var(--perigo); outline-color: var(--perigo); }
.com-unidade { position: relative; }
.com-unidade input { padding-right: 46px; }
.com-unidade i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .8rem; font-weight: 700; color: var(--rotulo); pointer-events: none; }
.placa-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 4px; }
.nota-vazia { padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); color: var(--texto-2); border: 1px dashed var(--linha); }
:root[data-modo="escuro"] .config-bombas > h2 { color: #8fc3d6; }
:root[data-modo="escuro"] .plaqueta-motor { --metal-1: #3a4651; --metal-2: #26313b; --gravado: #0d1a21; --rotulo: #b9c7d1; border-color: #4f5d69; }
:root[data-modo="escuro"] .placa-campo input, :root[data-modo="escuro"] .placa-campo select { background: rgba(10, 20, 26, .55); color: #e8f0f3; border-color: #5b6a76; }
@media (max-width: 420px) {
.plaqueta-motor { grid-template-columns: 1fr; padding: 0 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .escolha { transition: none; } }
/* ---------- condomínio: logo acima do menu, escolha de condomínio ---------- */
.cena-logo .logo-condominio { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10px; background: var(--branco); }
.cena-logo .nome-condominio { display: grid; place-items: center; height: 100%; padding: 10px; text-align: center; font-family: var(--cursiva); font-size: 1.5rem; line-height: 1.1; color: var(--agua-claro); }
.topo-movel .cena-logo .nome-condominio { font-size: .8rem; padding: 4px; }
.topo-movel .cena-logo .logo-condominio { padding: 4px; }
.menu .rodape .pequeno { margin-top: 2px; opacity: .8; }
.login-selo.com-logo { background: #fff; padding: 6px; }
.login-selo.com-logo img { width: 100%; height: 100%; object-fit: contain; }
.lista-condominios { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.escolha-condominio {
display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 18px; cursor: pointer; text-align: left;
border: 1.5px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--sobre-cor); font: inherit; transition: background-color .15s ease, border-color .15s ease;
}
.escolha-condominio:hover { background: rgba(255, 255, 255, .16); border-color: var(--agua-claro); }
.escolha-condominio.atual { border-color: var(--agua-claro); }
.escolha-logo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; background: #fff; color: var(--petroleo-2); }
.escolha-logo img { width: 100%; height: 100%; object-fit: contain; }
.escolha-logo svg { width: 24px; height: 24px; }
.escolha-nome { flex: 1; min-width: 0; font-weight: 700; font-size: 1.02rem; }
.escolha-nome small { display: block; font-weight: 600; font-size: .78rem; color: var(--agua-claro); }
.escolha-condominio .seta { transform: rotate(180deg); opacity: .7; }
/* ---------- Minha conta: aparência (tema e claro/escuro) ---------- */
.painel-aparencia .rotulo-escolha { margin: 4px 0 8px; font-size: .875rem; font-weight: 500; color: var(--texto-2); }
.escolha-tema { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.opcao-tema {
display: grid; justify-items: center; gap: 5px; padding: 7px 0; min-height: 44px; border: 2px solid transparent; border-radius: var(--raio);
background: transparent; color: var(--texto); font-size: .75rem; font-weight: 500; cursor: pointer; transition: border-color var(--rapido) ease, background-color var(--rapido) ease;
}
.opcao-tema:hover { background: var(--superficie-2); }
.opcao-tema[aria-pressed="true"] { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 8%, transparent); }
.opcao-tema:focus-visible, .opcao-modo:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.amostra-tema { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 2px 6px rgba(0, 0, 0, .18); }
.escolha-modo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; margin-bottom: 8px; border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--borda-campo); }
.opcao-modo {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 10px;
background: transparent; color: var(--texto-2); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
.opcao-modo[aria-pressed="true"] { background: color-mix(in srgb, var(--destaque) 14%, transparent); color: var(--destaque); }
.painel-aparencia .ajuda { margin: 0; }
.escolha-fundo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amostra-fundo { width: 34px; height: 22px; border-radius: 6px; border: 1px solid var(--linha); background-color: var(--superficie); }
.amostra-fundo.f-papel { background: var(--grao-papel), color-mix(in srgb, var(--primaria) 9%, var(--superficie));
border-color: color-mix(in srgb, var(--primaria) 25%, var(--linha)); }
/* ---------- fundo "papel do tema" (Minha conta): grão de papel leve sobre um toque da cor do tema, só nos painéis ----------
Campos, botões e tabelas continuam lisos (têm fundo próprio). :where() deixa a regra com o peso de ".painel": os painéis
com fundo especial (regra mais específica) continuam como são. No escuro o grão é claro. */
:root { --grao-papel: url("data:image/svg+xml;utf8,"); }
:root[data-modo="escuro"] { --grao-papel: url("data:image/svg+xml;utf8,"); }
:where(:root[data-fundo="papel"]) .painel {
background: var(--grao-papel), color-mix(in srgb, var(--primaria) 5%, var(--superficie));
border-color: color-mix(in srgb, var(--primaria) 18%, var(--linha));
}
:where(:root[data-fundo="papel"][data-modo="escuro"]) .painel { background: var(--grao-papel), color-mix(in srgb, var(--primaria) 7%, var(--superficie)); }
/* ---------- menu lateral mais compacto: as opções mais juntas e o "Sair" sempre à vista ---------- */
@media (min-width: 861px) {
.menu { padding: 14px 12px 0; gap: 2px; }
.menu a { min-height: 36px; padding: 7px 12px; font-size: .92rem; gap: 11px; }
.menu a svg { width: 18px; height: 18px; }
.menu a.marca { padding: 2px 4px 12px; margin: 0 0 8px; }
/* o rodapé (nome, unidade e Sair) fica preso embaixo, mesmo quando o menu precisa rolar */
.menu .rodape {
position: sticky; bottom: 0; margin-top: auto; padding: 14px 12px 14px; font-size: .82rem; line-height: 1.35;
background: var(--petroleo-3); box-shadow: 0 -10px 14px -4px var(--petroleo-3); border-top: 1px solid rgba(255, 255, 255, .08);
}
.menu .rodape button { margin-top: 6px; }
.menu .rodape .link { font-size: 1rem; font-weight: 700; }
}
/* ---------- tela inicial: o véu volta; a sombra das letras reforça a leitura ---------- */
.capa-saudacao p, .capa-saudacao .data, .capa-versao { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 14px rgba(0, 0, 0, .35); }
.conteudo .capa-frase { text-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 0 22px rgba(0, 0, 0, .45); }
.capa-marca { text-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 0 18px rgba(0, 0, 0, .4); }
/* ---------- Prestação de contas compacta; gráfico ampliado no tamanho da página ---------- */
.tela-financas .cabecalho-tela { margin-bottom: 12px; }
.tela-financas .grade.g4 { gap: 12px; }
.tela-financas .numero { padding: 10px 14px; }
.tela-financas .numero span { font-size: .8rem; }
.tela-financas .numero b { font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: 2px; }
.tela-financas .espaco-topo { margin-top: 14px; }
.tela-financas .grade.g2 { gap: 14px; }
.tela-financas .painel { padding: 14px 16px; }
.tela-financas .painel h2 { font-size: 1rem; margin-bottom: 2px; }
.tela-financas .grafico { height: 220px; cursor: zoom-in; }
.tela-financas table th, .tela-financas table td { padding: 7px 10px; font-size: .88rem; }
.cab-grafico { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.cab-grafico .btn svg { width: 15px; height: 15px; }
dialog.dialogo-grafico { width: min(96vw, 1400px); max-width: none; height: min(90vh, 900px); max-height: none; }
dialog.dialogo-grafico .corpo { height: 100%; box-sizing: border-box; padding: 16px 18px; }
.grafico-ampliado { display: flex; flex-direction: column; height: 100%; }
.grafico-ampliado header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.grafico-ampliado h2 { margin: 0; font-size: 1.15rem; }
.grafico-grande { position: relative; flex: 1; min-height: 0; }
/* ---------- menu lateral em grupos ----------
Cada opção com o ícone num quadrado arredondado; a aberta acende o quadrado e ganha um degradê. Os grupos
(o condomínio, gestão, você) têm um título discreto. Embaixo, um cartão com as iniciais, o nome e o botão Sair. */
.icone-menu { display: inline-grid; place-items: center; flex: none; }
@media (min-width: 861px) {
.grupo-menu { display: grid; gap: 2px; }
.grupo-menu + .grupo-menu { margin-top: 8px; }
.titulo-grupo { padding: 2px 10px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--menu-rodape); opacity: .8; }
.menu a:not(.marca) { min-height: 35px; padding: 3px 8px; gap: 10px; border-radius: 11px; font-size: .9rem; transition: background-color .2s ease, color .2s ease; }
/* ícones numa cor só (a do texto): a cor do menu fica para a página aberta e para os avisos (DESIGN_SYSTEM.md §6).
O quadradinho tem um leve relevo para o menu ganhar textura sem ganhar cor. */
.icone-menu {
width: 32px; height: 32px; border-radius: var(--raio-p);
background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .05));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .08);
transition: background-color .2s ease, background-image .2s ease, box-shadow .2s ease, color .2s ease;
}
.menu a .icone-menu svg { width: 22px; height: 22px; opacity: .9; }
.menu a:not(.marca):hover { background: rgba(255, 255, 255, .05); }
/* ao passar o mouse, o quadradinho acende de leve na cor da página aberta: uma prévia de "abrir" */
.menu a:not(.marca):hover .icone-menu { background: rgba(var(--agua-claro-rgb), .22); box-shadow: inset 0 0 0 1px rgba(var(--agua-claro-rgb), .45); color: var(--sobre-cor); }
/* o selo de aviso (vermelho, com o número) fica na ponta direita, como um contador */
.menu a .selo { margin-left: auto; }
.menu a[aria-current="page"] {
box-shadow: none; color: #fff;
background: linear-gradient(90deg, rgba(var(--agua-claro-rgb), .24), rgba(var(--agua-claro-rgb), .04) 85%);
}
.menu a[aria-current="page"] .icone-menu { background: var(--agua-claro); color: var(--petroleo-3); box-shadow: 0 4px 14px rgba(var(--agua-claro-rgb), .4); }
.menu a[aria-current="page"] .icone-menu svg { opacity: 1; }
/* rodapé: cartão da pessoa, com as iniciais e o Sair */
.menu .rodape { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding-top: 10px; padding-bottom: 10px; }
.avatar-menu {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: .85rem; font-weight: 700; color: var(--petroleo-3);
background: linear-gradient(145deg, var(--agua-claro), var(--agua)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}
.quem-menu { min-width: 0; }
.quem-menu > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .rodape .sair-menu { margin-top: 0; }
.sair-menu {
display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 0; min-height: 34px; padding: 0 10px;
border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--agua-claro);
font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.sair-menu:hover { background: rgba(var(--agua-claro-rgb), .16); border-color: var(--agua-claro); }
}
/* no celular, a barra de baixo continua como antes: os grupos se desfazem e os títulos somem */
@media (max-width: 860px) {
.grupo-menu { display: contents; }
.titulo-grupo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .menu a, .icone-menu { transition: none; } }
/* ---------- tela inicial: entrada dos textos sobre a foto, toda vez que a tela abre ----------
A saudação entra pela esquerda, linha por linha; o nome do condomínio aparece desfocando; a frase pousa letra por
letra, como folhas do jardim, saindo de um leve desfoque; por fim a linha embaixo da frase se abre do centro. */
.capa-inicio .capa-saudacao { animation: none; }
.capa-inicio .capa-saudacao p { animation: deslizar-entrada .8s cubic-bezier(.2, .7, .2, 1) both; }
.capa-inicio .capa-saudacao p:nth-child(1) { animation-delay: .2s; }
.capa-inicio .capa-saudacao p:nth-child(2) { animation-delay: .35s; }
.capa-inicio .capa-saudacao p:nth-child(3) { animation-delay: .5s; }
.capa-inicio .capa-corpo > * { animation: none; }
.capa-inicio .capa-marca { animation: marca-entrada 1.3s cubic-bezier(.2, .7, .2, 1) .35s both; }
/* o desfoque fica no h1 inteiro (uma camada só; desfocar letra por letra pesaria no celular) */
.capa-inicio h1.capa-frase { animation: frase-foco 1.6s ease-out .95s both; }
.capa-inicio h1.capa-frase.esperando-fonte, .capa-inicio h1.capa-frase.esperando-fonte .letra, .capa-inicio h1.capa-frase.esperando-fonte::after { animation-play-state: paused; }
.capa-inicio .capa-frase .palavra { display: inline-block; white-space: nowrap; } /* a palavra nunca quebra no meio */
.capa-inicio .capa-frase .letra { display: inline-block; transform-origin: 50% 100%; animation: letra-pousar .7s cubic-bezier(.22, 1, .36, 1) both; }
.capa-inicio .capa-frase::after { animation: linha-entrada .9s cubic-bezier(.2, .7, .2, 1) var(--fim-frase, 1.8s) both; }
@keyframes deslizar-entrada { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes marca-entrada { from { opacity: 0; filter: blur(12px); transform: scale(.94); } to { opacity: 1; filter: none; transform: none; } }
@keyframes letra-pousar { 0% { opacity: 0; transform: translate(.18em, -.45em) rotate(-14deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes frase-foco { from { filter: blur(3px); } to { filter: none; } }
@keyframes linha-entrada { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.capa-inicio .capa-saudacao p, .capa-inicio .capa-marca, .capa-inicio h1.capa-frase, .capa-inicio .capa-frase .letra, .capa-inicio .capa-frase::after { animation: none; }
}
/* ---------- reservas: o primeiro salão (Espaço Bela Vista) num azul claro ---------- */
/* ---------- bombas (Configurações): plaqueta lisa, sem a textura de metal; título na cor do controlador ---------- */
.config-condominio .plaqueta-motor {
--rotulo: var(--texto-2); --gravado: var(--texto);
background: var(--superficie); border: 1px solid var(--cat-linha, var(--linha)); border-radius: var(--raio);
box-shadow: var(--sombra);
}
.config-condominio .plaqueta-faixa {
flex-direction: row; align-items: baseline; justify-content: space-between; margin: 0 -14px 4px; padding: 9px 14px;
border-radius: 13px 13px 0 0; background: var(--cat, var(--petroleo-2)); color: #fff; box-shadow: none;
}
.config-condominio .grupo-controlador .plaqueta-faixa { box-shadow: none; }
.config-condominio .plaqueta-faixa span { color: rgba(255, 255, 255, .85); }
.config-condominio .placa-campo input, .config-condominio .placa-campo select {
background: var(--superficie); color: var(--texto); border-color: var(--linha); box-shadow: none; font-weight: 600;
}
.config-condominio .placa-campo input:is(:focus):not([type=checkbox]):not([type=radio]):not([type=file]), .config-condominio .placa-campo select:focus {
outline: 2px solid var(--cat, var(--agua)); background: var(--superficie); border-color: var(--linha); box-shadow: none;
}
.config-condominio .placa-campo.com-erro :is(input, select), .config-condominio .placa-campo.com-erro select:focus,
.config-condominio .placa-campo.com-erro input:is(:focus):not([type=checkbox]):not([type=radio]):not([type=file]) { border-color: var(--perigo); outline-color: var(--perigo); }
.config-condominio .com-unidade i { color: var(--texto-2); }
:root[data-modo="escuro"] .config-condominio .plaqueta-faixa { color: var(--tinta-sobre-claro, #0d1a21); }
:root[data-modo="escuro"] .config-condominio .plaqueta-faixa span { color: rgba(13, 26, 33, .75); }
/* ---------- Configurações → Acessos: a tabela de opções do menu por perfil ----------
Cada perfil é uma coluna com um crachá no topo (a fenda do cordão, o ícone, o nome e quantas opções estão
liberadas); cada cruzamento é uma chave que, ligada, mostra uma chave na cor do perfil e, desligada, um cadeado. */
.painel-acessos { padding: 18px 18px 0; overflow: hidden; }
.acessos-cab h2 { margin: 0 0 4px; font-size: 1.15rem; }
.acessos-cab p { max-width: 70ch; margin: 0 0 14px; }
.tabela-acessos-rolagem { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.tabela-acessos { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 620px; }
.tabela-acessos .perfil-morador { --perfil: #1a8a7c; --perfil-fundo: rgba(26, 138, 124, .09); }
.tabela-acessos .perfil-porteiro { --perfil: #2f6fb3; --perfil-fundo: rgba(47, 111, 179, .09); }
.tabela-acessos .perfil-admin { --perfil: #b5862a; --perfil-fundo: rgba(181, 134, 42, .11); }
:root[data-modo="escuro"] .tabela-acessos .perfil-morador { --perfil: #5fd1c1; }
:root[data-modo="escuro"] .tabela-acessos .perfil-porteiro { --perfil: #7fb2f0; }
:root[data-modo="escuro"] .tabela-acessos .perfil-admin { --perfil: #e6be6a; }
/* o crachá */
.tabela-acessos thead th { padding: 0 6px 12px; vertical-align: bottom; }
.cracha { width: 22%; }
.cracha > * { display: block; }
.tabela-acessos th.cracha {
position: relative; text-align: center; padding: 22px 12px 12px;
background: linear-gradient(180deg, var(--perfil-fundo), transparent 85%), var(--superficie);
border: 1px solid color-mix(in srgb, var(--perfil) 30%, transparent); border-bottom: 0; border-radius: 18px 18px 0 0;
box-shadow: inset 0 4px 0 var(--perfil);
}
.cracha-fenda { position: absolute; left: 50%; top: 9px; width: 34px; height: 6px; margin-left: -17px; border-radius: 4px; background: var(--fundo); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.cracha-icone { display: grid !important; place-items: center; width: 42px; height: 42px; margin: 4px auto 6px; border-radius: 50%; background: var(--perfil); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--perfil) 35%, transparent); }
:root[data-modo="escuro"] .cracha-icone { color: #0d1a21; }
.cracha strong { font-family: var(--serifa); font-size: 1.05rem; color: var(--perfil); }
.cracha small { font-size: .75rem; font-weight: 500; color: var(--texto-2); }
.cracha-conta { margin-top: 8px; display: inline-block !important; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--perfil); background: var(--perfil-fundo); font-variant-numeric: tabular-nums; }
/* as linhas */
.tabela-acessos tbody th, .tabela-acessos tbody td { padding: 8px 10px; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela-acessos tbody td { text-align: center; background: color-mix(in srgb, var(--perfil-fundo) 55%, transparent); }
.tabela-acessos tbody tr:hover td, .tabela-acessos tbody tr:hover th { background-color: rgba(var(--agua-rgb), .05); }
.tabela-acessos .col-opcao { text-align: left; width: 34%; }
.tabela-acessos tbody th { font-weight: 400; }
.opcao { display: flex; align-items: center; gap: 10px; }
.opcao-icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--superficie-2); color: var(--destaque); box-shadow: inset 0 0 0 1px var(--linha); }
.opcao-texto { display: grid; min-width: 0; }
.opcao-texto b { font-size: .9rem; }
.opcao-texto small { font-size: .75rem; color: var(--texto-2); }
.tabela-acessos tr.sem-modulo { opacity: .5; }
.selo-fixo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--perfil); background: var(--perfil-fundo); }
.sem-acesso { color: var(--texto-2); opacity: .6; }
/* a chave: trilho com um botão que leva a chave (ligada, na cor do perfil) ou o cadeado (desligada) */
.chave-acesso { position: relative; display: inline-block; cursor: pointer; }
.chave-acesso input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trilho-acesso {
display: block; width: 54px; height: 30px; border-radius: 999px; background: var(--superficie-2);
box-shadow: inset 0 0 0 1.5px var(--linha), inset 0 2px 4px rgba(0, 0, 0, .06); transition: background-color .25s ease, box-shadow .25s ease;
}
.botao-acesso {
position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
background: var(--superficie); color: var(--texto-2); box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), color .25s ease;
}
.botao-acesso > span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .2s ease, transform .25s ease; }
.ic-ligado { opacity: 0; transform: rotate(-60deg) scale(.6); }
.chave-acesso input:checked + .trilho-acesso { background: var(--perfil); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--perfil) 70%, #000); }
.chave-acesso input:checked + .trilho-acesso .botao-acesso { transform: translateX(24px); color: var(--perfil); }
.chave-acesso input:checked + .trilho-acesso .ic-ligado { opacity: 1; transform: none; }
.chave-acesso input:checked + .trilho-acesso .ic-desligado { opacity: 0; transform: scale(.6); }
.chave-acesso input:focus-visible + .trilho-acesso { outline: 3px solid rgba(var(--agua-rgb), .55); outline-offset: 2px; }
/* a barra de salvar: presa embaixo do painel, acende quando há alterações */
.barra-acessos {
position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin: 6px -18px 0; padding: 12px 18px;
background: var(--superficie); border-top: 1px solid var(--linha);
}
.acessos-estado { margin-right: auto; font-size: .84rem; color: var(--texto-2); }
.barra-acessos[data-mudou="true"] { background: linear-gradient(90deg, rgba(var(--agua-rgb), .12), var(--superficie) 70%); }
.barra-acessos[data-mudou="true"] .acessos-estado { color: var(--destaque); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .trilho-acesso, .botao-acesso, .botao-acesso > span { transition: none; } }
@media (max-width: 640px) {
.tabela-acessos { min-width: 520px; }
.cracha small { display: none !important; }
.opcao-texto small { display: none; }
}
/* ---------- finanças: grupos de despesa e orçamento (Configurações) e despesas por grupo (balancete) ---------- */
.grade-financas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.grade-financas > .painel + .painel { margin-top: 0; }
.lista-grupos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: grupo; }
.lista-grupos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
/* linha com um campo a mais entre o nome e os botões (destaque do grupo, tipo da conta); no celular ele desce para baixo do nome */
.lista-grupos.com-extra li { grid-template-columns: minmax(0, 1fr) auto auto; }
.lista-grupos .item-extra { white-space: nowrap; }
.lista-grupos select.item-extra { width: auto; }
.lista-grupos .marcar.item-extra { min-height: 40px; }
.form-conta input { flex: 1 1 12em; width: auto; }
.form-conta select { flex: 0 1 auto; width: auto; }
@media (max-width: 560px) {
.lista-grupos.com-extra { gap: 8px; }
.lista-grupos.com-extra li { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 8px; border-bottom: 1px solid var(--cat-linha, var(--linha)); }
.lista-grupos.com-extra li:last-child { padding-bottom: 0; border-bottom: 0; }
.lista-grupos.com-extra .item-extra { grid-column: 1 / -1; grid-row: 2; }
.lista-grupos.com-extra .marcar.item-extra { min-height: 28px; }
}
.grupo-acoes { display: flex; gap: 4px; }
.grupo-acoes .btn-mini { width: 30px; height: 30px; }
.btn-mini .seta-cima { transform: rotate(90deg); }
.btn-mini .seta-baixo { transform: rotate(-90deg); }
.btn-mini:disabled { opacity: .35; cursor: default; }
.linhas-orcamento { display: grid; gap: 6px; margin-top: 4px; }
.linha-orcamento { display: grid; grid-template-columns: minmax(0, 1fr) 11em; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; }
.linha-orcamento input { text-align: right; }
.total-orcamento { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--cat-linha, var(--linha)); text-align: right; font-size: .9rem; }
.total-orcamento b { font-size: 1.05rem; color: var(--cat, var(--destaque)); }
input.calculado { background: var(--superficie-2); color: var(--destaque); font-weight: 700; }
@media (max-width: 900px) { .grade-financas { grid-template-columns: 1fr; } }
/* ---------- barra do período (Configurações → Finanças e Lançar balancete): linhas, seletor com setas e meses ---------- */
.barra-periodo-linha { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
/* barra do período (Configurações → Finanças e Lançar balancete): rosado suave da paleta (.cor-4), com o fundo no tom claro,
borda no tom da cor e faixa forte à esquerda; destaca sem pesar. Funciona nos temas claro e escuro (tokens --cat-*);
diferente do âmbar do foco e das cores das abas. Textos nas cores padrão (contraste ≥ 4,5:1) */
.barra-periodo.cor-4 { background: var(--cat-fundo); border-color: var(--cat-linha); border-left: 6px solid var(--cat-forte); color: var(--texto); box-shadow: 0 1px 3px rgba(168, 68, 95, .12); }
.barra-periodo.cor-4 :is(.barra-periodo-titulo, .barra-periodo-meses) { color: var(--texto); }
.barra-periodo.cor-4 .barra-periodo-titulo { color: var(--cat-forte); }
:root[data-modo="escuro"] .barra-periodo.cor-4 .barra-periodo-titulo { color: var(--cat); }
.barra-periodo.cor-4 .barra-periodo-meses { font-weight: 600; }
.barra-periodo.cor-4 .barra-periodo-seletor select { font-weight: 700; }
.barra-periodo-titulo { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.barra-periodo-seletor { display: inline-flex; align-items: center; gap: 4px; }
.barra-periodo-seletor select { width: auto; min-width: 8.5em; }
.barra-periodo-meses { font-size: .875rem; color: var(--texto-2); }
.barra-periodo .ajuda { margin: 0; }
.btn-mini .seta-direita { transform: rotate(180deg); }
.estado-salvo svg { flex: none; }
.estado-salvo .link { padding: 0; font-size: inherit; color: inherit; }
/* ---------- Configurações → Finanças em tela cheia: o período vale para a tela toda ---------- */
/* três abas, cada uma com a sua cor (.cor-N): selecionada = fundo cheio no tom forte e texto branco (≥ 4,5:1), nos dois temas */
.fin-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); margin: 0 0 var(--esp-4); }
.fin-aba {
display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; text-align: left; font: inherit; color: var(--texto);
background: var(--superficie); border: 1px solid var(--cat-linha); border-radius: var(--raio); box-shadow: inset 0 -4px 0 var(--cat); cursor: pointer;
transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
.fin-aba:hover { background: var(--cat-fundo); }
.fin-aba:focus-visible { outline: 3px solid var(--foco-borda); outline-offset: 2px; }
.fin-aba-icone { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--raio-p); background: var(--cat-fundo); color: var(--cat); }
.fin-aba-texto { display: grid; gap: 2px; min-width: 0; }
.fin-aba-texto strong { font-size: .95rem; font-weight: 700; }
.fin-aba-texto small { font-size: .78rem; color: var(--texto-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-aba[aria-selected="true"] { background: var(--cat-forte); border-color: var(--cat-forte); color: #fff; box-shadow: none; }
.fin-aba[aria-selected="true"] .fin-aba-icone { background: rgba(255, 255, 255, .22); color: #fff; }
.fin-aba[aria-selected="true"] .fin-aba-texto small { color: #fff; }
.fin-aba[aria-selected="true"]:focus-visible { outline-color: var(--cat-forte); }
/* painel de cada aba: faixa no topo na cor da área */
.fin-painel-aba { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.fin-painel-aba[hidden] { display: none; }
.fin-config :is(.fin-painel-aba, .fin-leitura-pdf) > .painel { margin-top: 0; border-top: 4px solid var(--cat-forte); }
/* leitura do PDF: cabeçalho da seção e, abaixo, dois painéis de cores diferentes (textos procurados e nomes de grupos e contas) */
.fin-leitura-pdf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.fin-pdf-topo h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.05rem; }
.fin-pdf-topo p { margin: 0 0 var(--esp-3); }
/* resumo no topo do painel: números principais da aba */
.fin-resumo { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin: 0 0 var(--esp-3); }
.fin-resumo > div { flex: 1 1 150px; min-width: 0; padding: 8px 12px; border-radius: var(--raio-p); background: var(--cat-fundo); border: 1px solid var(--cat-linha); }
.fin-resumo span { display: block; font-size: .74rem; font-weight: 600; color: var(--texto); }
.fin-resumo b { display: block; margin-top: 2px; font-size: 1.1rem; color: var(--texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* grades das três abas: listrado leve, uma linha sim e outra não, no tom da cor da aba (--cat a 8%); o foco da linha (--foco-linha, nos | ) continua por cima */
.fin-config .tabela-edicao tbody tr:not(.fin-vazio):nth-child(even) { background: color-mix(in srgb, var(--cat) 8%, var(--superficie)); }
.fin-config .tabela-edicao tbody tr:not(.fin-vazio):hover { background: color-mix(in srgb, var(--cat) 15%, var(--superficie)); }
.fin-leitura-pdf .tabela-edicao { width: 100%; }
.fin-leitura-pdf .tabela-edicao td { overflow-wrap: anywhere; }
.fin-leitura-pdf .tabela-edicao td select { width: 100%; min-width: 12em; }
.fin-leitura-pdf .fin-texto-pdf { font-weight: 500; }
/* coluna Tipo ("Grupo", "Fundo" ou "Conta"): larga o bastante para o texto ficar numa linha só */
.fin-leitura-pdf .tabela-edicao :is(td, th).fin-tipo { white-space: nowrap; width: 1%; min-width: 6.5em; }
/* Lançar balancete: total das entradas a crédito (saldo anterior + receitas + transferências recebidas) */
.lanc-entradas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: var(--esp-3) 0 4px; padding: 10px 0; border-block: 1px solid var(--linha); font-weight: 700; }
.lanc-entradas b { font-variant-numeric: tabular-nums; }
.lanc-entradas-ajuda { margin: 0 0 var(--esp-3); }
/* computador: orçamento à esquerda e prestação de contas à direita; na leitura do PDF, textos e nomes lado a lado */
@media (min-width: 1100px) {
.fin-painel-aba.fin-duas { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); }
.fin-leitura-pdf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fin-pdf-topo { grid-column: 1 / -1; }
}
/* celular: as abas rolam de lado, uma de cada vez em destaque */
@media (max-width: 600px) {
.fin-abas { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.fin-abas::-webkit-scrollbar { display: none; }
.fin-aba { flex: 0 0 78%; scroll-snap-align: start; }
}
.fin-aviso {
display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--esp-4); padding: 12px 16px; border-radius: var(--raio-p);
border: 1px solid color-mix(in srgb, var(--atencao) 40%, transparent); background: color-mix(in srgb, var(--atencao) 10%, var(--superficie)); color: var(--texto);
}
.fin-aviso svg { flex: none; color: var(--atencao-texto); }
.fin-config .tabela-edicao th { white-space: nowrap; }
.fin-config .tabela-edicao :is(td, th):is(.fin-ordem, .fin-excluir, .fin-marca) { width: 1%; white-space: nowrap; }
.fin-config .tabela-edicao :is(td, th).fin-marca { text-align: center; }
.fin-config .tabela-edicao td.fin-marca .marcar { justify-content: center; min-height: 36px; }
.fin-config .tabela-edicao td.fin-previsto { width: 11em; }
.fin-config .tabela-edicao td.fin-ordem, .fin-config .tabela-edicao td.fin-excluir { padding-left: 4px; padding-right: 4px; }
.fin-config .tabela-edicao select { width: auto; max-width: 100%; }
.fin-nome-cel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-nome-cel input { flex: 1; min-width: 8em; }
.fin-config .tabela-edicao tfoot td { font-weight: 700; border-bottom: 0; }
.fin-config .tabela-edicao .fin-total-rotulo { text-align: right; }
/* fora de uso no período: esmaecido, menos a caixa "Em uso", que é a ação certa */
.fin-config tr.fora-de-uso td:not(.fin-uso) > * { opacity: .6; }
.fin-fora { margin-top: var(--esp-3); }
.fin-fora > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-weight: 500; color: var(--destaque); }
.fin-fora > summary:focus-visible { outline: 2px solid var(--foco-borda); outline-offset: 2px; border-radius: var(--raio-p); }
.fin-erro { margin: 2px 0 0; white-space: normal; text-align: left; }
.fin-parametro { margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.fin-parametro h3 { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.fin-parametro p { margin: 0 0 6px; }
.form-conta .fin-erro { flex-basis: 100%; }
/* celular: cada linha vira um cartão (nome e setas no topo, "excluir" no fim), toques de 40 px */
@media (max-width: 600px) {
.fin-config .tabela-edicao tbody tr:not(.fin-vazio) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.fin-config .tabela-edicao tbody td { grid-column: 1 / -1; width: auto; flex-wrap: wrap; }
.fin-config .tabela-edicao td.fin-nome { grid-column: 1; grid-row: 1; }
.fin-config .tabela-edicao td.fin-ordem { grid-column: 2; grid-row: 1; width: auto; }
.fin-config .tabela-edicao td.fin-nome input { max-width: none; }
.fin-config .tabela-edicao td.fin-excluir { justify-content: flex-end; }
.fin-config .tabela-edicao td.fin-excluir:empty { display: none; }
.fin-config .tabela-edicao td.fin-previsto { width: auto; }
.fin-config .tabela-edicao td.fin-marca .marcar { min-height: 40px; }
.fin-config .tabela-edicao tfoot { display: block; }
.fin-config .tabela-edicao tfoot tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fin-config .tabela-edicao tfoot td { display: block; height: auto; width: auto; }
.fin-config .tabela-edicao tfoot td:empty { display: none; }
.fin-config .grupo-acoes .btn-mini, .fin-config .fin-excluir .btn-mini, .barra-periodo-seletor .btn-mini { width: 40px; height: 40px; }
.fin-erro { flex-basis: 100%; }
}
/* ---------- Finanças → Lançar balancete (tela de digitação, DESIGN_SYSTEM.md §11) ---------- */
/* fileira dos 12 meses: estado com ícone e texto (o texto curto some quando a tela é estreita; o leitor de tela lê o aria-label) */
.fileira-meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; flex: 1 1 100%; }
.mes {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 48px; min-width: 0; padding: 4px 2px; border: 1px solid var(--linha); border-radius: var(--raio-p);
background: var(--superficie); color: var(--texto); cursor: pointer;
}
.mes:hover:not(:disabled):not([aria-selected="true"]) { border-color: var(--destaque); }
.mes-nome { font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.mes-estado { display: inline-flex; align-items: center; gap: 2px; min-height: 14px; font-size: .6875rem; color: var(--texto-2); white-space: nowrap; }
.mes-estado svg { flex: none; }
.mes[data-estado="lancado"] .mes-estado, .mes[data-estado="semPdf"] .mes-estado { color: var(--ok); }
.mes[data-estado="pendente"] { border-style: dashed; border-color: var(--atencao); }
.mes[data-estado="pendente"] .mes-estado { color: var(--atencao-texto); }
.mes[data-estado="andamento"] { border-style: dashed; border-color: var(--borda-campo); }
.mes:disabled { opacity: .45; cursor: default; }
.mes[aria-selected="true"] { background: var(--primaria); border: 1px solid var(--primaria); color: var(--sobre-primaria); }
.mes[aria-selected="true"] .mes-estado { color: inherit; }
/* lançado sem PDF: ponto laranja à direita; alterações não salvas no mês aberto: ponto à esquerda */
.mes[data-estado="semPdf"]::before, .mes[data-alterado]::after {
content: ''; position: absolute; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--atencao); box-shadow: 0 0 0 2px var(--superficie);
}
.mes[data-estado="semPdf"]::before { right: 5px; }
.mes[data-alterado]::after { left: 5px; }
.lanc-contagem { margin: 0; font-size: .8125rem; color: var(--texto-2); }
@container (max-width: 899px) { .mes-texto { display: none; } }
/* 12 meses de pelo menos 48 px numa linha; senão, 2 linhas de 6 (nunca rolagem lateral) */
@container (max-width: 640px) { .fileira-meses { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* cabeçalho do mês aberto: nome, estado e "Alterações não salvas" */
.lanc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--esp-4); }
.lanc-titulo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.25rem; }
.lanc-cabeca .espacador { flex: 1; }
.lanc-cabeca .ajuda { flex-basis: 100%; margin: 0; }
.lanc-alterado { display: inline-flex; align-items: center; gap: 4px; }
.etiqueta.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
/* corpo: seções na ordem do papel + resumo (lateral fixa no computador; barra embaixo no tablet e no celular) */
.digitacao-secoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.digitacao-secoes > .painel, .digitacao-resumo { margin: 0; }
.lanc-secao > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--esp-3); list-style: none; }
.lanc-secao > summary::-webkit-details-marker, .resumo-detalhe > summary::-webkit-details-marker { display: none; }
.lanc-secao > summary h2 { font-size: 1rem; }
.lanc-subtotal { display: none; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.digitacao input.num { text-align: right; font-variant-numeric: tabular-nums; }
/* campos de digitação em tom suave (--edicao-fundo, claro e escuro); o foco realçado (--foco-*) assume quando o campo recebe o foco */
.digitacao :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):not(:focus):not([readonly]) { background: var(--edicao-fundo); }
.digitacao .linhas-orcamento { margin-top: 0; }
.lanc-total { margin-top: 2px; }
.linha-orcamento + .lanc-erro { margin: 0; text-align: right; }
.lanc-erro { margin: 4px 0 0; }
.lanc-rodape { display: grid; gap: 6px; margin-top: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.lanc-soma { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: .875rem; }
.lanc-soma b { color: var(--destaque); font-variant-numeric: tabular-nums; }
.lanc-contas { width: 100%; }
.lanc-contas th[scope="row"] { font-weight: 500; text-align: left; }
.lanc-contas td.num { width: 9.5em; }
.lanc-contas td input { width: 100%; }
.lanc-pdf-estado { margin: 0 0 8px; font-size: .875rem; }
.lanc-pdf-estado .link { padding: 0 2px; }
.lanc-arquivo { position: relative; cursor: pointer; }
.lanc-arquivo:focus-within { outline: 2px solid var(--foco-borda); outline-offset: 2px; }
/* leitura do PDF: botão "Ler valores do PDF", nota das despesas pagas por fundo, faixa de avisos e diálogo dos nomes */
.lanc-ler-pdf[data-lendo] { cursor: progress; opacity: .75; }
.lanc-nota { display: block; margin-top: 2px; font-size: .75rem; font-weight: 400; color: var(--texto-2); }
.lanc-avisos { margin: 0 0 var(--esp-4); padding: 12px 16px; border-color: color-mix(in srgb, var(--atencao) 55%, var(--linha)); }
.lanc-avisos-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 600; color: var(--atencao-texto); }
.lanc-avisos-titulo svg { flex: none; width: 18px; height: 18px; }
.lanc-avisos ul { margin: 0; padding-left: 1.25em; font-size: .875rem; }
dialog.dialogo-nomes-pdf { max-width: 640px; }
.nomes-pdf { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nomes-pdf > li { padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); }
.nomes-pdf-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; }
.nomes-pdf-nome { flex: 1 1 12em; font-weight: 500; overflow-wrap: anywhere; }
.nomes-pdf-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nomes-pdf .campo { margin-bottom: 4px; }
.nomes-pdf select { width: 100%; }
@media (max-width: 600px) {
dialog.dialogo-nomes-pdf { width: 100vw; max-width: none; max-height: 100svh; margin-bottom: 0; border-radius: var(--raio) var(--raio) 0 0; }
dialog.dialogo-nomes-pdf .corpo { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
dialog.dialogo-nomes-pdf .acoes .btn { flex: 1; }
}
/* conferência: ícone e texto ("Confere" ou "Diferença R$ x") */
.conferencia { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; font-size: .8125rem; }
.conferencia:empty { display: none; }
.conferencia svg { flex: none; width: 16px; height: 16px; }
.conferencia .conf-rotulo { flex: 1 1 100%; color: var(--texto); }
.conferencia.ok b, .conferencia.ok svg { color: var(--ok); }
.conferencia.ok b { font-weight: 500; }
.conferencia.dif b, .conferencia.dif svg { color: var(--atencao-texto); }
.conferencia.dif b { font-weight: 700; }
.conferencia.neutro b { color: var(--texto-2); font-weight: 400; }
.conferencia .link { padding: 0 2px; font-size: inherit; }
/* resumo */
.resumo-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--esp-3); }
.resumo-cabeca h2 { font-size: 1rem; }
.resumo-erro { margin: 0 0 8px; }
.resumo-erro:empty { display: none; }
.resumo-detalhe > summary { list-style: none; }
.resumo-totais { width: 100%; }
.digitacao-resumo .resumo-totais th, .digitacao-resumo .resumo-totais td { padding: 4px 0; border: 0; font-size: .875rem; }
.digitacao-resumo .resumo-totais th { text-align: left; font-weight: 400; color: var(--texto-2); }
.digitacao-resumo .resumo-totais td { font-weight: 500; font-variant-numeric: tabular-nums; }
.resumo-sub { margin: var(--esp-3) 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.resumo-conferencias { display: grid; gap: 8px; }
.resumo-ajuste { margin: var(--esp-3) 0 0; padding-top: var(--esp-3); border-top: 1px solid var(--linha); font-size: .8125rem; }
.resumo-ajuste .ajuda { display: block; margin-top: 2px; }
.resumo-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: var(--esp-4); }
.resumo-acoes .btn { width: 100%; }
.resumo-dica { margin: 0; text-align: center; }
.resumo-excluir { margin-top: var(--esp-3); text-align: center; }
.resumo-curto { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.resumo-curto::before {
content: ''; flex: none; width: 8px; height: 8px; margin: 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-135deg); transition: transform var(--rapido);
}
.resumo-detalhe[open] > .resumo-curto::before { transform: rotate(45deg); }
.resumo-dif { font-size: .8125rem; font-weight: 500; color: var(--atencao-texto); font-variant-numeric: tabular-nums; }
/* tablet: 2 colunas (Despesas | Contas, mais larga; Receitas embaixo, mais estreita) */
@media (min-width: 601px) {
.digitacao-secoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.digitacao-secoes > [data-secao="receitas"] { grid-column: 1 / -1; max-width: 40rem; }
}
/* computador: as seções e o resumo de 260 px ao lado, fixo abaixo da barra do período */
@media (min-width: 1100px) {
.digitacao { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--esp-4); align-items: start; }
.digitacao-secoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.digitacao-secoes > [data-secao="receitas"] { max-width: none; }
.digitacao-secoes > [data-secao="despesas"] { grid-column: 1; grid-row: 1 / span 2; }
.digitacao-secoes > [data-secao="contas"] { grid-column: 2; grid-row: 1; }
.digitacao-secoes > [data-secao="receitas"] { grid-column: 2; grid-row: 2; }
.digitacao-resumo {
position: sticky; top: calc(var(--lanc-barra, 0px) + var(--esp-4)); align-self: start;
max-height: calc(100vh - var(--lanc-barra, 0px) - 2 * var(--esp-4)); overflow-y: auto;
}
.resumo-detalhe > summary { display: none; }
.digitacao :is(input, textarea) { scroll-margin-top: calc(var(--lanc-barra, 0px) + var(--esp-4)); }
}
/* área útil larga (cerca de 1400 px): 3 colunas e o resumo de 280 px */
@container (min-width: 1300px) {
.digitacao { grid-template-columns: minmax(0, 1fr) 280px; }
.digitacao-secoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, .8fr); }
.digitacao-secoes > [data-secao="despesas"] { grid-column: 1; grid-row: 1; }
.digitacao-secoes > [data-secao="contas"] { grid-column: 2; grid-row: 1; }
.digitacao-secoes > [data-secao="receitas"] { grid-column: 3; grid-row: 1; }
}
/* tablet e celular: o resumo vira uma barra fixa embaixo ("Não fecha · dif. … [Salvar]"); tocar abre o detalhe */
@media (max-width: 1099px) {
.digitacao-resumo {
position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 6; margin-top: var(--esp-4);
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 14px;
box-shadow: 0 -2px 12px rgba(15, 23, 42, .14);
}
.resumo-cabeca, .resumo-dica { display: none; }
.resumo-erro, .resumo-excluir { grid-column: 1 / -1; }
.resumo-erro { margin: 0; }
.resumo-detalhe { grid-column: 1; min-width: 0; }
.resumo-detalhe[open] { grid-column: 1 / -1; }
.resumo-detalhe[open] > .resumo-corpo { max-height: 50vh; overflow-y: auto; padding-bottom: 4px; }
.resumo-acoes { grid-column: 2; flex-direction: row; justify-content: flex-end; margin: 0; }
.resumo-detalhe[open] ~ .resumo-acoes { grid-column: 1 / -1; }
.resumo-acoes .btn { width: auto; }
.resumo-detalhe:not([open]) ~ .resumo-excluir { display: none; }
.resumo-excluir { margin-top: 4px; text-align: left; }
/* o campo com foco rola para ficar abaixo da barra do período e acima da barra do resumo */
.digitacao :is(input, textarea) { scroll-margin-top: calc(var(--lanc-barra, 0px) + var(--esp-4)); scroll-margin-bottom: 140px; }
}
/* entre 601 e 860 px (e no celular) a barra fica acima do menu inferior, como o .toast */
@media (max-width: 860px) {
.digitacao-resumo { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
/* celular: seções recolhíveis com o subtotal no título (despesas aberta); rótulo e campo na mesma linha */
@media (max-width: 600px) {
.lanc-secao > summary { align-items: center; min-height: 44px; margin: 0; cursor: pointer; }
.lanc-secao[open] > summary { margin-bottom: var(--esp-3); }
.lanc-secao > summary h2::before {
content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 10px 2px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); transition: transform var(--rapido);
}
.lanc-secao[open] > summary h2::before { transform: rotate(45deg); }
.lanc-subtotal { display: inline; }
.lancar .linha-orcamento { grid-template-columns: minmax(0, 1fr) minmax(9em, 45%); }
.lanc-contas td.num { width: 100%; }
.lanc-contas td.lanc-sem-rend { display: none; }
.lancar .tabela-edicao td { flex-wrap: wrap; }
.lancar .tabela-edicao td .lanc-erro { flex-basis: 100%; text-align: right; }
.resumo-acoes [data-salvar-ir] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .resumo-curto::before, .lanc-secao > summary h2::before { transition: none; } }
/* ---------- Finanças: grupos de despesa e previsto x realizado ---------- */
.tela-financas .abas-portaria { margin-bottom: 14px; }
.grade-grupos-mes { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 14px; align-items: stretch; }
/* a tabela por grupo (5 colunas) mais justa, para caber sem rolar */
.tabela-grupos th, .tabela-grupos td { padding-left: 8px; padding-right: 8px; font-size: .86rem; }
.tabela-grupos th { white-space: normal; }
.grade-grupos-mes > .painel + .painel { margin-top: 0; }
.grafico-rosca { position: relative; height: 260px; }
.rosca-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rosca-centro span { font-size: .76rem; color: var(--texto-2); }
.rosca-centro b { font-size: 1.05rem; }
.tela-financas .grafico.grafico-alto { height: 280px; }
.ponto-grupo { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--cor-grupo, var(--agua)); vertical-align: 0; }
.tabela-grupos td, .tabela-previsto td:first-child { white-space: nowrap; }
.ponto-grupo { vertical-align: 1px; }
/* uso do previsto: barra que enche até 100%; acima disso, cheia e vermelha */
.col-uso { width: 30%; }
.col-uso { white-space: nowrap; }
.barra-uso { display: inline-block; width: calc(100% - 52px); height: 10px; margin-right: 8px; border-radius: 999px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; vertical-align: middle; }
.barra-uso span { display: block; width: var(--uso, 0%); height: 100%; border-radius: inherit; background: #1a8a7c; transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.col-uso small { font-size: .78rem; font-weight: 700; color: var(--texto-2); }
tr.estourou .barra-uso span { background: #c4473f; }
tr.estourou .col-uso small { color: var(--perigo); }
.numero.acima b { color: var(--perigo); }
/* no celular, uma coluna que não cresce além da tela (a tabela rola dentro do painel) */
@media (max-width: 900px) { .grade-grupos-mes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .barra-uso span { transition: none; } }
.aviso-detalhe { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-size: .86rem; background: var(--tag-ambar-fundo, #fff4e0); color: var(--texto); border: 1px solid rgba(168, 89, 10, .25); }
/* o quadradinho da cor de cada grupo, um pouco maior */
.ponto-grupo { width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; }
/* ---------- Finanças: prestação anual ---------- */
.titulo-prestacao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controles-prestacao { align-items: flex-end; }
/* situação do fechamento (só o síndico): a fileira dos 12 meses e as pendências agrupadas */
.fech-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fech-topo h2 { margin: 0; }
.fech-situacao p { margin: 0; }
.fech-meses { margin: 4px 0 6px; }
.mes.so-leitura { cursor: default; min-height: 44px; }
.fech-pendencias { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.fech-pendencias li {
display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; padding: 6px 10px;
border-radius: var(--raio-p); background: color-mix(in srgb, var(--atencao) 10%, var(--superficie));
border: 1px solid color-mix(in srgb, var(--atencao) 40%, transparent);
}
.fech-situacao .fech-ajuste { margin-top: 12px; }
.fech-notas { margin-top: 8px; font-size: .86rem; }
.fech-notas > summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--destaque); font-weight: 500; }
.fech-notas > summary:focus-visible { outline: 2px solid var(--foco-borda); outline-offset: 2px; border-radius: var(--raio-p); }
.fech-notas ul { margin: 4px 0 0; padding-left: 20px; }
/* o corpo na ordem das perguntas da assembleia: uma coluna no celular; duas no tablet e no computador */
.fech-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.fech-grade > .painel { margin: 0; min-width: 0; }
@media (min-width: 601px) {
.fech-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "resumo saldos" "previsto previsto" "pizza info"; }
.fech-resumo { grid-area: resumo; }
.fech-saldos { grid-area: saldos; }
.fech-previsto { grid-area: previsto; }
.fech-pizza { grid-area: pizza; }
.fech-info { grid-area: info; }
}
@media (min-width: 1100px) {
.fech-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "resumo saldos" "previsto pizza" "previsto info"; }
}
/* 12 meses lado a lado: no tablet e no celular só o ícone (o leitor de tela lê o aria-label); no celular, 2 fileiras de 6 */
@media (max-width: 1099px) { .fech-meses .mes-texto { display: none; } }
@media (max-width: 600px) { .fech-meses { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* linhas de total e de saldo em destaque */
.tela-financas tr.linha-forte td { font-weight: 500; }
/* valores sem quebrar ("-R$ 18.000,00" numa linha só); a tabela rola dentro do painel */
.tabela-prestacao :is(td, th).num { white-space: nowrap; }
/* no celular, os painéis lado a lado viram uma coluna que não cresce além da tela */
@media (max-width: 900px) { .tela-financas .grade-financas { grid-template-columns: minmax(0, 1fr); } }
/* grupo sem gasto no período: fica fora da pizza, sem cor */
.ponto-grupo.sem-cor { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); }
/* ---------- Reservas: duas taças brindando (título das agendas e "Reserva confirmada") ----------
Brindam uma vez, em 1,1 s, e ficam paradas inclinadas uma para a outra (DESIGN_SYSTEM.md §13: animação curta, só uma
vez). Com movimento reduzido, aparecem já na posição final. Cores do tema: vidro na cor de destaque, bebida dourada. */
/* título com vinheta (js/vinhetas.js): o desenho fica à direita do texto */
.titulo-vinheta { display: inline-flex; align-items: center; gap: 10px; }
.vinheta { display: inline-flex; flex: none; line-height: 0; }
.vinheta svg { overflow: visible; }
.brinde .taca-vidro { fill: color-mix(in srgb, var(--destaque) 10%, transparent); stroke: var(--destaque); stroke-width: 1.6; stroke-linejoin: round; }
.brinde .taca-bebida { fill: var(--ouro); opacity: .9; }
.brinde .taca-bolha { fill: var(--superficie); opacity: .8; }
.brinde .taca-haste { fill: none; stroke: var(--destaque); stroke-width: 1.6; stroke-linecap: round; }
.brinde .taca { transform-box: fill-box; transform-origin: 50% 100%; }
.brinde .taca-esq { transform: rotate(8deg); animation: brinde-esq 1.1s cubic-bezier(.3, .7, .3, 1) .2s both; }
.brinde .taca-dir { transform: rotate(-8deg); animation: brinde-dir 1.1s cubic-bezier(.3, .7, .3, 1) .2s both; }
.brinde-brilho path { fill: none; stroke: var(--ouro); stroke-width: 1.6; stroke-linecap: round; }
.brinde-brilho { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: brinde-brilho 1.1s ease-out .2s both; }
@keyframes brinde-esq {
0% { transform: translateX(-5px) rotate(-6deg); }
45% { transform: translateX(0) rotate(14deg); }
58% { transform: translateX(-1px) rotate(9deg); }
100% { transform: rotate(8deg); }
}
@keyframes brinde-dir {
0% { transform: translateX(5px) rotate(6deg); }
45% { transform: translateX(0) rotate(-14deg); }
58% { transform: translateX(1px) rotate(-9deg); }
100% { transform: rotate(-8deg); }
}
@keyframes brinde-brilho {
0%, 40% { opacity: 0; transform: scale(.5); }
52% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0; transform: scale(1.3); }
}
.reserva-feita .brinde { margin: 0 auto 4px; }
/* ---------- Classificados: etiqueta de preço que balança no pino, uma vez (1,2 s), e para ----------
Mesmas regras do brinde das Reservas (DESIGN_SYSTEM.md §13); com movimento reduzido, já aparece parada. */
.etiqueta-pino { fill: var(--texto-2); }
.etiqueta-fio { fill: none; stroke: var(--texto-2); stroke-width: 1.4; stroke-linecap: round; }
.etiqueta-papel { fill: color-mix(in srgb, var(--ouro) 30%, var(--superficie)); stroke: var(--destaque); stroke-width: 1.6; stroke-linejoin: round; }
.etiqueta-furo { fill: var(--fundo); stroke: var(--destaque); stroke-width: 1.2; }
.etiqueta-texto { fill: var(--destaque); font: 700 10px var(--fonte); }
.etiqueta-corpo { transform-box: view-box; transform-origin: 24px 3px; animation: etiqueta-balanco 1.2s ease-out .2s both; }
@keyframes etiqueta-balanco {
0% { transform: rotate(-24deg); }
30% { transform: rotate(15deg); }
55% { transform: rotate(-7deg); }
78% { transform: rotate(3deg); }
100% { transform: rotate(0); }
}
/* ---------- Documentos: a folha sobe de leve e as três linhas se escrevem, uma depois da outra (1,1 s) ---------- */
.folha-papel { fill: var(--superficie); stroke: var(--destaque); stroke-width: 1.6; stroke-linejoin: round; }
.folha-dobra { fill: color-mix(in srgb, var(--destaque) 14%, var(--superficie)); stroke: var(--destaque); stroke-width: 1.6; stroke-linejoin: round; }
.folha-linha { fill: none; stroke: var(--ouro); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 20; }
.folha-papel-g { animation: folha-surgir .4s ease-out .2s both; }
.folha-linha.l1 { animation: escrever-1 1.1s linear .2s both; }
.folha-linha.l2 { animation: escrever-2 1.1s linear .2s both; }
.folha-linha.l3 { animation: escrever-3 1.1s linear .2s both; }
@keyframes folha-surgir { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* as linhas (de documentos e ocorrências) se escrevem em sequência dentro do mesmo 1,1 s */
@keyframes escrever-1 { 0%, 20% { stroke-dashoffset: 20; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes escrever-2 { 0%, 45% { stroke-dashoffset: 20; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes escrever-3 { 0%, 70% { stroke-dashoffset: 20; } 92%, 100% { stroke-dashoffset: 0; } }
/* ---------- Finanças: as três barras crescem do eixo, uma depois da outra ---------- */
.barras-eixo { fill: none; stroke: var(--texto-2); stroke-width: 1.4; stroke-linecap: round; }
.barra { fill: var(--destaque); transform-box: fill-box; transform-origin: 50% 100%; }
.barra.b1 { opacity: .55; animation: barra-crescer .5s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
.barra.b2 { fill: var(--ouro); animation: barra-crescer .5s cubic-bezier(.3, 1.4, .5, 1) .4s both; }
.barra.b3 { opacity: .8; animation: barra-crescer .5s cubic-bezier(.3, 1.4, .5, 1) .6s both; }
@keyframes barra-crescer { from { transform: scaleY(0); } to { transform: none; } }
/* ---------- Ocorrências: livro aberto; o lápis escreve as três linhas da página da direita e descansa ---------- */
.livro-pagina { fill: var(--superficie); stroke: var(--destaque); stroke-width: 1.6; stroke-linejoin: round; }
.livro-esq { fill: none; stroke: color-mix(in srgb, var(--destaque) 35%, var(--superficie)); stroke-width: 1.6; stroke-linecap: round; }
.livro-linha { fill: none; stroke: var(--texto-2); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 20; }
.livro-linha.l1 { animation: escrever-1 1.1s linear .2s both; }
.livro-linha.l2 { animation: escrever-2 1.1s linear .2s both; }
.livro-linha.l3 { animation: escrever-3 1.1s linear .2s both; }
.lapis-corpo { fill: var(--ouro); stroke: color-mix(in srgb, var(--ouro) 60%, #000); stroke-width: .8; stroke-linejoin: round; }
.lapis-ponta { fill: var(--texto); }
.lapis { transform: translate(9px, 6px); animation: lapis-escrever 1.1s linear .2s both; }
@keyframes lapis-escrever {
0%, 20% { transform: translate(0, 0); }
45% { transform: translate(11px, 0); }
48% { transform: translate(0, 5px); }
70% { transform: translate(11px, 5px); }
73% { transform: translate(0, 10px); }
92% { transform: translate(7px, 10px); }
100% { transform: translate(9px, 6px); }
}
/* ---------- Portaria: a cancela levanta (a luz fica verde enquanto está aberta) e volta a fechar (1,2 s) ---------- */
.cancela-chao { fill: none; stroke: var(--texto-2); stroke-width: 1.4; stroke-linecap: round; }
.cancela-poste { fill: var(--superficie); stroke: var(--destaque); stroke-width: 1.6; }
.cancela-luz { fill: #c4473f; animation: cancela-luz 1.2s linear .2s both; }
.cancela-eixo { fill: var(--destaque); }
.cancela-barra { fill: var(--superficie); stroke: var(--destaque); stroke-width: 1.4; }
.cancela-faixa { fill: none; stroke: var(--ouro); stroke-width: 2.4; }
.cancela-braco { transform-box: view-box; transform-origin: 11px 24px; animation: cancela-abrir 1.2s cubic-bezier(.4, 0, .3, 1) .2s both; }
@keyframes cancela-abrir {
0% { transform: rotate(0); }
35%, 62% { transform: rotate(-72deg); }
92% { transform: rotate(2deg); }
100% { transform: rotate(0); }
}
@keyframes cancela-luz { 0%, 18% { fill: #c4473f; } 24%, 70% { fill: #1a8a7c; } 76%, 100% { fill: #c4473f; } }
/* ---------- Moradores: as janelas do prédio acendem, uma depois da outra (1,1 s) ---------- */
.predio-chao { fill: none; stroke: var(--texto-2); stroke-width: 1.4; stroke-linecap: round; }
.predio-corpo { fill: var(--superficie); stroke: var(--destaque); stroke-width: 1.6; stroke-linejoin: round; }
.predio-porta { fill: color-mix(in srgb, var(--destaque) 14%, var(--superficie)); stroke: var(--destaque); stroke-width: 1.4; stroke-linejoin: round; }
.predio-janela { fill: var(--ouro); stroke: color-mix(in srgb, var(--destaque) 50%, var(--superficie)); stroke-width: 1; animation: janela-acender .3s ease-out both; }
.predio-janela.j2, .predio-janela.j6 { fill: color-mix(in srgb, var(--destaque) 12%, var(--superficie)); }
.predio-janela.j1 { animation-delay: .2s; } .predio-janela.j4 { animation-delay: .35s; } .predio-janela.j3 { animation-delay: .5s; }
.predio-janela.j5 { animation-delay: .65s; } .predio-janela.j2 { animation-delay: .8s; } .predio-janela.j6 { animation-delay: .95s; }
@keyframes janela-acender { from { opacity: .2; } }
/* ---------- Administração: as duas engrenagens giram juntas (sentidos opostos), uma vez (1,1 s) ---------- */
.engrenagem { fill: var(--destaque); transform-box: fill-box; transform-origin: 50% 50%; }
.engrenagem.eg-pequena { fill: var(--ouro); animation: engrenagem-p 1.1s cubic-bezier(.3, .7, .3, 1) .2s both; }
.engrenagem.eg-grande { animation: engrenagem-g 1.1s cubic-bezier(.3, .7, .3, 1) .2s both; }
.engrenagem-furo { fill: var(--superficie); }
@keyframes engrenagem-g { from { transform: rotate(-90deg); } to { transform: rotate(0); } }
@keyframes engrenagem-p { from { transform: rotate(150deg); } to { transform: rotate(0); } }
/* ---------- Minha conta: o perfil surge e o selo de confirmação aparece com o visto (1,1 s) ---------- */
.perfil-fundo { fill: color-mix(in srgb, var(--destaque) 14%, var(--superficie)); stroke: var(--destaque); stroke-width: 1.6; }
.perfil-pessoa { fill: var(--destaque); }
.perfil-g { transform-box: fill-box; transform-origin: 50% 50%; animation: perfil-surgir .45s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
.perfil-selo circle { fill: var(--ouro); stroke: var(--superficie); stroke-width: 1.6; }
.perfil-selo { transform-box: fill-box; transform-origin: 50% 50%; animation: perfil-selo .4s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
.perfil-check { fill: none; stroke: #241a00; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; animation: perfil-check .3s ease-out 1s both; }
@keyframes perfil-surgir { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes perfil-selo { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes perfil-check { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
/* Portaria com os botões do IoT: a cancela fica ao lado dos botões, sem alargar a página no celular */
.paineis-com-vinheta { display: flex; max-width: 100%; }
.paineis-com-vinheta .paineis-portaria { min-width: 0; }
/* ---------- Avisos: o megafone dá um tranco para trás e as três ondas de som saem, uma depois da outra (1,1 s) ---------- */
.megafone-cone { fill: color-mix(in srgb, var(--destaque) 14%, var(--superficie)); stroke: var(--destaque); stroke-width: 1.6; stroke-linejoin: round; }
.megafone-cabo { fill: var(--superficie); stroke: var(--destaque); stroke-width: 1.4; stroke-linejoin: round; }
.megafone-corpo { transform-box: view-box; transform-origin: 6px 20px; animation: megafone-tranco .5s ease-out .2s both; }
.megafone-som { fill: none; stroke: var(--ouro); stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; }
.megafone-som.s1 { animation: som-sair .35s ease-out .45s both; }
.megafone-som.s2 { animation: som-sair .35s ease-out .65s both; }
.megafone-som.s3 { animation: som-sair .35s ease-out .85s both; }
@keyframes megafone-tranco { 0% { transform: rotate(0); } 35% { transform: translateX(-2px) rotate(-8deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes som-sair { from { opacity: 0; transform: translateX(-4px) scale(.6); } to { opacity: 1; transform: none; } }
/* ---------- Trabalhos executados: a chave aperta a porca (um giro com folga) e o sinal de concluído se desenha (1,1 s) ---------- */
.chave-cabo, .chave-cabeca { fill: var(--destaque); }
.chave-porca { fill: var(--superficie); stroke: var(--ouro); stroke-width: 1.6; stroke-linejoin: round; }
.chave-giro { transform-box: view-box; transform-origin: 14px 25px; animation: chave-apertar .75s cubic-bezier(.3, .7, .3, 1) .2s both; }
.chave-ok { transform-box: fill-box; transform-origin: 50% 50%; animation: chave-ok-surgir .25s ease-out .75s both; }
.chave-ok-fundo { fill: var(--ok); }
.chave-ok-marca { fill: none; stroke: var(--superficie); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; animation: chave-ok-marcar .3s ease-out .9s both; }
@keyframes chave-apertar { 0% { transform: rotate(-70deg); } 65% { transform: rotate(8deg); } 85% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
@keyframes chave-ok-surgir { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes chave-ok-marcar { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
|