/* Zapius AI — camada de design do painel.
 *
 * Estratégia: o Bootstrap 5.3 já é temado por CSS variables, então reconfiguramos
 * os tokens dele (--bs-*) em vez de sobrescrever regra por regra. Tudo que é
 * específico do produto (shell, navegação, utilitários) usa o prefixo --pz-/pz-.
 *
 * A paleta oficial da marca vive só no bloco :root abaixo: trocar uma cor aqui
 * troca em todo o sistema. Nenhuma view deve repetir hex de marca.
 *
 * Atenção: agenda.css já define .pz-grade, .pz-dia, .pz-evento, .pz-chip etc.
 * Os utilitários daqui não reutilizam esses nomes para não brigar com o calendário.
 */

:root {
    /* Paleta oficial Zapius AI */
    --pz-primary: #6366f1;        /* roxo da marca: botões, seleções, indicadores */
    --pz-primary-600: #4f46e5;    /* hover e estado ativo */
    --pz-primary-700: #4338ca;    /* pressionado */
    --pz-primary-050: #eef2ff;    /* tinta de fundo para linhas e chips selecionados */
    --pz-marca-2: #7c3aed;        /* segunda tinta, restrita à logo e ao painel do login */
    --pz-sucesso: #22d3a6;        /* verde menta: conexão ativa, automação ligada */
    --pz-sucesso-forte: #0b7a5e;  /* irmão escuro do menta para TEXTO sobre claro (AA) */
    --pz-aviso: #f59e0b;
    --pz-perigo: #ef4444;

    /* Superfícies e traço (tema claro) */
    --pz-canvas: #f3f4f8;
    --pz-surface: #ffffff;
    --pz-surface-2: #f8f9fc;
    --pz-borda: #e5e7eb;
    --pz-borda-forte: #d1d5db;
    --pz-texto: #111827;
    --pz-texto-suave: #6b7280;
    --pz-sombra-sm: 0 1px 2px rgba(11, 15, 26, .05), 0 1px 3px rgba(11, 15, 26, .05);
    --pz-sombra: 0 1px 3px rgba(11, 15, 26, .05), 0 6px 20px -6px rgba(11, 15, 26, .12);
    --pz-sombra-lg: 0 18px 48px -12px rgba(11, 15, 26, .22);

    /* Sidebar tem identidade própria nos dois temas */
    --pz-nav-bg: #0b0f1a;
    --pz-nav-bg-2: #111827;
    --pz-nav-fg: #98a2b3;
    --pz-nav-fg-forte: #f3f4f8;
    --pz-nav-hover: rgba(152, 162, 179, .10);
    --pz-nav-ativo-bg: rgba(99, 102, 241, .18);
    --pz-nav-ativo-fg: #c3cbfe;
    --pz-nav-borda: rgba(152, 162, 179, .14);
    --pz-largura-nav: 260px;
    --pz-largura-nav-colapsada: 76px;

    --pz-raio: 12px;
    --pz-raio-lg: 16px;

    /* Reconfigura o Bootstrap (claro).
       Links e texto usam --pz-primary-600, não --pz-primary: #6366f1 sobre branco dá
       4,45:1 e o AA pede 4,5:1. A diferença é de 4 unidades RGB e invisível; o
       preenchimento (botão, chip, seleção) continua no roxo oficial da marca. */
    --bs-body-bg: var(--pz-canvas);
    --bs-body-color: var(--pz-texto);
    --bs-emphasis-color: var(--pz-nav-bg);
    --bs-border-color: var(--pz-borda);
    --bs-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bs-secondary-rgb: 107, 114, 128;
    --bs-link-color: #4f46e5;
    --bs-link-hover-color: #4338ca;
    /* O Bootstrap pinta o link por --bs-link-color-rgb; sem isso os <a> ficariam no azul padrão. */
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color-rgb: 67, 56, 202;
    --bs-link-opacity: 1;
    /* Estados semânticos amarrados à paleta (o Bootstrap só traz os --bs-*-rgb). */
    --bs-success-rgb: 15, 155, 115;
    --bs-success-text-emphasis: var(--pz-sucesso-forte);
    --bs-success-border-subtle: rgba(34, 211, 166, .45);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger-rgb: 239, 68, 68;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 18px;
    /* Inter quando existir na máquina; a pilha de sistema cobre o resto sem baixar fonte. */
    --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --bs-body-line-height: 1.55;
}

[data-bs-theme="dark"] {
    --pz-canvas: #0b0f1a;
    --pz-surface: #111827;
    --pz-surface-2: #161f31;
    --pz-borda: #232f47;
    --pz-borda-forte: #2e3c58;
    --pz-texto: #e5e7eb;
    --pz-texto-suave: #94a3b8;
    --pz-primary-050: rgba(99, 102, 241, .14);
    --pz-sucesso-forte: #5eead4;
    --pz-sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --pz-sombra: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 24px -8px rgba(0, 0, 0, .55);
    --pz-sombra-lg: 0 20px 50px -12px rgba(0, 0, 0, .7);
    --pz-nav-bg: #080c15;
    --pz-nav-bg-2: #0b0f1a;

    --bs-body-bg: var(--pz-canvas);
    --bs-body-color: #dbe3f0;
    --bs-emphasis-color: #f8fafc;
    --bs-border-color: var(--pz-borda);
    --bs-secondary-bg: #1b2436;
    --bs-tertiary-bg: var(--pz-surface-2);
    --bs-primary: #7c8cf8;
    --bs-primary-rgb: 124, 140, 248;
    --bs-link-color: #97a4fa;
    --bs-link-hover-color: #b6befd;
    --bs-link-color-rgb: 151, 164, 250;
    --bs-link-hover-color-rgb: 182, 190, 253;
    --bs-success-text-emphasis: #5eead4;
    --bs-success-border-subtle: rgba(34, 211, 166, .35);
}

/* ---------- Componentes Bootstrap re-coloridos ---------- */

.btn-primary {
    --bs-btn-bg: var(--pz-primary);
    --bs-btn-border-color: var(--pz-primary);
    --bs-btn-hover-bg: var(--pz-primary-600);
    --bs-btn-hover-border-color: var(--pz-primary-600);
    --bs-btn-active-bg: var(--pz-primary-700);
    --bs-btn-active-border-color: var(--pz-primary-700);
    --bs-btn-disabled-bg: var(--pz-primary);
    --bs-btn-disabled-border-color: var(--pz-primary);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-primary {
    --bs-btn-color: var(--pz-primary);
    --bs-btn-border-color: var(--pz-borda-forte);
    --bs-btn-hover-bg: var(--pz-primary);
    --bs-btn-hover-border-color: var(--pz-primary);
    --bs-btn-active-bg: var(--pz-primary-600);
    --bs-btn-active-border-color: var(--pz-primary-600);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #97a4fa; }

/* Usa a cor de link do tema: o roxo da marca sobre superfície escura fica abaixo de 3:1. */
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); }

/* O --bs-btn-color padrão do outline-secondary (#6c757d) fica abaixo de 4.5:1 sobre as
   superfícies escuras do projeto, então amarramos o botão neutro aos nossos tokens. */
.btn-outline-secondary {
    --bs-btn-color: var(--pz-texto-suave);
    --bs-btn-border-color: var(--pz-borda-forte);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--pz-surface-2);
    --bs-btn-hover-border-color: var(--pz-borda-forte);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--pz-primary-050);
    --bs-btn-active-border-color: var(--pz-borda-forte);
    --bs-btn-disabled-color: var(--pz-texto-suave);
    --bs-btn-focus-shadow-rgb: 92, 106, 128;
}

.badge.text-bg-primary, .bg-primary { background-color: var(--pz-primary) !important; }
.text-primary { color: var(--pz-primary) !important; }
.border-primary { border-color: var(--pz-primary) !important; }

.btn {
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .95rem;
    --bs-btn-font-weight: 550;
    --bs-btn-border-radius: 9px;
    --bs-btn-hover-border-color: var(--pz-borda-forte);
    --bs-btn-active-border-color: var(--pz-borda-forte);
}

.btn-sm { --bs-btn-border-radius: 8px; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
}

/* Botão neutro da topbar — não usa .btn-light porque ele não inverte bem no escuro. */
.pz-btn-suave {
    background-color: transparent;
    border: 1px solid var(--pz-borda);
    color: var(--pz-texto-suave);
}

.pz-btn-suave:hover {
    background-color: var(--pz-surface-2);
    border-color: var(--pz-borda-forte);
    color: var(--bs-emphasis-color);
}

.form-control, .form-select {
    --bs-border-radius: 9px;
    background-color: var(--pz-surface);
    border-color: var(--pz-borda-forte);
    padding-block: .48rem;
}

.form-control:focus, .form-select:focus, .btn:focus-visible, .form-check-input:focus-visible {
    border-color: var(--pz-primary);
    box-shadow: 0 0 0 .19rem rgba(79, 70, 229, .17);
}

/* No escuro o anel azul-escuro sobre fundo escuro quase não aparece. */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .btn:focus-visible,
[data-bs-theme="dark"] .form-check-input:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .19rem rgba(124, 140, 248, .38);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: var(--pz-surface-2); }

.form-control::placeholder { color: var(--pz-texto-suave); opacity: .75; }

.input-group-text {
    background-color: var(--pz-surface-2);
    border-color: var(--pz-borda-forte);
    color: var(--pz-texto-suave);
}

.form-label {
    color: var(--bs-emphasis-color);
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.form-text { color: var(--pz-texto-suave); font-size: .78125rem; }

.form-check-input:checked { background-color: var(--pz-primary); border-color: var(--pz-primary); }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--pz-borda);
    --bs-nav-tabs-link-hover-border-color: var(--pz-borda);
    border-bottom-width: 1px;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--pz-texto-suave);
    font-weight: 550;
    padding: .55rem .9rem;
}

.nav-tabs .nav-link:hover { color: var(--bs-emphasis-color); }

.nav-tabs .nav-link.active {
    background: none;
    border-bottom-color: var(--pz-primary);
    color: var(--pz-primary);
}

.dropdown-menu {
    --bs-dropdown-border-radius: var(--pz-raio);
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-header-color: var(--pz-texto-suave);
    background-color: var(--pz-surface);
    border-color: var(--pz-borda);
    box-shadow: var(--pz-sombra-lg);
    padding: .375rem;
}

.dropdown-item { border-radius: 8px; padding: .42rem .65rem; }
.dropdown-item:active, .dropdown-item:focus { background-color: var(--pz-primary-050); }

.modal-content {
    background-color: var(--pz-surface);
    border-color: var(--pz-borda);
    border-radius: var(--pz-raio-lg, 16px);
    box-shadow: var(--pz-sombra-lg);
}

.modal-header, .modal-footer { border-color: var(--pz-borda); }
.modal-header { padding: 1rem 1.25rem; }

.alert { --bs-alert-border-radius: var(--pz-raio); border-width: 1px; }

.progress, .progress-stacked { background-color: var(--pz-surface-2); }

.list-group-item { background-color: var(--pz-surface); border-color: var(--pz-borda); }

/* ---------- Shell ---------- */

.pz-ico {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pz-ico-sm { width: .95em; height: .95em; }
.pz-ico-lg { width: 1.45em; height: 1.45em; }

.pz-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--pz-canvas);
}

.pz-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: var(--pz-largura-nav);
    background: linear-gradient(178deg, var(--pz-nav-bg), var(--pz-nav-bg-2));
    border-right: 1px solid var(--pz-nav-borda);
    transition: width .18s ease, transform .22s ease;
}

.pz-marca {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.15rem 1.1rem 1rem;
    color: var(--pz-nav-fg-forte);
    text-decoration: none;
}

.pz-marca-logo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pz-primary), var(--pz-marca-2));
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 14px -4px rgba(99, 102, 241, .8);
}

.pz-marca-texto { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; }
/* Sufixo "Master" da marca: identifica a área sem virar um segundo logotipo. */
.pz-marca-sufixo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pz-texto-suave); }
/* Dentro da marca da sidebar o fundo é sempre navy: --pz-texto-suave do tema claro não passa de 4:1 ali. */
.pz-marca .pz-marca-sufixo { color: var(--pz-nav-fg); }

.pz-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 .7rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--pz-nav-borda) transparent;
}

.pz-nav-grupo {
    margin: 1.15rem .55rem .4rem;
    color: var(--pz-nav-fg);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.pz-nav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 2px;
    padding: .5rem .65rem;
    border-radius: 9px;
    color: var(--pz-nav-fg);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .13s ease, color .13s ease;
}

.pz-nav-item:hover { background-color: var(--pz-nav-hover); color: var(--pz-nav-fg-forte); }

.pz-nav-item.ativo {
    background-color: var(--pz-nav-ativo-bg);
    color: var(--pz-nav-ativo-fg);
    font-weight: 600;
}

.pz-nav-item.ativo .pz-ico { color: #a5b0fd; }

.pz-nav-rodape {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .5rem .7rem 1rem;
    padding: .7rem .75rem;
    border: 1px solid var(--pz-nav-borda);
    border-radius: 10px;
    background-color: rgba(148, 163, 184, .05);
    color: var(--pz-nav-fg);
    font-size: .75rem;
    line-height: 1.35;
}

.pz-nav-rodape strong { color: var(--pz-nav-fg-forte); display: block; font-size: .8125rem; }

/* Sidebar recolhida (só ícones) — vale apenas no desktop; o estado mora no <html>
 * porque é aplicado pelo script inline antes da primeira pintura. */
@media (min-width: 992px) {
    .pz-nav-colapsada .pz-sidebar { width: var(--pz-largura-nav-colapsada); }
    .pz-nav-colapsada .pz-conteudo-wrap { margin-left: var(--pz-largura-nav-colapsada); }
    .pz-nav-colapsada .pz-marca { justify-content: center; padding-inline: 0; }
    .pz-nav-colapsada .pz-marca-texto,
    .pz-nav-colapsada .pz-nav-grupo,
    .pz-nav-colapsada .pz-nav-item span,
    .pz-nav-colapsada .pz-nav-rodape { display: none; }
    .pz-nav-colapsada .pz-nav-item { justify-content: center; padding-inline: 0; }
}

.pz-conteudo-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--pz-largura-nav);
    transition: margin-left .18s ease;
}

.pz-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 62px;
    padding: 0 clamp(.9rem, 2.2vw, 1.6rem);
    background-color: color-mix(in srgb, var(--pz-surface) 86%, transparent);
    border-bottom: 1px solid var(--pz-borda);
    backdrop-filter: blur(10px);
}

.pz-miga {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: var(--pz-texto-suave);
    font-size: .8125rem;
}

.pz-miga strong {
    overflow: hidden;
    color: var(--bs-emphasis-color);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pz-topbar-acoes { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

.pz-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pz-primary), var(--pz-marca-2));
    color: #fff;
    font-size: .78125rem;
    font-weight: 650;
}

.pz-conta {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem .25rem .25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--bs-body-color);
    font-size: .8125rem;
}

.pz-conta:hover { background-color: var(--pz-surface-2); border-color: var(--pz-borda); }
.pz-conta-nome { font-weight: 600; }

.pz-conta-perfil {
    padding: .1rem .45rem;
    border-radius: 999px;
    background-color: var(--pz-primary-050);
    color: var(--pz-primary);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: capitalize;
}

[data-bs-theme="dark"] .pz-conta-perfil { color: #b6befd; }

/* Mostra o glifo do tema para o qual o botão vai levar */
.pz-ico-tema-sol { display: none; }
.pz-ico-tema-lua { display: block; }
[data-bs-theme="dark"] .pz-ico-tema-sol { display: block; }
[data-bs-theme="dark"] .pz-ico-tema-lua { display: none; }

.pz-conteudo {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1440px;
    padding: clamp(1rem, 2.4vw, 1.75rem) clamp(.9rem, 2.2vw, 1.6rem) 3rem;
    margin: 0 auto;
}

.pz-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    display: none;
    background-color: rgba(15, 23, 42, .5);
}

/* Mobile / tablet: sidebar vira gaveta */
@media (max-width: 991.98px) {
    .pz-sidebar { transform: translateX(-100%); width: var(--pz-largura-nav); box-shadow: var(--pz-sombra-lg); }
    .pz-shell.gaveta .pz-sidebar { transform: none; }
    .pz-shell.gaveta .pz-backdrop { display: block; }
    .pz-conteudo-wrap { margin-left: 0; }
}

/* ---------- Utilitários de página ---------- */

.pz-pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.pz-pagina-cabecalho .pz-pagina-titulo {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -.018em;
    line-height: 1.25;
}

.pz-pagina-cabecalho .pz-pagina-descricao {
    margin: .15rem 0 0;
    color: var(--pz-texto-suave);
    font-size: .875rem;
}

.pz-pagina-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

/* Título h1/h2 que as views já renderizam, alinhado ao novo padrão */
.pz-conteudo > h1:first-child,
.pz-conteudo > .d-flex:first-child > h1 {
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -.018em;
}

/* .pz-card não usa a classe .card do Bootstrap, e os filhos .card-body/.card-header/.card-footer
   só têm espaçamento e borda de separação lidos destas variáveis. Sem declará-las aqui, a
   substituição de var() falha e o padding vira 0 — o conteúdo encosta na borda do card. */
.pz-card {
    --bs-card-spacer-y: 1.15rem;
    --bs-card-spacer-x: 1.35rem;
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.35rem;
    --bs-card-cap-bg: var(--pz-surface-2);
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--pz-borda);
    --bs-card-inner-border-radius: calc(var(--pz-raio) - 1px);
    background-color: var(--pz-surface);
    border: 1px solid var(--pz-borda);
    border-radius: var(--pz-raio);
    box-shadow: var(--pz-sombra-sm);
}

/* Painel interno discreto (ex.: remarcação na página pública) */
.pz-caixa-suave {
    padding: .95rem 1.05rem;
    border: 1px solid var(--pz-borda);
    border-radius: calc(var(--pz-raio) - 3px);
    background-color: var(--pz-surface-2);
}

/* Zona de ação destrutiva */
.pz-zona-perigo { border-color: rgba(239, 68, 68, .42); }
[data-bs-theme="dark"] .pz-zona-perigo { border-color: rgba(239, 68, 68, .34); }

/* QR de pareamento: fundo branco fixo — é o que o leitor de câmera espera. */
.pz-qr {
    width: 100%;
    max-width: 280px;
    padding: .5rem;
    border: 1px solid var(--pz-borda);
    border-radius: 10px;
    background-color: #fff;
}

.card {
    background-color: var(--pz-surface);
    border-color: var(--pz-borda);
    border-radius: var(--pz-raio);
    box-shadow: var(--pz-sombra-sm);
}

.card-header, .card-footer {
    background-color: var(--pz-surface-2);
    border-color: var(--pz-borda);
    font-weight: 600;
}

.card-header:first-child { border-radius: calc(var(--pz-raio) - 1px) calc(var(--pz-raio) - 1px) 0 0; }
.card-footer:last-child { border-radius: 0 0 calc(var(--pz-raio) - 1px) calc(var(--pz-raio) - 1px); }

/* position:relative é necessário além do overflow: o .visually-hidden dos cabeçalhos de
   ação é absolute; sem bloco de posicionamento por perto ele resolve contra o viewport,
   escapa do recorte e cria rolagem horizontal na página em telas estreitas. */
.pz-tabela { position: relative; overflow: hidden; border: 1px solid var(--pz-borda); border-radius: var(--pz-raio); background-color: var(--pz-surface); box-shadow: var(--pz-sombra-sm); }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--pz-borda);
    --bs-table-striped-bg: var(--pz-surface-2);
    --bs-table-hover-bg: color-mix(in srgb, var(--pz-primary) 5%, transparent);
    --bs-table-hover-color: var(--bs-body-color);
    margin-bottom: 0;
    font-size: .875rem;
}

.table > :not(caption) > * > * { padding: .7rem .85rem; }

.table thead th {
    background-color: var(--pz-surface-2);
    color: var(--pz-texto-suave);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td, .table th { vertical-align: middle; }

.pz-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .19rem .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.pz-status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    content: "";
}

.pz-status-sem-ponto::before { display: none; }

.pz-status-sucesso { color: var(--pz-sucesso-forte); background-color: rgba(34, 211, 166, .14); border-color: rgba(34, 211, 166, .34); }
.pz-status-info { color: var(--pz-primary-700); background-color: rgba(99, 102, 241, .12); border-color: rgba(99, 102, 241, .26); }
.pz-status-aviso { color: #b45309; background-color: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .3); }
.pz-status-perigo { color: #b91c1c; background-color: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .28); }
.pz-status-neutro { color: var(--pz-texto-suave); background-color: var(--pz-surface-2); border-color: var(--pz-borda-forte); }

[data-bs-theme="dark"] .pz-status-sucesso { color: var(--pz-sucesso-forte); }
[data-bs-theme="dark"] .pz-status-info { color: #b6befd; }
[data-bs-theme="dark"] .pz-status-aviso { color: #fcd34d; }
[data-bs-theme="dark"] .pz-status-perigo { color: #fca5a5; }

/* Mesmo vocabulário de cor, sem borda — para fundos de ícone e destaques. */
.pz-tom-sucesso { color: var(--pz-sucesso-forte); background-color: rgba(34, 211, 166, .15); }
.pz-tom-primario { color: var(--pz-primary-700); background-color: rgba(99, 102, 241, .13); }
.pz-tom-info { color: #0369a1; background-color: rgba(14, 165, 233, .14); }
.pz-tom-aviso { color: #b45309; background-color: rgba(245, 158, 11, .15); }
.pz-tom-perigo { color: #b91c1c; background-color: rgba(239, 68, 68, .13); }
.pz-tom-neutro { color: var(--pz-texto-suave); background-color: var(--pz-surface-2); }

[data-bs-theme="dark"] .pz-tom-sucesso { color: var(--pz-sucesso-forte); }
[data-bs-theme="dark"] .pz-tom-primario { color: #b6befd; }
[data-bs-theme="dark"] .pz-tom-info { color: #7dd3fc; }
[data-bs-theme="dark"] .pz-tom-aviso { color: #fcd34d; }
[data-bs-theme="dark"] .pz-tom-perigo { color: #fca5a5; }

.pz-stat {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    height: 100%;
    padding: 1.05rem 1.15rem;
    background-color: var(--pz-surface);
    border: 1px solid var(--pz-borda);
    border-radius: var(--pz-raio);
    box-shadow: var(--pz-sombra-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pz-stat:hover { border-color: var(--pz-borda-forte); box-shadow: var(--pz-sombra); transform: translateY(-1px); }

.pz-stat-rotulo { color: var(--pz-texto-suave); font-size: .8125rem; font-weight: 500; }
.pz-stat-valor { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }

.pz-stat-icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    font-size: 1.15rem;
}

.pz-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .65rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    background-color: var(--pz-surface);
    border: 1px solid var(--pz-borda);
    border-radius: var(--pz-raio);
    box-shadow: var(--pz-sombra-sm);
}

.pz-filtros .form-label { margin-bottom: .2rem; }

.pz-vazio {
    display: grid;
    place-items: center;
    gap: .35rem;
    padding: 3rem 1.25rem;
    color: var(--pz-texto-suave);
    text-align: center;
}

.pz-vazio .pz-vazio-icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .4rem;
    border-radius: 50%;
    background-color: var(--pz-surface-2);
    border: 1px solid var(--pz-borda);
    color: var(--pz-texto-suave);
    font-size: 1.3rem;
}

.pz-vazio strong { color: var(--bs-emphasis-color); font-size: .9375rem; font-weight: 600; }
.pz-vazio a { font-weight: 550; }

/* Listagens */
.pz-filtro-busca { flex-basis: 280px; max-width: 420px; }

.pz-tabela-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .8rem 1rem;
    background-color: var(--pz-surface);
    border-bottom: 1px solid var(--pz-borda);
}

.pz-tabela-cabecalho :is(h1, h2, h3) { display: flex; align-items: center; gap: .45rem; }

.pz-chip-check {
    min-height: 0;
    padding: .3rem .65rem .3rem 1.7rem;
    margin: 0;
    background-color: var(--pz-surface);
    border: 1px solid var(--pz-borda-forte);
    border-radius: 9px;
}

.pz-chip-check .form-check-input { margin-left: -1.7rem; }
.pz-chip-check .form-check-label { font-size: .8125rem; font-weight: 550; }
.pz-chip-check:has(.form-check-input:checked) { background-color: var(--pz-primary-050); border-color: var(--pz-primary); }

/* Formulários */
.pz-form { max-width: 960px; }

.pz-form h2 { letter-spacing: -.01em; }

.pz-caixa {
    padding: 1rem 1.1rem;
    background-color: var(--pz-surface-2);
    border: 1px solid var(--pz-borda);
    border-radius: calc(var(--pz-raio) - 3px);
}

.pz-caixa + .pz-caixa { margin-top: .85rem; }

.pz-opcao {
    display: flex;
    gap: .6rem;
    height: 100%;
    padding: .7rem .8rem;
    background-color: var(--pz-surface);
    border: 1px solid var(--pz-borda-forte);
    border-radius: 10px;
    cursor: pointer;
}

.pz-opcao:hover { border-color: var(--pz-primary); }
.pz-opcao:has(:checked) { background-color: var(--pz-primary-050); border-color: var(--pz-primary); }
.pz-opcao .form-check-input { margin: .2rem 0 0; flex: none; }

.form-control-color {
    min-height: calc(1.5em + .96rem + 2px);
    padding: .25rem;
    border-radius: 9px;
}

.form-switch .form-check-label { font-weight: 550; }

.pz-chip-cor {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: none;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.pz-celula { display: flex; align-items: center; gap: .55rem; }

.pz-nome { font-weight: 550; }

.pz-nome small, .pz-sub {
    display: block;
    color: var(--pz-texto-suave);
    font-size: .75rem;
    font-weight: 400;
}

/* Cartão de estatística como link */
a.pz-stat { color: inherit; text-decoration: none; }
a.pz-stat:hover .pz-seta { color: var(--pz-primary); transform: translateX(2px); }
.pz-seta { transition: transform .15s ease, color .15s ease; align-self: center; }

/* Lista "Agenda de hoje" */
.pz-hoje-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1.05rem;
    border-top: 1px solid var(--pz-borda);
}

.pz-hoje-item:first-child { border-top: 0; }

.pz-hoje-hora {
    display: flex;
    width: 52px;
    flex: none;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

/* Links de ação rápida */
.pz-atalho {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.05rem;
    border-top: 1px solid var(--pz-borda);
    color: inherit;
    font-size: .875rem;
    text-decoration: none;
}

.pz-atalho:first-child { border-top: 0; }
.pz-atalho:hover { background-color: var(--pz-surface-2); color: inherit; }
.pz-atalho:hover .pz-stat-icone { background-color: var(--pz-primary-050); color: var(--pz-primary); }

.text-suave { color: var(--pz-texto-suave) !important; }

/* O vermelho padrão (#dc3545) fica em 3.9:1 sobre as superfícies escuras; o tom de
   ênfase do Bootstrap escuro sobe para ~7:1 sem mudar a cor de .btn-danger. */
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
.fw-500 { font-weight: 500 !important; }
.fs-7 { font-size: .8125rem !important; }
.fs-8 { font-size: .75rem !important; }

.pz-divisor-suave { color: var(--pz-borda-forte); }

code {
    padding: .15rem .35rem;
    border-radius: 6px;
    background-color: var(--pz-primary-050);
    color: var(--pz-primary);
    font-size: .875em;
}

[data-bs-theme="dark"] code { color: #b6befd; }

/* ---------- Telas sem shell: login, erros e páginas públicas ---------- */

/* Definições (dt/dd) de detalhe: modal da agenda e página pública de reserva. */
.pz-def dt {
    font-size: .75rem;
    font-weight: 500;
    color: var(--pz-texto-suave);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pz-def dd {
    font-weight: 550;
    overflow-wrap: anywhere;
}

.pz-def dd + dt { margin-top: .6rem; }

.pz-tela-cheia {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem;
    background-color: var(--pz-canvas);
}

.pz-tela-cheia-topo {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Login com painel de marca ao lado do formulário */
.pz-auth {
    display: grid;
    grid-template-columns: 1fr;
    width: min(980px, 100%);
    overflow: hidden;
    border: 1px solid var(--pz-borda);
    border-radius: var(--pz-raio-lg);
    background-color: var(--pz-surface);
    box-shadow: var(--pz-sombra-lg);
}

@media (min-width: 900px) {
    .pz-auth { grid-template-columns: 1.05fr 1fr; }
}

.pz-auth-marca {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.2rem;
    /* --pz-primary-600 e não --pz-primary no meio do gradiente: branco sobre #6366f1
       fica em 4,47:1 e o texto da lista precisa passar de 4,5:1. */
    background-image: linear-gradient(160deg, var(--pz-nav-bg) 0%, var(--pz-primary-600) 58%, var(--pz-marca-2) 130%);
    color: #fff;
}

.pz-auth-marca-topo { display: flex; align-items: center; gap: .75rem; }

.pz-auth-marca h1 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }

.pz-auth-marca p { color: rgba(255, 255, 255, .82); font-size: .9375rem; }

/* Slogan em peso/tamanho, não em cor nova: hierarquia sem encher a tela de matizes. */
.pz-auth-slogan { color: #fff; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }

/* A caixa da logo é roxa sobre fundo roxo; aqui ela veda em vidro translúcido. */
.pz-auth-marca .pz-marca-logo {
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30);
    font-weight: 700;
}

.pz-auth-marca .pz-marca-sufixo { color: rgba(255, 255, 255, .74); }

.pz-auth-lista {
    display: grid;
    gap: .6rem;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.pz-auth-lista li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .88);
}

.pz-auth-lista .pz-ico { flex: none; margin-top: .2rem; }

.pz-auth-form { padding: 2.2rem; }

/* Campo-isca do cadastro público: existe no DOM para o robô, desaparece para gente.
   absolute + 1px evita display:none, que alguns bots tratam como campo a pular. */
.pz-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.pz-auth-form > h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }

.pz-auth-form > h2 + p { color: var(--pz-texto-suave); font-size: .875rem; }

@media (max-width: 899.98px) {
    .pz-auth-marca { padding: 1.6rem; }
    .pz-auth-lista { display: none; }
}

/* Páginas de erro */
.pz-erro {
    display: grid;
    gap: .9rem;
    justify-items: center;
    width: min(600px, 100%);
    text-align: center;
}

.pz-erro-numero {
    font-size: clamp(3.5rem, 11vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background-image: linear-gradient(120deg, var(--pz-primary), var(--pz-marca-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pz-erro-icone {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--pz-primary-050);
    color: var(--pz-primary);
}

.pz-erro-dica { margin: 0; color: var(--pz-texto-suave); font-size: .875rem; }

.pz-erro-acoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* Página pública de reserva / privacidade */
.pz-publico { width: min(760px, 100%); }

.pz-publico-cabeca {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.1rem;
}

.pz-publico-cabeca > div { min-width: 0; }

.pz-publico-logo {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 13px;
    background-image: linear-gradient(160deg, var(--pz-primary), var(--pz-marca-2));
    color: #fff;
    font-weight: 700;
}

/* Escolha de horário (os botões .slot são gerados pelo JS) */
.pz-slots { display: flex; flex-wrap: wrap; gap: .45rem; }

.pz-slots .btn {
    min-width: 138px;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.pz-passo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .9rem;
    font-size: 1rem;
    font-weight: 650;
}

.pz-passo-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background-color: var(--pz-primary);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.pz-nota-lgpd {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem .95rem;
    border: 1px solid var(--pz-borda);
    border-radius: calc(var(--pz-raio) - 3px);
    background-color: var(--pz-surface-2);
    color: var(--pz-texto-suave);
    font-size: .8125rem;
}

.pz-nota-lgpd .pz-ico { flex: none; margin-top: .15rem; }
.pz-nota-lgpd a { font-weight: 550; }

/* ---------- Inbox do WhatsApp ---------- */

/* Rolagem própria: o JS de "ir para a última mensagem" depende de o contêiner ter altura fixa. */
.pz-thread {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .25rem;
}

.pz-bolha {
    max-width: min(72%, 480px);
    padding: .6rem .8rem;
    border: 1px solid var(--pz-borda);
    border-radius: 12px;
    background-color: var(--pz-surface-2);
    font-size: .875rem;
}

.pz-bolha.entrada { align-self: flex-start; border-bottom-left-radius: 3px; }

.pz-bolha.saida {
    align-self: flex-end;
    border-bottom-right-radius: 3px;
    border-color: rgba(34, 211, 166, .45);
    background-color: rgba(34, 211, 166, .16);
    color: var(--pz-texto);
}

.pz-bolha .hora {
    display: block;
    margin-top: .25rem;
    color: var(--pz-texto-suave);
    font-size: .72rem;
}

.pz-falha { color: var(--bs-danger-text-emphasis, #b02a37); font-size: .75rem; }

[data-bs-theme="dark"] .pz-bolha.saida {
    border-color: rgba(34, 211, 166, .34);
    background-color: rgba(34, 211, 166, .14);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .pz-falha { color: #f8a1a8; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}