/* ==========================================================================
Ivy Beach Tennis — Sistema Interno
Design system único (sem build, sem CDN externo). Ver docs/design-guidelines.md
========================================================================== */
/* Avisa o navegador em que esquema estamos: sem isso a barra de rolagem, os
controles nativos de e o autopreenchimento continuam
claros dentro do tema escuro. A classe do tema fica no body, então o
seletor sobe até o html para alcançar a raiz. */
html:has(body.tema-escuro){color-scheme:dark}
:root{
color-scheme:light;
/* marca — logo Ivy Beach Tennis (cores extraídas por amostragem de pixel dos originais) */
--color-primary:#2F3A58; /* navy da marca — topbar, botões primários, links */
--color-primary-hover:#262E46; /* navy mais escuro — hover de botão/link primário */
--color-primary-light:#E1F5F8; /* turquesa bem suave — fundos suaves, badges, hover de linha (nunca turquesa puro em texto pequeno) */
--color-accent:#5ACEDB; /* turquesa da marca — acento gráfico e detalhes; AA só em texto grande/ícone sobre branco ou qualquer texto sobre navy */
--color-accent-hover:#48A5AF; /* turquesa mais escuro — hover de elementos de acento */
--color-sidebar:#2F3A58; /* fundo da sidebar (no tema escuro diverge do primary) */
--color-on-primary:#FFFFFF; /* texto sobre botão primário */
--color-danger-hover:#96201a;
/* superfícies e texto */
--color-bg:#F5F7F7; /* fundo da página — neutro frio, não bege */
--color-surface:#FFFFFF; /* cards, tabelas, inputs */
--color-surface-alt:#EFF3F2; /* zebra de tabela, seções alternadas */
--color-border:#D9E0DE;
--color-text:#1A2422; /* quase-preto frio, nunca #000 puro */
--color-text-muted:#5B6B67;
--color-text-inverse:#FFFFFF;
/* estados semânticos — sempre com texto, nunca só cor */
--color-success:#1E7A4C; --color-success-bg:#E4F4EA; --color-success-hover:#175E3B;
--color-warning:#8A5A00; --color-warning-bg:#FCF1D8; /* pendente, pausado, manutenção */
--color-danger:#B3261E; --color-danger-bg:#FBEAE9; /* rejeitada, inativo, erro genérico */
--color-atrasado:#B0170E; --color-atrasado-bg:#FBDBD9; /* distinto de erro: mais forte, sempre bold */
--color-info:#2A5C8A; --color-info-bg:#E7F0F7; --color-info-hover:#224B71; /* processando, emitida */
/* forma */
--radius-sm:6px; /* inputs, badges internos */
--radius-md:10px; /* cards, botões, tabelas */
--radius-full:999px; /* pills: badges e botões redondos */
--shadow-sm:0 1px 2px rgba(15,32,29,.07);
--shadow-md:0 2px 10px rgba(15,32,29,.10); /* só topbar sticky e menus flutuantes */
/* espaçamento — escala de 4px */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:24px; --space-6:32px; --space-7:48px;
}
*,*::before,*::after{box-sizing:border-box}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
margin:0;
background:var(--color-bg);
color:var(--color-text);
font-size:1rem;
line-height:1.5;
}
h1{font-size:1.75rem;font-weight:600;line-height:1.2;margin:0 0 var(--space-4)}
h2{font-size:1.375rem;font-weight:600;line-height:1.3;margin:0 0 var(--space-3)}
h3{font-size:1.125rem;font-weight:600;line-height:1.35;margin:0 0 var(--space-3)}
small,.helptext,.metadado{font-size:.8125rem;line-height:1.4;color:var(--color-text-muted)}
a{color:var(--color-primary)}
/* ==========================================================================
Layout
========================================================================== */
/* main é item flex (dentro de .area-principal, flex-direction:column) com
margin:0 auto para centralizar — margens automáticas no eixo cruzado
desabilitam o "stretch" padrão do flex e fariam main crescer até o
conteúdo mais largo (ex.: .semana da agenda semanal, min-width:900px),
quebrando o container e rolando a página inteira em vez do .table-wrap.
width:100% + min-width:0 restauram o comportamento de ocupar a largura
disponível, com max-width/margin ainda limitando e centralizando. */
main{max-width:1100px;width:100%;min-width:0;margin:0 auto;padding:var(--space-5) var(--space-4)}
/* ==========================================================================
Sidebar + topbar
========================================================================== */
body.com-sidebar{display:flex;min-height:100vh}
.sidebar{
width:220px;flex-shrink:0;background:var(--color-sidebar);color:var(--color-text-inverse);
display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:visible;
/* overflow-y:visible (não auto) de propósito: os ~10 itens de navegação
cabem folgado em qualquer altura de desktop real, e overflow-y:auto
forçaria overflow-x também para "auto" (mesma interação de overflow do
.table-wrap documentada no guia de design), cortando o tooltip do modo
recolhido, que precisa escapar a faixa de 60px para a direita. */
}
.sidebar-marca{display:block;padding:var(--space-4)}
.sidebar-marca img{height:34px;width:auto;display:block}
/* seletor de especificidade igual a ".sidebar-marca img" acima (precisa
ganhar dela, não só da regra .sidebar-marca-mini isolada, senão as duas
logos aparecem empilhadas — visto no passe visual mobile). */
.sidebar-marca img.sidebar-marca-mini{display:none}
.sidebar-nav{display:flex;flex-direction:column;padding:var(--space-1) var(--space-2);gap:2px}
.sidebar-nav a{
display:flex;align-items:center;gap:.65rem;color:var(--color-text-inverse);text-decoration:none;
padding:.55rem var(--space-3);border-radius:var(--radius-sm);font-size:.9375rem;min-height:44px;
}
.sidebar-nav a svg{width:20px;height:20px;flex-shrink:0}
.sidebar-nav a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media (hover:hover){.sidebar-nav a:hover{background:rgba(255,255,255,.12)}}
/* Item ativo (Fase 1 do redesign): fundo mais claro + filete turquesa à
esquerda — turquesa sobre navy passa AA como elemento gráfico. */
.sidebar-nav a.ativa{background:rgba(255,255,255,.16);box-shadow:inset 3px 0 0 var(--color-accent)}
.area-principal{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
display:flex;align-items:center;gap:var(--space-4);padding:.5rem var(--space-4);
background:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);
position:sticky;top:0;z-index:20;
}
/* Véu só existe no celular (o hambúrguer também) — no desktop nunca aparece,
mesmo que o JS tire o [hidden]. Regra completa dentro do @media de 768px. */
.sidebar-veu{display:none}
.topbar-menu-btn{
display:none;background:none;border:0;padding:var(--space-2);cursor:pointer;color:var(--color-text);
min-width:44px;min-height:44px;align-items:center;justify-content:center;
}
.busca-global{
display:flex;align-items:center;gap:var(--space-2);flex:1;max-width:420px;
background:var(--color-surface-alt);border:1px solid var(--color-border);
border-radius:var(--radius-full);padding:.35rem .85rem;
}
.busca-global svg{width:18px;height:18px;color:var(--color-text-muted);flex-shrink:0}
.busca-global input{border:0;background:none;outline:none;flex:1;font-size:.9375rem;color:var(--color-text)}
/* O outline:none acima some com o anel do :focus-visible global. Devolvemos o
foco no contêiner (:focus-within), que é a pílula inteira — do contrário o
teclado atravessa a busca sem nenhum sinal visível. */
.busca-global:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}
.topbar-usuario{
margin-left:auto;display:flex;gap:var(--space-3);align-items:center;
font-size:.9375rem;white-space:nowrap;
}
.topbar-usuario form{margin:0;display:inline}
.btn-sair{color:var(--color-primary);padding:var(--space-1) 0}
.topbar-recolher{display:inline-flex;align-items:center;justify-content:center;
min-width:40px;min-height:40px;background:none;border:0;cursor:pointer;color:var(--color-text)}
@media (max-width:768px){.topbar-recolher{display:none}} /* no mobile o hambúrguer manda */
/* Recolher é recurso de desktop (o botão que o aciona já some abaixo de
769px). Sem este @media, a preferência salva no localStorage (comum ao
mesmo navegador/origem) vazaria pro painel deslizante do celular — a
sidebar mobile viraria a faixa de 60px só com ícones, sem os rótulos de
texto de que a navegação por toque depende. */
@media (min-width:769px){
body.sidebar-recolhida .sidebar{width:60px}
/* logo horizontal (proporção ~2.3:1) não cabe na faixa de 60px sem cortar —
troca para o badge redondo (mesma marca usada no favicon), que cabe em
qualquer largura. */
body.sidebar-recolhida .sidebar-marca{padding:var(--space-3) 0;text-align:center}
body.sidebar-recolhida .sidebar-marca-cheia{display:none}
body.sidebar-recolhida .sidebar-marca-mini{display:inline-block;height:32px;width:32px;margin:0 auto}
body.sidebar-recolhida .sidebar-nav a{justify-content:center;padding:.55rem 0;position:relative}
/* rótulo fica visualmente oculto mas PRESENTE (leitor de tela ainda lê o nome
do link) em vez de display:none, que zeraria o nome acessível. */
body.sidebar-recolhida .sidebar-nav a span{position:absolute;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* tooltip no hover E no foco por teclado */
body.sidebar-recolhida .sidebar-nav a:hover::after,
body.sidebar-recolhida .sidebar-nav a:focus-visible::after{content:attr(data-tooltip);
position:absolute;left:100%;margin-left:8px;white-space:nowrap;background:var(--color-sidebar);
color:#fff;padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.8125rem;z-index:50}
}
/* ==========================================================================
Hub de Configurações
========================================================================== */
.config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}
.config-card{
display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);
border:1px solid var(--color-border);border-radius:var(--radius-md);
background:var(--color-surface);text-decoration:none;color:var(--color-text);
}
@media (hover:hover){.config-card:hover{border-color:var(--color-primary)}}
.config-card span{font-size:.875rem;color:var(--color-text-muted)}
@media (max-width:768px){
.sidebar{
position:fixed;left:0;top:0;transform:translateX(-100%);
transition:transform .2s ease-out;z-index:40;height:100dvh;
}
.sidebar.aberta{transform:translateX(0);box-shadow:var(--shadow-md)}
.topbar-menu-btn{display:flex}
/* A sidebar aberta cobre o canto onde fica o hambúrguer, então o botão que
abriu deixa de ser alcançável. Sem este véu não sobrava NENHUMA forma de
fechar o menu no celular: só navegando para outra página. Tocar no véu
fecha (o app.js também fecha no Escape). */
.sidebar-veu{
display:block;position:fixed;inset:0;z-index:35;background:rgba(9,13,24,.5);
border:0;width:100%;padding:0;
}
.sidebar-veu[hidden]{display:none}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}
/* ==========================================================================
Tabelas de dados
========================================================================== */
/* position:relative contém descendentes absolutos (ex.: .sr-only nos th) dentro
da área rolável — sem isso eles escapam do overflow e alargam a página no mobile */
.table-wrap{position:relative;overflow-x:auto;background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}
table{
border-collapse:collapse;width:100%;background:var(--color-surface);
font-variant-numeric:tabular-nums;
}
th,td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid var(--color-border)}
th{font-weight:600;font-size:.875rem;color:var(--color-text-muted);background:var(--color-surface)}
tbody tr:nth-child(even){background:var(--color-surface-alt)}
@media (hover:hover){
tbody tr:hover{background:var(--color-primary-light)}
}
td.valor{font-variant-numeric:tabular-nums}
/* ==========================================================================
Formulários (`{{ form.as_p }}`)
========================================================================== */
form p{margin:0 0 var(--space-4)}
form label{display:block;font-weight:600;font-size:.875rem;margin-bottom:var(--space-1)}
form input,form select,form textarea{
width:100%;padding:.5rem .75rem;border:1px solid var(--color-border);
border-radius:var(--radius-sm);font-size:1rem;background:var(--color-surface);color:var(--color-text);
font-family:inherit;
}
form input:focus,form select:focus,form textarea:focus{
outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)
}
form .helptext{display:block;font-size:.8125rem;color:var(--color-text-muted);margin-top:var(--space-1)}
.errorlist{list-style:none;margin:var(--space-1) 0 0;padding:0;color:var(--color-danger);font-size:.875rem}
.form-padrao{max-width:520px}
.form-padrao-largo{max-width:640px}
/* Agrupamento visual de formulários longos (fieldset nativo, sem JS) */
.form-secao{
border:1px solid var(--color-border);border-radius:var(--radius-md);
padding:var(--space-4);margin:0 0 var(--space-5);min-width:0;
}
.form-secao legend{
font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--color-text);
padding:0 var(--space-2);
}
.form-secao p:last-child{margin-bottom:0}
/* Destino da venda recolhido: cada seção mostra só o radio; os campos abrem
quando ELA é a escolhida. Sem suporte a :has() (navegador antigo) nada é
escondido — o formulário inteiro continua funcionando, só menos compacto. */
.destino-escolha{margin-bottom:0}
.destino-escolha label{cursor:pointer}
.destino-corpo{margin-top:var(--space-3)}
.destino-corpo > p:first-child{margin-top:0}
@supports selector(:has(*)){
.destino-secao:not(:has(.destino-escolha input:checked)) .destino-corpo{display:none}
}
.login-logo{display:block;max-width:220px;height:auto;margin:0 auto var(--space-6)}
.form-acoes{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-4)}
/* Barra de busca/filtro (formulário GET compacto, fora do form.as_p) */
.filtro-form{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:end;margin-bottom:var(--space-4)}
.filtro-campo{display:flex;flex-direction:column;gap:var(--space-1)}
.filtro-campo label{font-weight:600;font-size:.875rem;margin:0}
.filtro-campo input,.filtro-campo select{width:auto;min-width:220px}
@media (max-width:768px){
.filtro-form{align-items:stretch}
.filtro-campo{width:100%}
.filtro-campo input,.filtro-campo select{min-width:0;width:100%}
}
/* checkbox não deve ocupar 100% de largura */
form input[type="checkbox"],form input[type="radio"]{width:auto}
/* Abas de filtro (links com estado ativo — ex.: situação de pagamento) */
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.tabs a{
padding:.5rem 1rem;border-radius:var(--radius-md);font-weight:600;font-size:.9375rem;
color:var(--color-text-muted);text-decoration:none;border:1px solid var(--color-border);
background:var(--color-surface);transition:background .15s ease-out,color .15s ease-out;
}
@media (hover:hover){.tabs a:hover{background:var(--color-surface-alt);color:var(--color-text)}}
.tabs a.tab-ativa{background:var(--color-primary-light);color:var(--color-primary);border-color:var(--color-primary-light)}
/* ==========================================================================
Botões
========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
padding:.6rem 1.25rem;border-radius:var(--radius-md);font-weight:600;font-size:.9375rem;
border:1px solid transparent;text-decoration:none;cursor:pointer;
transition:transform .15s ease-out,background .15s ease-out;
min-height:44px;font-family:inherit;
}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--color-primary);color:var(--color-on-primary)}
@media (hover:hover){.btn-primario:hover{background:var(--color-primary-hover)}}
.btn-secundario{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-border)}
@media (hover:hover){.btn-secundario:hover{background:var(--color-surface-alt)}}
.btn-perigo{background:var(--color-danger);color:var(--color-on-primary)}
@media (hover:hover){.btn-perigo:hover{background:var(--color-danger-hover)}}
/* Variantes de tom para os atalhos do dashboard: no tema escuro os pares
semânticos invertem (fundo claro + texto escuro via --color-on-primary). */
.btn-verde{background:var(--color-success);color:var(--color-on-primary)}
@media (hover:hover){.btn-verde:hover{background:var(--color-success-hover)}}
.btn-azul{background:var(--color-info);color:var(--color-on-primary)}
@media (hover:hover){.btn-azul:hover{background:var(--color-info-hover)}}
.btn-link{background:none;color:var(--color-primary);padding:.6rem .5rem;min-height:auto}
@media (hover:hover){.btn-link:hover{text-decoration:underline}}
/* botão sem classe explícita dentro de formulários (fallback) */
form button:not([class]){
background:var(--color-primary);color:var(--color-on-primary);border:none;
padding:.6rem 1.25rem;border-radius:var(--radius-md);font-weight:600;font-size:.9375rem;
cursor:pointer;transition:transform .15s ease-out,background .15s ease-out;min-height:44px;
}
@media (hover:hover){form button:not([class]):hover{background:var(--color-primary-hover)}}
form button:not([class]):active{transform:translateY(1px)}
/* ==========================================================================
Badges de status
========================================================================== */
.badge{
display:inline-block;border-radius:var(--radius-full);
padding:.15rem .65rem;font-size:.8125rem;font-weight:600;white-space:nowrap;
}
.badge-success{color:var(--color-success);background:var(--color-success-bg)}
.badge-warning{color:var(--color-warning);background:var(--color-warning-bg)}
.badge-danger{color:var(--color-danger);background:var(--color-danger-bg)}
.badge-atrasado{color:var(--color-atrasado);background:var(--color-atrasado-bg);font-weight:700}
.badge-info{color:var(--color-info);background:var(--color-info-bg)}
.badge-neutro{color:var(--color-text);background:var(--color-surface-alt)}
.produto-thumb{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm, 4px);display:block}
/* venda cancelada (item de comanda fechada estornado) — nunca conta como pago */
.texto-riscado{text-decoration:line-through;color:var(--color-text-muted)}
/* ==========================================================================
Mensagens flash
========================================================================== */
.msg{padding:.75rem 1rem;border-radius:var(--radius-sm);margin-bottom:var(--space-4);font-size:.9375rem}
.msg-success{background:var(--color-success-bg);color:var(--color-success)}
.msg-error{background:var(--color-danger-bg);color:var(--color-danger)}
.msg-warning{background:var(--color-warning-bg);color:var(--color-warning)}
.msg-info,.msg-debug{background:var(--color-info-bg);color:var(--color-info)}
/* ==========================================================================
Grade de reservas (quadras × horários)
========================================================================== */
.grade-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.grade-toolbar-nav{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.grade-legenda{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3);font-size:.8125rem;color:var(--color-text-muted)}
.legenda-cor{width:14px;height:14px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:var(--space-1)}
.legenda-cor-livre{background:var(--color-surface);border:1px solid var(--color-border)}
.legenda-cor-aula{background:var(--color-primary-light)}
.legenda-cor-torneio{background:var(--color-warning-bg);border:1px solid var(--color-warning)}
.legenda-cor-manutencao{background:var(--color-surface-alt)}
td.grade-celula-wrap{padding:3px}
.grade-celula{
min-width:88px;min-height:48px;padding:var(--space-2);border-radius:var(--radius-sm);
font-size:.8125rem;display:flex;flex-direction:column;justify-content:center;gap:var(--space-1);
text-decoration:none;color:inherit;height:100%;
}
.grade-celula-livre{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted)}
@media (hover:hover){.grade-celula-livre:hover{background:var(--color-primary-light);color:var(--color-text)}}
.grade-celula-aula{background:var(--color-primary-light)}
.grade-celula-torneio{background:var(--color-warning-bg);border:1px solid var(--color-warning)}
.grade-celula-manutencao{background:var(--color-surface-alt);color:var(--color-text-muted)}
.grade-celula-acao{font-size:.8125rem;color:var(--color-danger);text-decoration:none}
@media (hover:hover){.grade-celula-acao:hover{text-decoration:underline}}
/* ==========================================================================
Agenda — visão semanal (blocos por CSS grid, estilo NextFit)
========================================================================== */
.semana{display:grid;grid-template-columns:56px repeat(7,minmax(120px,1fr));gap:2px;min-width:900px}
.semana-hora-col,.semana-dia{display:grid;grid-template-rows:40px repeat(var(--linhas),56px)}
/* reservas simultâneas em quadras diferentes caem em colunas implícitas iguais
(lado a lado); com 3+ simultâneas os blocos estreitam — indicador agregado
é melhoria futura */
.semana-corpo{display:grid;grid-template-rows:repeat(var(--linhas),56px);grid-auto-columns:minmax(0,1fr);grid-row:2 / -1;position:relative}
.semana-dia{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.semana-hoje{border-color:var(--color-primary);border-width:2px}
.semana-cabecalho{display:flex;align-items:center;justify-content:center;gap:.35rem;
font-size:.8125rem;text-decoration:none;color:var(--color-text)}
.semana-hora{font-size:.75rem;color:var(--color-text-muted);text-align:right;padding-right:.4rem}
.semana-bloco{display:flex;flex-direction:column;gap:1px;margin:1px;padding:.3rem .45rem;
border-radius:var(--radius-sm);font-size:.75rem;line-height:1.3;text-decoration:none;
overflow:hidden;min-width:0;color:var(--color-text)}
.semana-bloco span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bloco-aula{background:var(--color-primary-light);border:1px solid var(--color-primary)}
.bloco-torneio{background:var(--color-warning-bg);border:1px solid var(--color-warning)}
.bloco-hora{font-weight:700}
/* ==========================================================================
Calendário mensal
========================================================================== */
.calendario{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calendario a{min-width:0} /* permite o ellipsis dos .cal-item encolherem com a coluna */
.cal-cabecalho{font-weight:600;font-size:.8125rem;padding:.3rem;color:var(--color-text-muted)}
.cal-dia{
display:flex;flex-direction:column;gap:2px;min-height:96px;padding:.35rem;
border:1px solid var(--color-border);border-radius:var(--radius-sm);
background:var(--color-surface);text-decoration:none;color:var(--color-text);
}
@media (hover:hover){.cal-dia:hover{background:var(--color-primary-light)}}
.cal-fora{opacity:.45}
.cal-hoje{border-color:var(--color-primary);border-width:2px}
.cal-numero{font-weight:700}
.cal-item{font-size:.75rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-mais{font-size:.75rem;font-weight:600;color:var(--color-primary)}
@media (max-width:768px){
.calendario{grid-template-columns:1fr}
.cal-cabecalho{display:none}
.cal-dia{min-height:0}
.cal-fora{display:none}
}
/* ==========================================================================
Dashboard (Hoje no clube)
========================================================================== */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:var(--space-3);margin-bottom:var(--space-4)}
.stat-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);
border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);
text-decoration:none;color:var(--color-text)}
@media (hover:hover){a.stat-card:hover{border-color:var(--color-primary)}}
.stat-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.stat-topo svg{width:22px;height:22px;color:var(--color-accent-hover);flex-shrink:0}
.stat-num{font-size:1.75rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-de{font-size:1.05rem;font-weight:600;color:var(--color-text-muted)}
.stat-rot{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--color-text-muted)}
/* Ações rápidas do dashboard: na mesma linha do título, encostadas à direita.
Em tela estreita o flex-wrap derruba os botões para baixo do título. */
.titulo-acoes{display:flex;align-items:center;justify-content:space-between;
gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.titulo-acoes h1{margin:0}
.acoes-rapidas{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}
.acoes-rapidas form{margin:0}
.acao-rapida-extra{display:block;font-weight:400;font-size:.75rem;color:inherit;opacity:.75}
/* Ocupação das quadras agora: cards por estado, mesmas cores da agenda */
.ocupacao-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:var(--space-3)}
.ocupacao-card{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);
border-radius:var(--radius-md);border:1px solid var(--color-border);
text-decoration:none;color:var(--color-text)}
.ocupacao-quadra{font-weight:700;font-size:.9375rem;color:var(--color-primary)}
.ocupacao-linha{font-size:.9375rem}
.ocupacao-detalhe{font-size:.8125rem;color:var(--color-text-muted)}
/* Agenda do dia embutida no card (substitui o antigo quadro "Reservas de hoje") */
.ocupacao-reservas{list-style:none;margin:var(--space-2) 0 0;padding:var(--space-2) 0 0;
border-top:1px dashed var(--color-border);display:flex;flex-direction:column;gap:2px;
font-size:.8125rem}
.ocupacao-hora{font-variant-numeric:tabular-nums;font-weight:600}
.reserva-passada{opacity:.55}
.ocupacao-livre{background:var(--color-success-bg);border-color:var(--color-success)}
.ocupacao-aula{background:var(--color-primary-light);border-color:var(--color-primary)}
.ocupacao-torneio,.ocupacao-manutencao{background:var(--color-warning-bg);border-color:var(--color-warning)}
.ocupacao-manutencao .ocupacao-linha{color:var(--color-text-muted)}
/* Comandas em cards (referência: "Gestão de comandas" da IA designer):
nome + saldo em destaque + consumo resumido + total/pago + Abrir → */
.comandas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:var(--space-3)}
.comanda-card{display:flex;flex-direction:column;gap:2px;
padding:var(--space-4);border:1px solid var(--color-border);
border-radius:var(--radius-md);background:var(--color-surface);
text-decoration:none;color:var(--color-text)}
@media (hover:hover){.comanda-card:hover{border-color:var(--color-primary)}}
.comanda-quem{display:flex;align-items:center;gap:var(--space-2);font-weight:700;
margin-bottom:var(--space-2)}
.comanda-saldo-rotulo,.comanda-consumo-rotulo{font-size:.6875rem;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.comanda-consumo-rotulo{margin-top:var(--space-2)}
.comanda-saldo{font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.comanda-saldo.saldo-zerado{color:var(--color-success)}
.comanda-consumo{list-style:none;margin:0;padding:0;font-size:.875rem;
color:var(--color-text-muted);display:flex;flex-direction:column;gap:2px}
.comanda-rodape{margin-top:var(--space-2);padding-top:var(--space-2);
border-top:1px dashed var(--color-border);font-size:.8125rem;
color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.comanda-abrir{margin-top:var(--space-2);font-weight:600;color:var(--color-primary)}
/* Detalhe da comanda no drawer: consumo detalhado + totais */
.drawer-secao{font-size:1.05rem;margin-top:var(--space-5)}
.consumo-detalhado,.consumo-totais{list-style:none;margin:0 0 var(--space-3);padding:0}
.consumo-detalhado li,.consumo-totais li{display:flex;justify-content:space-between;
gap:var(--space-3);padding:var(--space-2) 0;font-variant-numeric:tabular-nums;
border-bottom:1px solid var(--color-border)}
.consumo-totais li{border-bottom:0;padding:var(--space-1) 0;color:var(--color-text-muted)}
.consumo-totais .total-saldo{color:var(--color-text);font-weight:700;font-size:1.05rem;
border-top:1px solid var(--color-border);padding-top:var(--space-2)}
/* Vencimento no dashboard: hoje/amanhã sempre com o texto junto da cor */
.venc-hoje{color:var(--color-atrasado);font-weight:700}
.venc-amanha{color:var(--color-warning);font-weight:700}
/* Ação de contato rápida (WhatsApp) — pílula verde, identificável de longe */
.btn-mensagem{display:inline-flex;align-items:center;padding:2px 12px;white-space:nowrap;
border-radius:var(--radius-full);border:1px solid var(--color-success);
background:var(--color-success-bg);color:var(--color-success);
font-weight:600;font-size:.8125rem;text-decoration:none}
@media (hover:hover){.btn-mensagem:hover{background:var(--color-success);color:var(--color-on-primary)}}
/* Feed "Atividades e acontecimentos" (dashboard) e menu do sino */
.atividades-lista{list-style:none;margin:0;padding:0;background:var(--color-surface);
border:1px solid var(--color-border);border-radius:var(--radius-md)}
.atividades-lista li{display:flex;flex-direction:column;gap:2px;
padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);
font-size:.9375rem}
.atividades-lista li:last-child{border-bottom:0}
.atividade-quando{font-size:.75rem;color:var(--color-text-muted)}
.atividade-destaque{background:var(--color-success-bg)}
.atividades-lista li.atividade-destaque:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}
.topbar-sino{position:relative}
.topbar-sino summary{list-style:none;cursor:pointer;display:inline-flex;position:relative;
align-items:center;justify-content:center;min-width:44px;min-height:44px;
color:var(--color-text-muted);border-radius:var(--radius-sm)}
.topbar-sino summary::-webkit-details-marker{display:none}
.topbar-sino summary:hover{color:var(--color-text)}
.sino-ponto{position:absolute;top:10px;right:10px;width:9px;height:9px;
border-radius:var(--radius-full);background:var(--color-atrasado);
border:2px solid var(--color-surface)}
.sino-menu{position:absolute;right:0;top:100%;margin-top:4px;width:min(340px,90vw);
background:var(--color-surface);border:1px solid var(--color-border);
border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:40;
padding:var(--space-2) 0}
.sino-titulo{margin:0;padding:var(--space-2) var(--space-4);font-weight:700;font-size:.875rem}
.sino-menu ul{list-style:none;margin:0;padding:0;max-height:60vh;overflow-y:auto}
.sino-menu li{display:flex;flex-direction:column;gap:2px;font-size:.875rem;
padding:var(--space-2) var(--space-4);border-top:1px solid var(--color-border)}
.sino-menu li.atividade-destaque{background:var(--color-success-bg)}
/* Iniciais do aniversariante (mock): círculo neutro com a letra */
.avatar-iniciais{display:inline-grid;place-items:center;width:32px;height:32px;
border-radius:var(--radius-full);background:var(--color-surface-alt);
color:var(--color-primary);font-weight:700;font-size:.8125rem}
.dash-colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-4)}
.dash-secao{margin-bottom:var(--space-6)}
.dash-secao h2{display:flex;align-items:center;gap:.4rem}
.dash-secao h2 svg{width:20px;height:20px;color:var(--color-accent-hover)}
.dash-largo{grid-column:1 / -1}
@media (max-width:768px){.dash-colunas{grid-template-columns:1fr}}
/* ==========================================================================
Vitrines Bar/Loja (grade de cards, estilo NextFit)
========================================================================== */
.vitrine-topo{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.vitrine-topo h1{margin:0}
.vitrine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-4)}
.vitrine-card{
display:flex;flex-direction:column;background:var(--color-surface);
border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;
}
.vitrine-card-foto{
height:140px;background:var(--color-surface-alt);display:flex;
align-items:center;justify-content:center;color:var(--color-text-muted);flex-shrink:0;
}
.vitrine-card-foto img{width:100%;height:100%;object-fit:cover;display:block}
.vitrine-card-foto svg{width:44px;height:44px}
.vitrine-card-corpo{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3)}
.vitrine-card-nome{margin:0;font-size:1rem;line-height:1.3}
.vitrine-card-preco{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.vitrine-card-estoque{font-size:.8125rem;color:var(--color-text-muted)}
.vitrine-card-form{display:flex;gap:var(--space-2);margin-top:auto}
.vitrine-card-form input[type="number"]{width:64px;flex-shrink:0;padding:.5rem .5rem}
.vitrine-card-form .btn{flex:1;min-width:0;padding-left:var(--space-2);padding-right:var(--space-2)}
/* ==========================================================================
Empty states
========================================================================== */
.empty-state{
text-align:center;color:var(--color-text-muted);
padding:var(--space-7) var(--space-4);
}
.empty-state-titulo{font-weight:600;font-size:1.0625rem;color:var(--color-text);margin:0 0 var(--space-2)}
/* Trava a medida de leitura: em tela cheia (páginas de erro, listas vazias no
desktop) a frase de ajuda esticava por quase 1000px numa linha só. */
.empty-state p{max-width:52ch;margin-inline:auto}
.empty-state .btn{margin-top:var(--space-4)}
/* ==========================================================================
Acessibilidade e microdetalhes
========================================================================== */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
*{transition:none!important;animation:none!important}
}
/* ==========================================================================
Responsividade
========================================================================== */
@media (max-width:768px){
main{padding:var(--space-4)}
}
/* ==========================================================================
Pacote de aulas — mini-ações na agenda e ações por linha no detalhe
========================================================================== */
/* aluno + presença dentro do bloco da grade (dia) e da semana */
.grade-celula-link,.bloco-link{font-weight:600;color:var(--color-text);text-decoration:none}
@media (hover:hover){.grade-celula-link:hover,.bloco-link:hover{text-decoration:underline}}
/* .bloco-link, diferente de .grade-celula-link, vive num grid de altura fixa
(1 linha = 1h) — sem truncar, o nome do aluno quebra em 2-3 linhas e empurra
o rodapé (badge + Remarcar) para fora do bloco, que aí é cortado pelo
overflow:hidden. Trunca em uma linha só, como os demais do bloco. */
.bloco-link{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grade-celula-acoes{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-1)}
.grade-celula-aula form{margin:0}
/* botão compacto para caber dentro da célula da grade do dia — mantém a
altura mínima de toque (44px, herdada de .btn), só reduz padding/fonte */
.btn-compacto{padding:.4rem .6rem;font-size:.8125rem;width:100%}
/* bloco de aula de pacote na agenda semanal: div (não ) porque tem link
interno para o pacote — aninhado dentro de é HTML inválido */
.bloco-pacote{
padding:.2rem .45rem;display:flex;flex-direction:column;gap:1px;
overflow:hidden;min-width:0;color:var(--color-text);
}
.bloco-pacote .badge{align-self:flex-start}
/* badge + "Remarcar" na mesma linha — evita uma 4ª linha no bloco (já
apertado em 56px/hora) e garante que o link não é cortado pelo
overflow:hidden do bloco. Badge fica mais compacto aqui (rodapé) do que
no padrão .badge, só para ganhar a altura que falta no bloco de 1h. */
.bloco-pacote-rodape{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap;min-width:0}
.bloco-pacote-rodape .badge{padding:.05rem .5rem;font-size:.6875rem;flex-shrink:0}
.bloco-acao{font-size:.6875rem;color:var(--color-primary);text-decoration:underline;
white-space:nowrap;flex-shrink:0}
@media (hover:hover){.bloco-acao:hover{color:var(--color-primary-hover)}}
/* ações por linha na tabela de aulas do pacote (check-in/falta/remarcar/desmarcar) */
.pacote-acoes-linha{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.pacote-acoes-linha form{margin:0;display:inline-flex}
/* "Remarcar" abre um popover com o form compacto, sem JS ( nativo) */
.pacote-remarcar{position:relative;display:inline-block}
.pacote-remarcar summary{list-style:none}
.pacote-remarcar summary::-webkit-details-marker{display:none}
.pacote-remarcar[open] .filtro-form{
position:absolute;top:100%;left:0;z-index:25;background:var(--color-surface);
border:1px solid var(--color-border);border-radius:var(--radius-sm);
box-shadow:var(--shadow-md);padding:var(--space-3);margin-top:var(--space-1);
min-width:260px;flex-wrap:nowrap;flex-direction:column;align-items:stretch;
}
.pacote-remarcar .filtro-campo input,.pacote-remarcar .filtro-campo select{width:100%;min-width:0}
@media (max-width:768px){
.pacote-remarcar[open] .filtro-form{position:fixed;left:var(--space-4);right:var(--space-4);
top:auto;bottom:var(--space-4);width:auto;box-shadow:var(--shadow-md)}
}
/* ==========================================================================
Kebab de ações (menu de 3 pontinhos, puro, sem JS)
========================================================================== */
.kebab{position:relative}
.kebab summary{list-style:none;cursor:pointer;padding:.25rem .6rem;border-radius:var(--radius-sm);
font-size:1.25rem;line-height:1;display:inline-block;min-width:44px;min-height:32px;text-align:center}
.kebab summary::-webkit-details-marker{display:none}
.kebab summary:hover{background:var(--color-surface-alt)}
.kebab[open] .kebab-menu{display:flex}
.kebab-menu{display:none;position:absolute;right:0;top:100%;z-index:30;flex-direction:column;
min-width:160px;background:var(--color-surface);border:1px solid var(--color-border);
border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:.25rem}
.kebab-menu a{padding:.5rem .75rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--color-text)}
.kebab-menu a:hover{background:var(--color-surface-alt)}
.kebab-perigo{color:var(--color-danger)}
/* ==========================================================================
Modal genérico (overlay + card) — usado por "Nova reserva"; acima da
sidebar mobile (z-index:40) e da topbar (z-index:20)
========================================================================== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,32,29,.45);display:flex;
align-items:flex-start;justify-content:center;padding:5vh 1rem;z-index:60;overflow-y:auto}
.modal-overlay[hidden]{display:none}
.modal{background:var(--color-surface);border-radius:var(--radius-md);max-width:560px;width:100%;
padding:var(--space-5);position:relative;box-shadow:var(--shadow-md)}
.modal-fechar{position:absolute;top:.5rem;right:.5rem;background:none;border:0;font-size:1.5rem;
line-height:1;cursor:pointer;min-width:44px;min-height:44px;color:var(--color-text-muted)}
.modal-fechar:hover{color:var(--color-text)}
body.modal-aberto{overflow:hidden}
/* ==========================================================================
Drawer lateral (Fase 2 do redesign) — carrinho/destino do produto.
Mesmo papel do modal, ancorado à direita; sem JS cai na página cheia.
========================================================================== */
.drawer-overlay{position:fixed;inset:0;background:rgba(15,32,29,.45);z-index:60;
display:flex;justify-content:flex-end}
.drawer-overlay[hidden]{display:none}
.drawer{background:var(--color-surface);width:min(440px,100%);height:100dvh;
overflow-y:auto;position:relative;box-shadow:var(--shadow-md);
padding:var(--space-5);transform:translateX(0);animation:drawer-entra .2s ease-out}
@keyframes drawer-entra{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.drawer-fechar{position:absolute;top:.5rem;right:.5rem;background:none;border:0;
font-size:1.5rem;line-height:1;cursor:pointer;min-width:44px;min-height:44px;
color:var(--color-text-muted)}
.drawer-fechar:hover{color:var(--color-text)}
.drawer-titulo{font-size:1.375rem}
body.drawer-aberto{overflow:hidden}
/* Forma de pagamento em cards (substitui o