/* ==================================================================================================
   O DESENHO DA CENTRAL — no padrão do Zappy (zappy/apps/web/src/app/globals.css), desde 30/10/2026.

   A COR É O AZUL #163B70, escolhido pelo Leonardo no mesmo dia (depois de passar pelo verde-escuro).
   Os NOMES das variáveis ficaram (`--navy`, `--brand-*`): são usados em toda a Central, e trocar o
   nome não muda nada para quem usa. `--navy` é "o escuro do sistema", seja qual for a cor.

   Fundo cinza-claro, barra superior escura, barra lateral branca em grupos, botões no azul #163B70,
   Geist em 14px, raios de 6px nos controles, 12px nos modais e 14px nos cartões. O laranja da marca
   fica só no logo — é a regra do Zappy, escrita no próprio CSS dele.

   AS CORES ANTIGAS CONTINUAM COMO APELIDOS. As abas usam `--primary-orange` como cor de destaque e
   `--primary-blue` como cor de texto; elas passam a apontar para o azul-marinho do Zappy, e cada aba
   herda o desenho novo sem precisar ser reescrita. Cor escrita à mão numa aba (#e65c00 e afins) é
   tratada aba por aba.
   ================================================================================================== */

:root {
    color-scheme: light;

    /* As superfícies */
    --canvas: #f4f5f8;          /* fundo das telas */
    --surface: #ffffff;         /* cartão, barra lateral, modal */
    --ink: #163B70;             /* barra superior — a cor escolhida pelo Leonardo (30/10/2026) */
    --navy: #0d2547;            /* texto principal e seleção — o escuro do sistema */

    /* O destaque: o azul #163B70 e cinzas, sem acento de outra cor */
    --brand-50: #f0f4fa;
    --brand-100: #dde5f1;
    --brand-400: #8ea3c4;
    --brand-500: #4a6a9c;       /* foco */
    --brand-600: #163B70;       /* botão primário — a cor escolhida */
    --brand-700: #0f2c56;       /* hover do primário, links */

    /* Os cinzas (os do Tailwind, que o Zappy usa) */
    --slate-50: #f8fafc;        /* hover de linha */
    --slate-100: #f1f5f9;       /* divisória de linhas */
    --slate-200: #e2e8f0;       /* borda de cartão e tabela */
    --slate-300: #cbd5e1;       /* borda de input e botão secundário */
    --slate-400: #94a3b8;       /* texto de apoio, placeholder */
    --slate-500: #64748b;       /* texto secundário */
    --slate-600: #475569;
    --slate-700: #334155;

    /* Os estados */
    --success: #22c55e;   --success-50: #f0fdf4;   --success-700: #15803d;
    --warning: #f59e0b;   --warning-50: #fffbeb;   --warning-800: #92400e;
    --danger: #dc2626;    --danger-50: #fef2f2;    --danger-700: #b91c1c;
    --info: #0ea5e9;      --info-50: #f0f9ff;      --info-700: #0369a1;

    /* Formas */
    --radius-sm: 4px;     /* pills e badges */
    --radius: 6px;        /* botões e inputs */
    --radius-lg: 8px;     /* item da barra, dropdown, toast */
    --radius-xl: 12px;    /* modais */
    --radius-card: 14px;  /* cartões */
    --shadow-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;

    --topbar-h: 56px;
    --sidebar-w: 240px;
    --sidebar-w-recolhida: 72px;

    /* Os nomes antigos, que as abas usam — agora apelidos dos de cima. */
    --primary-blue: var(--navy);
    --primary-orange: var(--brand-600);   /* o nome é antigo; a cor é o azul */
    --bg-light: var(--canvas);
    --border-color: var(--slate-300);
}

/* O atributo hidden controla as abas liberadas pelo superadmin. Regras como .nav-item usam
   display:flex e poderiam vencer o estilo padrão do navegador. */
[hidden] {
    display: none !important;
}

body {
    background-color: var(--canvas);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    color: var(--navy);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

button, input, select, textarea {
    font-family: inherit;
}

button:not(:disabled), [role="button"], a[href], select:not(:disabled), label[for] {
    cursor: pointer;
}

:disabled {
    cursor: not-allowed;
}

:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

.app-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/* ================================================================== BARRA SUPERIOR */

.topbar {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--topbar-h);
    flex-shrink: 0;
    background: var(--ink);
    color: #fff;
    padding: 0 20px;
}

.topbar-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

/* O MESMO TAMANHO DO ZAP: 92px de largura e a altura que a proporção der (zappy/apps/web/src/
   components/top-bar.tsx desenha com width 92, e o preflight do Tailwind deixa a altura em auto —
   com o arquivo de 900×318, sai a ~32,5px). */
.topbar-logo {
    width: 92px;
    height: auto;
    display: block;
}

.topbar-divisor {
    width: 1px;
    height: 20px;
    background: rgb(255 255 255 / 0.2);
}

.topbar-nome {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.topbar-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--slate-300);
    font-size: 18px;
}

.topbar-icone:hover {
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

/* O menu de quem está logado */
.usuario-menu {
    position: relative;
}

.usuario-botao {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: none;
    border-radius: var(--radius-lg);
    background: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.usuario-botao:hover {
    background: rgb(255 255 255 / 0.1);
}

.usuario-botao .avatar {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.2);
}

.usuario-nome {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-seta {
    font-size: 11px;
    color: var(--slate-300);
}

.usuario-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    width: 288px;
    padding: 4px 0;
    background: var(--surface);
    color: var(--navy);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.usuario-dropdown-cabecalho {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-bottom: 1px solid var(--slate-100);
    margin-bottom: 4px;
}

.usuario-dropdown-cabecalho strong {
    font-weight: 600;
}

.usuario-dropdown-cabecalho span {
    font-size: 12px;
    color: var(--slate-500);
    overflow: hidden;
    text-overflow: ellipsis;
}

.usuario-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    color: var(--slate-700);
}

.usuario-dropdown button i {
    width: 16px;
    font-size: 14px;
    color: var(--slate-400);
    text-align: center;
}

.usuario-dropdown button:hover {
    background: var(--slate-50);
}

.usuario-dropdown-divisor {
    margin: 4px 0;
    border-top: 1px solid var(--slate-100);
}

/* ================================================================== AVATAR */

/* Com foto: a imagem redonda. Sem foto: a inicial num círculo azul-marinho. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    user-select: none;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-32 { width: 32px; height: 32px; font-size: 13px; }
.avatar-36 { width: 36px; height: 36px; font-size: 15px; }
.avatar-96 { width: 96px; height: 96px; font-size: 40px; }

/* ================================================================== BARRA LATERAL */

.sidebar {
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--slate-200);
    display: flex;
    flex-direction: column;
    z-index: 20;
    transition: width 0.2s ease;
    overflow-x: hidden;
    flex-shrink: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.nav-secao {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-secao-titulo {
    margin: 0 0 2px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-400);
    white-space: nowrap;
}

.nav-item,
.nav-group-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    color: var(--slate-600);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    user-select: none;
    transition: background-color 0.15s, color 0.15s;
}

.nav-item i,
.nav-group-header i:first-child {
    width: 18px;
    font-size: 16px;
    text-align: center;
    color: var(--slate-500);
    flex-shrink: 0;
}

.nav-item:hover,
.nav-group-header:hover {
    background: var(--slate-50);
    color: var(--navy);
}

/* O item aberto: fundo cinza, contorno fino e o traço azul-marinho na esquerda — o do Zappy. */
.nav-item.active,
.nav-group-header.active {
    background: var(--slate-100);
    color: var(--navy);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 0 0 1px var(--slate-200);
}

.nav-item.active i,
.nav-group-header.active i:first-child {
    color: var(--navy);
}

.nav-item.active::before,
.nav-group-header.active::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--navy);
}

.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-group-header .nav-label {
    flex: 1;
    min-width: 0;
}

.nav-caret {
    font-size: 10px;
    color: var(--slate-400);
    transition: transform 0.2s;
    margin-left: auto;
}

.nav-group-header.open .nav-caret {
    transform: rotate(180deg);
}

/* O submenu: recuado para debaixo do rótulo, com o fio de cada item na esquerda — o do item aberto
   acende. */
.sub-nav {
    display: none;
    flex-direction: column;
    margin: 2px 0 4px 22px;
}

.sub-nav.open {
    display: flex;
}

.sub-nav-item {
    display: block;
    width: 100%;
    padding: 7px 12px 7px 18px;
    border: none;
    border-left: 2px solid var(--slate-200);
    background: none;
    text-align: left;
    font-size: 13px;
    color: var(--slate-500);
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.sub-nav-item:hover {
    background: var(--slate-50);
    color: var(--navy);
    border-left-color: var(--slate-300);
}

/* QUEM MARCA ESTA CLASSE É O ROUTER (core/router.js). */
.sub-nav-item.active {
    color: var(--navy);
    font-weight: 500;
    border-left-color: var(--navy);
}

.sub-nav-item:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: -2px;
}

/* ---- Recolhida: só os ícones, em 72px ---- */

.sidebar.collapsed {
    width: var(--sidebar-w-recolhida);
}

.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-caret,
.sidebar.collapsed .sub-nav {
    display: none !important;
}

/* O rótulo do grupo fica invisível, e não some: a altura dele mantém os ícones no mesmo lugar
   quando a barra abre e fecha. */
.sidebar.collapsed .nav-secao-titulo {
    visibility: hidden;
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-group-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

/* O botão redondo na borda da barra, como no Zappy. Fica fora da barra (que corta o que passa da
   largura dela) e acompanha a largura pelo JS (sidebar.js). */
.sidebar-toggle-handle {
    position: fixed;
    top: calc(var(--topbar-h) + 22px);
    left: var(--sidebar-w);
    transform: translateX(-50%);
    z-index: 30;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    background: var(--surface);
    color: var(--slate-500);
    font-size: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
    transition: left 0.2s ease, color 0.15s;
}

.sidebar-toggle-handle:hover {
    color: var(--navy);
}

.sidebar-toggle-handle i {
    transition: transform 0.2s;
}

.sidebar.collapsed ~ .sidebar-toggle-handle {
    left: var(--sidebar-w-recolhida);
}

.sidebar.collapsed ~ .sidebar-toggle-handle i {
    transform: rotate(180deg);
}

/* ---- O balão da barra recolhida: o nome do item e, num grupo, os sub-itens ---- */

#sidebar-flyout {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 4px 0;
    min-width: 160px;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

#sidebar-flyout.visible {
    opacity: 1;
    pointer-events: all;
}

#sidebar-flyout .flyout-titulo {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

#sidebar-flyout:not(.flyout-so-nome) .flyout-titulo {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--slate-100);
}

#sidebar-flyout.flyout-so-nome {
    min-width: 0;
}

#sidebar-flyout button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--slate-600);
    background: none;
    border: none;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

#sidebar-flyout button:hover {
    background: var(--slate-50);
    color: var(--navy);
}

/* ================================================================== CONTEÚDO */

.main-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
    overflow-y: auto;
    background: var(--canvas);
    box-sizing: border-box;
}

/* O título da página: 20px, peso 600, sem fio embaixo — o do Zappy. */
.page-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--navy);
    margin: 0 0 24px;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    margin-bottom: 24px;
}

.header-actions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tab-pane.active { animation: none; }
}

/* ================================================================== CARTÕES */

.card {
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--slate-200) 80%, transparent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.menu-card {
    background: var(--surface);
    padding: 24px 20px;
    border-radius: var(--radius-card);
    border: 1px solid color-mix(in oklab, var(--slate-200) 80%, transparent);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--navy);
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.menu-card:hover {
    border-color: var(--brand-400);
    box-shadow: var(--shadow-lg);
}

.icon-box {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: var(--slate-100);
}

.icon-box i {
    font-size: 24px;
    color: var(--navy);
}

.menu-card h3 {
    margin: 0 0 6px 0;
    font-weight: 600;
    font-size: 15px;
}

.menu-card p {
    font-size: 13px;
    color: var(--slate-500);
    margin: 0;
    line-height: 1.45;
}

/* ================================================================== CAMPOS */

.search-container {
    margin-bottom: 24px;
    position: relative;
    max-width: 600px;
}

.search-container i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-400);
    font-size: 13px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--navy);
    background-color: var(--surface);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Select com a mesma classe (os filtros das abas): sem o recuo do ícone de lupa. */
select.search-input {
    padding-left: 10px;
}

.search-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgb(74 106 156 / 0.2);
}

.search-input::placeholder,
.input-group input::placeholder {
    color: var(--slate-400);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
}

.input-group input,
.input-group select,
.input-group textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--navy);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgb(74 106 156 / 0.2);
}

.input-group input:disabled,
.input-group select:disabled {
    background: var(--slate-50);
    color: var(--slate-500);
}

.input-ajuda {
    font-size: 12px;
    color: var(--slate-500);
}

.filter-input {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-weight: normal;
    outline: none;
}

.filter-input:focus {
    border-color: var(--brand-500);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-600);
}

/* ================================================================== TABELAS */

.table-responsive {
    overflow: auto;
    max-height: calc(100vh - 250px);
    background: var(--surface);
    border-radius: var(--radius-card);
    border: 1px solid color-mix(in oklab, var(--slate-200) 80%, transparent);
    box-shadow: var(--shadow-card);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px 16px;
    white-space: nowrap;
}

.data-table td {
    border-bottom: 1px solid var(--slate-100);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* O cabeçalho é o branco do cartão, em maiúsculas pequenas — o do Zappy. */
.data-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--slate-200);
    font-weight: 500;
    color: var(--slate-500);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding-top: 12px;
    padding-bottom: 12px;
}

.data-table tbody tr:hover {
    background-color: var(--slate-50);
}

/* ---- Cabeçalho padrão das tabelas de registro ----
   Rótulo à esquerda, ordenar e filtrar à direita, caixa de filtro logo abaixo. É o mesmo em toda
   aba que lista registros — ver js/shared/dataTable.js, que desenha isto. */

.dt-th-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dt-th-label {
    white-space: nowrap;
    margin-right: 8px;
}

.dt-th-controls {
    display: flex;
    gap: 6px;
}

.dt-icon-btn {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    line-height: 1;
}

.dt-icon-btn:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 3px;
}

.dt-sort-active,
.dt-filter-active {
    color: var(--navy);
}

.dt-sort-inactive {
    opacity: 0.3;
}

.dt-filter-inactive {
    opacity: 0.4;
}

.dt-filter-box {
    margin-top: 6px;
    text-transform: none;
    letter-spacing: normal;
}

.dt-filter-box .filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 400;
}

.dt-filter-box .filter-input:focus {
    outline: none;
    border-color: var(--brand-500);
}

/* Coluna sem controle nenhum ("Ações", "Opções"). */
.dt-th-plain {
    vertical-align: middle;
}

/* ================================================================== BOTÕES */

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primary i,
.btn-secondary i,
.btn-danger i {
    font-size: 13px;
}

.btn-primary {
    background-color: var(--brand-600);
    color: #fff;
    border: 1px solid var(--brand-600);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}

.btn-secondary {
    background: var(--surface);
    color: var(--slate-700);
    border: 1px solid var(--slate-300);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--slate-50);
}

/* O destrutivo de contorno do Zappy: vermelho só no texto e na borda. */
.btn-danger {
    background: var(--surface);
    color: var(--danger-700);
    border: 1px solid #fecaca;
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-50);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: 0.6;
}

/* O botão de ícone, sem caixa — ações de linha. */
.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--slate-400);
    font-size: 14px;
}

.btn-icone:hover:not(:disabled) {
    background: var(--slate-100);
    color: var(--slate-700);
}

.btn-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--brand-700);
    font-size: inherit;
}

.btn-link:hover {
    text-decoration: underline;
}

/* ================================================================== PILLS */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--slate-100);
    color: var(--slate-600);
}

.pill-sucesso { background: var(--success-50); color: var(--success-700); }
.pill-aviso { background: var(--warning-50); color: var(--warning-800); }
.pill-perigo { background: var(--danger-50); color: var(--danger-700); }
.pill-info { background: var(--info-50); color: var(--info-700); }
.pill-navy { background: var(--navy); color: #fff; }

.ponto {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--slate-400);
}

.ponto-online { background: var(--success); }
.ponto-aviso { background: var(--warning); }

/* As abas sublinhadas do Zappy (PageTabs), dentro de uma página. */
.abas-pagina {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    font-size: 14px;
    border-bottom: 1px solid var(--slate-200);
    margin-bottom: 24px;
}

.abas-pagina button {
    flex-shrink: 0;
    padding: 4px 0 8px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--slate-500);
    font-size: 14px;
}

.abas-pagina button:hover {
    color: var(--navy);
}

.abas-pagina button.ativa {
    border-bottom-color: var(--navy);
    color: var(--navy);
    font-weight: 600;
}

/* Avisos dentro da página */
.aviso {
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--slate-100);
    color: var(--slate-700);
}

.aviso-erro { background: var(--danger-50); color: var(--danger-700); }
.aviso-info { background: var(--brand-50); color: var(--brand-700); }
.aviso-atencao { background: var(--warning-50); color: var(--warning-800); }

/* ================================================================== MODAIS */

.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: 16px;
    box-sizing: border-box;
    background: rgb(13 37 71 / 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-box {
    background: var(--surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 800px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--slate-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--surface);
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-btn,
.close-modal {
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--radius);
    font-size: 16px;
    color: var(--slate-400);
    line-height: 1;
}

.close-btn:hover,
.close-modal:hover {
    background: var(--slate-100);
    color: var(--slate-700);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--slate-200);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--surface);
}

/* ================================================================== CARREGANDO */

.loader {
    border: 3px solid var(--slate-200);
    border-top: 3px solid var(--navy);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    animation: spin 0.8s linear infinite;
    margin: 40px auto;
    display: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.empty-state {
    color: var(--slate-500);
    text-align: center;
}

/* ================================================================== CELULAR */

.mobile-menu-btn {
    display: none;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--topbar-h);
    background: rgb(13 37 71 / 0.45);
    z-index: 40;
}

.sidebar-overlay.active {
    display: block;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: inline-flex;
    }

    .topbar {
        padding: 0 12px;
        gap: 8px;
    }

    .topbar-divisor,
    .topbar-nome,
    .usuario-nome,
    .usuario-seta {
        display: none;
    }

    /* A barra lateral vira gaveta, debaixo da barra superior. */
    .sidebar {
        position: fixed;
        top: var(--topbar-h);
        bottom: 0;
        left: 0;
        width: 256px !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 50;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    }

    /* Na gaveta a barra mostra os nomes mesmo "recolhida": quem abre a gaveta quer ler. */
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .nav-caret {
        display: inline !important;
    }

    .sidebar.collapsed .nav-secao-titulo {
        visibility: visible;
    }

    .sidebar.collapsed .nav-item,
    .sidebar.collapsed .nav-group-header {
        justify-content: flex-start;
        padding: 10px 12px;
        gap: 12px;
    }

    .sidebar-toggle-handle {
        display: none;
    }

    .main-content {
        padding: 16px;
        width: 100%;
        /* `box-sizing` não é global neste projeto: sem ele, o padding entra por cima dos 100%. */
        box-sizing: border-box;
    }

    .modal-box {
        max-height: calc(100vh - 32px);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .menu-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================== TOASTS */

/* O do Zappy: uma tarja azul-marinho no centro, embaixo. Erro em vermelho. */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--navy);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    /* `box-sizing` não é global neste projeto — cada regra declara o seu. */
    box-sizing: border-box;
    max-width: min(480px, calc(100vw - 32px));
    line-height: 1.45;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.toast i {
    flex-shrink: 0;
    font-size: 15px;
}

.toast.error {
    background: var(--danger);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================== TROCA DE SENHA E MINHA CONTA */

/* A troca obrigatória do primeiro acesso (js/shell/trocaDeSenha.js): o cartão do login, por cima
   de tudo, sem como fechar. */
.tela-cheia {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--canvas);
    overflow-y: auto;
}

.tela-cheia-cartao {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tela-cheia-marca {
    display: flex;
    justify-content: center;
}

.tela-cheia-logo {
    width: 180px;
    height: auto;
}

.tela-cheia-titulo {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.tela-cheia-texto {
    margin: -8px 0 0;
    font-size: 14px;
    color: var(--slate-500);
    text-align: center;
}

.tela-cheia-rodape {
    display: flex;
    justify-content: center;
}

/* A lista de regras que vai ficando verde enquanto a pessoa digita. */
.regras-senha {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--slate-500);
}

.regras-senha i {
    width: 14px;
    color: var(--slate-400);
}

.regras-senha .regra-ok,
.regras-senha .regra-ok i {
    color: var(--success-700);
}

.minha-conta {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.minha-conta-secao h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

.minha-conta-secao + .minha-conta-secao {
    padding-top: 20px;
    border-top: 1px solid var(--slate-100);
}

.minha-conta-foto {
    display: flex;
    align-items: center;
    gap: 16px;
}

.minha-conta-foto p {
    margin: 2px 0 10px;
}

.minha-conta-senha {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.minha-conta-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* O destrutivo cheio do Zappy, para a confirmação final de algo que não se desfaz. */
.btn-primary.btn-perigo-cheio {
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-primary.btn-perigo-cheio:hover:not(:disabled) {
    background-color: var(--danger-700);
    border-color: var(--danger-700);
}

/* ==================================================================================================
   COMO OS BOTÕES ENTRAM NA TELA — a regra da Central, no padrão do Zappy (30/10/2026)

   1. O CABEÇALHO DA PÁGINA tem o título à esquerda e as ações à direita, na mesma linha.
   2. UMA PRIMÁRIA POR TELA (cheia, azul-marinho): a ação que cria ou avança — "Novo…", "Concluir".
   3. NO MÁXIMO DUAS SECUNDÁRIAS ao lado (contorno). O resto vai para o menu "⋮" (`.menu-acoes`):
      histórico, exportar, imprimir, listas — o que se usa de vez em quando.
   4. DESTRUTIVA em contorno vermelho (`.btn-danger`); a confirmação final dela, cheia
      (`.btn-perigo-cheio`).
   5. ÍCONE À ESQUERDA, 13px, só quando ajuda a reconhecer a ação. Botão SÓ DE ÍCONE apenas em ação
      de linha de tabela ou no "⋮", sempre com `title` e `aria-label`.
   6. TUDO COM 36px DE ALTURA — botão, busca, select, data — para a barra de filtros ser uma linha.
   7. "VOLTAR" é discreto (`.btn-voltar`), à esquerda do título, e não um bloco cinza.
   ================================================================================================== */

.btn-primary,
.btn-secondary,
.btn-danger {
    min-height: 36px;
    padding: 7px 12px;
    box-sizing: border-box;
}

/* O botão só de ícone: quadrado, do tamanho dos outros. */
.btn-so-icone {
    width: 36px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.btn-so-icone i {
    font-size: 14px;
}

/* "Voltar": texto com seta, sem caixa — o caminho de volta não compete com as ações. */
.btn-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px 0 6px;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--slate-600);
    font-size: 14px;
    font-weight: 500;
}

.btn-voltar:hover {
    background: var(--slate-100);
    color: var(--navy);
}

/* Campos e selects da barra de filtros: a mesma altura dos botões. */
.search-input,
.input-group input:not([type="checkbox"]):not([type="radio"]),
.input-group select {
    min-height: 36px;
}

/* ---- O menu "⋮" (js/shared/menuAcoes.js) ----

   <div class="menu-acoes">
     <button class="btn-secondary btn-so-icone" data-menu-gatilho aria-haspopup="menu" …>⋮</button>
     <div class="menu-acoes-lista" role="menu" hidden>
       <button class="menu-acoes-item" role="menuitem"><i …></i> Exportar Excel</button>
     </div>
   </div> */

.menu-acoes {
    position: relative;
    display: inline-flex;
}

.menu-acoes-lista {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 220px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.menu-acoes-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    color: var(--slate-700);
    white-space: nowrap;
}

.menu-acoes-item i {
    width: 16px;
    font-size: 14px;
    text-align: center;
    color: var(--slate-400);
}

.menu-acoes-item:hover:not(:disabled),
.menu-acoes-item:focus-visible {
    background: var(--slate-50);
    outline: none;
}

.menu-acoes-item:disabled {
    opacity: 0.5;
}

.menu-acoes-divisor {
    margin: 4px 0;
    border-top: 1px solid var(--slate-100);
}

/* A barra de quem está editando um registro (ficha, on-boarding): Voltar, título, status, as ações
   do status e o "⋮" — numa linha, com um fio embaixo separando do formulário. */
.barra-de-edicao {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--slate-200);
}

/* Ação de linha destrutiva (js/shared/acaoDeLinha.js): cinza parada, vermelha no hover. */
.btn-icone-perigo:hover:not(:disabled) {
    background: var(--danger-50);
    color: var(--danger);
}

/* A célula das ações de linha: os botões juntos, sem quebrar. */
.data-table td .btn-icone + .btn-icone {
    margin-left: 2px;
}