/* =============================================================
   Stone by Stone — Onboarding · Backoffice CSS (S19B)
   =============================================================
   Fonte de verdade visual: mockup_backoffice_v3.html (D-S17-METODO-UI).
   CSS extraído + reorganizado por secções na Sessão 19B.

   Decisões aplicadas:
   - Sem Tailwind, CSS custom (D-S19-CSS-CUSTOM).
   - Tipografia auto-hospedada (Inter + Cormorant Garamond) em
     /static/fonts/ (decisão técnica S19B, RGPD-first sem Google Fonts).
   - Atalhos dummy de perfil REMOVIDOS (D-S19B-ATALHOS-DEV).
   - Classe .mockup-badge removida (só servia ao prototype).

   Cores oficiais Stone: cinza #4F5252 + rosa pastel #EDC9D9 e
   variações em --rosa-* e --cinza-*.
   ============================================================= */

/* ─── §1 — Fontes auto-hospedadas ─────────────────────────────── */

/* Inter — variable font, range completo 100-900, peso variável.
   Origem: github.com/rsms/inter v4.x (OFL).
   Cobre body, buttons, labels, fields em todos os pesos usados (300, 400, 500, 600). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/InterVariable.woff2') format('woff2-variations');
}

/* Cormorant Garamond — só peso 600 (SemiBold), o único usado no mockup
   em .login-title, .page-title, .section-title, .modal-title, .ficha-section-title.
   Origem: github.com/CatharsisFonts/Cormorant (OFL).
   Não é variable — poupa ~250 KB face à família completa. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
}

/* ─── §2 — Tokens de design ───────────────────────────────────── */

:root {
    --rosa: #EDC6D8;
    --rosa-claro: #F8EEF3;
    --rosa-medio: #E8B5CB;
    --rosa-forte: #D896B0;
    --cinza-esc: #5F6363;
    --cinza-medio: #8A8E8E;
    --cinza-claro: #E2E2E3;
    --cinza-fundo: #FAFAFA;
    --texto: #2E3030;
    --branco: #FFFFFF;
    --erro: #C8484A;
    --sucesso: #5C8B62;
    --aviso: #D4A574;
    --display-font: 'Cormorant Garamond', Georgia, serif;
    --body-font: 'Inter', system-ui, -apple-system, sans-serif;
    --shadow-sm: 0 1px 2px rgba(95, 99, 99, 0.06);
    --shadow-md: 0 4px 12px rgba(95, 99, 99, 0.08);
    --shadow-lg: 0 12px 32px rgba(95, 99, 99, 0.12);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
}

/* ─── §3 — Reset mínimo + base ────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: var(--body-font);
    color: var(--texto);
    background: var(--cinza-fundo);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--rosa-forte); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── §4 — Header (sticky topo do Backoffice) ─────────────────── */

.app-header {
    background: var(--branco);
    border-bottom: 1px solid var(--cinza-claro);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.app-header-left { display: flex; align-items: center; gap: 18px; }
.app-logo { display: flex; align-items: center; }
.app-logo .logo-svg-letters { height: 28px; width: auto; display: block; }
.app-tagline {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cinza-medio);
    border-left: 1px solid var(--cinza-claro);
    padding-left: 18px;
}
.app-header-right { display: flex; align-items: center; gap: 16px; }

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--cinza-esc);
    padding: 4px 10px;
    border-radius: var(--radius-md);
}
.user-chip .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rosa);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--cinza-esc);
}
.user-chip .nome { font-weight: 500; }
.user-chip .role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cinza-medio);
    display: block;
}

.btn-logout {
    background: transparent;
    border: 1px solid var(--cinza-claro);
    color: var(--cinza-medio);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-logout:hover { color: var(--erro); border-color: var(--erro); }

/* ─── §5 — Página de Login ─────────────────────────────────────── */

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cinza-fundo) 0%, var(--rosa-claro) 100%);
    padding: 24px;
}
.login-card {
    background: var(--branco);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    padding: 44px 38px;
}
.login-logo { text-align: center; margin-bottom: 4px; }
.login-logo .logo-svg-composto {
    max-width: 280px;
    width: 100%;
    height: auto;
    display: inline-block;
}
.login-tagline {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cinza-medio);
    margin-bottom: 36px;
}
.login-title {
    font-family: var(--display-font);
    font-size: 22px;
    color: var(--cinza-esc);
    margin-bottom: 8px;
    font-weight: 600;
}
.login-subtitle {
    font-size: 12px;
    color: var(--cinza-medio);
    margin-bottom: 24px;
}
.login-form .field-group { margin-bottom: 16px; }
.login-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    margin-bottom: 24px;
    font-size: 12px;
}
.login-actions a { color: var(--cinza-medio); }
.login-actions a:hover { color: var(--rosa-forte); }
.login-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cinza-medio);
    cursor: pointer;
}
.login-btn {
    width: 100%;
    padding: 12px;
    background: var(--rosa-forte);
    color: var(--branco);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.login-btn:hover { background: #c47ea0; }
.login-error {
    background: rgba(200,72,74,0.08);
    color: var(--erro);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: 16px;
    border-left: 3px solid var(--erro);
}
/* Banner de sucesso na pagina de auth. Espelha o .login-error em
   verde. Usado por auth/change_password.html (S27A). */
.login-sucesso {
    background: rgba(92,139,98,0.10);
    color: var(--sucesso);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: 16px;
    border-left: 3px solid var(--sucesso);
}
.login-footer {
    text-align: center;
    font-size: 11px;
    color: var(--cinza-medio);
    margin-top: 24px;
    font-style: italic;
}

/* ─── §6 — Layout principal (sidebar + content) ──────────────── */

.main-layout {
    display: flex;
    min-height: calc(100vh - 73px); /* 73px = altura aprox. do .app-header */
}
.sidebar {
    width: 260px;
    background: var(--branco);
    border-right: 1px solid var(--cinza-claro);
    padding: 24px 0;
    flex-shrink: 0;
    overflow-y: auto;
}
.sidebar-section { margin-bottom: 28px; }
.sidebar-title {
    padding: 0 20px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cinza-medio);
    font-weight: 600;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--texto);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}
.sidebar-link:hover { background: var(--cinza-fundo); }
.sidebar-link.active {
    background: var(--rosa-claro);
    border-left-color: var(--rosa-forte);
    color: var(--cinza-esc);
    font-weight: 500;
}
.sidebar-link .icon {
    font-size: 14px;
    opacity: 0.8;
    width: 18px;
    text-align: center;
}
.content { flex: 1; padding: 32px 40px; overflow-y: auto; }
.content-narrow { max-width: 920px; margin: 0 auto; }

/* ─── §7 — Cabeçalhos de página + breadcrumb ──────────────────── */

.page-header { margin-bottom: 28px; }
.page-title {
    font-family: var(--display-font);
    font-size: 30px;
    font-weight: 600;
    color: var(--cinza-esc);
    margin-bottom: 4px;
}
.page-subtitle { font-size: 14px; color: var(--cinza-medio); }
.breadcrumb {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cinza-medio);
    margin-bottom: 8px;
}
.breadcrumb .sep { margin: 0 6px; opacity: 0.5; }

/* ─── §8 — Cartões (containers de conteúdo) ───────────────────── */

.card {
    background: var(--branco);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--cinza-claro);
}
.card.accent { background: var(--rosa-claro); border-color: var(--rosa-medio); }
.section-title {
    font-family: var(--display-font);
    font-size: 19px;
    font-weight: 600;
    color: var(--cinza-esc);
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.help-hint {
    background: var(--rosa-claro);
    border-left: 3px solid var(--rosa-medio);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--cinza-esc);
    line-height: 1.6;
}

/* ─── §9 — Campos de formulário ──────────────────────────────── */

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.field-group { margin-bottom: 14px; }
.field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cinza-esc);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 6px;
}
.field-label .required { color: var(--erro); margin-left: 2px; }
.field-input, .field-select, .field-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--cinza-claro);
    border-radius: var(--radius-sm);
    background: var(--branco);
    font-size: 13px;
    transition: all 0.15s;
}
.field-textarea { resize: vertical; min-height: 70px; font-family: var(--body-font); }
.field-input:focus, .field-select:focus, .field-textarea:focus {
    outline: none;
    border-color: var(--rosa-forte);
    box-shadow: 0 0 0 3px rgba(216, 150, 176, 0.18);
}
.field-help {
    font-size: 11px;
    color: var(--cinza-medio);
    margin-top: 4px;
    font-style: italic;
}
.field-readonly {
    padding: 9px 12px;
    background: var(--cinza-fundo);
    border: 1px dashed var(--cinza-claro);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--cinza-esc);
}
.field-readonly.computed { background: var(--branco); border-style: solid; border-color: var(--rosa-medio); }
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* ─── §10 — Botões ────────────────────────────────────────────── */

.btn {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-primary, .btn-rosa { background: var(--rosa-forte); color: var(--branco); }
.btn-primary:hover, .btn-rosa:hover { background: #c47ea0; }
.btn-secondary {
    background: var(--branco);
    color: var(--cinza-esc);
    border: 1px solid var(--cinza-claro);
}
.btn-secondary:hover { background: var(--cinza-fundo); }
.btn-icon {
    background: transparent;
    border: 1px solid var(--cinza-claro);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--cinza-esc);
    border-radius: var(--radius-sm);
}
.btn-icon:hover { background: var(--rosa-claro); border-color: var(--rosa-medio); }
.btn-danger { color: var(--erro); }
.btn-danger:hover { background: rgba(200,72,74,0.08); border-color: var(--erro); }
.btn-action {
    background: transparent;
    border: 1px solid var(--cinza-claro);
    padding: 5px 10px;
    font-size: 11px;
    color: var(--cinza-esc);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.btn-action:hover { background: var(--rosa-claro); border-color: var(--rosa-medio); }
.btn-action.active { background: var(--rosa-medio); color: var(--cinza-esc); border-color: var(--rosa-medio); }

/* ─── §11 — Tabelas de dados ─────────────────────────────────── */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--branco);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--cinza-claro);
}
.data-table th {
    background: var(--cinza-esc);
    color: var(--branco);
    text-align: left;
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--cinza-claro);
    font-size: 13px;
    vertical-align: middle;
}
/* Zebra rosa-claro nas linhas pares + hover rosa-medio (D-S22D-
   DATATABLE-HOVER). Antes o hover usava rosa-claro, a mesma cor do
   zebra: nas linhas pares (ja rosa) o realce nao se via. O hover passa
   a rosa-medio, um degrau acima do zebra — a linha "acende" sempre,
   seja par ou impar, mantendo-se na familia rosa. Afecta as paginas
   Feriados, Loja<->CCT e Lojas (todas usam o data-table normal); a
   variante data-table--arvore da §11b tem o seu proprio hover. */
.data-table tbody tr:nth-child(even) { background: var(--rosa-claro); }
.data-table tbody tr:hover { background: var(--rosa-medio); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .actions-cell { text-align: right; white-space: nowrap; }
.data-table .actions-cell .btn-action,
.data-table .actions-cell .btn-icon { margin-left: 4px; }

/* ─── §11b — Variante árvore (S22C) ──────────────────────────── */
/* Usada na página /backoffice/parametros/ccts. Numa árvore o zebra
   rosa/branco confunde (a cor parece codificar significado) e o hover
   rosa só se vê nas linhas brancas. Esta variante (D-S22C-ARVORE-CORES,
   Opção A): elimina o zebra, dá um fundo uniforme por nível de
   profundidade (a cor passa a significar aninhamento real) e usa um
   hover cinza neutro — distinto de todos os fundos, logo o feedback de
   "linha clicável" vê-se sempre. O rosa fica reservado a tags/badges/
   botões, onde tem peso semântico. Só afecta tabelas com esta classe;
   as restantes páginas do Backoffice mantêm o data-table normal. */

/* Anula o zebra herdado — todas as linhas do mesmo nível iguais. */
.data-table--arvore tbody tr:nth-child(even) { background: transparent; }

/* Nível 1 — CCT: fundo branco + barra rosa fina (3px) à esquerda.
   A barra (D-S22C-ARVORE-CORES, Opção 3) marca a linha como nó de topo
   da árvore — acento estrutural, não preenchimento. 3px é a mesma
   espessura do marcador de item activo da sidebar (.sidebar-link.active),
   por coerência visual em toda a aplicação. Implementada como inset
   box-shadow na 1.ª célula para não alterar o box model da linha. */
.data-table--arvore tbody tr.nivel-cct { background: var(--branco); }
.data-table--arvore tbody tr.nivel-cct td:first-child {
    box-shadow: inset 3px 0 0 0 var(--rosa-medio);
}

/* Nível 2 — Carreira: um degrau de cinza para mostrar aninhamento. */
.data-table--arvore tbody tr.nivel-carreira { background: var(--cinza-fundo); }

/* Nível 3 — Nível: outro degrau, ligeiramente mais escuro. */
.data-table--arvore tbody tr.nivel-nivel { background: #F2F2F2; }

/* Linhas-contentor (a <tr> que embrulha a sub-tabela aninhada) não
   recebem hover nem cor própria — herdam o fundo do colspan interno. */
.data-table--arvore tbody tr.linha-subtabela { background: transparent; }
.data-table--arvore tbody tr.linha-subtabela:hover { background: transparent; }

/* Hover das linhas clicáveis (CCT e Carreira). As linhas de Nível não
   são expansíveis e não recebem hover.
   - CCT: fundo branco -> hover rosa muito ténue (#FBF6F9), em sintonia
     com a barra rosa da linha.
   - Carreira: fundo cinza-fundo -> hover cinza-claro, um degrau acima,
     para o realce se ver sobre o fundo já acinzentado. */
.data-table--arvore tbody tr.nivel-cct.linha-expansivel:hover { background: #FBF6F9; }
.data-table--arvore tbody tr.nivel-carreira.linha-expansivel:hover { background: var(--cinza-claro); }

/* ─── §12 — Tags e status badges ─────────────────────────────── */

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: var(--cinza-claro);
    color: var(--cinza-esc);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 2px 3px 2px 0;
}
.tag.rosa { background: var(--rosa); color: var(--cinza-esc); }
.tag.warn { background: rgba(212,165,116,0.18); color: #8a5e2e; }
.tag.ok { background: rgba(92,139,98,0.18); color: var(--sucesso); }

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-badge.activa { background: rgba(92,139,98,0.18); color: var(--sucesso); }
.status-badge.saida { background: var(--cinza-claro); color: var(--cinza-medio); }
.status-badge.pendente { background: rgba(212,165,116,0.18); color: #8a5e2e; }

/* ─── §13 — Multi-pick (escolha de tags clicáveis) ───────────── */

.multi-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.multi-pick .pick-item {
    padding: 5px 12px;
    border: 1px solid var(--cinza-claro);
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    background: var(--branco);
    transition: all 0.15s;
    user-select: none;
}
.multi-pick .pick-item:hover { background: var(--cinza-fundo); }
.multi-pick .pick-item.selected {
    background: var(--rosa);
    border-color: var(--rosa-forte);
    color: var(--cinza-esc);
    font-weight: 500;
}

/* ─── §14 — Empty state + masked + alerts ────────────────────── */

.empty-state { text-align: center; padding: 48px 20px; color: var(--cinza-medio); }
.empty-state .icon { font-size: 32px; opacity: 0.4; margin-bottom: 12px; }
.empty-state-logo {
    width: 80px;
    height: 80px;
    opacity: 0.25;
    margin: 0 auto 16px;
    display: block;
}

.masked {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: 0.06em;
    color: var(--cinza-medio);
    background: var(--cinza-fundo);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
}
.alert .icon { font-size: 18px; flex-shrink: 0; }
.alert-warn {
    background: rgba(212,165,116,0.12);
    color: #8a5e2e;
    border: 1px solid rgba(212,165,116,0.3);
}
.alert-info { background: var(--rosa-claro); color: var(--cinza-esc); border: 1px solid var(--rosa-medio); }
.alert-aviso {
    background: rgba(212,165,116,0.12);
    color: #8a5e2e;
    border: 1px solid rgba(212,165,116,0.3);
}
.alert-sucesso {
    background: rgba(92,139,98,0.10);
    color: var(--sucesso);
    border: 1px solid rgba(92,139,98,0.30);
}
.alert-erro {
    background: rgba(200,72,74,0.08);
    color: var(--erro);
    border: 1px solid rgba(200,72,74,0.30);
}

/* Flash messages (Sessao 20B) — wrapper para a versao consumivel via cookie. */
.flash-container { margin-bottom: 12px; }

/* Span "valor por extenso" usado em previews (S20B) e ficha-detalhe.
   Estilo identico ao mockup: cinza-medio, italico, fonte 11px. */
.valor-extenso {
    color: var(--cinza-medio);
    font-style: italic;
    font-size: 11px;
    margin-left: 4px;
}

/* ─── §15 — Modal ─────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(46,48,48,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}
.modal-backdrop.show { display: flex; }
.modal {
    background: var(--branco);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 760px;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--cinza-claro);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-family: var(--display-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--cinza-esc);
}
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--cinza-medio);
    cursor: pointer;
    line-height: 1;
}
.modal-body { padding: 24px 28px; }
.modal-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--cinza-claro);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ─── §16 — Ficha (vista detalhe de colaboradora/admissão) ───── */

.ficha-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    margin-bottom: 20px;
}
.ficha-row { display: flex; flex-direction: column; gap: 2px; }
.ficha-row .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cinza-medio);
    font-weight: 600;
}
.ficha-row .value { font-size: 13px; color: var(--texto); }
.ficha-section-title {
    font-family: var(--display-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--cinza-esc);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cinza-claro);
}
.ficha-section-title:first-child { margin-top: 0; }

/* ─── §17 — Body classes (publico vs app) ─────────────────────── */

.body-publico { background: var(--cinza-fundo); }
.body-app { background: var(--cinza-fundo); min-height: 100vh; }