flexível (min-width:0 vem do styles.css base) era espremido a quase 0px
pelos dois botões, quebrando o texto letra por letra. */
flex-wrap: wrap;
border: 0;
border-bottom: 1px solid var(--av-line);
border-radius: 0;
background: none !important;
padding: 11px 0;
}
body.dashboard-body .birthday-item > div {
flex: 1 0 160px;
min-width: 160px;
}
body.dashboard-body .birthday-day {
font-family: var(--av-serif);
color: var(--av-brand);
}
body.dashboard-body .management-card {
padding: 0;
border: 0 !important;
border-bottom: 1px solid var(--av-line) !important;
border-radius: 0;
background: none !important;
}
body.dashboard-body .management-card-header {
border: 0;
padding: 16px 0;
background: none;
}
body.dashboard-body .management-card-header h3 {
font-family: var(--av-sans);
font-size: 12.5px;
font-weight: 400;
}
body.dashboard-body .management-card-header p {
font-size: 11.5px;
color: var(--av-muted);
margin: 0;
}
body.dashboard-body .service-card {
/* Não é uma linha de tabela — o
empilha até 7 filhos (heading,
h3, p, fotos/edição opcionais, preço, rodapé). Um grid de 4 colunas
espremia título e duração em colunas erradas e quebrava o texto. */
display: block;
min-width: 0;
border: 0 !important;
border-bottom: 1px solid var(--av-line) !important;
border-radius: 0;
background: none !important;
padding: 15px 0;
}
body.dashboard-body .service-symbol {
display: none;
}
body.dashboard-body .service-card-heading {
margin-bottom: 6px;
}
body.dashboard-body .service-card h3 {
font-family: var(--av-sans);
font-size: 12.5px;
font-weight: 400;
margin: 0;
}
body.dashboard-body .service-card > p {
font-size: 11.5px;
color: var(--av-muted);
margin: 0;
}
body.dashboard-body .service-card-footer {
border: 0;
padding: 0;
justify-content: flex-end;
}
body.dashboard-body .service-photo-grid img {
border-radius: var(--av-radius);
border: 1px solid var(--av-line);
}
/* ---------- 11. Relatórios ---------- */
body.dashboard-body .report-filter {
border: 0;
background: none;
padding: 0;
}
body.dashboard-body .report-period-shortcuts {
gap: 20px;
}
body.dashboard-body .report-period-shortcuts .button {
min-height: 30px;
padding: 0 0 3px;
border: 0 !important;
border-radius: 0;
background: none !important;
color: var(--av-faint) !important;
font-weight: 400;
}
body.dashboard-body .report-period-shortcuts .button:hover {
color: var(--av-ink) !important;
box-shadow: inset 0 -1px 0 0 var(--av-brand) !important;
}
body.dashboard-body .report-delta {
display: block;
margin: 5px 0 0;
padding: 0;
border: 0;
background: none !important;
color: var(--av-muted) !important;
font-size: 11px;
font-weight: 400;
}
body.dashboard-body .report-delta--down {
color: var(--av-alert) !important;
}
body.dashboard-body .report-grid,
body.dashboard-body .report-card {
border: 0 !important;
background: none !important;
padding: 0;
}
body.dashboard-body .report-card + .report-card {
margin-top: 32px;
}
body.dashboard-body .report-card .section-heading h3 {
font-family: var(--av-sans);
font-size: 9.5px;
font-weight: 400;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--av-faint);
}
body.dashboard-body .report-card .section-heading p {
display: none;
}
body.dashboard-body .report-bar-chart {
gap: 20px;
border-bottom: 1px solid var(--av-line);
/* Cada barra é flex:1 (styles.css) sem largura mínima — com muitas
semanas no período, o valor em reais espremia a ponto de quebrar
caractere por caractere. Uma largura mínima por barra + rolagem
horizontal no conjunto resolve sem cortar nenhuma semana da lista. */
overflow-x: auto;
padding-bottom: 4px;
}
body.dashboard-body .report-bar-chart__bar {
flex: 1 0 64px;
min-width: 64px;
background: var(--av-brand-soft);
border-top: 2px solid var(--av-brand);
border-radius: 0;
}
body.dashboard-body .report-bar-chart__bar span {
font-size: 11px;
color: var(--av-muted);
font-variant-numeric: tabular-nums;
}
body.dashboard-body .report-bar-chart__bar small {
font-size: 10.5px;
color: var(--av-faint);
}
body.dashboard-body .ranking-list > li {
/* .ranking-position fica oculta logo abaixo — sem justify-content, o
nome e a contagem (os 2 filhos que sobram) ficavam colados à esquerda
em vez do número aparecer alinhado à direita. */
justify-content: space-between;
border: 0;
border-bottom: 1px solid var(--av-line);
border-radius: 0;
background: none !important;
padding: 10px 0;
font-size: 12.5px;
}
body.dashboard-body .ranking-position {
display: none;
}
body.dashboard-body .ranking-list > li small {
display: none;
}
body.dashboard-body .ranking-list > li b {
font-weight: 400;
color: var(--av-muted);
font-variant-numeric: tabular-nums;
}
/* ---------- 12. Configurações e planos ---------- */
body.dashboard-body .settings-subnav {
display: flex;
gap: 24px;
border-bottom: 1px solid var(--av-line);
margin: 0 0 26px;
}
body.dashboard-body .settings-subnav__button {
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: none;
color: var(--av-muted);
font-family: inherit;
font-size: 12.5px;
}
body.dashboard-body .settings-subnav__button[aria-expanded="true"] {
color: var(--av-ink);
box-shadow: inset 0 -1px 0 0 var(--av-brand);
}
body.dashboard-body .settings-subnav__icon {
display: none;
}
body.dashboard-body .settings-inner-group {
border: 0 !important;
border-bottom: 1px solid var(--av-line) !important;
border-radius: 0;
background: none !important;
}
body.dashboard-body .settings-inner-group > summary,
body.dashboard-body .create-panel > summary,
body.dashboard-body .settings-disclosure > summary {
padding: 16px 0;
border: 0;
background: none;
font-size: 12.5px;
}
body.dashboard-body .settings-inner-group > summary small,
body.dashboard-body .create-panel > summary small {
display: block;
font-size: 11.5px;
color: var(--av-faint);
}
body.dashboard-body .create-panel {
border: 0 !important;
border-bottom: 1px solid var(--av-line) !important;
border-radius: 0;
background: none !important;
margin: 0 0 22px;
}
body.dashboard-body .theme-option {
border-radius: var(--av-radius);
box-shadow: none;
}
body.dashboard-body .theme-option {
border: 1px solid var(--av-line);
background: none;
overflow: hidden;
}
body.dashboard-body .theme-option:has(input:checked) {
border-color: var(--av-brand);
}
body.dashboard-body .theme-option strong {
font-weight: 400;
font-size: 11px;
}
/* Planos: sem selo SVG nem gradiente — selo de texto simples, coerente com
o resto do tema clean (sem imagem, só tipografia e cor de destaque). */
body.dashboard-body .plan-option__badge {
display: inline-block;
margin: 0 0 10px;
padding: 3px 10px;
border-radius: 999px;
background: var(--av-brand);
color: var(--av-brand-contrast);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
body.dashboard-body .plan-option__badge--promo {
background: var(--av-promo);
color: var(--av-promo-contrast);
}
body.dashboard-body .plan-option--promo { border-color: var(--av-promo); }
body.dashboard-body .plan-comparison {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--av-line);
border-radius: var(--av-radius-card);
overflow: hidden;
}
body.dashboard-body .plan-option {
border: 0 !important;
border-right: 1px solid var(--av-line) !important;
border-radius: 0;
background: none !important;
box-shadow: none !important;
padding: 26px 22px;
}
body.dashboard-body .plan-option:last-child {
border-right: 0 !important;
}
body.dashboard-body .plan-option--plus,
body.dashboard-body .plan-option--featured {
background: var(--av-brand-soft) !important;
box-shadow: inset 0 2px 0 0 var(--av-brand) !important;
}
body.dashboard-body .plan-option__eyebrow {
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--av-muted);
}
body.dashboard-body .plan-option--plus .plan-option__eyebrow,
body.dashboard-body .plan-option--featured .plan-option__eyebrow {
color: var(--av-brand);
}
body.dashboard-body .plan-option h3 {
font-family: var(--av-serif);
font-size: 34px;
font-weight: 400;
letter-spacing: -.02em;
margin: 12px 0 4px;
}
body.dashboard-body .plan-option h3 small {
font-family: var(--av-sans);
font-size: 11px;
color: var(--av-faint);
}
body.dashboard-body .plan-option ul {
margin: 18px 0 24px;
padding: 18px 0 0;
border-top: 1px solid var(--av-line);
list-style: none;
display: grid;
gap: 10px;
}
body.dashboard-body .plan-option li {
position: relative;
padding-left: 18px;
font-size: 11.5px;
line-height: 1.5;
color: var(--av-ink);
}
body.dashboard-body .plan-option li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--av-brand);
}
body.dashboard-body .plan-option__destaque {
font-size: 11px;
color: var(--av-brand);
}
body.dashboard-body .plan-status-card {
border: 0 !important;
border-bottom: 1px solid var(--av-line) !important;
border-radius: 0;
background: none !important;
padding: 0 0 20px;
margin: 0 0 26px;
}
body.dashboard-body .plan-price strong {
font-family: var(--av-serif);
font-weight: 400;
color: var(--av-brand);
}
body.dashboard-body .package-grid {
display: inline-flex;
gap: 0;
border: 1px solid var(--av-line);
border-radius: var(--av-radius);
overflow: hidden;
}
body.dashboard-body .package-option {
border: 0;
border-right: 1px solid var(--av-line);
border-radius: 0;
background: none;
padding: 9px 16px;
font-size: 11px;
color: var(--av-muted);
}
body.dashboard-body .package-option:last-child {
border-right: 0;
}
body.dashboard-body .plus-lock-badge {
border: 0;
background: none !important;
padding: 0 0 0 8px;
color: var(--av-faint) !important;
font-size: 10.5px;
font-weight: 400;
}
/* ---------- 13. Diálogos e estados ---------- */
body.dashboard-body .drawer-dialog {
border: 1px solid var(--av-line);
border-radius: var(--av-radius-card);
background: var(--av-surface);
box-shadow: none;
color: var(--av-ink);
}
body.dashboard-body .drawer-dialog::backdrop {
background: color-mix(in srgb, var(--av-bg) 82%, transparent);
backdrop-filter: blur(2px);
}
body.dashboard-body .dialog-header {
border-bottom: 1px solid var(--av-line);
background: none;
}
body.dashboard-body .dialog-header .eyebrow {
font-size: 9.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--av-faint);
}
body.dashboard-body .dialog-header h2 {
font-size: 21px;
}
body.dashboard-body .state-card {
border: 1px dashed var(--av-line) !important;
background: none !important;
color: var(--av-muted);
}
body.dashboard-body .message {
border: 0;
border-left: 2px solid var(--av-line);
border-radius: 0;
background: none !important;
padding: 10px 0 10px 14px;
font-size: 11.5px;
}
body.dashboard-body .message--error {
border-left-color: var(--av-alert);
color: var(--av-alert);
}
body.dashboard-body .message--success {
border-left-color: var(--av-ok);
color: var(--av-ok);
}
body.dashboard-body .season-banner {
border: 0;
border-left: 2px solid var(--av-brand);
border-radius: 0;
background: none !important;
padding: 12px 0 12px 14px;
}
body.dashboard-body .season-banner__icon {
display: none;
}
/* ---------- 14. Boot ---------- */
/* A tela de boot roda ANTES de saber o tema do estabelecimento (aparece
enquanto loadEstablishment() ainda não voltou). Ela é fixa (fundo escuro +
texto claro, do styles.css base) de propósito — não existe "tema certo"
pra aplicar antes de saber qual é. A versão anterior sobrescrevia só o
fundo com var(--av-bg): quando o tema do estabelecimento é claro, o fundo
virava claro mas o texto continuava com a cor clara fixa do base — texto
sumindo em cima do próprio fundo. Mantido só o ajuste cosmético (esconder
o brilho decorativo), sem mexer em cor.*/
body.dashboard-body .panel-boot__glow {
display: none;
}
body.dashboard-body .panel-boot__content strong {
font-family: var(--av-serif);
font-weight: 400;
}
/* ---------- 15. Celular ---------- */
@media (max-width: 900px) {
body.dashboard-body .app-shell {
grid-template-columns: 1fr;
}
body.dashboard-body .workspace {
padding: 20px 18px 90px;
}
body.dashboard-body .page-header h1,
body.dashboard-body .toolbar-copy h2 {
font-size: 23px;
}
body.dashboard-body .mobile-header {
border-bottom: 1px solid var(--av-line);
background: var(--av-bg);
box-shadow: none;
}
body.dashboard-body .agenda-summary-grid,
body.dashboard-body .command-financial-summary {
grid-template-columns: repeat(3, 1fr);
}
body.dashboard-body .plan-comparison {
grid-template-columns: 1fr;
}
body.dashboard-body .plan-option {
border-right: 0 !important;
border-bottom: 1px solid var(--av-line) !important;
}
body.dashboard-body .entity-card {
grid-template-columns: 1fr auto;
}
body.dashboard-body .bottom-nav {
border-top: 1px solid var(--av-line);
background: var(--av-bg);
box-shadow: none;
padding-bottom: env(safe-area-inset-bottom);
}
body.dashboard-body .bottom-nav-item {
min-height: 52px;
border-radius: 0;
background: none !important;
color: var(--av-muted);
font-size: 10.5px;
}
body.dashboard-body .bottom-nav-item.is-active {
color: var(--av-brand);
background: none !important;
box-shadow: inset 0 2px 0 0 var(--av-brand);
}
body.dashboard-body .bottom-nav-item svg {
width: 18px;
height: 18px;
stroke-width: 1.6;
}
body.dashboard-body .data-table thead {
display: none;
}
body.dashboard-body .data-table tr {
display: block;
padding: 14px 0;
border-bottom: 1px solid var(--av-line);
}
body.dashboard-body .data-table td {
/* Sem justify-content:space-between: com 1 valor só, empurra pra
ponta oposta do rótulo; com 2+ (ex.: "Marcar paga" + "Excluir" nas
despesas), distribui os itens com espaços desiguais e empurra o
último pra fora da margem visual do cartão. margin-right:auto no
::before resolve os dois casos, com qualquer número de filhos. */
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px 16px;
padding: 3px 0;
border: 0;
}
body.dashboard-body .data-table td::before {
content: attr(data-label);
margin-right: auto;
font-size: 11px;
color: var(--av-faint);
}
}
/* ---------- 16. Login e páginas públicas ---------- */
body.auth-page {
background: var(--av-bg);
color: var(--av-ink);
font-family: var(--av-sans);
}
body.auth-page h1,
body.auth-page h2 {
font-family: var(--av-serif);
font-weight: 400;
letter-spacing: -.01em;
}
body.auth-page .form-card {
border: 0;
border-left: 1px solid var(--av-line);
border-radius: 0;
background: none;
box-shadow: none;
padding: 38px 34px;
}
/* A marca aparece uma vez só: a do formulário sai no desktop. */
@media (min-width: 900px) {
body.auth-page .auth-form-brand {
display: none;
}
}
body.auth-page .auth-aside {
border: 0;
background: none;
}
body.auth-page .benefit-list {
list-style: none;
padding: 0;
margin: 22px 0 0;
display: grid;
gap: 9px;
}
body.auth-page .benefit-list li {
font-size: 12px;
color: var(--av-muted);
}
body.auth-page input:not([type="checkbox"]):not([type="radio"]) {
border: 0;
border-bottom: 1px solid var(--av-line-strong);
border-radius: 0;
background: none;
color: var(--av-ink);
padding: 8px 0;
font-size: 12.5px;
}
body.auth-page .field > label,
body.auth-page .field-label {
font-size: 9.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--av-muted);
}
body.auth-page .password-toggle {
border: 0;
background: none;
color: var(--av-faint);
font-size: 10.5px;
}
body.auth-page .remember-access {
border: 0;
border-radius: 0;
background: none;
padding: 0;
}
body.auth-page .remember-access strong {
font-weight: 400;
font-size: 11px;
color: var(--av-muted);
}
body.auth-page .remember-access small {
display: none;
}
body.auth-page .auth-choice {
color: var(--av-faint);
font-size: 10.5px;
}
body.auth-page .form-footer {
font-size: 11px;
color: var(--av-faint);
text-align: center;
margin: 6px 0 0;
}
/* O convite de instalar o app não vive mais no login (vai para a home). */
body.auth-page .form-card .install-card {
display: none !important;
}
/* Folha inferior no iPhone, não diálogo central. */
body.auth-page .install-dialog {
top: auto;
bottom: 0;
width: min(100vw, 520px);
margin: 0 auto;
border: 1px solid var(--av-line);
border-bottom: 0;
border-radius: var(--av-radius-card) var(--av-radius-card) 0 0;
background: var(--av-surface);
color: var(--av-ink);
box-shadow: none;
padding: 26px 24px calc(26px + env(safe-area-inset-bottom));
}
body.auth-page .install-dialog::backdrop {
background: color-mix(in srgb, var(--av-bg) 80%, transparent);
}
body.auth-page .install-dialog ol {
list-style: none;
padding: 0;
margin: 18px 0 0;
counter-reset: passo;
display: grid;
gap: 12px;
}
body.auth-page .install-dialog li {
counter-increment: passo;
display: flex;
gap: 12px;
font-size: 12px;
line-height: 1.5;
color: var(--av-ink);
}
body.auth-page .install-dialog li::before {
content: "0" counter(passo);
color: var(--av-brand);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
/* Faixa de instalação no rodapé da home pública. */
body.landing-page .site-footer .install-card,
body.landing-page .install-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border: 0;
border-top: 1px solid var(--av-line);
border-radius: 0;
background: none;
padding: 18px 0;
font-size: 11.5px;
color: var(--av-muted);
}
body.landing-page .install-strip .button {
min-height: 0;
padding: 0;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--av-brand) 45%, transparent);
border-radius: 0;
background: none;
color: var(--av-brand);
font-size: 11.5px;
}
@media (prefers-reduced-motion: reduce) {
body.dashboard-body *,
body.auth-page * {
transition: none !important;
animation: none !important;
}
}