/* =============================================================================
   Lapsus — tema dos painéis (/admin e /portal), light/white
   ========================================================================== */

:root {
    --pn-bg: #f4f7fb;
    --pn-surface: #ffffff;
    --pn-surface-2: #f8fafc;
    --pn-border: #e2e8f0;
    --pn-border-strong: #cbd5e1;
    --pn-text: #0f172a;
    --pn-muted: #64748b;
    --pn-cyan: #0891b2;
    --pn-cyan-bright: #06b6d4;
    --pn-blue: #2563eb;
    --pn-indigo: #6366f1;
    --pn-grad: linear-gradient(92deg, #06b6d4, #3b82f6 60%, #818cf8);
    --pn-radius: .9rem;
    --pn-shadow: 0 4px 20px rgba(15, 23, 42, .05);
}

body.panel-body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -.01em;
    background: var(--pn-bg);
    color: var(--pn-text);
}

.panel-body ::selection { background: rgba(6, 182, 212, .2); }

.panel-body h1, .panel-body .h4 { letter-spacing: -.02em; }

.panel-body .text-secondary { color: var(--pn-muted) !important; }

/* ----------------------------------------------------------------- marca */

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: .65rem;
    background: var(--pn-grad);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 6px 16px rgba(6, 182, 212, .35);
    flex-shrink: 0;
}

.brand-dot { color: var(--pn-cyan-bright); }

/* ---------------------------------------------------------------- sidebar */

.app-sidebar {
    width: 264px;
    min-height: 100vh;
    background: #fff;
    border-right: 1px solid var(--pn-border);
}

.app-sidebar .nav-link {
    color: var(--pn-muted);
    border-radius: .6rem;
    font-weight: 500;
    font-size: .92rem;
    padding: .55rem .8rem;
    border-left: 2px solid transparent;
    transition: color .15s ease, background .15s ease;
}

.app-sidebar .nav-link:hover { color: var(--pn-text); background: var(--pn-surface-2); }

.app-sidebar .nav-link.active {
    color: var(--pn-cyan);
    font-weight: 600;
    border-left-color: var(--pn-cyan-bright);
    background: linear-gradient(90deg, rgba(6, 182, 212, .1), rgba(6, 182, 212, .02));
}

.app-sidebar .nav-link.active i { color: var(--pn-cyan); }

.app-sidebar .nav-heading {
    font-size: .68rem;
    letter-spacing: .16em;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
}

.app-sidebar hr { border-color: var(--pn-border); opacity: 1; }

/* ----------------------------------------------------------------- topbar */

.app-topbar {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pn-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--pn-border-strong);
    color: var(--pn-text);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-weight: 600;
    font-size: .9rem;
}

.user-chip:hover { border-color: var(--pn-cyan-bright); color: var(--pn-cyan); }
.user-chip i { color: var(--pn-cyan); }

/* ------------------------------------------------------------------ cards */

.panel-body .card {
    --bs-card-bg: var(--pn-surface);
    --bs-card-border-color: var(--pn-border);
    --bs-card-cap-bg: transparent;
    border-radius: var(--pn-radius);
    box-shadow: var(--pn-shadow);
}

.panel-body .card-header {
    border-bottom: 1px solid var(--pn-border);
    font-weight: 600;
    padding-block: .85rem;
}

.panel-body .card-footer { border-top: 1px solid var(--pn-border); background: transparent; }

/* Stat cards do dashboard */
.stat-card { position: relative; overflow: hidden; }

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--pn-grad);
}

.stat-card .stat-label {
    color: var(--pn-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stat-card .stat-value { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; color: var(--pn-text); }

.stat-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: .7rem;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.stat-icon.cyan { color: #0891b2; background: rgba(6, 182, 212, .1); border: 1px solid rgba(6, 182, 212, .3); }
.stat-icon.blue { color: #2563eb; background: rgba(59, 130, 246, .1); border: 1px solid rgba(59, 130, 246, .3); }
.stat-icon.violet { color: #6d28d9; background: rgba(129, 140, 248, .12); border: 1px solid rgba(129, 140, 248, .35); }
.stat-icon.green { color: #059669; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .35); }

/* ---------------------------------------------------------------- tabelas */

.panel-body .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--pn-border);
    --bs-table-hover-bg: #f6f9fc;
}

.panel-body .table thead th {
    color: var(--pn-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pn-border-strong);
    background: var(--pn-surface-2);
    white-space: nowrap;
}

.panel-body .table > :not(caption) > * > * { padding: .7rem .95rem; }

/* ------------------------------------------------------------ formulários */

.panel-body .form-control,
.panel-body .form-select {
    background-color: #fff;
    border-color: var(--pn-border-strong);
    color: var(--pn-text);
}

.panel-body .form-control::placeholder { color: #94a3b8; }

.panel-body .form-control:focus,
.panel-body .form-select:focus {
    background-color: #fff;
    border-color: var(--pn-cyan-bright);
    box-shadow: 0 0 0 .25rem rgba(6, 182, 212, .12);
    color: var(--pn-text);
}

.panel-body .form-check-input { border-color: var(--pn-border-strong); }

.panel-body .form-check-input:checked {
    background-color: var(--pn-cyan-bright);
    border-color: var(--pn-cyan-bright);
}

.panel-body .input-group-text {
    background: var(--pn-surface-2);
    border-color: var(--pn-border-strong);
    color: var(--pn-muted);
}

/* ------------------------------------------------------------------ modais */

/*
   Modal rolável cujo corpo mora dentro de um <form>.

   O `.modal-dialog-scrollable` do Bootstrap conta com três filhos diretos no
   `.modal-content` — cabeçalho, corpo e rodapé —, porque é ele quem limita a
   altura (`max-height: 100%; overflow: hidden`) e deixa o corpo rolar. Aqui os
   formulários envolvem corpo e rodapé num <form>, para que o botão de salvar
   faça parte do envio; esse <form> entra no meio da cadeia flex, não recebe a
   altura limitada e cresce à vontade — o `overflow: hidden` do pai então CORTA
   o que passa, e o operador fica sem rolagem e sem os botões, vendo o
   formulário terminar no meio.

   As três regras abaixo repassam a cadeia ao <form>: ele encolhe, o corpo rola
   e o rodapé fica ancorado embaixo, visível.
*/
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex-shrink: 0;
}

/* ----------------------------------------------------------------- botões */

.panel-body .btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    background: var(--pn-grad);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(6, 182, 212, .3);
}

.panel-body .btn-primary:hover { color: #fff; filter: brightness(1.06); }

.panel-body .btn-outline-primary {
    --bs-btn-color: var(--pn-cyan);
    --bs-btn-border-color: rgba(8, 145, 178, .45);
    --bs-btn-hover-bg: rgba(6, 182, 212, .08);
    --bs-btn-hover-border-color: var(--pn-cyan);
    --bs-btn-hover-color: var(--pn-cyan);
    --bs-btn-active-bg: rgba(6, 182, 212, .14);
    --bs-btn-active-border-color: var(--pn-cyan);
    --bs-btn-active-color: var(--pn-cyan);
}

.panel-body .btn-outline-secondary {
    --bs-btn-color: var(--pn-muted);
    --bs-btn-border-color: var(--pn-border-strong);
    --bs-btn-hover-bg: var(--pn-surface-2);
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-hover-color: var(--pn-text);
    --bs-btn-active-bg: var(--pn-surface-2);
    --bs-btn-active-color: var(--pn-text);
}

/* --------------------------------------------------------------- diversos */

.panel-body .badge { font-weight: 600; letter-spacing: .02em; }

.badge-soft {
    color: var(--pn-muted);
    background: var(--pn-surface-2);
    border: 1px solid var(--pn-border-strong);
}

.panel-body code { color: var(--pn-cyan); }

.panel-body .font-monospace,
.panel-body code,
.panel-body pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.panel-body .nav-tabs { border-color: var(--pn-border-strong); }

.panel-body .nav-tabs .nav-link { color: var(--pn-muted); }

.panel-body .nav-tabs .nav-link.active {
    background: var(--pn-surface);
    border-color: var(--pn-border-strong) var(--pn-border-strong) var(--pn-surface);
    color: var(--pn-cyan);
    font-weight: 600;
}

.panel-body .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--pn-border);
}

.panel-body .dropdown-menu {
    --bs-dropdown-border-color: var(--pn-border);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}

.panel-body .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--pn-border);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: rgba(6, 182, 212, .05);
    --bs-accordion-active-color: var(--pn-text);
}

.panel-body .pagination {
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--pn-border-strong);
    --bs-pagination-color: var(--pn-muted);
    --bs-pagination-hover-bg: var(--pn-surface-2);
    --bs-pagination-hover-color: var(--pn-text);
    --bs-pagination-active-bg: var(--pn-cyan-bright);
    --bs-pagination-active-border-color: var(--pn-cyan-bright);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: var(--pn-surface-2);
    --bs-pagination-disabled-border-color: var(--pn-border);
}

/* Gráfico de barras (dashboard/consumo) */
.chart-bar {
    background: linear-gradient(180deg, #06b6d4, #3b82f6);
    border-radius: 4px 4px 0 0;
    min-width: 8px;
    box-shadow: 0 4px 10px rgba(6, 182, 212, .25);
    transition: filter .15s ease;
}

.chart-bar:hover { filter: brightness(1.12); }

.chart-floor { border-top: 1px solid var(--pn-border-strong); }

/* Bloco de segredo exibido uma única vez (token/licença) */
.token-reveal {
    display: block;
    background: rgba(6, 182, 212, .06);
    border: 1px solid rgba(8, 145, 178, .4);
    border-radius: .5rem;
    padding: .65rem .9rem;
    color: #0e7490;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    word-break: break-all;
}

/* Navbar do portal */
.portal-nav {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pn-border);
}

.portal-nav .navbar-brand { font-weight: 800; color: var(--pn-text); }
.portal-nav .nav-link { color: var(--pn-muted); font-weight: 500; }
.portal-nav .nav-link:hover { color: var(--pn-text); }
.portal-nav .nav-link.active { color: var(--pn-cyan); font-weight: 600; }

/* ------------------------------------------------------------------ auth */

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 60% 45% at 70% 0%, rgba(6, 182, 212, .09), transparent 60%),
        radial-gradient(ellipse 55% 45% at 10% 100%, rgba(99, 102, 241, .08), transparent 60%),
        var(--pn-bg);
}

.auth-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    pointer-events: none;
}

.auth-card {
    background: #fff;
    border: 1px solid var(--pn-border);
    border-radius: 1.1rem;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .12);
    position: relative;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; z-index: 1045; left: -264px; transition: left .2s; }
    .app-sidebar.show { left: 0; }
}

/* =============================================================================
   Painel executivo — a linguagem do Lapsus sobre o Bootstrap
   -----------------------------------------------------------------------------
   Por que uma CAMADA e não uma troca: o admin do ERP são 48 telas montadas em
   Bootstrap (grid, formulários, modais, tabelas). Trocar o framework para copiar
   o Lapsus, que é CSS próprio, seria reescrever as 48 — e o que se quer é o
   ACABAMENTO dele, não o encanamento. Então o que entra aqui são os tokens e os
   componentes que o Bootstrap não tem: a faixa de números, o estado vazio, os
   cartões de pendência e o wizard. O resto continua sendo Bootstrap, agora
   pintado com estas variáveis.
   ========================================================================== */

:root {
    /* Tons de superfície — cabeçalho de tabela, hover de linha, campo travado */
    --pn-surface-3: #f1f5f9;

    /* Tints: fundo claro + traço forte da mesma cor. Servem aos ícones dos
       cartões e às etiquetas, e é o que dá ao painel a paleta do Lapsus sem
       precisar de uma classe de cor por componente. */
    --pn-tint-cyan-bg: #ecfeff;   --pn-tint-cyan-fg: #0891b2;
    --pn-tint-blue-bg: #eff6ff;   --pn-tint-blue-fg: #2563eb;
    --pn-tint-green-bg: #ecfdf5;  --pn-tint-green-fg: #059669;
    --pn-tint-amber-bg: #fffbeb;  --pn-tint-amber-fg: #b45309;
    --pn-tint-violet-bg: #f5f3ff; --pn-tint-violet-fg: #7c3aed;
    --pn-tint-rose-bg: #fff1f2;   --pn-tint-rose-fg: #e11d48;
    --pn-tint-slate-bg: #f1f5f9;  --pn-tint-slate-fg: #475569;

    --pn-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --pn-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
    --pn-shadow-md: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);

    --pn-radius-sm: .6rem;
    --pn-t-fast: .14s ease;
    --pn-t-base: .2s ease;
}

.tint-cyan   { background: var(--pn-tint-cyan-bg);   color: var(--pn-tint-cyan-fg); }
.tint-blue   { background: var(--pn-tint-blue-bg);   color: var(--pn-tint-blue-fg); }
.tint-green  { background: var(--pn-tint-green-bg);  color: var(--pn-tint-green-fg); }
.tint-amber  { background: var(--pn-tint-amber-bg);  color: var(--pn-tint-amber-fg); }
.tint-violet { background: var(--pn-tint-violet-bg); color: var(--pn-tint-violet-fg); }
.tint-rose   { background: var(--pn-tint-rose-bg);   color: var(--pn-tint-rose-fg); }
.tint-slate  { background: var(--pn-tint-slate-bg);  color: var(--pn-tint-slate-fg); }

/* ------------------------------------------------------- cabeçalho da tela */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--pn-text); }
.page-head p { margin: .2rem 0 0; color: var(--pn-muted); font-size: .92rem; }

.section-title {
    margin: 1.75rem 0 .75rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--pn-text);
}

/* --------------------------------------------------------- faixa de números

   O cartão do Lapsus tem o ícone AO LADO do número, não atrás dele. A diferença
   parece de gosto e não é: com o ícone de fundo, o número disputa espaço com um
   desenho e a faixa inteira fica mais difícil de varrer de relance — que é a
   única coisa que se faz com ela. */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 1rem;
}

.metric-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius);
    box-shadow: var(--pn-shadow-sm);
    transition: transform var(--pn-t-base), box-shadow var(--pn-t-base);
}

/* Só o cartão que LEVA a algum lugar reage ao mouse. Um cartão que se mexe sem
   ter para onde ir promete um clique que não existe. */
a.metric-card { text-decoration: none; color: inherit; }
a.metric-card:hover { transform: translateY(-2px); box-shadow: var(--pn-shadow-md); }

.metric-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.15rem;
}

.metric-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.metric-value {
    font-size: 1.45rem; font-weight: 700; line-height: 1.15;
    letter-spacing: -.02em; color: var(--pn-text);
    /* Tabular: sem isto as colunas de dígitos dançam de um valor para o outro
       quando a página recarrega, e a faixa inteira parece tremer. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.metric-label { font-size: .9rem; font-weight: 600; color: var(--pn-text); }
.metric-sub { font-size: .78rem; color: var(--pn-muted); }

/* -------------------------------------------------------------- pendências

   O oposto da faixa de números: aqui cada cartão é uma coisa PARA FAZER, e por
   isso é sempre um link, tem quantidade em destaque e uma ação escrita. A borda
   esquerda colorida é o que separa "vencido" de "só esperando". */

.pend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: .9rem; }

.pend-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    border-left: 4px solid var(--pn-border-strong);
    border-radius: var(--pn-radius);
    box-shadow: var(--pn-shadow-sm);
    text-decoration: none; color: inherit;
    transition: transform var(--pn-t-base), box-shadow var(--pn-t-base);
}

.pend-card:hover { transform: translateY(-2px); box-shadow: var(--pn-shadow-md); color: inherit; }
.pend-card.pend-alta { border-left-color: #dc2626; }
.pend-card.pend-media { border-left-color: #d97706; }
.pend-card.pend-baixa { border-left-color: var(--pn-cyan-bright); }

.pend-qtd {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    letter-spacing: -.03em; color: var(--pn-text);
    font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 2ch;
}

.pend-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pend-corpo strong { font-size: .93rem; color: var(--pn-text); }
.pend-corpo small { font-size: .78rem; color: var(--pn-muted); }
.pend-valor { font-size: .82rem; font-weight: 700; color: #b45309; margin-top: .15rem; }

.pend-acao {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82rem; font-weight: 600; color: var(--pn-cyan);
    flex-shrink: 0; white-space: nowrap;
}

/* ------------------------------------------------------------ estado vazio

   Borda TRACEJADA de propósito: o estado vazio não é um cartão de conteúdo, e
   a linha cheia o faria parecer um painel que não carregou. */

.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1.5rem; text-align: center; color: var(--pn-muted);
    background: var(--pn-surface);
    border: 1px dashed var(--pn-border-strong);
    border-radius: var(--pn-radius);
}

.empty-state .empty-ico { font-size: 2.4rem; color: #10b981; line-height: 1; margin-bottom: .6rem; }
.empty-state p { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--pn-text); }
.empty-state small { display: block; margin-top: .25rem; font-size: .85rem; }

/* ---------------------------------------------------------------- rotinas */

.rotina-linha {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem 0;
    border-top: 1px solid var(--pn-border);
}

.rotina-linha:first-child { border-top: 0; }
.rotina-nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rotina-nome strong { font-size: .9rem; color: var(--pn-text); }
.rotina-nome small { font-size: .76rem; color: var(--pn-muted); }

.rotina-sinal {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #10b981;
}

.rotina-sinal.parada { background: #dc2626; }
.rotina-sinal.nunca { background: var(--pn-border-strong); }

/* ------------------------------------------------------------------ wizard

   Formulário longo dividido em passos. Os passos são SEÇÕES da mesma página e
   do mesmo <form>, mostradas uma de cada vez pelo JS — não páginas separadas.
   A diferença importa: sem JS o formulário continua inteiro na tela e envia
   normalmente (ver .wizard-sem-js), e a validação do servidor continua tendo
   todos os campos de uma vez, sem meio cadastro salvo no banco entre passos. */

.wizard-passos {
    display: flex; align-items: flex-start; gap: .25rem;
    list-style: none; padding: 0; margin: 0 0 1.5rem;
    overflow-x: auto;
}

.wizard-passo {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .85rem;
    border-radius: var(--pn-radius-sm);
    color: var(--pn-muted); font-size: .88rem; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
}

.wizard-passo-num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--pn-surface-3); color: var(--pn-muted);
    font-size: .8rem; font-weight: 700;
    transition: background var(--pn-t-fast), color var(--pn-t-fast);
}

.wizard-passo.atual { color: var(--pn-cyan); background: var(--pn-tint-cyan-bg); }
.wizard-passo.atual .wizard-passo-num { background: var(--pn-cyan); color: #fff; }
.wizard-passo.feito { color: var(--pn-text); }
.wizard-passo.feito .wizard-passo-num { background: #10b981; color: #fff; }

.wizard-sep { flex: 0 0 1.25rem; height: 1px; background: var(--pn-border-strong); margin-top: 1.15rem; }

.wizard-etapa[hidden] { display: none !important; }

.wizard-acoes {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--pn-border);
}

/* Sem JS o wizard vira o formulário longo de sempre: todos os passos abertos,
   a barra de passos escondida (ela não navegaria nada) e um único botão. É o
   mesmo <form>, então nada além da apresentação muda. */
.wizard-sem-js .wizard-passos,
.wizard-sem-js .wizard-nav { display: none; }
.wizard-sem-js .wizard-etapa { display: block !important; }
.wizard-sem-js .wizard-etapa + .wizard-etapa { margin-top: 1.5rem; }

@media (max-width: 575.98px) {
    .wizard-passo span:not(.wizard-passo-num) { display: none; }
    .pend-card { flex-wrap: wrap; }
}

/* --------------------------------------------------- título na barra do topo */

.topbar-titulo {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pn-text);
}

/* A saída do console entra na mensagem de sucesso/erro (ver RoutineController),
   e ela tem quebras de linha. Sem isto o relatório da rotina vira um parágrafo
   corrido: "Faturas marcadas: 3 Clientes suspensos: 1". */
.panel-body .alert { white-space: pre-line; }
.panel-body .alert code,
.panel-body .alert ul { white-space: normal; }

/* O botão de envio sem wizard e a navegação do wizard são exclusivos: o JS
   remove `wizard-sem-js` do <form>, e a troca acontece só no CSS. Sem isto, uma
   página sem JS ficaria sem botão nenhum — formulário que não envia. */
.wizard-fallback { display: none; }
.wizard-sem-js .wizard-fallback { display: block; }

/* Os campos do cadastro de cliente passaram de uma linha só para três grupos
   (que no cadastro viram os passos do wizard). Na edição eles aparecem juntos,
   e sem isto o primeiro campo de um grupo encosta no último do anterior — a
   goteira do `g-3` só vale DENTRO da linha, não entre linhas. */
.panel-body form .row.g-3 + .row.g-3 { margin-top: .5rem; }

/* --------------------------------------------------------- seções de form

   O formulário deixa de ser um cartão com quinze campos e passa a ser um
   cartão POR ASSUNTO, cada um com ícone, título e uma linha explicando o que
   está ali. É o mesmo número de campos; o que muda é que a pessoa consegue
   procurar por assunto em vez de varrer a tela inteira.

   Serve aos dois lados do mesmo formulário: no cadastro cada seção é um passo
   do wizard, na edição elas ficam empilhadas — e a tela de editar deixa de ser
   a versão feia da de cadastrar. */

.card-form {
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius);
    box-shadow: var(--pn-shadow-sm);
    padding: 1.25rem 1.35rem;
}

.card-form + .card-form { margin-top: 1.1rem; }

.form-section-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .25rem; }
.form-section-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; color: var(--pn-text); }

.form-section-head .fs-icon {
    width: 34px; height: 34px; border-radius: .6rem; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1rem;
    background: var(--pn-tint-cyan-bg); color: var(--pn-tint-cyan-fg);
}

/* A margem esquerda alinha a explicação com o TÍTULO, e não com o ícone: sem
   ela o parágrafo começa antes do h2 e os dois parecem de blocos diferentes. */
.form-section-sub {
    color: var(--pn-muted); font-size: .85rem; line-height: 1.5;
    margin: .15rem 0 1.1rem calc(34px + .7rem);
}

@media (max-width: 575.98px) {
    .form-section-sub { margin-left: 0; }
}

/* ------------------------------------------------------------------- abas

   As abas do Bootstrap são uma linha de guias coladas numa borda. O painel
   antigo usa pílulas dentro de uma caixa, e a diferença não é só de gosto: a
   guia sublinhada precisa da borda inferior para existir, e num cartão logo
   abaixo ela vira duas linhas quase juntas. A pílula não precisa de nada. */

.panel-body .nav-tabs {
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius);
    background: var(--pn-surface);
    box-shadow: var(--pn-shadow-sm);
    padding: .3rem;
    gap: .25rem;
    width: fit-content;
    max-width: 100%;
}

.panel-body .nav-tabs .nav-link {
    border: 0;
    border-radius: var(--pn-radius-sm);
    padding: .45rem .85rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--pn-muted);
    white-space: nowrap;
    transition: background var(--pn-t-fast), color var(--pn-t-fast);
}

.panel-body .nav-tabs .nav-link:hover { background: var(--pn-surface-3); color: var(--pn-text); }

.panel-body .nav-tabs .nav-link.active {
    background: var(--pn-tint-cyan-bg);
    color: var(--pn-cyan);
    font-weight: 600;
    border: 0;
}

/* A navegação do wizard virou um cartão próprio, separado do cartão de campos.
   O traço e o respiro que ela carrega existem para quando ela fica DENTRO de um
   bloco de campos; num cartão só dela, sobram. */
.card-form > .wizard-acoes { margin-top: 0; padding-top: 0; border-top: 0; }