/* =============================================================
   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;
}

/* Separadores de módulo (Peça 7) — registo do tagline real: maiúsculas,
   espaçado, cinza, discreto. Sem ícones, sem pílulas. Módulo activo =
   sublinhado rosa fino. Verbatim de mockup_casca_sbsxcore_v3.html. */
.module-tabs {
    display: flex;
    align-items: center;
    gap: 26px;
    border-left: 1px solid var(--cinza-claro);
    padding-left: 20px;
}
.module-tab {
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cinza-medio);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
}
.module-tab:hover:not(.is-disabled):not(.active) { color: var(--cinza-esc); text-decoration: none; }
.module-tab.active { color: var(--cinza-esc); border-bottom-color: var(--rosa-forte); }
.module-tab.is-disabled { color: var(--cinza-claro); cursor: default; }
.module-tab .soon {
    text-transform: none;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--cinza-claro);
    margin-left: 7px;
}
@media (max-width: 880px) {
    .module-tabs { padding-left: 10px; gap: 16px; overflow-x: auto; }
}

.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 / MUDAR PASSWORD — smartphone-first (padrao app-shell).
   Por omissao (telemovel, qualquer largura): ENCHE o ecra — fundo branco, sem
   cartao a flutuar, conteudo centrado na vertical, campos largos. No DESKTOP
   (rato: hover+pointer:fine) volta ao cartao centrado no gradiente (o login do
   operador de sempre). Sem moldura. */
/* TELEMOVEL (por omissao): a app-shell do login, FLUIDO (adapta-se ao ecra, o
   tamanho nao e' tema). O ecra enche-se de branco; o bloco marca+formulario
   (.login-main) CENTRA-SE por racio, e o rodape fica colado ao fundo. */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--branco);
    padding: 0;
}
.login-card {
    background: var(--branco);
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
/* O bloco marca+formulario ocupa o espaco acima do rodape e centra-se nele ->
   equilibrado em qualquer altura de ecra (curto ou alto). No desktop volta a
   fluxo normal (mais abaixo). */
.login-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Tamanhos/espacos do telemovel, scoped ao .login-card (.login-card .X = 0,2,0
   vence as bases .X = 0,1,0; NAO toca os forms do backoffice). Fiel ao mockup;
   o desktop do operador restaura-se na media query mais abaixo. */
.login-card .field-input { font-size: 16px; height: 52px; border-radius: 10px; }
.login-card .login-tagline { font-size: 12px; letter-spacing: 0.30em; margin: 8px 0 0; }
.login-card .login-title { font-size: 20px; margin: 44px 0 4px; }
.login-card .login-subtitle { font-size: 13px; margin-bottom: 24px; }
.login-card .login-actions { font-size: 14px; }
.login-card .login-btn { font-size: 17px; padding: 16px; border-radius: 10px; font-weight: 600; }
.login-card .login-error,
.login-card .login-sucesso { font-size: 14px; }
.login-card .login-footer { font-size: 12px; margin-top: 0; padding-top: 16px; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
    /* No desktop o .login-main e' transparente: o conteudo flui no cartao. */
    .login-main { display: block; flex: none; min-height: auto; }
    /* DESKTOP (rato): o cartao centrado do operador, exatamente como sempre. */
    .login-page {
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, var(--cinza-fundo) 0%, var(--rosa-claro) 100%);
        padding: 24px;
    }
    .login-card {
        max-width: 420px;
        margin: 0 auto;
        flex: none;
        display: block;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 44px 38px;
    }
    .login-card .field-input { font-size: 13px; height: auto; border-radius: var(--radius-sm); }
    .login-card .login-tagline { font-size: 11px; letter-spacing: 0.18em; margin: 0 0 36px; }
    .login-card .login-title { font-size: 22px; margin: 0 0 8px; }
    .login-card .login-subtitle { font-size: 12px; margin-bottom: 24px; }
    .login-card .login-actions { font-size: 12px; }
    .login-card .login-btn { font-size: 14px; padding: 12px; border-radius: var(--radius-sm); font-weight: 500; }
    .login-card .login-error,
    .login-card .login-sucesso { font-size: 12px; }
    .login-card .login-footer { font-size: 11px; margin-top: 24px; padding-top: 0; }
}
.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);
}
/* Toggle "olho que ve" nos campos de password (S27A-3).
   Exclusivo dos ecras de auth (login + mudar password). O wrap
   posiciona o botao-olho sobreposto a' direita do input; o input
   ganha padding-right para o texto nao passar por baixo do olho.
   O botao e' `type=button` (nunca submete o form) e o JS vive nos
   proprios templates de auth, nao no base_publico (a UI da
   Recrutada herda o base e nao deve receber este comportamento). */
.password-wrap { position: relative; }
.password-wrap .field-input { padding-right: 42px; }
.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--cinza-medio);
    cursor: pointer;
}
.password-toggle:hover { color: var(--cinza-esc); }
.password-toggle:focus-visible {
    outline: 2px solid var(--rosa-forte);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}
.password-toggle svg { display: block; width: 18px; height: 18px; }
/* O olho "riscado" (estado password visivel) esconde-se por defeito;
   o JS troca a visibilidade dos dois SVG conforme o estado. */
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-visible .icon-eye { display: none; }
.password-toggle.is-visible .icon-eye-off { display: block; }

.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;
    /* Sidebar verdadeiramente fixa: sai do fluxo e ancora no canto
       inferior-esquerdo, abaixo do header (73px = altura do
       .app-header). Nao acompanha o scroll do conteudo. O .content
       compensa com margin-left: 260px (mesma largura) para nao ficar
       por baixo. overflow-y interno garante scroll do proprio menu
       caso ele seja mais alto que o ecra. Abordagem `fixed` (e nao
       `sticky`) por ser imune a overflow de ancestrais. */
    position: fixed;
    top: 73px;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 50;
}
.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;
}
/* Item de menu ainda POR CONSTRUIR (roadmap): visivel mas NAO-clicavel,
   esbatido, com pilula "em breve". Anuncia o mapa do modulo sem abrir acesso. */
.sidebar-link.disabled {
    cursor: default;
    color: var(--cinza-medio);
    opacity: 0.7;
}
.sidebar-link.disabled:hover { background: transparent; }
.sidebar-link.disabled .icon { opacity: 0.45; }
/* O .content compensa a sidebar fixa com margin-left = largura da
   sidebar (260px), para o conteudo nao ficar por baixo dela. */
.content { flex: 1; padding: 32px 40px; margin-left: 260px; }
.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);
    /* Padrao sbsxcore (DESIGN_SYSTEM.md §Filtros): os controlos de formulario
       usam SEMPRE o body-font (Inter). Sem isto herdavam `font-family: inherit`
       (regra base de input/select) e, quando colocados dentro de um
       `.section-title` (display-font, serifada), saiam serifados — o bug dos
       filtros da Transferiveis/Feriados/Dashboard. Forcar aqui mata-o na raiz. */
    font-family: var(--body-font);
    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; }

/* Toggle/switch (Readmissões). Checkbox escondido + track/knob estilizados.
   Ligado: track rosa-forte, knob a' direita. Desliga-se a cada submissao
   (o template nunca renderiza `checked`). */
.switch-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    position: relative; width: 44px; height: 24px; border-radius: 999px;
    background: var(--cinza-claro); transition: background .15s; flex: none;
}
.switch-knob {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--branco);
    box-shadow: 0 1px 2px rgba(95, 99, 99, .25); transition: left .15s;
}
.switch-input:checked + .switch-track { background: var(--rosa-forte); }
.switch-input:checked + .switch-track .switch-knob { left: 23px; }
.switch-input:focus-visible + .switch-track {
    outline: 2px solid var(--rosa-forte); outline-offset: 2px;
}
.switch-label { font-size: 14px; color: var(--cinza-esc); font-weight: 500; font-family: var(--body-font); }

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

.btn {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    /* Padrao sbsxcore (DESIGN_SYSTEM.md §3 Botoes): sempre Inter (nao herda a
       serifada de um `.section-title`) e a etiqueta NUNCA quebra em 2 linhas. */
    font-family: var(--body-font);
    white-space: nowrap;
    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;
    /* Padrao §3: Inter (nao serifa dentro de `.section-title`) + nunca quebra. */
    font-family: var(--body-font);
    white-space: nowrap;
}
.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);
    /* `clip` (e nao `hidden`) recorta na mesma para arredondar os
       cantos, MAS — ao contrario de `hidden` — nao cria um contexto
       de scroll. `position: sticky` num descendente (o <thead>, ver
       abaixo) e' silenciosamente desactivado por qualquer ancestral
       com `overflow` que crie scroll; `clip` evita esse problema.
       (S27A-5, D-S27A5-STICKY-HEADER.) */
    overflow: clip;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--cinza-claro);
}
.data-table thead { position: sticky; z-index: 10; }
.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;
    /* Cabecalho de colunas fixo ao fazer scroll de tabelas longas
       (S27A-5). Cola a 73px do topo — abaixo do .app-header (§4),
       que e' sticky top:0 com ~73px de altura. `top` vai no <th>
       porque com `border-collapse: collapse` o elemento que
       realmente adere e' a celula, nao o <thead>. O z-index do
       <thead> (10) fica abaixo do header (100) e acima das celulas
       do corpo.

       EXCLUSAO da variante arvore: ver regra logo abaixo. A pagina
       CCTs aninha .data-table dentro de celulas de outra .data-table;
       se os <thead> internos fossem sticky, colariam todos a 73px e
       sobrepunham-se. A arvore nao leva sticky header. */
    position: sticky;
    top: 73px;
}
/* A variante arvore (§11b) anula o sticky: as suas tabelas aninham-se
   uma dentro da celula da outra (CCT > Carreiras > Niveis), e um
   <thead> sticky numa sub-tabela colaria por cima do cabecalho da
   tabela-pai. Cabecalho fixo so' faz sentido em tabela plana. */
.data-table--arvore thead { position: static; }
.data-table--arvore th { position: static; top: auto; }
.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; }
/* Variante "quebravel" (Logs): as colunas Utilizador/Accao/Entidade levam
   strings longas SEM pontos de quebra naturais (emails, codigos namespaced
   `sistema.x_y_z`, `Entidade #id`). Numa data-table `width:100%` com
   `overflow:clip`, esses tokens forcam a tabela a ficar mais larga que o
   cartao e o lado direito e' CORTADO (some a coluna IP/parte da Entidade).
   `overflow-wrap: anywhere` deixa o token quebrar e reduz o min-content -> a
   tabela cabe no cartao e tudo fica visivel (quebra em 2 linhas se preciso),
   sem precisar do rato por cima. So' na tabela de Logs. */
.data-table--quebravel { table-layout: fixed; }
/* Quebra SO' nas colunas de tokens longos: Utilizador (2), Accao (4),
   Entidade (5), IP (6). A Data (1) e o Papel (3) NUNCA quebram — a data tem
   formato curto fixo e partir "22/06/2026" a meio seria pior que o problema. */
.data-table--quebravel td:nth-child(2),
.data-table--quebravel td:nth-child(4),
.data-table--quebravel td:nth-child(5),
.data-table--quebravel td:nth-child(6) { overflow-wrap: anywhere; }
.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); }

/* ─── §11c — Cabeçalho de coluna ordenável (S28) ─── */
/* D-S28-COLAB-PESQUISA-ORDENACAO. Um cabecalho ordenavel e' um <a>
   dentro do <th> cinza-escuro: o link ocupa a celula toda e leva a
   query string `?ordem=<coluna>&dir=<asc|desc>`. So' duas colunas da
   pagina Colaboradoras o usam (Nome, Data de admissao); fica generico
   para reutilizar quando a ordenacao chegar a outras tabelas planas.
   A seta (▲/▼) so' aparece na coluna activa; as restantes mostram um
   indicador neutro tenue que sugere "clica para ordenar". */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--branco);
    text-transform: inherit;
    letter-spacing: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.th-sort:hover { color: var(--rosa); text-decoration: none; }
/* Seta de direccao da coluna activa — opaca, bem visivel. */
.th-sort .seta { font-size: 9px; line-height: 1; opacity: 0.95; }
/* Indicador neutro das colunas ordenaveis mas nao activas — tenue,
   so' sugere a affordance sem competir com a coluna activa. */
.th-sort .seta-neutra { font-size: 9px; line-height: 1; opacity: 0.35; }

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

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    /* Padrao §5 Contadores: pilula sempre Inter (nao serifa dentro de um
       `.section-title`) — a condizer com a pilula da loja-ancora. */
    font-family: var(--body-font);
    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); }

/* §5 Contadores (DESIGN_SYSTEM.md): rotulo em Inter (nao a serifada do
   section-title) + numero(s) em pilula `.tag.rosa`. O `.contador` agrupa
   rotulo+pilula num so' filho flex (fica junto a' esquerda do section-title). */
.contador { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body-font);
            font-size: 12px; font-weight: 400; }
.contador-sub { font-size: 10px; color: var(--cinza-medio); font-weight: 400;
                display: inline-flex; align-items: center; gap: 5px; }

.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; }
.status-badge.expirado { background: rgba(200,72,74,0.14); color: var(--erro); }

/* ─── §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;
}

/* ─── §15b — Eventos Criticos: catalogo + linha do tempo (+Info) ──
   Reproduz o mockup aprovado (mockup_eventos_criticos.html, #12 peca
   5). Passos do catalogo + trilho do evento (modal +Info). ───────── */

.cat-passos { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
.cat-passos li { margin-bottom: 2px; }

.tl { list-style: none; margin: 0; padding: 0; }
.tl-item {
    position: relative;
    padding: 0 0 16px 22px;
    border-left: 2px solid var(--cinza-claro);
}
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-dot {
    position: absolute;
    left: -7px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rosa-forte);
    border: 2px solid var(--branco);
}
.tl-marco { font-size: 13px; font-weight: 600; color: var(--cinza-esc); }
.tl-quando {
    font-size: 11px;
    color: var(--cinza-medio);
    margin-left: 8px;
    font-weight: 400;
}
.tl-det { font-size: 12.5px; color: var(--texto); margin-top: 3px; line-height: 1.6; }
.tl-autor { font-size: 11px; color: var(--cinza-medio); margin-top: 3px; font-style: italic; }
.info-resolvido {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--cinza-claro);
    font-size: 12.5px;
    color: var(--cinza-esc);
}

/* ─── §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; }

/* === Seccao 18 - Barra de paginacao (S27A-6) ============================ */
/* Navegacao de paginas das tabelas planas do Backoffice
   (D-S27A6-PAGINACAO-BACKOFFICE). Renderizada pela macro
   `barra_paginacao` em partials/paginacao.html. Fica logo abaixo da
   tabela, dentro do mesmo .card. Reutiliza .btn-action (seccao 10) nos
   botoes - quando um extremo nao tem destino (1.a/ultima pagina) o
   botao vira um <span class="is-disabled">, visualmente apagado e
   sem hover. */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.paginacao-info {
    font-size: 12px;
    color: var(--cinza-medio);
}
.paginacao-botoes {
    display: flex;
    align-items: center;
    gap: 10px;
}
.paginacao-posicao {
    font-size: 12px;
    color: var(--cinza-esc);
    font-weight: 500;
    white-space: nowrap;
}
/* Botao de extremo sem destino: apagado e inerte. E um <span>, nao um
   <a> - ja nao navega; estes estilos so lhe tiram o aspecto clicavel
   e neutralizam o hover herdado de .btn-action. */
.btn-action.is-disabled {
    color: var(--cinza-claro);
    border-color: var(--cinza-claro);
    cursor: default;
    user-select: none;
}
.btn-action.is-disabled:hover {
    background: transparent;
    border-color: var(--cinza-claro);
}

/* ─── §Dashboard (S37C) — countdowns + funil ──────────────────────
   Tradução do mockup_dashboard_v3.html (aprovado). O pager dos cards é
   escopado a .cd-card para não colidir com a paginação server-side dos
   outros ecrãs (.paginacao-botoes). O título do funil usa o modificador
   .section-title--toolbar para alinhar o dropdown à direita sem mexer no
   .section-title global. */

/* Modificador do título de secção com ferramenta à direita. */
.section-title--toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Parte 1 — grelha de countdowns */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}
@media (max-width: 880px) {
    .dash-grid { grid-template-columns: 1fr; }
}
.cd-card {
    background: var(--branco);
    border-radius: var(--radius-lg);
    border: 1px solid var(--cinza-claro);
    box-shadow: var(--shadow-sm);
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
}
.cd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.cd-titulo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cinza-esc);
    line-height: 1.35;
}
.cd-count {
    flex-shrink: 0;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--rosa);
    color: var(--cinza-esc);
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.cd-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.cd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: filter .12s;
}
.cd-row:hover { filter: brightness(.975); }
.cd-row.urg-alta { background: rgba(200, 72, 74, .10); border-left-color: var(--erro); }
.cd-row.urg-media { background: rgba(212, 165, 116, .16); border-left-color: var(--aviso); }
.cd-row.urg-baixa { background: rgba(92, 139, 98, .10); border-left-color: var(--sucesso); }
.cd-id { min-width: 0; }
.cd-nome {
    font-size: 13px;
    font-weight: 500;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-meta { font-size: 11px; color: var(--cinza-medio); }
.cd-dias { flex-shrink: 0; text-align: right; }
.cd-dias .n { font-size: 14px; font-weight: 700; color: var(--cinza-esc); }
.cd-dias .u {
    font-size: 10px;
    color: var(--cinza-medio);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
}
.cd-row.urg-alta .cd-dias .n { color: var(--erro); }
.cd-vazio {
    font-size: 12.5px;
    color: var(--cinza-medio);
    padding: 14px 4px;
}

/* Pager client-side dos countdowns (escopado a .cd-card). */
.cd-card .paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}
.cd-card .paginacao-posicao {
    font-size: 12px;
    color: var(--cinza-esc);
    font-weight: 500;
    white-space: nowrap;
}
.cd-card .pg-btn {
    background: transparent;
    border: 1px solid var(--cinza-claro);
    padding: 4px 10px;
    font-size: 13px;
    color: var(--cinza-esc);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.cd-card .pg-btn:hover { background: var(--rosa-claro); border-color: var(--rosa-medio); }
.cd-card .pg-btn.is-disabled {
    color: var(--cinza-claro);
    border-color: var(--cinza-claro);
    cursor: default;
}
.cd-card .pg-btn.is-disabled:hover { background: transparent; border-color: var(--cinza-claro); }

/* Parte 2 — funil (v3) */
.funil-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.funil-toolbar .lbl { font-size: 12px; color: var(--cinza-medio); }
.funil-toolbar .field-select {
    padding: 8px 12px;
    border: 1px solid var(--cinza-claro);
    border-radius: var(--radius-sm);
    background: var(--branco);
    font-size: 13px;
    color: var(--cinza-esc);
}
.funil {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
}
.fr {
    display: grid;
    grid-template-columns: 215px 1fr 200px;
    align-items: center;
    gap: 16px;
}
.fr-label { font-size: 13px; font-weight: 600; color: var(--cinza-esc); }
.fr-label .sub { display: block; font-size: 11px; font-weight: 400; color: var(--cinza-medio); }
/* Track sem fundo — a barra acaba no segmento de saídas, sem cauda (v3). */
.fr-track { position: relative; height: 34px; }
.fr-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}
.seg-passou { background: var(--rosa-medio); color: var(--cinza-esc); }
.seg-emcurso { background: var(--rosa-claro); color: var(--cinza-esc); }
.seg-saida { background: var(--cinza-esc); color: var(--branco); }
.fr-nums { text-align: right; font-size: 12px; color: var(--cinza-medio); }
.fr-nums .pct { font-size: 18px; font-weight: 700; color: var(--cinza-esc); }
.fr-nums .pct .vs { font-size: 11px; font-weight: 500; color: var(--cinza-medio); margin-left: 6px; }
.fr-nums .det { display: block; }
.funil-legenda {
    display: flex;
    gap: 18px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--cinza-claro);
    font-size: 11px;
    color: var(--cinza-medio);
    flex-wrap: wrap;
}
.funil-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.fill { background: var(--rosa-medio); }
.sw.emc { background: var(--rosa-claro); border: 1px solid var(--rosa-medio); }
.sw.saida { background: var(--cinza-esc); }
@media (max-width: 720px) {
    .fr { grid-template-columns: 1fr; gap: 6px; }
    .fr-nums { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN_SYSTEM.md §8 — CARTOES AGREGADOS (faixa do Dashboard)
   Portado FIEL do mockup_assiduidade.html (faixa `.dash-agregada` de
   `.dash-card`s: KPI hero serif + barra empilhada + legenda). Usado pela
   aterragem do Assiduidade (Cobertura/Escalas + Ferias). `.seg`/`.sw` ja'
   existem (funil §Dashboard) — aqui escopam-se sob `.barra-stacked`/`.barra-leg`
   para a barra fina de 16px e os swatches de 10px do mockup, sem colidir.
   ═══════════════════════════════════════════════════════════════════════ */
/* "Decisoes por tomar" (mockup dashParte1): caixas por urgencia com um item +
   link "Ver". Hoje so' Ferias as alimenta; cada caixa so' aparece se tiver item. */
.dash-grupo {
    background: var(--branco);
    border: 1px solid var(--cinza-claro);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.dash-grupo.atencao { border-left: 4px solid #f97316; }
.dash-grupo.info { border-left: 4px solid #eab308; }
.dash-grupo.ok { border-left: 4px solid #22c55e; background: rgba(34, 197, 94, 0.06); }
.dash-grupo h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--cinza-esc);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-grupo h4 .count {
    background: var(--cinza-fundo);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 400;
    color: var(--cinza-medio);
    margin-left: auto;
}
.dash-grupo .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--cinza-esc);
}
.dash-grupo .item a {
    flex-shrink: 0;
    color: var(--rosa-forte);
    font-size: 11px;
    font-weight: 600;
}
.dash-grupo .item a:hover { text-decoration: underline; }

.dash-agregada {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}
@media (max-width: 720px) { .dash-agregada { grid-template-columns: 1fr; } }
.dash-card {
    background: var(--branco);
    border: 1px solid var(--cinza-claro);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}
.dash-card h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cinza-medio);
    margin: 0 0 10px;
    font-weight: 600;
}
.dash-card h5 .dash-card-scope { text-transform: none; letter-spacing: 0; font-weight: 400; }
.dash-card .kpi-grande {
    font-family: var(--display-font);
    font-size: 32px;
    font-weight: 600;
    color: var(--cinza-esc);
    line-height: 1;
}
.dash-card .sub { font-size: 11px; color: var(--cinza-medio); margin-top: 4px; }
.dash-card .barra-stacked {
    display: flex;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
    background: var(--cinza-fundo);
}
.dash-card .barra-stacked .seg { display: block; height: 100%; }
.dash-card .barra-leg {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 10px;
    color: var(--cinza-medio);
}
.dash-card .barra-leg span { display: inline-flex; align-items: center; }
.dash-card .barra-leg .sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
}
/* Link de accao (abrir o Mapa de Ferias) — discreto, alinhado ao tom da caixa. */
.dash-card .dash-card-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rosa-forte);
}
.dash-card .dash-card-link:hover { text-decoration: underline; }
/* Estado "em breve" — caixa desenhada, sem numeros fabricados. */
.dash-card .dash-em-breve { padding: 6px 0 2px; }
.dash-card .dash-soon {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cinza-medio);
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-claro);
    border-radius: 999px;
    padding: 3px 12px;
}
.dash-card .dash-em-breve .sub { margin-top: 8px; }

/* Cobertura/Escalas — indice "Bloqueadas": 4 celulas (esta sem..+3), cada uma
   n/total de lojas + barrinha de proporcao. Zero publicadas -> numero em erro. */
.dash-cob-titulo {
    font-size: 11px;
    font-weight: 600;
    color: var(--cinza-esc);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.dash-cob-bloq {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.dash-cob-cel {
    background: var(--rosa-claro);
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
}
.dash-cob-cel .num {
    font-family: var(--display-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--cinza-esc);
    line-height: 1;
}
.dash-cob-cel .num .den { font-size: 14px; color: var(--cinza-medio); }
.dash-cob-cel.zero .num { color: var(--erro); }
.dash-cob-cel .barra {
    height: 4px;
    border-radius: 2px;
    background: var(--cinza-claro);
    margin: 7px 0 5px;
    overflow: hidden;
}
.dash-cob-cel .barra > span { display: block; height: 100%; background: var(--rosa-forte); }
.dash-cob-cel .lab { font-size: 10px; color: var(--cinza-medio); }
.dash-cob-nota { font-size: 10px; color: var(--cinza-medio); margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN_SYSTEM.md §9 — LISTA ACCIONAVEL (caixa "em falta")
   Padrao novo (decisao do Miguel): cabecalho destacado (icone + titulo +
   contador serif) sobre uma lista de linhas-link, cada uma com um ponto de
   estado, o nome, o estado em texto e uma seta. Estreado pela caixa "Lojas sem
   a proxima semana publicada" do Dashboard. Estado vazio = uma linha positiva.
   ═══════════════════════════════════════════════════════════════════════ */
.dash-semprox {
    background: var(--branco);
    border: 1px solid var(--cinza-claro);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-top: 14px;
    overflow: hidden;
}
.dash-semprox-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    background: var(--rosa-claro);
    border-bottom: 1px solid var(--cinza-claro);
}
.dash-semprox-head .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--branco);
    border: 1px solid var(--rosa-medio);
    color: var(--rosa-forte);
    flex: none;
}
.dash-semprox-head .tit { flex: 1; min-width: 0; }
.dash-semprox-head .tit .t1 { font-size: 13px; font-weight: 600; color: var(--cinza-esc); }
.dash-semprox-head .tit .t2 { font-size: 11px; color: var(--cinza-medio); margin-top: 1px; }
.dash-semprox-head .cnt {
    font-family: var(--display-font);
    font-size: 24px;
    font-weight: 600;
    color: var(--rosa-forte);
    line-height: 1;
    flex: none;
}
.dash-semprox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cinza-fundo);
    color: var(--cinza-esc);
    text-decoration: none;
}
.dash-semprox-item:last-child { border-bottom: 0; }
.dash-semprox-item:hover { background: var(--rosa-claro); text-decoration: none; }
.dash-semprox-item .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dash-semprox-item .dot.aberta { background: var(--rosa-forte); }
.dash-semprox-item .dot.sem { background: var(--erro); }
.dash-semprox-item .nm { flex: 1; font-size: 13px; }
.dash-semprox-item .est { font-size: 11px; color: var(--cinza-medio); }
.dash-semprox-item .seta { font-size: 15px; color: var(--rosa-forte); font-weight: 600; }
.dash-semprox-vazio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    font-size: 13px;
    color: var(--cinza-esc);
}
.dash-semprox-vazio .ok { color: #16803c; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN_SYSTEM.md §6 — ECRA DENSO / GRELHA DE LARGURA TOTAL
   Largura total (opt-out da coluna confortavel content-narrow) + grelha 2D
   que scrolla na horizontal (overflow-x + min-width) com header (§4) e as
   colunas de identidade (Letra+Nome) congelados. Exemplo: Escala — Vista Real.
   ═══════════════════════════════════════════════════════════════════════ */

/* §6 ponto 1 — largura total: o ecra denso sai da coluna de 920px. */
.content-full { width: 100%; }

/* §6 aplicado a tabelas-LISTA largas do Backoffice (nao grelha 2D): quando uma
   tabela-lista ganha colunas a mais para a largura, o wrapper scrolla na
   horizontal (overflow-x + min-width) em vez de a tabela rebentar o layout. O
   aspeto e' o .data-table (§4) intacto; usa-se com conteudo_largo=True
   (content-full). Exemplo: Acesso App Loja. */
/* O wrapper E' a superficie (NAO se embrulha no .card confortavel — §6): ganha o
   fundo/borda/raio do card e o overflow-x. Assim o overflow:auto faz a tabela
   SCROLLAR na horizontal em vez de empurrar o .content (flex) e rebentar a pagina. */
.data-table-scroll {
    overflow-x: auto;
    /* O overflow-x torna o overflow-y=auto (regra CSS): para o header poder COLAR,
       o wrapper e' tambem o contexto de scroll VERTICAL (max-height) e scrolla por
       dentro — o thead sticky (abaixo) cola ao topo do wrapper, como a Escala (§6).
       Sem a max-height o sticky descolava (era por isso que §6b o tinha desligado). */
    max-height: calc(100vh - 210px);
    background: var(--branco);
    border: 1px solid var(--cinza-claro);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}
.data-table-scroll > .data-table { min-width: 960px; }
/* O .content e' um flex item (min-width:auto) e, sem isto, cresceria para a
   min-content da tabela larga -> empurrava a pagina e rebentava o layout. Deixa
   o flex item encolher (min-width:0, o padrao de flexbox) SO' quando ha' uma
   tabela-scroll na pagina (:has) -> o wrapper passa a SCROLLAR a tabela em vez
   de a pagina alargar. Escopado: nao toca as paginas normais nem o layout-mae. */
.content:has(.data-table-scroll) { min-width: 0; }
/* Header COLADO ao topo do wrapper (top:0, NAO 73px — aqui o scroll e' do wrapper,
   nao da pagina). Reverte a decisao "header non-sticky" de §6b (correccao do Miguel,
   2026-06-28: os separadores largos tem de FIXAR o header como o resto do §4). */
.data-table-scroll > .data-table thead { position: sticky; top: 0; z-index: 10; }
.data-table-scroll > .data-table thead th { position: sticky; top: 0; }

/* Barra de ferramentas (navegacao de semana + estado). */
.esc-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.esc-toolbar-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.esc-nav-week { display: inline-flex; align-items: center; gap: 4px; }
.esc-nav-week a, .esc-nav-week .esc-nav-off {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-md);
    border: 1px solid var(--cinza-claro); background: var(--branco);
    color: var(--cinza-esc); text-decoration: none; font-size: 13px;
}
.esc-nav-week a:hover { background: var(--rosa-claro); border-color: var(--rosa-medio); }
.esc-nav-week .esc-nav-off { opacity: 0.4; cursor: not-allowed; }
.esc-semana-label { font-weight: 600; font-size: 14px; min-width: 190px; text-align: center; }

/* Pilula de estado da semana (RN-25). Inter (§5). */
.esc-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
    border-radius: 999px; font-size: 12px; font-weight: 600; font-family: var(--body-font);
}
.esc-status.aberta { background: rgba(21,128,60,0.10); color: #157a40; border: 1px solid #a9ddbd; }
.esc-status.bloqueada { background: var(--rosa-claro); color: var(--rosa-forte); border: 1px solid var(--rosa-medio); }
.esc-status.fechada { background: rgba(95,99,99,0.10); color: var(--cinza-medio); border: 1px solid var(--cinza-claro); }

/* §6 ponto 2 — wrapper que scrolla na horizontal (nunca espreme as colunas). */
.esc-wrapper {
    overflow-x: auto; border: 1px solid var(--cinza-claro);
    border-radius: var(--radius-md); background: var(--branco);
}
.esc-table { width: 100%; min-width: 920px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.esc-table th, .esc-table td {
    padding: 8px 6px; text-align: center; vertical-align: middle;
    border-right: 1px solid var(--cinza-claro); border-bottom: 1px solid var(--cinza-claro);
}
/* §4 — header escuro sticky no topo. */
.esc-table thead th {
    background: var(--cinza-esc); color: var(--branco); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; z-index: 2;
}
.esc-table thead th.holiday { background: linear-gradient(180deg, #d4a574 0%, #b88d5e 100%); }
.esc-dia-data { font-size: 13px; font-weight: 500; }
/* §6 ponto 3 — colunas de identidade (Letra + Nome) congeladas a' esquerda. */
.esc-table th.col-letra, .esc-table td.col-letra {
    position: sticky; left: 0; z-index: 1; width: 64px; min-width: 64px; background: var(--cinza-fundo);
}
.esc-table th.col-nome, .esc-table td.col-nome {
    position: sticky; left: 64px; z-index: 1; width: 200px; min-width: 200px;
    text-align: left; padding-left: 14px; background: var(--cinza-fundo);
}
/* O canto (header das colunas de identidade) cola nos dois eixos -> z maior. */
.esc-table thead th.col-letra, .esc-table thead th.col-nome { z-index: 3; background: var(--cinza-esc); }
.esc-table td.col-nome { font-weight: 500; color: var(--cinza-esc); }

.esc-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; background: var(--rosa-forte);
    color: var(--branco); font-family: var(--display-font); font-size: 17px; font-weight: 700;
}
.esc-colab {
    display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--branco);
    border: 1px solid var(--cinza-claro); font-size: 12px; font-weight: 500; color: var(--cinza-esc);
}
.esc-colab.vazio { border-style: dashed; color: var(--cinza-medio); font-style: italic; }
/* Linhas EXTRA (horario especifico, tipo 3): numero (nao letra) + tag + linha add. */
.esc-letra-num { background: var(--cinza-medio); }
.esc-letra-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--rosa-medio);
    color: var(--rosa-forte); font-size: 18px; font-weight: 600; cursor: pointer;
}
.esc-letra-add:hover { background: var(--rosa-claro); }
.esc-add-link { cursor: pointer; color: var(--rosa-forte); font-size: 12px; font-weight: 500; }
.esc-add-link:hover { text-decoration: underline; }
/* Pilula atribuida com o x (#4c-ii) + picker §1 de atribuicao. */
.esc-colab--atrib { display: inline-flex; align-items: center; gap: 6px; }
.esc-colab-xform { display: inline-flex; margin: 0; }
.esc-colab-x {
    border: 0; background: transparent; cursor: pointer; padding: 0 1px;
    color: var(--cinza-medio); font-size: 14px; line-height: 1; opacity: 0.55;
}
.esc-colab-x:hover { opacity: 1; color: var(--rosa-forte); }
.esc-picker { width: 100%; max-width: 184px; }

/* Editor da Generica (#4d): turnos em chips + matriz editavel + regras. */
.escg-turnos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.escg-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 999px; border: 1px solid rgba(0,0,0,0.08);
    font-size: 12px; font-weight: 600; color: var(--cinza-esc);
}
.escg-chip-x { cursor: pointer; opacity: 0.55; font-weight: 400; }
.escg-chip-x:hover { opacity: 1; color: var(--rosa-forte); }
.escg-add-turno { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.escg-add-turno label { font-size: 12px; color: var(--cinza-medio); display: inline-flex; align-items: center; gap: 6px; }
.escg-add-turno .field-input { width: auto; }
.escg-cell { width: 100%; min-width: 92px; }
.escg-fixa { background: var(--cinza-esc) !important; }
.escg-letra-f { font-size: 9px; font-weight: 700; margin-left: 1px; }
.escg-letra-x {
    border: 0; background: transparent; cursor: pointer; padding: 0 2px; margin-left: 4px;
    color: var(--cinza-medio); font-size: 14px; line-height: 1; opacity: 0.5;
}
.escg-letra-x:hover { opacity: 1; color: var(--rosa-forte); }
.escg-regras { display: flex; flex-wrap: wrap; gap: 8px; }
.escg-regra {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    border-radius: 999px; font-size: 12px; font-weight: 500;
}
.escg-regra.ok { background: rgba(22,128,60,0.10); color: #16803c; }
.escg-regra.warn { background: rgba(190,60,80,0.10); color: var(--erro); }

/* Cabecalho da Escala (igual ao mockup): titulo a' esquerda; seletor de loja +
   toggle de vistas (Real / Generica / Resumo) empilhados a' direita. */
.esc-page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: nowrap;
}
/* O titulo ocupa o espaco restante (encolhe/quebra o texto); os controlos NUNCA
   descem — ficam ancorados no topo-direito, tambem em laptop. */
.esc-page-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.esc-head-right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.escala-view-toggle {
    display: flex; background: var(--cinza-fundo);
    border-radius: 999px; padding: 3px; border: 1px solid var(--cinza-claro);
}
.escala-view-toggle a, .escala-view-toggle button, .escala-view-toggle span {
    padding: 6px 16px; border-radius: 999px; border: none; background: transparent;
    color: var(--cinza-medio); font-family: var(--body-font); font-size: 12px;
    font-weight: 500; cursor: pointer; transition: all 0.18s; text-decoration: none;
    white-space: nowrap;
}
.escala-view-toggle a.active, .escala-view-toggle button.active {
    background: var(--cinza-esc); color: var(--branco); box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.escala-view-toggle .disabled { opacity: 0.4; cursor: not-allowed; }

/* #4d editor — barra de accoes do cabecalho (Guardar a' esquerda do toggle). */
.escg-actions-row { display: flex; align-items: center; gap: 10px; }

/* #4d matriz da Generica — correcoes de layout, SCOPED a #matrizTable (nao toca a
   Vista Real, que partilha .esc-table): linha mais baixa (~-33%), celula da letra
   mais larga e baixa com o x no canto sup. direito, dropdown a 50% centrado. */
#matrizTable th, #matrizTable td { padding-top: 7px; padding-bottom: 7px; }
#matrizTable th.col-letra, #matrizTable td.col-letra { width: 84px; min-width: 84px; }
#matrizTable td.col-letra { position: relative; }
#matrizTable td.col-letra .esc-letra { width: 32px; height: 22px; border-radius: 6px; font-size: 14px; }
#matrizTable .escg-letra-x { position: absolute; top: 1px; right: 4px; margin: 0; padding: 0; font-size: 13px; }
#matrizTable .escg-cell {
    width: 70%; min-width: 76px; text-align: center; text-align-last: center;
    padding-top: 3px; padding-bottom: 3px;
}

/* #4 painel HORARIO FIXO (RN-64 estendida): turno fixo + N rotacoes de folga.
   Vive DENTRO da caixa de Turnos da Loja, encostado a' direita. Reusa o sistema. */
.escg-turnos-layout { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.escg-turnos-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.escg-hf-right { flex: 0 0 auto; border-left: 1px dashed var(--cinza-claro); padding-left: 24px; }
.escg-hf-grouptitle { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cinza-medio); font-weight: 600; margin: 0 0 10px; }
/* toggle + campos numa linha; topo das caixas alinhado com o topo do toggle (flex-start) */
.escg-hf-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.escg-hf-fields { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.escg-hf-field { display: inline-flex; align-items: center; gap: 6px; }  /* label A' ESQUERDA da caixa */
.escg-hf-lbl { font-size: 11px; color: var(--cinza-medio); white-space: nowrap; }
.escg-hf-fields #hfTurno { width: 92px; }
.escg-hf-fields #hfNumRot { width: 52px; text-align: center; }
/* OFF -> so' titulo+toggle; ON (.hf-on) -> campos + folgas */
.escg-hf-right .escg-hf-fields,
.escg-hf-right .escg-hf-rot-list,
.escg-hf-right #hfEstado { display: none; }
.escg-hf-right.hf-on .escg-hf-fields { display: flex; }
.escg-hf-right.hf-on .escg-hf-rot-list { display: flex; }
.escg-hf-right.hf-on #hfEstado { display: inline; }
.escg-hf-rot-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.escg-hf-rot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
.escg-hf-rot-lbl { font-weight: 600; color: var(--cinza-esc); min-width: 124px; }
.escg-hf-day { display: inline-flex; align-items: center; gap: 4px; color: var(--cinza-medio); cursor: pointer; }

/* Celula de turno: cor por turno; folga discreta. */
.esc-turno {
    display: inline-block; padding: 5px 8px; border-radius: 6px; min-width: 60px;
    font-size: 11px; font-weight: 600; border: 1px solid rgba(0,0,0,0.06); color: var(--cinza-esc);
}
.esc-turno.folga { background: var(--cinza-fundo); color: var(--cinza-medio); border-color: var(--cinza-claro); font-weight: 500; }
/* Overlays de ferias/falta/baixa na escala (#14 P4 Fatia 3). Falta/Falta-f a vermelho
   (mockup .shift.falta); Baixa/Lic a azul (mockup .shift.baixa, --info literal);
   Ferias a beige (paleta do mockup .turno-cell.ferias, em tom LISO p/ alinhar com as
   restantes overlays ja' no ar — decisao do Miguel). */
.esc-turno.falta  { background: rgba(200,72,74,0.12); color: var(--erro); border-color: rgba(200,72,74,0.30); }
.esc-turno.faltaf { background: rgba(200,72,74,0.05); color: var(--erro); border-color: rgba(200,72,74,0.20); font-weight: 500; }
.esc-turno.baixa,
.esc-turno.lic    { background: rgba(107,140,174,0.15); color: #3d6187; border-color: rgba(107,140,174,0.40); }
.esc-turno.ferias { background: rgba(214,158,74,0.15); color: #8a5e2e; border-color: rgba(214,158,74,0.38); }
.esc-cell.weekend { background: rgba(95,99,99,0.04); }
/* Celula editavel (#4c-ii ajustar celula): clicavel, realce no hover. */
.esc-cell-edit { cursor: pointer; }
.esc-cell-edit:hover { background: var(--rosa-claro); outline: 1px solid var(--rosa-medio); outline-offset: -1px; }
.esc-empty { padding: 28px; text-align: center; color: var(--cinza-medio); }