e ligue a classe
no : body.classList.toggle('sem-col-doador', !mostrar) */
body.sem-col-categoria .col-categoria,
body.sem-col-validade .col-validade,
body.sem-col-doador .col-doador,
body.sem-col-quantidade .col-quantidade {
display: none;
}
/* alvos de ação da linha: ícone quadrado de 34px em vez de três botões de texto */
td .btn-group .btn-sm.icone {
width: 34px;
height: 34px;
padding: 0;
display: grid;
place-items: center;
}
.table-footer {
background: var(--surface-muted);
border-top: 1px solid var(--border-light);
font-size: 12px;
}
/* ===== BADGES =========================================================== */
.badge {
border-radius: 6px;
font-size: 11.5px;
font-weight: 500;
padding: 2px 8px;
}
.badge-gray {
background: var(--border-light);
color: var(--text-secondary);
}
/* ===== FORMULÁRIOS ====================================================== */
.form-group label {
font-size: 12.5px;
font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
border-radius: var(--radius-sm);
min-height: 40px;
font-size: 13.5px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(240, 68, 34, 0.14);
}
input[type="checkbox"],
input[type="radio"] {
width: 18px;
height: 18px;
accent-color: var(--primary);
}
/* ===== MODAL / SHEET ==================================================== */
.modal {
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.modal-header h3 {
font-size: 16px;
}
/* Formulário longo pede painel lateral, não caixa no meio da tela.
Adicione a classe .modal-lateral no #modal ao abrir formulários grandes. */
@media (min-width: 769px) {
.modal-overlay.active .modal.modal-lateral {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: min(440px, 96vw);
max-height: 100vh;
border-radius: 0;
border-left: 1px solid var(--border-light);
animation: entraLateral 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
}
@keyframes entraLateral {
from { transform: translateX(24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ===== TOAST / DESFAZER ================================================= */
.toast {
border-radius: var(--radius);
box-shadow: var(--shadow);
font-size: 12.5px;
}
.toast-action {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: var(--radius-sm);
padding: 8px 13px;
font-size: 12.5px;
font-weight: 600;
min-height: 36px;
}
.toast-action:hover {
border-color: var(--primary);
color: var(--primary);
}
/* o toast nasce depois da barra lateral, para não cobrir o menu */
@media (min-width: 769px) {
.toast-container {
left: calc(var(--sidebar-width) + 22px);
right: auto;
bottom: 22px;
}
body.sidebar-compacta .toast-container {
left: calc(var(--sidebar-compacta) + 22px);
}
}
/* ===== BARRA DE AÇÕES EM MASSA (novo) =================================== */
.selecao-barra {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px 9px 15px;
border-radius: var(--radius);
background: var(--text);
color: var(--white);
box-shadow: var(--shadow-lg);
}
.selecao-barra strong {
font-family: var(--font-display);
font-size: 13px;
color: #fff;
}
.selecao-barra .btn {
min-height: 34px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: #fff;
}
.selecao-barra .btn-primary {
border-color: transparent;
background: var(--primary);
}
@media (max-width: 768px) {
.selecao-barra {
left: 12px;
right: 12px;
transform: none;
flex-wrap: wrap;
}
}
/* ===== ESTADO VAZIO ===================================================== */
.empty-state {
padding: 56px 24px;
gap: 9px;
}
/* `>` importa: a regra vale para o icone-ilustracao do estado vazio, que e
filho direto. Sem ele valia tambem para o icone DENTRO do botao de acao, e o
"+" de "Agendar reuniao" virava um quadrado claro colado no texto — uma caixa
dentro do botao, do tamanho de uma ilustracao. */
.empty-state > [data-lucide] {
width: 21px;
height: 21px;
padding: 11px;
border-radius: var(--radius);
background: var(--primary-light);
color: var(--primary);
box-sizing: content-box;
}
.empty-state strong {
font-size: 15px;
}
.empty-state p {
max-width: 380px;
font-size: 12.5px;
line-height: 1.55;
color: var(--text-muted);
}
/* ===== SKELETON ========================================================= */
.skeleton {
background: linear-gradient(90deg, #F4F1EB 25%, #FBF9F5 37%, #F4F1EB 63%);
border-radius: var(--radius-sm);
}
/* ===== TELA HOJE ======================================================== */
.hoje-secao {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text-muted);
}
/* as pendências viram uma lista dentro de um cartão, não cartões soltos */
.hoje-lista {
gap: 0;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl);
overflow: hidden;
}
.hoje-item {
border: 0;
border-bottom: 1px solid #F4F1EB;
border-radius: 0;
box-shadow: none;
position: relative;
padding: 13px 16px;
flex-wrap: wrap;
}
.hoje-item:last-child {
border-bottom: 0;
}
.hoje-item:hover {
transform: none;
box-shadow: none;
background: #FDFCFA;
}
.hoje-item::before {
content: "";
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--text-muted);
}
.hoje-item.tom-alta::before { background: var(--primary); }
.hoje-item.tom-media::before { background: var(--brand-yellow); }
.hoje-item-copy {
min-width: 190px;
}
.hoje-item-acao {
border-radius: var(--radius-sm);
font-weight: 500;
background: var(--surface);
border: 1px solid var(--border);
}
.hoje-item-acao:hover {
background: var(--primary);
border-color: var(--primary);
}
.hoje-atalho {
border-radius: var(--radius);
box-shadow: none;
border-color: var(--border-light);
background: var(--surface-muted);
font-weight: 500;
}
.hoje-atalho:hover {
transform: none;
box-shadow: none;
border-color: var(--primary);
background: var(--surface);
}
/* ===== AGENDA / REUNIÕES =============================================== */
.agenda-chip {
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
min-height: 34px;
}
.agenda-group-title {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text-muted);
}
/* ===== COMMAND PALETTE ================================================= */
.command-palette {
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.command-search input {
font-size: 14px;
}
/* ===== MOBILE HEADER =================================================== */
.mobile-header {
height: var(--header-height);
background: rgba(252, 251, 249, 0.86);
border-bottom-color: var(--border-light);
}
/* =============================================================================
RECONCILIAÇÃO COM O QUE JÁ EXISTE NO style.css
-----------------------------------------------------------------------------
Tudo acima veio do handoff sem alteração. Este bloco é o mínimo necessário
para a camada não desligar comportamentos que o sistema já tinha.
========================================================================== */
/* 1. `.table-container { overflow-x: auto }` (acima) recria o contexto de
rolagem que o style.css tinha removido de propósito — e com ele o
`position: sticky` do cabeçalho da tabela para de funcionar. No desktop
voltamos para `clip`; a rolagem lateral fica só no celular, onde a tabela
é larga de verdade e não há cabeçalho grudado. */
@media (min-width: 769px) {
.table-container {
overflow-x: initial;
overflow: hidden;
overflow: clip;
}
}
/* 2. Uma única fonte de verdade para a largura do menu recolhido: o style.css
define 76px no , o handoff define 64px em --sidebar-compacta.
Derivar uma da outra evita que `.toast-container` e `.main-content`
calculem com valores diferentes. */
body.sidebar-compacta {
--sidebar-width: var(--sidebar-compacta);
}
/* 3. O handoff tira a cor da linha inteira e diz que o alerta "vive no badge da
validade" — verdade para vencimento, mas quantidade baixa não tem badge e
ficaria sem nenhum sinal. Devolvemos o aviso na própria célula. */
tbody tr.row-danger td:first-child {
box-shadow: inset 3px 0 0 var(--danger);
}
tbody tr.row-warning td:first-child {
box-shadow: inset 3px 0 0 var(--warning);
}
/* 4. O tema escuro redefine as mesmas variáveis no ; como esta camada
carrega depois e escreve em :root, o claro venceria. Reafirmar aqui
mantém o escuro funcionando com os raios e sombras novos. */
body.theme-dark {
--bg: #0E0D0C;
--surface: #161513;
--surface-muted: #1C1B19;
--border: #2A2925;
--border-light: #1F1E1B;
--text: #F4F1EC;
--text-secondary: #A8A39B;
--text-muted: #6E6A63;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 20px 50px -18px rgba(0, 0, 0, 0.7);
--shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.4);
}
body.theme-dark .sidebar {
background: var(--surface);
}
body.theme-dark tbody tr:hover,
body.theme-dark .hoje-item:hover {
background: var(--surface-muted);
}
body.theme-dark tbody td {
border-bottom-color: var(--border-light);
}
body.theme-dark tbody tr.selecionada {
background: var(--primary-light);
}
body.theme-dark .btn-secondary,
body.theme-dark .toast-action {
background: var(--surface-muted);
}
body.theme-dark .mobile-header {
background: rgba(22, 21, 19, 0.86);
}
body.theme-dark .skeleton {
background: linear-gradient(90deg, #1C1B19 25%, #24231F 37%, #1C1B19 63%);
}
/* 5. Complemento: o README cita "o estilo do painel já vem do refatoracao.css",
mas as classes do painel de exibição, da coluna de seleção e da lista de
distribuição não vieram no arquivo. Ficam aqui, no mesmo vocabulário. */
/* Painel "Exibição" da barra de ferramentas (densidade + colunas) */
.painel-exibicao {
position: relative;
}
.painel-exibicao > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.painel-exibicao > summary::-webkit-details-marker {
display: none;
}
.painel-exibicao-corpo {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 70;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 210px;
padding: 10px;
border-radius: var(--radius);
border: 1px solid var(--border-light);
background: var(--surface);
box-shadow: var(--shadow);
}
.painel-exibicao-titulo {
padding: 6px 6px 2px;
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
}
.painel-exibicao-linha {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 6px;
border-radius: var(--radius-sm);
font-size: 13px;
cursor: pointer;
}
.painel-exibicao-linha:hover {
background: var(--surface-muted);
}
/* Coluna de seleção: estreita e sem rótulo no modo card do celular. */
.col-selecao {
width: 38px;
}
@media (max-width: 768px) {
.responsive-table tbody td.col-selecao::before {
content: "Selecionar";
}
}
/* Lista de itens dentro do painel de distribuição */
.dist-lista {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 1rem;
max-height: 42vh;
overflow-y: auto;
}
.dist-item {
display: grid;
grid-template-columns: 1fr auto 84px;
align-items: center;
gap: 10px;
padding: 8px 6px;
border-bottom: 1px solid var(--border-light);
}
.dist-item:last-child {
border-bottom: 0;
}
.dist-item-nome {
font-size: 13px;
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dist-item-saldo {
font-size: 11.5px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dist-item input {
min-height: 34px;
text-align: right;
}
/* A barra de seleção fica acima do rodapé de toasts, não em cima deles. */
body:has(#selecao-barra) .toast-container {
bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
/* 6. Controles nativos seguiam o SO, não o app. A meta `color-scheme: light
dark` no index.html autoriza os dois esquemas; sem dizer qual está em uso,
quem tem o sistema no escuro via input e select pretos dentro do tema
claro. Amarrar o color-scheme ao tema do app resolve na raiz — vale para
todo input, select, date picker e checkbox, não só os deste arquivo. */
:root {
color-scheme: light;
}
body.theme-dark {
color-scheme: dark;
}
/* Campo fora de .form-group não herdava fundo nenhum. */
.dist-item input {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
}
/* =============================================================================
FIDELIDADE AO PROTÓTIPO (Instituto SaaS.dc.html)
-----------------------------------------------------------------------------
O handoff traduziu o protótipo em estilo; estas regras cobrem o que era
estrutura — topbar, marca em duas linhas, usuário no rodapé da barra e a
tela Hoje em duas colunas. Medidas conferidas no protótipo renderizado.
========================================================================== */
/* ===== TOPBAR ============================================================ */
.topbar {
position: sticky;
top: 0;
z-index: 95;
display: flex;
align-items: center;
gap: 16px;
height: var(--header-height);
padding: 0 22px;
background: rgba(252, 251, 249, 0.86);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--border-light);
}
body.theme-dark .topbar {
background: rgba(22, 21, 19, 0.86);
}
.topbar-trilha {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-muted);
white-space: nowrap;
}
.topbar-trilha [data-lucide] {
width: 14px;
height: 14px;
opacity: 0.6;
}
.topbar-trilha strong {
font-weight: 500;
color: var(--text);
}
/* A busca abre a paleta de comandos que já existe (Ctrl/⌘+K). */
.topbar-busca {
flex: 1;
max-width: 380px;
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
background: var(--surface);
color: var(--text-muted);
font-size: 12.5px;
text-align: left;
transition: var(--transition);
}
.topbar-busca:hover {
border-color: var(--border);
}
.topbar-busca span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-busca [data-lucide] {
width: 15px;
height: 15px;
}
.topbar-busca kbd {
flex: none;
padding: 1px 5px;
border-radius: 4px;
border: 1px solid var(--border-light);
background: var(--surface-muted);
font-family: var(--font-body);
font-size: 10.5px;
}
.topbar-acoes {
display: flex;
align-items: center;
gap: 4px;
}
.topbar-icone {
position: relative;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
transition: var(--transition);
}
.topbar-icone:hover {
background: var(--border-light);
color: var(--text);
}
.topbar-icone [data-lucide] {
width: 17px;
height: 17px;
}
.topbar-icone .nav-badge {
position: absolute;
top: 1px;
right: 1px;
min-width: 15px;
padding: 0 3px;
text-align: center;
}
/* O cabeçalho de página passa a grudar embaixo da topbar, não no topo da tela. */
.page-header {
top: var(--header-height);
}
/* No celular quem manda é o .mobile-header; a topbar sairia repetida. */
@media (max-width: 768px) {
.topbar {
display: none;
}
}
/* ===== BARRA LATERAL: MARCA E RODAPÉ ==================================== */
.sidebar-logo {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Precisa ser mais específico que `.sidebar-logo img` do style.css, escrito
para o logo largo antigo — senão o ícone estica para 100% da barra. */
.sidebar-logo img.sidebar-logo-mini {
display: block;
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 7px;
object-fit: contain;
flex: none;
}
.sidebar-marca {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.sidebar-marca strong {
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-marca small {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
/* Empurra perfil, sair e o cartão do usuário para a base da barra. */
.sidebar-nav {
display: flex;
flex-direction: column;
}
.sidebar-rodape {
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--border-light);
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-rodape .sidebar-user {
margin: 0;
padding: 8px 9px;
border-radius: var(--radius-sm);
}
body.sidebar-compacta .sidebar-marca {
display: none;
}
body.sidebar-compacta .sidebar-rodape .sidebar-user {
justify-content: center;
padding: 8px 0;
}
/* ===== TELA HOJE EM DUAS COLUNAS ======================================== */
/* No protótipo as pendências ficam à esquerda e "registrar rápido" + impacto
à direita, visíveis sem rolar. Abaixo de 1100px volta a empilhar. */
@media (min-width: 1100px) {
.hoje-colunas {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.hoje-coluna-lado {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Nas colunas, atalhos e impacto viram cartões fechados. */
.hoje-coluna-lado .hoje-atalhos,
.hoje-coluna-lado .hoje-impacto {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Cada bloco da direita é um cartão com título dentro. */
.hoje-bloco {
padding: 14px 16px;
border-radius: var(--radius-xl);
border: 1px solid var(--border-light);
background: var(--surface);
}
.hoje-bloco > .hoje-secao {
margin: 0 0 10px;
}
.hoje-bloco .hoje-impacto > div,
.hoje-bloco .hoje-atalho {
border: 1px solid var(--border-light);
}
/* Cabeçalho da lista de pendências: contagem + ordenação. */
.hoje-lista-topo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.hoje-lista-topo .hoje-secao {
margin: 0;
}
.hoje-contagem {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
margin-left: 6px;
border-radius: 6px;
background: var(--primary-light);
color: var(--primary);
font-size: 11px;
font-weight: 600;
}
.hoje-ordenacao {
font-size: 11.5px;
color: var(--text-muted);
}
/* Cabeçalho da tela Hoje: saudação à esquerda, ações à direita. */
.hoje-topo {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.hoje-topo .hoje-saudacao {
margin-bottom: 0;
}
/* Reunião resolve na própria linha: aceitar em destaque, recusar ao lado. */
.hoje-item-escolha {
display: flex;
gap: 6px;
flex: none;
}
.hoje-item-acao.aceitar {
background: var(--brand-green);
border-color: var(--brand-green);
color: #fff;
}
.hoje-item-acao.aceitar:hover {
background: var(--brand-green-dark);
border-color: var(--brand-green-dark);
}
@media (max-width: 560px) {
.hoje-item-escolha {
width: 100%;
}
.hoje-item-escolha .hoje-item-acao {
flex: 1;
}
}
/* ===== DISTRIBUIÇÕES (fluxo de 3 passos) ================================ */
.passos {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.passo {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 14px 0 6px;
border-radius: 999px;
border: 1px solid var(--border-light);
background: var(--surface);
color: var(--text-muted);
font-size: 12.5px;
font-weight: 500;
transition: var(--transition);
}
.passo:disabled {
opacity: 0.55;
cursor: default;
}
.passo.atual {
background: var(--text);
border-color: var(--text);
color: var(--white);
}
.passo.feito {
color: var(--text);
cursor: pointer;
}
.passo-numero {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--border-light);
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
}
.passo.atual .passo-numero {
background: var(--primary);
color: var(--white);
}
.passo.feito .passo-numero {
background: var(--brand-green);
color: #fff;
}
.passo-numero [data-lucide] {
width: 12px;
height: 12px;
}
.passo-seta {
width: 14px;
height: 14px;
color: var(--text-muted);
opacity: 0.5;
}
/* Conteúdo à esquerda, resumo fixo à direita. */
.dist-colunas {
display: grid;
gap: 16px;
align-items: start;
}
@media (min-width: 1000px) {
.dist-colunas {
grid-template-columns: minmax(0, 1fr) 268px;
}
}
.dist-cartao,
.dist-resumo {
padding: 16px 18px;
border-radius: var(--radius-xl);
border: 1px solid var(--border-light);
background: var(--surface);
}
.dist-cartao h3,
.dist-resumo h3 {
font-size: 14px;
font-weight: 700;
}
.dist-ajuda {
margin-top: 3px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.dist-itens {
margin-top: 12px;
}
.dist-item-linha {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 0;
border-bottom: 1px solid var(--border-light);
}
.dist-item-linha:last-child {
border-bottom: 0;
}
.dist-item-icone {
flex: none;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--surface-muted);
color: var(--text-secondary);
}
.dist-item-icone [data-lucide] {
width: 15px;
height: 15px;
}
.dist-item-icone.alerta {
background: var(--warning-bg);
color: var(--warning);
}
.dist-item-icone.perigo {
background: var(--danger-bg);
color: var(--danger);
}
.dist-item-texto {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.dist-item-texto strong {
font-size: 13px;
font-weight: 600;
}
.dist-item-texto small {
font-size: 11.5px;
color: var(--text-muted);
}
.dist-item-texto small.aviso { color: var(--warning); }
.dist-item-texto small.perigo { color: var(--danger); }
.dist-item-linha.sem-saldo .dist-item-texto small {
color: var(--danger);
}
/* Stepper de quantidade: alvo grande o bastante para o dedo. */
.dist-stepper {
flex: none;
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
background: var(--surface-muted);
}
.dist-stepper button {
width: 26px;
height: 26px;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
font-size: 15px;
line-height: 1;
}
.dist-stepper button:hover {
background: var(--surface);
color: var(--text);
}
.dist-stepper span {
min-width: 26px;
text-align: center;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.dist-adicionar {
margin-top: 12px;
}
.dist-adicionar > summary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--radius-sm);
border: 1px dashed var(--border);
color: var(--text-secondary);
font-size: 12.5px;
cursor: pointer;
list-style: none;
}
.dist-adicionar > summary::-webkit-details-marker { display: none; }
.dist-adicionar > summary [data-lucide] { width: 14px; height: 14px; }
.dist-adicionar-lista {
display: grid;
gap: 2px;
margin-top: 8px;
max-height: 240px;
overflow-y: auto;
}
.dist-adicionar-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font-size: 12.5px;
text-align: left;
}
.dist-adicionar-item:hover { background: var(--surface-muted); }
.dist-adicionar-item small { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Famílias */
.dist-familias { margin-top: 12px; }
.dist-familia {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 8px;
border-radius: var(--radius-sm);
border-bottom: 1px solid var(--border-light);
cursor: pointer;
}
.dist-familia:last-child { border-bottom: 0; }
.dist-familia:hover { background: var(--surface-muted); }
.dist-familia.marcada { background: #FFF8F5; }
body.theme-dark .dist-familia.marcada { background: var(--primary-light); }
.dist-familia .avatar {
width: 30px;
height: 30px;
font-size: 11px;
}
.dist-familia-texto {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.dist-familia-texto strong { font-size: 13px; font-weight: 600; }
.dist-familia-texto small { font-size: 11.5px; color: var(--text-muted); }
.dist-familia-tempo {
flex: none;
font-size: 11.5px;
color: var(--text-muted);
}
/* Confirmação */
.dist-confirma {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 14px 0 16px;
padding: 13px 14px;
border-radius: var(--radius);
border: 1px solid rgba(0, 122, 114, 0.25);
background: var(--success-bg);
}
.dist-confirma [data-lucide] {
flex: none;
width: 17px;
height: 17px;
margin-top: 1px;
color: var(--success);
}
.dist-confirma div { display: flex; flex-direction: column; gap: 2px; }
.dist-confirma strong { font-size: 13px; }
.dist-confirma span { font-size: 11.5px; color: var(--text-secondary); }
/* Resumo */
.dist-resumo-lista {
margin: 12px 0 14px;
}
.dist-resumo-lista > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--border-light);
}
.dist-resumo-lista > div:last-child { border-bottom: 0; }
.dist-resumo-lista dt { font-size: 12.5px; color: var(--text-secondary); }
.dist-resumo-lista dd {
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.dist-resumo-lista dd.ok { color: var(--brand-green); font-weight: 500; }
.dist-resumo-lista dd.falta { color: var(--danger); font-weight: 500; }
.dist-resumo .dist-ajuda { margin-top: 9px; text-align: center; }
/* ===== TELA DE LOGIN (protótipo) ========================================
Formulário claro à esquerda, painel escuro à direita com o porquê do
sistema e os números do mês. Substitui o painel de personagens. */
.login-screen {
padding: 0;
background: var(--surface);
}
.login-shell {
grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr);
gap: 0;
width: 100%;
max-width: none;
min-height: 100vh;
border-radius: 0;
border: 0;
box-shadow: none;
}
.login-card {
order: 1;
justify-self: center;
width: min(420px, 100%);
padding: clamp(1.5rem, 5vw, 3rem);
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
}
.login-vitrine {
order: 2;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 22px;
padding: clamp(2rem, 5vw, 3.5rem);
overflow: hidden;
background:
radial-gradient(120% 90% at 82% 8%, rgba(240, 68, 34, 0.30), transparent 55%),
radial-gradient(90% 70% at 10% 100%, rgba(0, 122, 114, 0.26), transparent 60%),
#14110F;
color: #F4F1EC;
}
.login-vitrine-selo {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(244, 241, 236, 0.18);
background: rgba(244, 241, 236, 0.06);
font-size: 11.5px;
color: rgba(244, 241, 236, 0.82);
}
.login-vitrine-ponto {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
}
.login-vitrine-frase {
max-width: 15ch;
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.03em;
color: #F8F6F2;
}
.login-vitrine-numeros {
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 4vw, 44px);
}
.login-vitrine-numeros > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.login-vitrine-numeros strong {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1;
color: #FFFFFF;
font-variant-numeric: tabular-nums;
}
.login-vitrine-numeros span {
font-size: 11.5px;
color: rgba(244, 241, 236, 0.6);
}
.login-vitrine-rodape {
margin-top: auto;
font-size: 11.5px;
color: rgba(244, 241, 236, 0.45);
}
.login-back {
z-index: 2;
}
/* No celular o painel escuro viraria uma tela inteira antes do formulário:
some, e o login abre direto no que interessa. */
@media (max-width: 900px) {
.login-shell {
grid-template-columns: 1fr;
min-height: auto;
}
.login-vitrine {
display: none;
}
.login-card {
min-height: 100vh;
justify-content: center;
}
}
/* O handoff manda 44px de alvo no celular; o stepper de quantidade estava em
26px e é justamente o controle mais tocado desta tela. */
@media (max-width: 768px) {
.dist-stepper button {
width: 40px;
height: 40px;
font-size: 18px;
}
.dist-stepper span {
min-width: 34px;
}
.dist-item-linha {
flex-wrap: wrap;
row-gap: 8px;
}
.dist-item-texto {
flex: 1 1 calc(100% - 42px);
}
.dist-stepper {
margin-left: 41px;
}
}
/* ===== CONFIGURAÇÕES (abas laterais) =================================== */
.config-colunas {
display: grid;
gap: 16px;
align-items: start;
}
@media (min-width: 900px) {
.config-colunas {
grid-template-columns: 208px minmax(0, 1fr);
}
}
.config-abas {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
border-radius: var(--radius-xl);
border: 1px solid var(--border-light);
background: var(--surface);
}
/* No celular as abas viram uma faixa rolável, não uma pilha alta. */
@media (max-width: 899px) {
.config-abas {
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
}
.config-abas::-webkit-scrollbar { display: none; }
.config-aba { white-space: nowrap; }
}
.config-aba {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 400;
text-align: left;
transition: var(--transition);
}
.config-aba:hover { background: var(--surface-muted); color: var(--text); }
.config-aba.ativa {
background: var(--primary-light);
color: var(--text);
font-weight: 500;
}
.config-aba.ativa [data-lucide] { color: var(--primary); }
.config-aba [data-lucide] { width: 15px; height: 15px; flex: none; }
.config-cartao {
padding: 18px 20px;
border-radius: var(--radius-xl);
border: 1px solid var(--border-light);
background: var(--surface);
}
.config-cartao + .config-cartao { margin-top: 16px; }
.config-cartao h3 { font-size: 14px; font-weight: 700; }
.config-dica {
margin-top: 5px;
font-size: 11.5px;
line-height: 1.5;
color: var(--text-muted);
}
/* Identidade no topo da aba de perfil */
.config-identidade {
display: flex;
align-items: center;
gap: 13px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}
.config-identidade > div {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.config-identidade strong { font-size: 14px; }
.config-identidade span {
font-size: 11.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.avatar.config-avatar { width: 46px; height: 46px; font-size: 15px; flex: none; }
/* Formulários em duas colunas, como no protótipo. */
.config-grade {
display: grid;
gap: 0 14px;
}
@media (min-width: 700px) {
.config-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config-grade .config-largo,
.config-grade .config-acoes { grid-column: 1 / -1; }
}
.config-acoes {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
/* Notificações */
.config-opcoes { margin-top: 12px; }
.config-opcao {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 11px 0;
border-bottom: 1px solid var(--border-light);
cursor: pointer;
}
.config-opcao:last-child { border-bottom: 0; }
.config-opcao > span {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.config-opcao strong { font-size: 13px; font-weight: 600; }
.config-opcao small { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.config-opcao input[type="checkbox"] { margin-top: 2px; flex: none; }
/* LGPD */
.config-lista {
margin: 12px 0 4px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 7px;
}
.config-lista li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
color: var(--text-secondary);
}
.config-lista [data-lucide] {
width: 14px;
height: 14px;
margin-top: 2px;
flex: none;
color: var(--brand-green);
}
/* Contagem dentro do chip de filtro ("Novas 2"), como no protótipo. */
.chip-conta:not(:empty) {
display: inline-grid;
place-items: center;
min-width: 17px;
height: 17px;
padding: 0 5px;
margin-left: 5px;
border-radius: 5px;
background: var(--primary);
color: var(--white);
font-size: 10.5px;
font-weight: 600;
vertical-align: middle;
}
.agenda-chip.active .chip-conta:not(:empty) {
background: rgba(255, 255, 255, 0.22);
}
/* A barra de ferramentas comporta os chips + a busca. */
.table-toolbar .agenda-filters {
margin-bottom: 0;
}
/* ===== MEMBROS EM TABELA ================================================ */
.membro-pessoa {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.membro-pessoa .avatar {
width: 30px;
height: 30px;
font-size: 11px;
flex: none;
}
.membro-pessoa > span {
display: flex;
flex-direction: column;
min-width: 0;
}
.membro-pessoa strong {
font-size: 13px;
font-weight: 600;
}
.membro-pessoa small {
font-size: 11.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Faixa de aprovação em lote: só aparece com mais de um pendente. */
.membros-pendentes-barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 11px 14px;
border-radius: var(--radius);
border: 1px solid rgba(246, 190, 36, 0.35);
background: var(--warning-bg);
font-size: 12.5px;
}
.membros-pendentes-barra strong {
font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
.col-permissao,
.col-desde {
display: none;
}
}
/* Alertas do painel viram botões: cada um leva para onde se resolve. */
.alerts-card .alert-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 8px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font-size: 12.5px;
text-align: left;
transition: var(--transition);
}
.alerts-card .alert-item:hover {
background: var(--surface-muted);
}
.alerts-card .alert-item > span:nth-child(2) {
flex: 1;
min-width: 0;
}
.alerts-card .alert-item [data-lucide] {
width: 14px;
height: 14px;
flex: none;
color: var(--text-muted);
opacity: 0.6;
}
/* O filtro de período fica no cabeçalho da página. */
.page-header .agenda-filters {
margin-bottom: 0;
}
/* Família sem receber há muito tempo: o número precisa saltar. */
.sem-entrega {
color: var(--danger);
font-weight: 500;
}
@media (max-width: 900px) {
.col-ultima {
display: none;
}
}
/* ===== "ESTE MÊS, EM NÚMEROS" (site público) ===========================
Prestação de contas na primeira tela: quanto entrou, quanto virou cesta. */
/* =============================================================================
ESCALA — correções encontradas medindo os elementos renderizados
========================================================================== */
/* 1. Barra de ferramentas: busca, filtro e botões ficam lado a lado e mediam
38 / 39 / 33 / 32px. Quatro alturas na mesma linha desalinham a régua. */
.table-toolbar .search-input,
.table-toolbar select,
.table-toolbar .btn,
.table-toolbar .painel-exibicao > summary {
min-height: 38px;
height: 38px;
box-sizing: border-box;
}
.table-toolbar .btn,
.table-toolbar .painel-exibicao > summary {
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
}
/* 2. "Registrar em 2 toques": os atalhos mediam 48px e 63px porque um rótulo
quebra em duas linhas. Numa grade, altura desigual fica torta. */
.hoje-atalhos {
align-items: stretch;
}
.hoje-atalho {
min-height: 52px;
}
/* 3. O stepper de quantidade era o menor alvo clicável do sistema (26px),
menor que qualquer botão. Sobe para a escala dos .btn-sm. */
@media (min-width: 769px) {
.dist-stepper button {
width: 32px;
height: 32px;
}
}
/* 4. Formulário das Configurações: input 43px contra botão 38px. Mesmo campo,
mesma régua. */
.config-grade input:not([type="checkbox"]):not([type="radio"]),
.config-grade select {
min-height: 38px;
height: 38px;
box-sizing: border-box;
}
.config-grade textarea {
min-height: 76px;
}
/* 5. Ícone em caixa aparecia em três tamanhos (40 na tela Hoje, 30 em
Distribuições, 28 na métrica). Os de lista convergem em 30. */
.hoje-item-icone {
width: 30px;
height: 30px;
}
.hoje-item-icone [data-lucide] {
width: 15px;
height: 15px;
}
/* 6. A métrica de "próxima reunião" mostra uma data, não um número: em 26px
ela quebraria. Fica num degrau próprio, alinhada com o rótulo. */
.metric-info h3.metric-texto {
font-size: 15px;
line-height: 1.3;
letter-spacing: -0.01em;
}
/* 2b. `min-height` não bastou: com 4 atalhos em 2 colunas são duas linhas de
grade, e cada linha tem a própria altura. `1fr` iguala todas. */
.hoje-atalhos {
grid-auto-rows: 1fr;
}
/* =============================================================================
ALVO DE TOQUE NO CELULAR — 44px, como o handoff pede
-----------------------------------------------------------------------------
O handoff declara `min-height: 44px` para .btn/.agenda-chip na linha 112,
mas depois redefine `.agenda-chip { min-height: 34px }` na 655. Media query
não aumenta especificidade, então a regra posterior vencia e os chips ficavam
com 34px no celular. Este bloco fecha o arquivo justamente para vencer a
cascata — medido com o app renderizado, não presumido.
========================================================================== */
@media (max-width: 768px) {
.agenda-chip,
.config-aba,
.passo,
.table-toolbar .btn,
.table-toolbar select,
.table-toolbar .search-input,
.table-toolbar .painel-exibicao > summary,
.dist-adicionar > summary,
.hoje-item-acao,
.toast-action {
min-height: 44px;
height: auto;
}
/* Caixas de seleção: 18px é alvo de mira, não de dedo. O quadrado cresce e
a célula ganha área ao redor dele. */
input[type="checkbox"],
input[type="radio"] {
width: 22px;
height: 22px;
}
.responsive-table td.col-selecao,
.col-selecao {
padding-top: 11px;
padding-bottom: 11px;
}
.config-opcao,
.dist-familia {
min-height: 44px;
}
/* Os passos quebram para não espremer três pílulas de 44px em 375px. */
.passos {
row-gap: 8px;
}
.passo-seta {
display: none;
}
}
@media (max-width: 768px) {
/* Faltavam da varredura anterior: o stepper parou em 40px e as ações do
cartão de reunião em 26/34px. */
.dist-stepper button {
width: 44px;
height: 44px;
}
.meeting-toggle,
.btn-icon,
.presence-link {
min-height: 44px;
}
.btn-icon {
min-width: 44px;
}
/* Aumentar o input só estica o desenho do quadrado. O alvo real vem do
label em volta, que cobre a célula inteira. */
.alvo-selecao {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: -11px 0;
cursor: pointer;
}
}
.alvo-selecao {
display: inline-grid;
place-items: center;
cursor: pointer;
}
/* =============================================================================
RESPIRO — conteúdo encostava na borda do cartão
-----------------------------------------------------------------------------
Medido: a busca começava a 1px da borda e as células tinham 12px. A causa é
`.table-toolbar { padding: 0 0 12px }`, do handoff — lá a barra fica FORA do
cartão (é irmã dele), então zerar a lateral fazia sentido. Aqui ela está
dentro, e ficou colada.
Uma medida só para tudo que encosta na borda do cartão: 16px, que é o padding
das células do protótipo.
========================================================================== */
:root {
--respiro-cartao: 16px;
}
.table-toolbar {
padding: 14px var(--respiro-cartao) 12px;
}
thead th,
tbody td {
padding-left: var(--respiro-cartao);
padding-right: var(--respiro-cartao);
}
.table-subtitle {
padding-left: var(--respiro-cartao);
padding-right: var(--respiro-cartao);
}
.table-footer {
padding-left: var(--respiro-cartao);
padding-right: var(--respiro-cartao);
}
/* A coluna de seleção é estreita e não precisa de 16px dos dois lados; sem
isto o checkbox empurra o nome do item para longe demais. */
.responsive-table th.col-selecao,
.responsive-table td.col-selecao {
padding-right: 0;
}
/* Cartões de conteúdo tinham 16, 18 e 20px. Dois degraus bastam: compacto
(listas densas) e confortável (cartão com formulário ou gráfico). */
.dist-cartao,
.dist-resumo {
padding: 18px 20px;
}
@media (max-width: 768px) {
/* No celular a tabela vira cartão e o respiro vem da própria linha. */
:root {
--respiro-cartao: 14px;
}
.responsive-table tbody tr {
padding: 0.4rem 0.9rem;
}
}
/* === PAINEL DE PENDÊNCIAS (sino da topbar) ===
O sino abre um menu suspenso em vez de trocar de tela. Ancorado no botão,
e no celular vira uma folha de largura total porque 380px não cabe. */
.avisos-painel {
position: fixed;
z-index: 120;
width: 380px;
max-width: calc(100vw - 24px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: avisos-entra 0.16s ease-out;
}
.avisos-painel[hidden] { display: none; }
@keyframes avisos-entra {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.avisos-topo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px var(--respiro-cartao) 12px;
border-bottom: 1px solid var(--border-light);
}
.avisos-topo strong {
font-size: 0.9rem;
color: var(--text);
}
.avisos-fechar {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.avisos-fechar:hover { background: var(--border-light); color: var(--text); }
.avisos-fechar [data-lucide] { width: 15px; height: 15px; }
.avisos-corpo {
max-height: min(420px, 60vh);
overflow-y: auto;
}
.avisos-item {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 12px var(--respiro-cartao);
border: none;
border-bottom: 1px solid var(--border-light);
background: transparent;
text-align: left;
cursor: pointer;
}
.avisos-item:last-child { border-bottom: none; }
.avisos-item:hover { background: var(--surface-muted); }
.avisos-item-icone {
display: grid;
place-items: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--border-light);
color: var(--text-secondary);
}
.avisos-item-icone [data-lucide] { width: 16px; height: 16px; }
/* O tom vem da mesma receita usada na tela Hoje. */
.avisos-item.tom-alta .avisos-item-icone {
background: rgba(200, 84, 60, 0.12);
color: var(--primary);
}
.avisos-item-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.avisos-item-copy strong {
font-size: 0.85rem;
color: var(--text);
line-height: 1.35;
}
.avisos-item-copy span {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.35;
}
.avisos-item-seta {
flex-shrink: 0;
width: 15px;
height: 15px;
margin-top: 8px;
color: var(--text-muted);
}
.avisos-carregando,
.avisos-vazio {
padding: 28px var(--respiro-cartao);
text-align: center;
font-size: 0.83rem;
color: var(--text-muted);
}
.avisos-vazio [data-lucide] {
width: 26px;
height: 26px;
margin-bottom: 8px;
color: var(--text-muted);
}
.avisos-vazio p { margin: 0; }
.avisos-rodape {
border-top: 1px solid var(--border-light);
background: var(--surface-muted);
}
.avisos-rodape button {
width: 100%;
min-height: 44px;
border: none;
background: transparent;
font-size: 0.82rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
}
.avisos-rodape button:hover { color: var(--text); }
@media (max-width: 480px) {
.avisos-painel {
width: calc(100vw - 24px);
}
}
/* Sino do cabecalho mobile: mesmo painel, mesma contagem. */
.mobile-sino {
position: relative;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.mobile-sino [data-lucide] { width: 20px; height: 20px; }
.mobile-sino .badge-notification {
position: absolute;
top: 4px;
right: 4px;
}
/* === CONVITES ============================================================= */
.convite-explica,
.convite-compartilhar-texto {
margin: 0 0 18px;
font-size: 0.85rem;
line-height: 1.55;
color: var(--text-muted);
}
.convites-bloco {
margin-bottom: 20px;
padding: var(--respiro-cartao);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
}
.convites-titulo {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 0.88rem;
color: var(--text);
}
.convites-titulo [data-lucide] { width: 16px; height: 16px; color: var(--text-muted); }
.convites-lista { display: flex; flex-direction: column; gap: 8px; }
.convite-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--surface-muted);
border-radius: var(--radius);
}
.convite-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.convite-info strong { font-size: 0.85rem; color: var(--text); word-break: break-all; }
.convite-info span { font-size: 0.76rem; color: var(--text-muted); }
.convite-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.convite-pronto-topo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: var(--text);
}
.convite-pronto-topo [data-lucide] { width: 19px; height: 19px; color: #3F7A5A; }
.convite-pronto p { margin: 0 0 10px; font-size: 0.84rem; color: var(--text-secondary); }
.convite-pronto-email {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.79rem;
color: var(--text-muted);
}
.convite-pronto-email [data-lucide] { width: 14px; height: 14px; }
.convite-pronto-email.aviso { color: #B4763C; }
.convite-pronto-acoes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
/* Caixa de link com botão de copiar — usada no convite e no compartilhamento
da agenda. */
.evt-link-box {
display: flex;
gap: 8px;
margin: 12px 0;
}
.evt-link-box input {
flex: 1;
min-width: 0;
padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.78rem;
color: var(--text-secondary);
background: var(--surface-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.evt-link-box .btn { flex-shrink: 0; }
/* Regras da senha na triagem do convite: viram verdes conforme a pessoa digita. */
.senha-regras {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.senha-regras li {
position: relative;
padding-left: 18px;
font-size: 0.75rem;
color: var(--text-muted);
transition: color 0.15s;
}
.senha-regras li::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 10px;
height: 10px;
border: 1.5px solid var(--border);
border-radius: 50%;
}
.senha-regras li.ok { color: #3F7A5A; }
.senha-regras li.ok::before {
background: #3F7A5A;
border-color: #3F7A5A;
}
.convite-email {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 10px 12px;
background: var(--surface-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.83rem;
color: var(--text-secondary);
word-break: break-all;
}
.convite-email [data-lucide] { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
#reset-strength-bar.fraca, #convite-strength-bar.fraca { background: #C8543C; }
#reset-strength-bar.media, #convite-strength-bar.media { background: #B4763C; }
#reset-strength-bar.forte, #convite-strength-bar.forte { background: #3F7A5A; }
/* === REUNIÕES: convocar todos e concluir ================================== */
.convocados-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.convocar-todos {
display: flex;
align-items: center;
gap: 6px;
min-height: 32px;
font-size: 0.79rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
}
.convocar-todos input { margin: 0; }
.meeting-concluir { margin-top: 12px; }
.meeting-ata {
margin-top: 12px;
padding: 12px 14px;
background: var(--surface-muted);
border-left: 3px solid #3F7A5A;
border-radius: 0 var(--radius) var(--radius) 0;
}
.meeting-ata-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.meeting-ata-topo strong {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--text);
}
.meeting-ata-topo [data-lucide] { width: 14px; height: 14px; color: #3F7A5A; }
.meeting-ata p {
margin: 0;
font-size: 0.83rem;
line-height: 1.55;
color: var(--text-secondary);
white-space: pre-wrap;
}
.meeting-ata-vazia { font-style: italic; color: var(--text-muted); }
.conclusao-contexto {
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
font-size: 0.85rem;
color: var(--text);
}
.conclusao-contexto span { font-size: 0.78rem; color: var(--text-muted); }
.conclusao-pauta {
margin-bottom: 16px;
padding: 10px 12px;
background: var(--surface-muted);
border-radius: var(--radius);
}
.conclusao-pauta strong { display: block; margin-bottom: 4px; font-size: 0.76rem; color: var(--text-muted); }
.conclusao-pauta p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; }
/* === CALENDÁRIO DE EVENTOS =============================================== */
.evt-barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.evt-navegacao { display: flex; align-items: center; gap: 8px; }
.evt-navegacao strong { min-width: 160px; font-size: 0.95rem; color: var(--text); }
.evt-seta {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
}
.evt-seta:hover { background: var(--surface-muted); color: var(--text); }
.evt-seta [data-lucide] { width: 16px; height: 16px; }
.evt-visoes {
display: flex;
padding: 3px;
background: var(--surface-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.evt-visao {
min-height: 30px;
padding: 0 14px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
font-size: 0.8rem;
font-weight: 500;
/* `--text-muted` sobre `--surface-muted` da 3.20 no tema escuro: e um botao,
nao um rodape. `--text-secondary` sobe para o minimo legivel sem competir
com a aba ativa. */
color: var(--text-secondary);
cursor: pointer;
}
.evt-visao.ativa { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.evt-grade {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.evt-cabecalho {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 1px solid var(--border);
background: var(--surface-muted);
}
.evt-cabecalho span {
padding: 9px 0;
text-align: center;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-muted);
}
.evt-semana {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 1px solid var(--border-light);
}
.evt-semana:last-child { border-bottom: none; }
.evt-dia {
min-height: 104px;
padding: 6px;
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
gap: 4px;
/* Item de grid nasce com min-width:auto e se recusa a encolher abaixo do
proprio conteudo. Sem isto, um titulo de evento longo estica a semana
inteira e a pagina inteira ganha rolagem lateral no celular. */
min-width: 0;
}
.evt-dia:last-child { border-right: none; }
.evt-dia.fora { background: var(--surface-muted); }
.evt-dia.fora .evt-dia-numero { color: var(--text-muted); opacity: 0.5; }
.evt-dia-numero {
align-self: flex-start;
min-width: 22px;
padding: 2px 0;
text-align: center;
font-size: 0.76rem;
font-weight: 600;
color: var(--text-secondary);
}
.evt-dia.hoje .evt-dia-numero {
background: #C8543C;
color: #fff;
border-radius: 999px;
}
.evt-dia-lista { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evt-pilula {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
padding: 3px 6px;
border: none;
border-left: 3px solid var(--cor-tipo, var(--border));
border-radius: 4px;
background: color-mix(in srgb, var(--cor-tipo) 12%, transparent);
font-size: 0.71rem;
color: var(--text);
text-align: left;
cursor: pointer;
overflow: hidden;
min-width: 0;
}
.evt-pilula:hover { background: color-mix(in srgb, var(--cor-tipo) 22%, transparent); }
.evt-pilula.cancelado { opacity: 0.5; text-decoration: line-through; }
.evt-pilula-hora { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.evt-pilula-titulo {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.evt-pilula-cadeado { width: 10px; height: 10px; flex-shrink: 0; color: var(--text-muted); }
.evt-dia-mais { padding-left: 6px; font-size: 0.69rem; color: var(--text-muted); }
.evt-legenda {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 14px;
padding: 0 2px;
}
.evt-legenda-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.74rem;
color: var(--text-muted);
}
.evt-legenda-item i { width: 9px; height: 9px; border-radius: 2px; }
.evt-lista { display: flex; flex-direction: column; gap: 8px; }
.evt-cartao {
display: flex;
align-items: stretch;
gap: 14px;
width: 100%;
padding: 14px var(--respiro-cartao);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--cor-tipo, var(--border));
border-radius: var(--radius-xl);
text-align: left;
cursor: pointer;
}
.evt-cartao:hover { background: var(--surface-muted); }
.evt-cartao.cancelado { opacity: 0.6; }
.evt-cartao-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 46px;
}
.evt-cartao-data strong { font-size: 1.35rem; line-height: 1; color: var(--text); }
.evt-cartao-data span { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); }
.evt-cartao-corpo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.evt-cartao-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evt-cartao-titulo { font-size: 0.92rem; color: var(--text); }
.evt-cartao-quando,
.evt-cartao-objetivo {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.79rem;
color: var(--text-muted);
}
.evt-cartao-objetivo { display: block; line-height: 1.45; }
.evt-cartao-quando [data-lucide] { width: 13px; height: 13px; }
.evt-cartao-seta { align-self: center; width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.evt-etiqueta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--cor-tipo, var(--text-muted)) 12%, transparent);
font-size: 0.71rem;
font-weight: 500;
color: var(--cor-tipo, var(--text-muted));
}
.evt-etiqueta [data-lucide] { width: 12px; height: 12px; }
.evt-etiqueta.grande { padding: 5px 12px; font-size: 0.8rem; }
.evt-etiqueta.grande [data-lucide] { width: 15px; height: 15px; }
.evt-marca-publica,
.evt-marca-interna,
.evt-marca-cancelado {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.69rem;
color: var(--text-muted);
}
.evt-marca-publica [data-lucide],
.evt-marca-interna [data-lucide] { width: 11px; height: 11px; }
.evt-marca-cancelado { color: var(--primary); font-weight: 600; }
.evt-detalhe dl { margin: 16px 0; }
.evt-detalhe dt { margin-top: 12px; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.evt-detalhe dd { margin: 3px 0 0; font-size: 0.87rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.evt-check {
display: flex;
align-items: flex-start;
gap: 9px;
min-height: 44px;
margin-bottom: 14px;
padding: 10px 12px;
background: var(--surface-muted);
border-radius: var(--radius);
cursor: pointer;
}
.evt-check input { margin-top: 2px; flex-shrink: 0; }
.evt-check span { font-size: 0.84rem; color: var(--text-secondary); }
.evt-check.destaque span { display: flex; flex-direction: column; gap: 2px; }
.evt-check.destaque strong { font-size: 0.85rem; color: var(--text); }
.evt-check.destaque small { font-size: 0.76rem; color: var(--text-muted); }
.evt-compartilhar-conta {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 0.79rem;
color: var(--text-muted);
}
.evt-compartilhar-conta [data-lucide] { width: 14px; height: 14px; }
.evt-compartilhar-acoes { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.evt-revogar {
margin-top: 22px;
padding: 14px;
background: var(--surface-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.evt-revogar strong { display: block; margin-bottom: 4px; font-size: 0.84rem; color: var(--text); }
.evt-revogar p { margin: 0 0 12px; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }
/* === AGENDA PÚBLICA ====================================================== */
/* Tela para quem não tem conta: chega por link, lê e vai embora. */
.agenda-publica {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--bg);
}
.agenda-pub-topo {
display: flex;
align-items: center;
gap: 14px;
padding: 22px var(--respiro-cartao);
max-width: 760px;
width: 100%;
margin: 0 auto;
}
.agenda-pub-logo { height: 42px; width: auto; }
.agenda-pub-topo h1 { margin: 0; font-size: 1.15rem; color: var(--text); }
.agenda-pub-topo p { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.agenda-pub-corpo {
flex: 1;
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 0 var(--respiro-cartao) 40px;
}
.agenda-pub-aviso {
padding: 48px 0;
text-align: center;
font-size: 0.9rem;
color: var(--text-muted);
}
.agenda-pub-mes { margin-bottom: 28px; }
.agenda-pub-mes h2 {
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.agenda-pub-item {
display: flex;
gap: 14px;
margin-bottom: 8px;
padding: 16px var(--respiro-cartao);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--cor-tipo, var(--border));
border-radius: var(--radius-xl);
}
.agenda-pub-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 48px;
}
.agenda-pub-data strong { font-size: 1.5rem; line-height: 1; color: var(--text); }
.agenda-pub-data span { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); }
.agenda-pub-info { min-width: 0; }
.agenda-pub-info h3 { margin: 6px 0 4px; font-size: 1rem; line-height: 1.35; color: var(--text); }
.agenda-pub-quando { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.agenda-pub-objetivo { margin: 8px 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); }
.agenda-pub-rodape {
padding: 18px var(--respiro-cartao) 28px;
text-align: center;
border-top: 1px solid var(--border-light);
}
.agenda-pub-rodape p { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
@media (max-width: 768px) {
.evt-barra { flex-direction: column; align-items: stretch; }
.evt-navegacao { justify-content: space-between; }
.evt-navegacao strong { min-width: 0; flex: 1; text-align: center; }
.evt-visoes { align-self: stretch; }
.evt-visao { flex: 1; }
/* A grade de 7 colunas não comporta texto aqui (≈50px por dia). Vira uma
visão geral de pontos: mostra QUAIS dias têm evento, e o nome se lê na
lista ou tocando o ponto. */
.evt-dia { min-height: 58px; padding: 4px 3px; align-items: center; }
.evt-dia-lista { flex-direction: row; flex-wrap: wrap; gap: 3px; justify-content: center; }
.evt-pilula {
width: 7px;
height: 7px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--cor-tipo);
}
.evt-pilula-hora,
.evt-pilula-titulo,
.evt-pilula-cadeado { display: none; }
.evt-dia-numero { align-self: center; }
.evt-dia-mais { padding: 0; font-size: 0.6rem; line-height: 7px; }
.evt-legenda { gap: 8px 10px; }
.senha-regras { grid-template-columns: 1fr; }
.evt-link-box { flex-direction: column; }
}
/* O dia da grade virou botão (abre a lista do dia ou o formulário): precisa
parecer clicável e ter foco visível. */
.evt-dia { cursor: pointer; }
.evt-dia:hover { background: var(--surface-muted); }
.evt-dia.fora:hover { background: var(--border-light); }
.evt-dia:focus-visible {
outline: 2px solid #C8543C;
outline-offset: -2px;
}
/* A pílula agora é uma marca dentro do dia, não um alvo próprio. */
.evt-pilula { pointer-events: none; }
/* ============================================================================
REFATORAÇÃO MOBILE
----------------------------------------------------------------------------
Uma passada só, no fim do arquivo, sobre o que só quebra no celular. Cada
bloco diz o sintoma, porque o sintoma é a única forma de saber depois se a
regra ainda faz falta.
========================================================================== */
/* --- 1. Altura real da tela ------------------------------------------------
100vh no celular inclui a barra do navegador, que some quando a pessoa rola.
O resultado é a tela "pulando" e o rodapé ficando fora de alcance. 100dvh
acompanha a altura visível de verdade. Fica em @supports para não derrubar
navegador antigo, que continua no 100vh de antes. */
@supports (height: 100dvh) {
.landing-screen,
.login-screen,
.app,
.main-content { min-height: 100dvh; }
.sidebar { height: 100dvh; }
.agenda-publica { min-height: 100dvh; }
/* So no desktop: la o painel lateral e coluna inteira mesmo. No celular a
folha continua em 92dvh (regra abaixo) — precisa sobrar faixa, senao o
puxador fica fora da tela e some a alca de "arraste para baixo". */
@media (min-width: 769px) {
.modal-overlay.active .modal.modal-lateral { max-height: 100dvh; }
}
@media (max-width: 768px) {
.modal { max-height: 92dvh; }
}
}
/* --- 2. Áreas seguras (notch e barra de gestos) ----------------------------
Com viewport-fit=cover a página passa a ocupar a tela inteira, inclusive
embaixo do recorte da câmera e da barra de gestos. Quem encosta nas bordas
precisa recuar. */
@media (max-width: 768px) {
.mobile-header {
padding-top: env(safe-area-inset-top);
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
.sidebar {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.content-wrapper,
.agenda-pub-rodape {
padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
/* A folha sobe do rodapé: o último botão não pode cair atrás da barra de
gestos do iPhone. */
.modal-overlay.active .modal.modal-lateral .modal-body {
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
}
/* --- 3. iOS não pode dar zoom ao focar um campo ----------------------------
Campo com fonte abaixo de 16px faz o Safari aproximar a tela sozinho — e ele
não desfaz o zoom depois. A pessoa fica com o app torto até recarregar.
16px é o limiar exato; não é escolha estética. */
@media (max-width: 768px) {
input,
select,
textarea,
/* Media query nao soma especificidade: cada seletor que baixa a fonte de um
campo precisa ser repetido aqui, senao continua ganhando. */
.form-group input,
.form-group select,
.form-group textarea,
.table-toolbar .search-input,
.table-toolbar select,
.fin-search input,
.fin-date input,
.fin-date,
.command-search input,
.multi-select label,
.evt-link-box input,
.search-input {
font-size: 16px;
}
}
/* --- 4. Toque com resposta própria -----------------------------------------
O realce azul padrão do sistema não combina com a paleta e pisca em cima de
cantos arredondados. Trocado por um estado :active de verdade. */
@media (hover: none) {
* { -webkit-tap-highlight-color: transparent; }
.btn:active,
.nav-link:active,
.evt-cartao:active,
.evt-dia:active,
.avisos-item:active,
.config-aba:active,
.convite-item:active {
transform: scale(0.985);
filter: brightness(0.97);
}
/* :hover em tela de toque "gruda" depois do clique: o item fica destacado
até tocarem em outro lugar. */
.evt-dia:hover,
.evt-cartao:hover,
.avisos-item:hover { background: inherit; }
}
/* --- 5. Alvo de toque de 44px ----------------------------------------------
Medido: menu 34px, fechar modal 32px, hambúrguer 38px, setas do calendário
34px, abas de visão 30px. Tudo abaixo do mínimo confortável. */
@media (max-width: 768px) {
.nav-link {
min-height: 44px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.modal-close {
width: 44px;
height: 44px;
}
.evt-seta { width: 44px; height: 44px; }
.evt-visao { min-height: 44px; }
/* Medidos depois: sino 40px, fechar avisos 28px. */
.mobile-sino { width: 44px; height: 44px; }
.avisos-fechar { width: 44px; height: 44px; }
/* Ícone de ação em tabela/cartão: a caixa cresce, o desenho não. */
.btn-icon {
min-width: 44px;
min-height: 44px;
}
.presence-link,
.avisos-rodape button,
.table-footer button { min-height: 44px; }
/* Telas de entrada: e onde todo mundo toca primeiro, e eram as piores.
Medido: "esqueci a senha" com 17px de altura, abas do login com 33,
mostrar-senha com 32, voltar com 31. */
.login-tabs button,
.login-back,
.password-toggle,
.landing-screen .btn-ghost,
.help-social { min-height: 44px; }
.password-toggle,
.login-back { min-width: 44px; }
/* Link de texto nao deve virar bloco alto; o alvo cresce por padding e por
uma area invisivel em volta. */
.forgot-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
}
}
/* --- 6. Piso de legibilidade -----------------------------------------------
Medido: textos de 10,5px a 11,5px em etiquetas, contagens e legendas. No
monitor passa; no celular, com o braço estendido, não. 12px é o piso e os
títulos de seção sobem junto para continuarem parecendo títulos. */
@media (max-width: 768px) {
.badge,
/* `:not(:empty)` e `.config-identidade span` tem especificidade maior que o
seletor simples — repetidos aqui pelo mesmo motivo dos campos. */
.chip-conta:not(:empty),
.config-identidade span,
.chip-conta,
.config-dica,
.hoje-ordenacao,
.evt-etiqueta,
.evt-marca-publica,
.evt-marca-interna,
.evt-marca-cancelado,
.evt-legenda-item,
.evt-cartao-data span,
.agenda-pub-data span,
.painel-exibicao-titulo,
.passo-numero,
.convite-info span,
.convite-pronto-email,
.senha-regras li,
.responsive-table td::before,
small { font-size: 12px; }
.hoje-secao,
.agenda-pub-mes h2 { font-size: 13px; }
.hoje-contagem { font-size: 12px; }
/* Iniciais do avatar: 11px fica ilegível dentro do círculo. */
.avatar,
.membro-pessoa .avatar { font-size: 13px; }
/* Nome e e-mail nas listas: é o que a pessoa procura na tela. */
.membro-pessoa strong { font-size: 15px; }
.membro-pessoa small { font-size: 12.5px; }
}
/* --- 7. Configurações estourava a tela -------------------------------------
`.config-colunas` é grid, e trilha de grid não encolhe abaixo do conteúdo do
item (min-width: auto). O painel exigia 410px numa tela de 375 e a página
inteira ganhava rolagem lateral. minmax(0, 1fr) libera a trilha a encolher. */
@media (max-width: 768px) {
.config-colunas { grid-template-columns: minmax(0, 1fr); }
.config-cartao { min-width: 0; }
}
/* --- 8. Rolagem horizontal proposital --------------------------------------
As abas de configurações rolam de lado de propósito. Sem encaixe elas param
no meio de uma aba e parece corte de layout. */
@media (max-width: 768px) {
.config-abas {
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-left: max(0px, env(safe-area-inset-left));
}
.config-aba { scroll-snap-align: start; }
}
/* --- 9. Densidade do cartão de tabela no celular --------------------------
Medido: um cartão de família ocupava 404px — 2 por tela, 20 telas para
percorrer 40 famílias. A tabela vira uma linha por coluna, e valores curtos
(Membros: 5, Crianças: 2, Status, LGPD) gastavam uma faixa inteira cada.
Aqui a linha vira grade de duas colunas: os campos curtos se emparelham e o
cartão encolhe pela metade. Nenhum dado sai da tela — o problema era o
arranjo, não a quantidade de informação. */
@media (max-width: 768px) {
.responsive-table tbody tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 14px;
align-content: start;
}
/* Primeira célula (o nome, que é o que se procura) e a de ações ocupam a
largura toda: nome comprido quebra feio em meia coluna, e os botões
precisam do espaço. */
.responsive-table tbody td:first-child,
.responsive-table tbody td:last-child,
.responsive-table tbody td:has(.btn-group),
.responsive-table tbody td.col-selecao {
grid-column: 1 / -1;
}
/* Empilhado em vez de rótulo-à-esquerda/valor-à-direita: em meia coluna os
dois não cabem lado a lado. */
.responsive-table tbody td {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1px;
padding: 5px 0;
text-align: left;
}
/* line-height enxuto: o rótulo tem uma linha só e o padrão de 1,55 do corpo
do texto dava 18px de caixa para 11px de letra. */
.responsive-table tbody td::before {
margin-right: 0;
font-size: 11.5px;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-muted);
}
.responsive-table tbody td { line-height: 1.35; }
/* A primeira célula é o título do cartão: some com o rótulo "Responsável" e
o nome ganha corpo. */
.responsive-table tbody td:first-child::before { display: none; }
.responsive-table tbody td:first-child {
padding-bottom: 10px;
font-size: 15px;
font-weight: 600;
color: var(--text);
}
/* A borda separava linha a linha; na grade ela cortaria as colunas ao meio. */
.responsive-table tbody td { border-bottom: none; }
.responsive-table tbody td:first-child {
border-bottom: 1px solid var(--border-light);
margin-bottom: 8px;
}
.responsive-table tbody td:last-child,
.responsive-table tbody td:has(.btn-group) {
border-top: 1px solid var(--border-light);
margin-top: 8px;
padding-top: 10px;
}
.responsive-table tbody tr { padding: 12px var(--respiro-cartao); }
}
/* --- 10. Menu inferior (celular) -------------------------------------------
O hamburguer fica no canto superior esquerdo — o ponto mais distante do
polegar em qualquer telefone. Os quatro destinos mais usados descem para a
zona de alcance; o resto continua no menu lateral, atrás de "Mais". */
.barra-inferior { display: none; }
@media (max-width: 768px) {
.barra-inferior {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
background: var(--surface);
border-top: 1px solid var(--border);
/* A barra encosta na borda de baixo, onde vive a barra de gestos do
iPhone: o recuo entra como padding para o dedo não competir com o
sistema. */
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -1px 3px rgba(20, 17, 15, 0.04);
}
.barra-inferior[hidden] { display: none; }
.barra-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 56px;
padding: 8px 2px 6px;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
/* Cada item ocupa 1/5 de 375px = 75px; sem isto um rótulo longo empurra
os vizinhos e a grade deixa de ser regular. */
min-width: 0;
}
.barra-item [data-lucide] {
width: 21px;
height: 21px;
flex-shrink: 0;
}
.barra-item span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
font-weight: 500;
line-height: 1.2;
}
.barra-item.ativo { color: var(--primary); }
/* Traço no topo em vez de fundo preenchido: o item ativo se lê de relance
sem a barra virar um bloco de cor. */
.barra-item.ativo::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 2px;
border-radius: 0 0 3px 3px;
background: #C8543C;
}
.barra-item:active { background: var(--surface-muted); }
.barra-badge {
position: absolute;
top: 5px;
left: 50%;
margin-left: 5px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--primary);
color: var(--white);
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: 16px;
text-align: center;
}
.barra-badge[hidden] { display: none; }
/* O conteúdo precisa terminar acima da barra, senão a última linha e os
botões de ação ficam embaixo dela. Substitui o recuo que a área segura
sozinha dava. */
body.tem-barra-inferior .content-wrapper {
padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
/* A folha e o painel de avisos sobem acima da barra. */
body.tem-barra-inferior .modal-overlay { z-index: 100; }
body.tem-barra-inferior .toast-container {
bottom: calc(72px + env(safe-area-inset-bottom));
}
/* O menu lateral cobre a barra quando aberto: com ela por cima, "Mais"
apareceria em frente ao próprio menu que acabou de abrir. */
.sidebar { z-index: 110; }
.sidebar-overlay { z-index: 100; }
}
/* --- 11. Página "Mais" ------------------------------------------------------
O índice de tudo, para quem chega pela barra inferior. Existe como página e
não como gaveta porque uma página tem endereço: dá para voltar, dá para
chegar por link, e o botão físico de voltar do telefone funciona. */
.mais-pessoa {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding: 14px var(--respiro-cartao);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
}
.mais-pessoa .avatar { width: 44px; height: 44px; font-size: 15px; flex-shrink: 0; }
.mais-pessoa div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mais-pessoa strong { font-size: 15px; color: var(--text); }
.mais-pessoa span {
font-size: 12.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mais-secao { margin-bottom: 20px; }
.mais-secao h3 {
margin: 0 0 8px;
padding-left: 2px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.mais-grade {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.mais-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 10px var(--respiro-cartao);
border: none;
border-bottom: 1px solid var(--border-light);
background: transparent;
text-align: left;
cursor: pointer;
}
.mais-item:last-child { border-bottom: none; }
.mais-item:active { background: var(--surface-muted); }
.mais-item-icone {
display: grid;
place-items: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
background: var(--surface-muted);
color: var(--text-secondary);
}
.mais-item-icone [data-lucide] { width: 17px; height: 17px; }
.mais-item-nome {
flex: 1;
min-width: 0;
font-size: 14.5px;
font-weight: 500;
color: var(--text);
}
.mais-item-badge {
flex-shrink: 0;
min-width: 20px;
padding: 2px 7px;
border-radius: 999px;
background: var(--primary);
color: var(--white);
font-size: 12px;
font-weight: 600;
text-align: center;
}
.mais-item-estado {
flex-shrink: 0;
font-size: 12.5px;
color: var(--text-muted);
}
.mais-item-seta { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-muted); }
.mais-item.perigo .mais-item-nome { color: var(--primary); }
.mais-item.perigo .mais-item-icone { background: rgba(200, 84, 60, 0.1); color: var(--primary); }
/* No desktop a página existe (dá para chegar por link), mas o menu lateral já
mostra tudo — então ela ganha largura de leitura em vez de esticar. */
@media (min-width: 769px) {
.mais-pessoa,
.mais-secao { max-width: 560px; }
}
/* --- 12. Avisos na área de trabalho (Configurações) ----------------------- */
.desktop-aviso {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: var(--surface-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.desktop-aviso.ligado {
border-color: #3F7A5A;
background: rgba(63, 122, 90, 0.06);
}
.desktop-aviso-icone {
display: grid;
place-items: center;
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-secondary);
}
.desktop-aviso.ligado .desktop-aviso-icone {
background: #3F7A5A;
border-color: #3F7A5A;
color: #fff;
}
.desktop-aviso-icone [data-lucide] { width: 18px; height: 18px; }
.desktop-aviso div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.desktop-aviso strong { font-size: 0.9rem; color: var(--text); }
.desktop-aviso small { font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); }
.desktop-aviso .btn { flex-shrink: 0; }
@media (max-width: 768px) {
.desktop-aviso { flex-wrap: wrap; }
.desktop-aviso .btn { width: 100%; }
.desktop-aviso small { font-size: 12px; }
}
/* --- 13. Convite para ligar os avisos (celular, tela Hoje) ---------------- */
.convite-avisos {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding: 14px var(--respiro-cartao);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid #C8543C;
border-radius: var(--radius-xl);
animation: convite-entra 0.2s ease-out;
}
@keyframes convite-entra {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.convite-avisos-icone {
display: grid;
place-items: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: rgba(200, 84, 60, 0.1);
color: var(--primary);
}
.convite-avisos-icone [data-lucide] { width: 18px; height: 18px; }
.convite-avisos-texto { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.convite-avisos-texto strong { font-size: 14.5px; color: var(--text); }
.convite-avisos-texto small { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.convite-avisos-acoes {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* Em 375px o texto e os dois botões não cabem lado a lado: os botões descem e
ocupam a largura, virando alvos de 44px. */
@media (max-width: 560px) {
.convite-avisos { flex-wrap: wrap; }
.convite-avisos-acoes { width: 100%; }
.convite-avisos-acoes .btn { flex: 1; min-height: 44px; }
}
/* --- 14. Indicadores rolava de lado ----------------------------------------
Mesmo defeito do bloco 7, em outro lugar. `.main-content` e item de flex e
`.metric-card`/`.chart-card` sao itens de grid: os tres nascem com
min-width:auto, que e o tamanho minimo do conteudo, e nao encolhem abaixo
dele. O grafico entrava nessa conta com a largura em pixels que o Chart.js
grava no proprio canvas, e o nome mais comprido de "Top doadores" entrava
inteiro. Medido: a pagina pedia 421px numa tela de 375 e o app inteiro
ganhava rolagem lateral — inclusive o cabecalho e a barra de baixo, que
saiam da tela ao arrastar. */
.main-content { min-width: 0; }
.metrics-grid > *,
.charts-grid > * {
min-width: 0;
}
/* O Chart.js escreve a largura em px no proprio canvas. Sem o teto, essa
largura vira o piso do cartao e o cartao nunca mais encolhe. */
.chart-wrapper { min-width: 0; }
.chart-wrapper canvas { max-width: 100%; }
/* Nome comprido corta com reticencias em vez de empurrar o cartao. */
.top-doador-nome {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- 15. O cabecalho de pagina ocupava um terco da tela --------------------
Ele e grudento (bloco do style.css) para a acao principal ficar sempre a
mao. So que no celular ele continuava com titulo grande, subtitulo e botoes
em tamanho cheio: 163px fixos, mais 56 do cabecalho do app e 57 da barra de
baixo. Sobravam 536px de 812 para o conteudo.
Depois que a pagina rola, o subtitulo ja foi lido e o titulo so precisa
dizer onde a pessoa esta. A faixa encolhe para ~92px e devolve 70px de
conteudo em todas as telas. */
@media (max-width: 768px) {
.page-header {
transition: padding 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-header.rolado {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
gap: 0.5rem;
}
/* O subtitulo explica a pagina na chegada; depois e so altura. */
.page-header.rolado .page-subtitle {
display: none;
}
.page-header.rolado h2 {
font-size: 1.15rem;
}
.page-header.rolado .btn {
min-height: 38px;
padding-top: 0;
padding-bottom: 0;
font-size: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.page-header { transition: none; }
}
/* --- 16. Numero grande, cartao vazio ---------------------------------------
Abaixo de 480px `.metrics-grid` virava uma coluna: cada indicador gastava
~200px de altura para mostrar um numero de tres digitos. Cinco indicadores
= 1000px de rolagem antes do primeiro grafico. Em duas colunas o conjunto
cabe numa tela e continua legivel — o numero e curto por natureza. */
@media (max-width: 480px) {
.metrics-grid,
.finance-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.metric-card,
.finance-card {
padding: 12px 13px;
}
.metric-info h3,
.finance-card .value {
font-size: 20px;
}
.metric-info p,
.finance-card .label {
font-size: 11.5px;
line-height: 1.3;
}
}
/* --- 17. O titulo do cartao nem sempre e a primeira coluna -----------------
No modo cartao (bloco 9) a primeira celula vira o titulo. Isso vale para
Familias, onde a primeira coluna e o nome. Nas outras nao:
- Estoque comeca com a caixa de selecao: o titulo do cartao era um quadrado
vazio com uma linha embaixo, e o nome do item descia para o meio com o
rotulo "NOME".
- Financeiro comeca com a data: tres lancamentos do mesmo dia viravam tres
cartoes chamados "11/06/2026", e a descricao — a unica coisa que os
distingue — ficava em corpo pequeno.
A celula que da nome ao cartao passa a ser marcada com `.col-titulo`. Sem
ela, a primeira coluna continua valendo, como antes. */
@media (max-width: 768px) {
.responsive-table tbody td.col-titulo {
order: -1;
grid-column: 1 / -1;
padding-bottom: 10px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border-light);
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.responsive-table tbody td.col-titulo::before { display: none; }
/* Com titulo declarado, a primeira coluna volta a ser um campo comum.
`:not(.col-selecao)` nao e enfeite: `:has()` pesa o proprio argumento na
especificidade, e sem ele esta regra (0,3,4) ganharia da que esconde o
rotulo da caixa de selecao (0,2,3) — que e justamente a primeira coluna
do Estoque. O rotulo "Selecionar" voltava a aparecer, agora vazando pela
borda direita do cartao. */
.responsive-table tbody tr:has(.col-titulo) td:first-child:not(.col-selecao) {
/* `grid-column: 1 / -1` (bloco 9) era para o titulo, que precisa da linha
toda. Virando campo comum, a data volta a dividir a linha com o vizinho
em vez de gastar uma faixa inteira para dez caracteres. */
grid-column: auto;
padding-bottom: 5px;
margin-bottom: 0;
border-bottom: none;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.responsive-table tbody tr:has(.col-titulo) td:first-child:not(.col-selecao)::before {
display: block;
}
/* A caixa de selecao nunca e titulo: vai para o canto do cartao, fora do
fluxo, e deixa o nome do item ocupar a primeira linha. */
.responsive-table tbody tr { position: relative; }
.responsive-table tbody td.col-selecao {
position: absolute;
top: 10px;
right: var(--respiro-cartao);
grid-column: auto;
padding: 0;
margin: 0;
border: none;
}
.responsive-table tbody td.col-selecao::before { display: none; }
/* Espaco para a caixa nao encostar no nome. */
.responsive-table tbody tr:has(.col-selecao) td.col-titulo {
padding-right: 34px;
}
}
/* --- 18. Excluir era o botao mais chamativo de cada cartao -----------------
`.btn-group .btn { flex: 1 }` (bloco de 44px) dava a mesma largura a todos
os botoes da linha, e `.btn-danger` e o unico com fundo cheio: em Membros e
Financeiro metade do cartao virava um retangulo vermelho, repetido em cada
item da lista. Apagar deixa de ser o gesto mais facil e mais visivel da
tela: continua vermelho e continua ali, mas com contorno, e sem esticar. */
@media (max-width: 768px) {
.responsive-table td .btn-group .btn-danger,
.card .btn-group .btn-danger {
flex: 0 0 auto;
background: var(--surface);
color: #C0392B;
border: 1px solid rgba(192, 57, 43, 0.35);
box-shadow: none;
}
.responsive-table td .btn-group .btn-danger:active,
.card .btn-group .btn-danger:active {
background: rgba(192, 57, 43, 0.08);
}
/* Dentro da media query: no monitor o botao continua vermelho cheio, e
texto salmao sobre vermelho seria ilegivel. */
body.theme-dark .responsive-table td .btn-group .btn-danger,
body.theme-dark .card .btn-group .btn-danger {
color: #F08476;
border-color: rgba(240, 132, 118, 0.35);
}
}
/* --- 19. Alvos de toque que ficaram para tras ------------------------------
Sobra da varredura do bloco 5, encontrada medindo cada pagina em 320px:
busca e data do Financeiro em 20/22px (o campo real e menor que a moldura
desenhada), campos do perfil em 38px, preco do Bazar em 36px e o "adicionar
item" da Distribuicao em 31px. */
@media (max-width: 768px) {
/* Financeiro: a moldura desenhada e o pai; o campo de verdade media 20px no
meio dela. Esticar o campo faz o toque cair nele em qualquer altura. */
.fin-search,
.fin-date {
min-height: 44px;
align-items: stretch;
}
.fin-search input,
.fin-date input {
min-height: 44px;
}
/* A regra de escala (bloco "4. Formulario das Configuracoes") fixa 38px para
casar com o botao no monitor. No celular o piso e 44, e ela precisa ser
repetida inteira: `:not()` conta na especificidade. */
.config-grade input:not([type="checkbox"]):not([type="radio"]),
.config-grade select {
min-height: 44px;
height: auto;
}
.bazar-price-input,
.dist-adicionar-item {
min-height: 44px;
}
/* Linhas do painel "Exibicao": a caixa mede 22px e a linha inteira e o alvo,
mas ela parava em 36. */
.painel-exibicao-linha {
min-height: 44px;
align-items: center;
}
/* 42px por causa do arredondamento da grade de cinco botoes; o minimo e 44. */
.responsive-table td .btn-group .btn-sm {
min-width: 44px;
}
.presence-link { min-width: 44px; }
}
/* --- 20. Metade das Configuracoes nao existia no celular -------------------
As abas rolam de lado (bloco 8), mas em 375px so cabem duas das cinco: a
terceira aparece cortada no meio da palavra — que le como defeito de
layout, nao como convite a arrastar — e "Dados do instituto" e "LGPD e
privacidade" nunca eram encontradas.
Rolagem lateral serve a lista longa e homogenea, onde a pessoa ja espera
que haja mais. Cinco abas fixas nao sao isso: elas quebram em linhas e
aparecem todas de uma vez. Custa ~110px numa tela em que se entra de
proposito, e devolve tres secoes que estavam invisiveis. */
@media (max-width: 768px) {
.config-abas {
overflow-x: visible;
flex-wrap: wrap;
gap: 6px;
}
.config-aba {
flex: 1 1 auto;
justify-content: center;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
}
/* --- 21. Cabecalho do perfil espremido ------------------------------------
Em Configuracoes o bloco avatar + nome + "Trocar foto" dividia 343px em
tres colunas: o nome quebrava em duas linhas e a linha de cargo/e-mail
cortava em "joo...". Medido: a linha pedia 249px e recebeu 147.
Empilhado, o botao desce e ocupa a largura, e a linha de identificacao
pode quebrar em vez de sumir — cargo e permissao sao o que a pessoa vem
conferir nesta aba. */
@media (max-width: 560px) {
.config-identidade {
flex-wrap: wrap;
}
.config-identidade > .btn {
width: 100%;
}
.config-identidade span {
overflow: visible;
white-space: normal;
line-height: 1.4;
}
}
/* --- 22. Saldo positivo pintado de laranja --------------------------------
`.finance-card.saldo .value` usava `--primary` (#F04422). Ao lado de
"Saidas", em `--danger` (#C0392B), tres dos seis cartoes do resumo ficavam
em tons de vermelho-laranja — inclusive um saldo positivo de R$ 10.947,56.
Na tela do celular, onde os cartoes ficam um embaixo do outro, a leitura
rapida era "esta tudo no vermelho".
Cor com significado: saldo negativo continua vermelho, saldo positivo e
so um numero — neutro e com o contraste mais alto da paleta. */
.finance-card.saldo .value { color: var(--text); }
.finance-card.saldo.negativo .value { color: var(--danger); }
/* --- 23. Quatro barras antes do primeiro item -----------------------------
No Estoque a barra de ferramentas empilha em coluna no celular (regra do
style.css): busca, categoria, "Exibicao" e "Exportar CSV" viravam quatro
faixas de largura inteira. Medido: 440px so de filtros, somados aos 163 do
cabecalho — o primeiro item do estoque comecava depois de 900px.
Busca e categoria sao o que se usa no celular e continuam inteiras.
Exibicao (escolher colunas) e Exportar CSV sao tarefas de mesa: dividem uma
linha so, no fim. */
@media (max-width: 768px) {
/* Volta a ser linha, mas com quebra: cada filtro continua ganhando a linha
inteira, e so os botoes se emparelham. */
.table-toolbar {
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
.table-toolbar > * {
flex: 1 1 100%;
width: auto;
margin-left: 0;
}
/* `.table-toolbar .search-input { flex: 1 }` do style.css tem duas classes e
ganha do seletor acima: sem repetir aqui, a busca dividia a linha com o
"Exportar" e o texto de dentro cortava em "Buscar por nome, bair" a 320px.
A busca e a ferramenta principal da barra — fica com a linha inteira. */
.table-toolbar > .search-input,
.table-toolbar > select,
.table-toolbar > .fin-search,
.table-toolbar > .fin-date {
flex: 1 1 100%;
}
.table-toolbar > .btn,
.table-toolbar > .painel-exibicao {
flex: 1 1 0;
min-width: 0;
}
.table-toolbar > .painel-exibicao > summary {
width: 100%;
}
/* O painel abre ancorado em `right: 0`. Com o botao ocupando meia linha,
210px de painel comecavam em -38px, fora da tela pela esquerda. */
.table-toolbar > .painel-exibicao > .painel-exibicao-corpo {
right: auto;
left: 0;
min-width: 0;
width: max-content;
max-width: calc(100vw - 24px);
}
}
/* --- 24. O cartao gritava rotulo e sussurrava acao -------------------------
Duas coisas competiam pela atencao no cartao de lista, e nenhuma era o dado:
a) Seis rotulos em caixa alta por cartao (CATEGORIA, QUANTIDADE, UNIDADE,
DOADOR, VALIDADE, ACOES) com quase o mesmo peso do valor. Rotulo e
referencia, nao conteudo: baixa de peso e some do primeiro plano.
b) "ACOES" nomeava uma fileira de botoes so de icone. O rotulo explicava a
fileira; nenhum icone explicava a si mesmo. Quem entra pela primeira vez
nao adivinha que "⇄" e movimentar estoque nem que a mao com coracao e
registrar entrega — e sao acoes que gravam no banco.
O rotulo da fileira sai e cada botao passa a dizer o proprio nome, lido do
`title` que ja estava no HTML para o balaozinho do monitor. Medido no
Estoque: 298px -> 260px, com os tres botoes escritos por extenso. */
@media (max-width: 768px) {
.responsive-table tbody td::before {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--text-muted);
opacity: 0.75;
}
.responsive-table tbody td {
padding: 3px 0;
font-size: 14.5px;
}
/* Os botoes ja se apresentam; o rotulo era so altura. */
.responsive-table tbody td:has(.btn-group)::before { display: none; }
.responsive-table tbody td:has(.btn-group) {
margin-top: 6px;
padding-top: 9px;
}
/* `.icone` e um quadrado de 34px no monitor, onde o balaozinho do `title`
resolve. No toque nao ha balaozinho: o nome vira texto. */
.responsive-table td .btn-group .btn-sm.icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
min-height: 44px;
padding: 0 10px;
gap: 6px;
}
.responsive-table td .btn-group .btn-sm.icone::after {
content: attr(title);
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
}
/* Escrito por extenso, cinco acoes nao cabem numa linha: a fila quebra. */
.responsive-table td .btn-group {
flex-wrap: wrap;
gap: 6px;
}
/* `:not(.btn-danger)` mantem de pe o bloco 18: sem ele esta regra, por ser
mais nova, devolvia `flex: 1` ao Excluir — e um Excluir sozinho na linha
virava o maior alvo do cartao, que e exatamente o que o 18 desfez. */
.responsive-table td .btn-group .btn:not(.btn-danger),
.responsive-table td .btn-group .btn-sm.icone:not(.btn-danger) {
flex: 1 1 auto;
min-width: 0;
}
/* Fila lotada (Familias tem cinco): aperta o rotulo para fechar em duas
linhas em vez de tres. 408px -> 358px, contra 351px do estado anterior —
sete pixels pelo nome de todos os botoes. */
.responsive-table td .btn-group:has(.btn:nth-child(4)) .btn-sm.icone {
padding: 0 7px;
gap: 4px;
}
.responsive-table td .btn-group:has(.btn:nth-child(4)) .btn-sm.icone::after {
font-size: 11.5px;
}
.responsive-table td .btn-group:has(.btn:nth-child(4)) .btn-sm.icone [data-lucide] {
width: 15px;
height: 15px;
}
}
/* --- 25. Dois desenhos para o mesmo controle ------------------------------
O sistema usa um seletor segmentado em quatro telas — Familias (Ativas /
Sem entrega / Inativas), Reunioes (Proximas / Anteriores / Canceladas),
Indicadores (Mes / 6 meses / Ano) e Eventos (Mes / Lista). As tres
primeiras sao `.agenda-chip`: a opcao ligada e uma pilula escura, contraste
cheio, impossivel de confundir.
Eventos e `.evt-visao`, e marcava a opcao ligada com um retangulo branco
sobre fundo quase branco. Na tela do celular, no sol, "Mes" e "Lista"
pareciam o mesmo estado — nao dava para saber que visao estava aberta.
Mesmo controle, mesmo desenho. */
.evt-visao {
border-radius: 999px;
}
.evt-visao.ativa {
background: var(--text);
color: var(--white);
box-shadow: none;
}
/* --- 26. Salvar aparecia antes dos campos ---------------------------------
Em Bazar > "Valores das pecas" o botao Salvar morava no cabecalho da secao,
a direita do titulo. No monitor funciona. No celular o cabecalho empilha
(regra do style.css) e o botao caia entre o subtitulo e o primeiro preco:
pedia para salvar antes de digitar qualquer coisa, e depois de editar o
ultimo tipo de peca ele ja tinha saido da tela por cima.
O botao passou para depois da lista, no HTML. Este bloco so lhe da o
rodape. */
.bazar-prices-footer {
display: flex;
justify-content: flex-end;
padding: 12px var(--respiro-cartao, 16px);
border-top: 1px solid var(--border-light);
}
@media (max-width: 768px) {
.bazar-prices-footer .btn {
width: 100%;
min-height: 44px;
}
}
/* --- 27. Faixa inteira para dizer "traço" ---------------------------------
No modo cartao (bloco 9) cada coluna vira uma faixa. Coluna sem valor
gastava a mesma faixa que uma cheia para mostrar um "-": num Estoque sem
doador nem validade cadastrados, 44px por cartao — em dez itens, uma tela
inteira de traço.
As vazias somem e voltam juntas numa linha so, no fim do cartao. Some o
espaco, fica a informacao: "Sem doador · Sem validade" continua dizendo que
o campo existe e esta em branco, que e diferente de a coluna estar
desligada no painel "Exibicao". Quem monta o texto e `App.marcarCelulasVazias`. */
@media (max-width: 768px) {
.responsive-table tbody td.celula-vazia {
display: none;
}
.responsive-table tbody tr[data-vazios]::after {
content: attr(data-vazios);
grid-column: 1 / -1;
padding-top: 2px;
font-size: 12px;
line-height: 1.35;
color: var(--text-muted);
}
/* A linha das acoes e o fim do cartao. Sem `order` ela ficaria antes do
::after, que e o ultimo filho da linha. */
.responsive-table tbody td:has(.btn-group) {
order: 1;
}
}
/* --- 28. Botao "Filtros" que nao abria nada -------------------------------
No monitor os tres selects do Financeiro ficam na propria barra: o
style.css esconde o botao com `.fin-filtros-btn { display: none }` e deixa
`.fin-filtros` em `display: contents`. O botao existe so para o celular,
onde a barra vira coluna e os selects viram painel recolhivel.
So que a regra de escala deste arquivo, `.table-toolbar .btn`, tem duas
classes contra uma — e devolvia o botao para a tela. No monitor ele aparecia
e nao fazia nada: alternar `.collapsed` nao muda coisa alguma, porque a
regra que esconde o painel recolhido mora dentro da media query do celular.
Clicar em "Filtros" nao abria filtro nenhum. Eles ja estavam ali ao lado.
Mesma especificidade da regra que atrapalhou, e depois dela. */
@media (min-width: 769px) {
.table-toolbar .fin-filtros-btn {
display: none;
}
}
/* --- 29. Aviso de bazar fora de temporada ---------------------------------
Bazar e sazonal: fora de temporada some o que registra venda e fica tudo que
mostra o que ja foi vendido. Sem uma faixa dizendo isso, a tela pareceria
quebrada — "sumiu o botao de vender". */
.bazar-desativado {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding: 14px var(--respiro-cartao, 16px);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--text-muted);
border-radius: var(--radius-xl);
}
.bazar-desativado-icone {
display: grid;
place-items: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--surface-muted);
color: var(--text-secondary);
}
.bazar-desativado-icone [data-lucide] { width: 18px; height: 18px; }
.bazar-desativado div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bazar-desativado strong { font-size: 14.5px; color: var(--text); }
.bazar-desativado small { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
/* --- 30. Datas do relatorio ------------------------------------------------
O par de/ate so aparece com "Escolher datas" ligado. No celular a barra vira
coluna (bloco 23) e os dois campos precisam ocupar a linha inteira, senao o
`input[type=date]` fica estreito demais para o calendario nativo. */
.rel-datas {
display: flex;
gap: 10px;
align-items: center;
}
/* O caso do [hidden] esta resolvido de forma geral no bloco 32. */
.rel-datas label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-muted);
}
.rel-datas input {
min-height: 38px;
}
@media (max-width: 768px) {
.rel-datas {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.rel-datas label {
justify-content: space-between;
}
.rel-datas input {
flex: 1;
min-height: 44px;
margin-left: 10px;
}
}
/* O texto pronto para o WhatsApp: fonte de largura fixa e quebra preservada. */
.rel-preview {
margin: 0;
padding: 12px 14px;
max-height: 340px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
line-height: 1.6;
color: var(--text);
background: var(--surface-muted);
border: 1px solid var(--border-light);
border-radius: var(--radius);
}
/* --- 31. Trilha de filtros com muitas opcoes ------------------------------
`.agenda-filters` e uma pilula: `border-radius: 999px` desenha bem tres
chips numa linha (Familias, Reunioes). Com cinco, no celular, ela quebra em
tres linhas e o raio de 999px vira um balao — a borda passa longe dos chips
nos cantos e a trilha parece um erro de desenho.
Quebrada em varias linhas, a trilha e um bloco: raio de bloco. */
@media (max-width: 768px) {
.table-toolbar > .agenda-filters {
display: flex;
width: 100%;
border-radius: var(--radius-xl);
}
.table-toolbar > .agenda-filters .agenda-chip {
flex: 1 1 auto;
justify-content: center;
}
}
/* --- 32. `hidden` precisa ganhar de `display` -----------------------------
O navegador esconde `[hidden]` com uma regra de folha de estilo do proprio
navegador — `display: none` de baixissima prioridade. Qualquer `display`
declarado no projeto ganha dela, e o elemento fica visivel com o atributo
posto. Nao ha aviso: o JS marca `hidden = true`, o atributo aparece no HTML,
e nada acontece na tela.
Aconteceu duas vezes na mesma sessao: nos campos de data do Relatorio
(`.rel-datas` e flex) e na operacao do Bazar (`.bazar-layout` e grid). Nas
duas o JS estava certo e o CSS silenciosamente desfazia.
Uma regra so, para o projeto inteiro, em vez de lembrar disso a cada elemento
novo. `!important` porque o ponto e justamente vencer qualquer `display` que
venha depois — inclusive de regras que ainda serao escritas. */
[hidden] {
display: none !important;
}
/* --- 33. Agenda publica: calendario ou lista ------------------------------
A tela publica roda fora do app e nao herda o layout das paginas internas.
A barra de controles precisa de altura propria e, no celular, empilhar. */
.agenda-pub-controles {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
/* `.agenda-pub-mes` ja e usada por `renderListaPublica` para os titulos de mes
da lista. A navegacao do calendario precisa de classe propria, senao este
`display: flex` deitaria cada secao da lista numa linha so. */
.agenda-pub-nav {
display: flex;
align-items: center;
gap: 8px;
}
.agenda-pub-nav strong {
min-width: 150px;
text-align: center;
font-size: 14.5px;
}
/* Dia sem acao: na agenda publica a grade e so leitura, entao nada de cursor
de clique nem realce de foco herdados da tela interna. */
.evt-dia.sem-acao {
cursor: default;
}
.evt-dia.sem-acao:hover {
background: inherit;
}
@media (max-width: 768px) {
.agenda-pub-controles {
flex-direction: column;
align-items: stretch;
}
.agenda-pub-nav {
justify-content: space-between;
}
}
/* --- 34. Detalhe do evento na agenda publica ------------------------------
Quem abre o link nao entra no app: nao ha tela para onde navegar, entao o
evento se abre onde esta. O `#modal-overlay` vive no nivel do body, fora do
`#app`, e por isso funciona com o app escondido. */
.agenda-pub-detalhe {
display: flex;
flex-direction: column;
gap: 14px;
}
.agenda-pub-campos {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
}
.agenda-pub-campos > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.agenda-pub-campos dt {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
}
.agenda-pub-campos dt [data-lucide] { width: 14px; height: 14px; }
.agenda-pub-campos dd {
margin: 0;
font-size: 14.5px;
color: var(--text);
}
/* Data por extenso vem em minuscula do `toLocaleDateString`. */
.agenda-pub-campos dd::first-letter { text-transform: uppercase; }
.agenda-pub-sobre strong { font-size: 13px; color: var(--text); }
.agenda-pub-sobre p {
margin: 4px 0 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-secondary);
}
/* Dia com mais de um evento: a escolha antes do detalhe. */
.agenda-pub-escolha {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 10px 12px;
text-align: left;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--cor-tipo, var(--border));
border-radius: var(--radius);
cursor: pointer;
}
.agenda-pub-escolha:hover { background: var(--surface-muted); }
.agenda-pub-escolha-hora {
flex-shrink: 0;
font-size: 12.5px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.agenda-pub-escolha-titulo {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 500;
color: var(--text);
}
.agenda-pub-escolha [data-lucide] {
width: 16px;
height: 16px;
color: var(--text-muted);
flex-shrink: 0;
}
/* O cartao da lista e o dia da grade agora abrem algo: precisam parecer. */
.agenda-pub-item[data-pub-evento] { cursor: pointer; }
.agenda-pub-item[data-pub-evento]:hover { background: var(--surface-muted); }
.agenda-pub-item[data-pub-evento]:focus-visible,
.evt-dia[data-pub-dia]:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
/* ===== MENU DE CONTA NO RODAPÉ DA SIDEBAR ================================ */
/* O cartão do usuário virou o gatilho de um menu suspenso, como no componente
sidebar do shadcn: Configurações, tema e Sair moram lá dentro em vez de
ocupar três linhas fixas da barra. O menu é `position: fixed` e ancorado por
JS (App.ancorarPerfilMenu) porque a sidebar recolhida corta o overflow. */
.sidebar-user {
/* era ; como