/* =============================================================================
   UI — camada moderna (mobile-first)
   Sobe por cima do Bootstrap: tokens, app shell, cards de indicador, anéis de
   atingimento, skeletons e microanimações. Não substitui styles.css.
   ========================================================================== */

:root {
    /* Marca */
    --u-purple: #660099;
    --u-purple-600: #7a1ab5;
    --u-purple-400: #a855f7;
    --u-night: #2a0d45;

    /* Destaque/ação — laranja do sistema de chamados. O roxo segue como
       identidade e navegação; o laranja marca ação e ênfase. */
    --u-accent: #ff6b35;
    --u-accent-600: #e85520;
    --u-accent-bg: #fff1ea;
    --u-steel: #2c3e50;   /* apoio escuro do chamados */

    /* Superfícies */
    --u-bg: #f4f2f8;
    --u-surface: #ffffff;
    --u-surface-2: #faf8fe;
    --u-line: rgba(91, 50, 155, 0.13);
    --u-line-soft: rgba(91, 50, 155, 0.08);

    /* Texto */
    --u-ink: #221d33;
    --u-ink-2: #5f5578;
    --u-ink-3: #8b82a3;

    /* Status — paleta do sistema de chamados */
    --u-ok: #27ae60;
    --u-ok-bg: #e6f7ed;
    --u-warn: #f39c12;
    --u-warn-bg: #fef4e3;
    --u-bad: #e74c3c;
    --u-bad-bg: #fdecea;

    /* Tipografia */
    --u-font-ui: "Inter", "Montserrat", system-ui, sans-serif;
    --u-font-titulo: "Montserrat", "Inter", system-ui, sans-serif;

    /* Forma e profundidade */
    --u-r-sm: 10px;
    --u-r: 14px;
    --u-r-lg: 20px;
    --u-shadow-1: 0 1px 2px rgba(34, 29, 51, 0.05), 0 2px 8px rgba(34, 29, 51, 0.05);
    --u-shadow-2: 0 4px 12px rgba(34, 29, 51, 0.08), 0 12px 28px rgba(34, 29, 51, 0.07);
    --u-shadow-brand: 0 8px 24px rgba(102, 0, 153, 0.22);

    /* Movimento */
    --u-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --u-fast: 160ms;
    --u-mid: 280ms;

    /* Altura da navegação inferior (mobile) */
    --u-bottomnav-h: 0px;
}

/* Anel de progresso animável (degrada sem isto). */
@property --u-pct {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

/* ===== Tipografia e base ==================================================
   Inter no corpo (desenhada para interface, algarismos mais legíveis) e
   Montserrat nos títulos/marca, mantendo a personalidade da identidade. */
body {
    font-family: var(--u-font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.brand-title, .u-pagehead-title, .u-section-title,
.meta-title-bar, .navbar-brand {
    font-family: var(--u-font-titulo);
}

/* Números com largura fixa: colunas de valores param de "dançar" a cada
   atualização automática. */
.u-card-values, .u-ring-val, .u-kpi-value, .u-resumo-vals,
.resultados-table td, .md-table td, .mini-table td {
    font-variant-numeric: tabular-nums;
}

.u-mono-num {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Troca mobile/desktop.
   Utilidades próprias (e não d-none/d-lg-block do Bootstrap) porque no papel a
   largura vira a da folha: com as do Bootstrap a tabela sumiria do PDF. */
/* !important porque são utilidades: sem isso qualquer regra de componente
   declarada depois (ex.: .u-cards{display:flex}) venceria por ordem. */
.u-mobile-only { display: none !important; }
.u-desktop-only { display: block !important; }
@media (max-width: 991.98px) {
    .u-mobile-only { display: block !important; }
    .u-desktop-only { display: none !important; }
}
@media print {
    .u-mobile-only { display: none !important; }
    .u-desktop-only { display: block !important; }
    .u-bottomnav { display: none !important; }
    body { padding-bottom: 0 !important; }
}

/* ===== Cabeçalho de página (versão moderna do hero) ======================= */
.u-pagehead {
    position: relative;
    overflow: hidden;
    border-radius: var(--u-r-lg);
    padding: 20px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(168, 85, 247, 0.55) 0%, transparent 55%),
        linear-gradient(135deg, var(--u-purple) 0%, var(--u-night) 100%);
    box-shadow: var(--u-shadow-brand);
}
.u-pagehead::after {
    /* brilho sutil no canto */
    content: "";
    position: absolute;
    inset: auto -30% -60% auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
    pointer-events: none;
}
.u-pagehead-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}
.u-pagehead-sub {
    font-size: 0.82rem;
    opacity: 0.86;
    margin: 4px 0 0;
}
.u-pagehead .u-chip { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); color: #fff; }

/* ===== Chips / pílulas ==================================================== */
.u-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--u-line);
    background: var(--u-surface);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.u-chip-ok { background: var(--u-ok-bg); color: var(--u-ok); border-color: transparent; }
.u-chip-warn { background: var(--u-warn-bg); color: var(--u-warn); border-color: transparent; }
.u-chip-bad { background: var(--u-bad-bg); color: var(--u-bad); border-color: transparent; }

/* ===== Título de seção/pilar ============================================= */
.u-section-title {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--u-ink);
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Barra de progresso do total do pilar */
.u-meter {
    height: 7px;
    border-radius: 999px;
    background: #ece7f6;
    overflow: hidden;
}
.u-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--u-purple-400), var(--u-purple));
    transform-origin: left center;
    animation: u-grow var(--u-mid) var(--u-ease) both;
}
.u-meter-fill.is-ok { background: linear-gradient(90deg, #34d399, var(--u-ok)); }
.u-meter-fill.is-warn { background: linear-gradient(90deg, #fbbf24, var(--u-warn)); }
.u-meter-fill.is-bad { background: linear-gradient(90deg, #fb7185, var(--u-bad)); }

@keyframes u-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===== Anel de atingimento (CSS puro — sem instância de gráfico) ========== */
.u-ring {
    --u-pct: 0;
    --u-ring-color: var(--u-purple);
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--u-ring-color) calc(var(--u-pct) * 1%), #ece7f6 0);
    transition: --u-pct var(--u-mid) var(--u-ease);
}
.u-ring::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--u-surface);
}
.u-ring-val {
    position: relative;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--u-ink);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* "107%", "353%", "999+" não cabem na fonte cheia dentro do anel. */
.u-ring-val.is-long { font-size: 0.58rem; letter-spacing: -0.05em; }
.u-ring.is-ok { --u-ring-color: var(--u-ok); }
.u-ring.is-warn { --u-ring-color: var(--u-warn); }
.u-ring.is-bad { --u-ring-color: var(--u-bad); }
.u-ring.is-ok .u-ring-val { color: var(--u-ok); }
.u-ring.is-warn .u-ring-val { color: var(--u-warn); }
.u-ring.is-bad .u-ring-val { color: var(--u-bad); }

/* ===== Card de loja (substitui a linha de tabela no mobile) =============== */
.u-cards { display: flex; flex-direction: column; gap: 8px; }

.u-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    /* reset para quando o card é um <button> (linha de loja clicável) */
    font: inherit;
    color: inherit;
    appearance: none;
    padding: 11px 12px;
    border-radius: var(--u-r);
    border: 1px solid var(--u-line-soft);
    background: var(--u-surface);
    box-shadow: var(--u-shadow-1);
    transition: transform var(--u-fast) var(--u-ease), box-shadow var(--u-fast) var(--u-ease);
    animation: u-rise var(--u-mid) var(--u-ease) both;
}
.u-card:active { transform: scale(0.985); box-shadow: var(--u-shadow-2); }

@keyframes u-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.u-card-main { flex: 1; min-width: 0; }
.u-card-top { display: flex; align-items: baseline; gap: 6px; }
.u-card-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--u-ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.u-card-rank {
    font-size: 0.64rem;
    font-weight: 800;
    color: var(--u-ink-3);
    flex-shrink: 0;
}
.u-card-values {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--u-ink);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}
.u-card-values .u-sep { color: var(--u-ink-3); font-weight: 600; margin: 0 3px; }
.u-card-meta { font-size: 0.7rem; color: var(--u-ink-2); font-weight: 600; }
.u-card-tags { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.u-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700; }
.u-trend-up { color: var(--u-ok); }
.u-trend-down { color: var(--u-bad); }
.u-trend-flat { color: var(--u-ink-3); }
.u-trend-label { color: var(--u-ink-3); font-weight: 600; }

.u-zerado {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--u-bad-bg);
    color: var(--u-bad);
    font-size: 0.65rem;
    font-weight: 800;
}

/* Variantes de linha agregada (coordenação / total) */
.u-card-coord { background: linear-gradient(120deg, #f7f3ff, #fff); border-color: var(--u-line); }
.u-card-total {
    background: linear-gradient(120deg, var(--u-night), var(--u-purple));
    border-color: transparent;
    box-shadow: var(--u-shadow-brand);
}
.u-card-total .u-card-name,
.u-card-total .u-card-values { color: #fff; }
.u-card-total .u-card-meta,
.u-card-total .u-trend-label { color: rgba(255, 255, 255, 0.75); }
.u-card-total .u-ring::before { background: #3b1560; }
.u-card-total .u-ring-val { color: #fff; }

/* ===== Filtros recolhíveis (mobile) ===================================== */
.u-filtros-toggle {
    /* Só existe no mobile; precisa de flex, então não usa .u-mobile-only. */
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--u-r-sm);
    border: 1px solid var(--u-line-soft);
    background: var(--u-surface-2);
    color: var(--u-ink-2);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.u-filtros-toggle .u-chip { margin-left: auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; display: block; }
.u-filtros-caret { transition: transform var(--u-fast) var(--u-ease); font-size: 0.75rem; }
.u-filtros-toggle[aria-expanded="true"] .u-filtros-caret { transform: rotate(180deg); }

@media (max-width: 991.98px) {
    .u-filtros-toggle { display: flex; }
}

/* No desktop não existe recolher: o formulário fica sempre visível. */
@media (min-width: 992px) {
    .u-filtros-corpo.collapse:not(.show) { display: block; }
}

/* ===== Cabeçalho do pilar (mobile) ======================================= */
.u-pilar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.u-pilar-head .u-section-title { font-size: 0.8rem; }
.u-pilar-sub {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--u-ink-2);
    margin-bottom: 7px;
}
.u-pilar-sub .u-sep { color: var(--u-ink-3); font-weight: 600; margin: 0 3px; }

/* Bloco recolhível (ex.: "Por coordenação") */
.u-details { margin-top: 10px; }
.u-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: var(--u-r-sm);
    background: var(--u-surface-2);
    border: 1px solid var(--u-line-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--u-ink-2);
}
.u-details > summary::-webkit-details-marker { display: none; }
.u-details > summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform var(--u-fast) var(--u-ease);
}
.u-details[open] > summary::after { transform: rotate(180deg); }
.u-count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ece0fb;
    color: var(--u-purple);
    font-size: 0.64rem;
    font-weight: 800;
}

/* No mobile o card do pilar vira só um contêiner neutro — quem desenha a
   moldura agora são os cards internos. */
@media (max-width: 991.98px) {
    .pilar-card {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin-bottom: 18px !important;
    }
}

/* ===== Resumo do Meta Dia (mobile) ====================================== */
.u-md-resumo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: var(--u-r-lg);
    color: #fff;
    background: linear-gradient(135deg, #1f3864, #2e5395);
    box-shadow: 0 8px 22px rgba(31, 56, 100, 0.28);
}
.u-md-resumo-num {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}
.u-md-resumo-txt { font-size: 0.8rem; font-weight: 600; opacity: 0.92; line-height: 1.35; }
.u-md-resumo-esc {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

/* ===== Navegação inferior (mobile) ======================================= */
.u-bottomnav { display: none; }

@media (max-width: 991.98px) {
    :root { --u-bottomnav-h: 62px; }

    .u-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--u-line-soft);
        box-shadow: 0 -6px 20px rgba(34, 29, 51, 0.08);
    }
    .u-bottomnav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 5px 2px;
        border-radius: 12px;
        text-decoration: none;
        color: var(--u-ink-3);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        transition: color var(--u-fast) var(--u-ease), background var(--u-fast) var(--u-ease);
        /* alvo de toque confortável */
        min-height: 46px;
    }
    .u-bottomnav-item i { font-size: 1.15rem; line-height: 1; }
    .u-bottomnav-item.is-active { color: var(--u-purple); background: #f4ecff; }
    .u-bottomnav-item:active { background: #ece0fb; }

    /* espaço para a barra não cobrir o conteúdo */
    body { padding-bottom: var(--u-bottomnav-h); }
}

/* ===== Abas em segmented control (mobile) ================================ */
@media (max-width: 767.98px) {
    .app-tabs.u-segmented {
        gap: 4px;
        padding: 4px;
        background: #efeaf7;
        border-radius: 999px;
        border: 0;
    }
    .app-tabs.u-segmented .nav-link {
        border: 0;
        border-radius: 999px;
        padding: 7px 13px;
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--u-ink-2);
    }
    .app-tabs.u-segmented .nav-link.active {
        background: var(--u-surface);
        color: var(--u-purple);
        box-shadow: var(--u-shadow-1);
    }

    .u-pagehead { padding: 16px; border-radius: var(--u-r); }
    .u-pagehead-title { font-size: 1.08rem; }
}

/* ===== Acessibilidade / preferências ===================================== */
@media (prefers-reduced-motion: reduce) {
    .u-card,
    .u-meter-fill,
    .u-ring { animation: none !important; transition: none !important; }
}

/* Foco visível para navegação por teclado. */
.u-card:focus-visible,
.u-bottomnav-item:focus-visible {
    outline: 2px solid var(--u-purple-400);
    outline-offset: 2px;
}

/* =============================================================================
   MODO EMBED (iframe)
   Ativado pela classe .is-embed no <html> (ver script no <head> do base.html).
   Tira a moldura do app — navbar, menu inferior, fundos decorativos — para o
   conteúdo ocupar toda a área do iframe.
   ========================================================================== */
:root.is-embed .app-navbar,
:root.is-embed .bg-shape { display: none !important; }
:root.is-embed .u-bottomnav { display: none !important; }
:root.is-embed body { padding-bottom: 0 !important; background: var(--u-bg); }
:root.is-embed main.container-fluid { padding: 10px !important; }
:root.is-embed .u-pagehead { border-radius: var(--u-r); padding: 14px 16px; }
:root.is-embed .u-pagehead-title { font-size: 1.02rem; }
:root.is-embed .panel-card { border-radius: var(--u-r); }
/* Coisas que só fazem sentido na navegação completa. */
:root.is-embed .u-embed-hide { display: none !important; }

@media (max-width: 767.98px) {
    :root.is-embed main.container-fluid { padding: 8px !important; }
}

/* =============================================================================
   GERENTES — lista de lojas
   ========================================================================== */
.u-busca {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.u-busca i {
    position: absolute;
    left: 13px;
    color: var(--u-ink-3);
    font-size: 0.9rem;
    pointer-events: none;
}
.u-busca input {
    width: 100%;
    padding: 11px 38px 11px 36px;
    border-radius: 999px;
    border: 1px solid var(--u-line);
    background: var(--u-surface);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--u-ink);
    box-shadow: var(--u-shadow-1);
    transition: border-color var(--u-fast) var(--u-ease), box-shadow var(--u-fast) var(--u-ease);
}
.u-busca input::placeholder { color: var(--u-ink-3); font-weight: 500; }
.u-busca input:focus {
    outline: none;
    border-color: var(--u-purple-400);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16);
}
.u-busca-limpar {
    position: absolute;
    right: 8px;
    display: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #ece0fb;
    color: var(--u-purple);
    font-size: 0.7rem;
}
.u-busca.tem-texto .u-busca-limpar { display: grid; }
.u-busca-vazio {
    padding: 22px 14px;
    text-align: center;
    color: var(--u-ink-2);
    font-size: 0.84rem;
    font-weight: 600;
}

/* Card de loja com destaque e seta */
.gerente-loja-card {
    border-radius: var(--u-r);
    /* padding-right maior: a seta é absoluta e nomes longos passavam por baixo. */
    padding: 14px 34px 14px 18px;
    animation: u-rise var(--u-mid) var(--u-ease) both;
}
.gerente-loja-nome { min-width: 0; overflow-wrap: anywhere; }
.gerente-loja-card::after { opacity: 0.5; transform: none; right: 13px; }
.gerente-loja-card:active { transform: scale(0.985); }
.gerente-loja-num {
    border-radius: 12px;
    font-size: 0.95rem;
}

/* =============================================================================
   GERENTES — detalhe da loja
   ========================================================================== */
/* Grade de pilares com anel: substitui os cards de porcentagem "chapada". */
.u-pilares-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
    gap: 10px;
}
.u-pilar-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 13px 8px;
    border-radius: var(--u-r);
    border: 1px solid var(--u-line-soft);
    background: var(--u-surface);
    box-shadow: var(--u-shadow-1);
    animation: u-rise var(--u-mid) var(--u-ease) both;
}
.u-pilar-tile .u-ring { width: 54px; height: 54px; }
.u-pilar-tile .u-ring::before { inset: 5px; }
.u-pilar-tile .u-ring-val { font-size: 0.76rem; }
.u-pilar-tile .u-ring-val.is-long { font-size: 0.64rem; }
.u-pilar-nome {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--u-ink-2);
    text-align: center;
    line-height: 1.2;
}
/* "*" de meta mensal batida */
.u-pilar-nome .meta-mes-star { color: #d6a100; }

/* Realizado x meta abaixo do anel (mesma leitura da tela de Gerentes). */
.u-pilar-vals {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    text-align: center;
}
.u-pilar-vals strong {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--u-ink);
    font-variant-numeric: tabular-nums;
}
.u-pilar-vals span { font-size: 0.62rem; color: var(--u-ink-3); font-weight: 600; }

@media (max-width: 575.98px) {
    .u-pilares-grid { grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); gap: 8px; }
    .u-pilar-tile { padding: 10px 5px; }
    .u-pilar-tile .u-ring { width: 46px; height: 46px; }
    .u-pilar-tile .u-ring-val { font-size: 0.66rem; }
    .u-pilar-nome { font-size: 0.6rem; }
    .u-pilar-vals strong { font-size: 0.68rem; }
    .u-pilar-vals span { font-size: 0.58rem; }
}


/* =============================================================================
   MENU MOBILE — botão animado + gaveta lateral
   O toggler padrão do Bootstrap era roxo sobre roxo (quase invisível) e o
   collapse empurrava o conteúdo. Aqui: botão de alto contraste cujas 3 barras
   viram um "X", e uma gaveta que desliza por cima com fundo escurecido.
   ========================================================================== */
.u-burger {
    display: none;               /* só no mobile (regra abaixo) */
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px rgba(20, 16, 45, 0.25);
    transition: background var(--u-fast) var(--u-ease), transform var(--u-fast) var(--u-ease);
}
.u-burger:active { transform: scale(0.93); background: rgba(255, 255, 255, 0.24); }
.u-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.u-burger-box {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}
.u-burger-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: #fff;
    transition: transform var(--u-mid) var(--u-ease), opacity 140ms linear, width var(--u-mid) var(--u-ease);
}
.u-burger-bar:nth-child(1) { top: 0; }
.u-burger-bar:nth-child(2) { top: 50%; transform: translateY(-50%); width: 72%; }
.u-burger-bar:nth-child(3) { bottom: 0; }

/* Aberto: barra do meio some, as outras cruzam formando o X. */
.u-burger.is-open .u-burger-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.u-burger.is-open .u-burger-bar:nth-child(2) { opacity: 0; width: 0; }
.u-burger.is-open .u-burger-bar:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* ===== Gaveta ============================================================= */
.u-drawer.offcanvas {
    width: min(330px, 88vw);
    border: 0;
    border-top-left-radius: var(--u-r-lg);
    border-bottom-left-radius: var(--u-r-lg);
    background: var(--u-surface);
    box-shadow: -18px 0 46px rgba(20, 16, 45, 0.28);
}
.u-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    color: #fff;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(168, 85, 247, 0.5) 0%, transparent 58%),
        linear-gradient(135deg, var(--u-purple) 0%, var(--u-night) 100%);
}
.u-drawer-logo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    padding: 5px;
    background: #fff;
}
.u-drawer-logo img { width: 100%; height: 100%; object-fit: contain; }
.u-drawer-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.u-drawer-brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.u-drawer-brand-txt strong { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; }
.u-drawer-brand-txt span { font-size: 0.68rem; opacity: 0.82; font-weight: 600; }
.u-drawer-fechar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.8rem;
    transition: background var(--u-fast) var(--u-ease);
}
.u-drawer-fechar:active { background: rgba(255, 255, 255, 0.28); }

.u-drawer-body { padding: 12px 12px 4px; overflow-y: auto; }
.u-drawer-secao {
    margin: 12px 4px 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--u-ink-3);
}
.u-drawer-body > .u-drawer-secao:first-child { margin-top: 2px; }

.u-drawer-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    margin-bottom: 5px;
    border-radius: var(--u-r);
    text-decoration: none;
    color: var(--u-ink);
    border: 1px solid transparent;
    transition: background var(--u-fast) var(--u-ease), transform var(--u-fast) var(--u-ease);
}
.u-drawer-item:active { transform: scale(0.982); background: #f3edff; }
.u-drawer-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #f3edff;
    color: var(--u-purple);
    font-size: 1.02rem;
}
.u-drawer-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.u-drawer-txt strong { font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em; }
.u-drawer-txt span { font-size: 0.68rem; color: var(--u-ink-3); font-weight: 600; }
.u-drawer-seta { color: var(--u-ink-3); font-size: 0.7rem; flex-shrink: 0; }

.u-drawer-item.is-active {
    background: linear-gradient(120deg, #f6efff, #fdfbff);
    border-color: rgba(91, 50, 155, 0.18);
}
.u-drawer-item.is-active .u-drawer-ico {
    background: linear-gradient(135deg, var(--u-purple), var(--u-purple-600));
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 0, 153, 0.3);
}
.u-drawer-item.is-active .u-drawer-txt strong { color: var(--u-purple); }
.u-drawer-item.is-active .u-drawer-seta { color: var(--u-purple); }

.u-drawer-pe {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--u-line-soft);
    background: var(--u-surface-2);
}
.u-drawer-usuario {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--u-ink-2);
}

/* O botão "Sair" nasceu para o fundo roxo da navbar (branco translúcido) e
   sumia no rodapé claro da gaveta. Aqui ele ganha contraste próprio. */
.u-drawer-pe .admin-logout-btn {
    background: #fff;
    color: var(--u-bad);
    border: 1px solid rgba(225, 29, 72, 0.35);
    font-weight: 700;
}
.u-drawer-pe .admin-logout-btn:hover,
.u-drawer-pe .admin-logout-btn:focus,
.u-drawer-pe .admin-logout-btn:active {
    background: var(--u-bad-bg);
    color: var(--u-bad);
    border-color: rgba(225, 29, 72, 0.5);
}

/* Entrada escalonada dos itens (só quando a gaveta abre).
   nth-of-type e não nth-child: os títulos de seção (<p>) ficam entre os <a>
   e bagunçariam a contagem. */
.u-drawer.show .u-drawer-item { animation: u-drawer-in 320ms var(--u-ease) both; }
.u-drawer.show a.u-drawer-item:nth-of-type(2) { animation-delay: 35ms; }
.u-drawer.show a.u-drawer-item:nth-of-type(3) { animation-delay: 70ms; }
.u-drawer.show a.u-drawer-item:nth-of-type(4) { animation-delay: 100ms; }
.u-drawer.show a.u-drawer-item:nth-of-type(5) { animation-delay: 125ms; }
.u-drawer.show a.u-drawer-item:nth-of-type(n + 6) { animation-delay: 145ms; }
@keyframes u-drawer-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

.offcanvas-backdrop.show { opacity: 0.45; }

/* O botão e a gaveta são exclusivos do mobile; no desktop vale a navbar. */
@media (max-width: 991.98px) {
    .u-burger { display: inline-flex; }
}
@media (min-width: 992px) {
    .u-drawer.offcanvas { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .u-burger-bar,
    .u-drawer.show .u-drawer-item { animation: none !important; transition: none !important; }
}

/* =============================================================================
   DESTAQUE LARANJA (paleta do sistema de chamados)
   Roxo = marca e navegação. Laranja = ação e ênfase.
   ========================================================================== */
.u-chip-acao {
    background: var(--u-accent-bg);
    color: var(--u-accent-600);
    border-color: transparent;
}

/* Botões de ação primária */
.btn-vivo {
    background: linear-gradient(120deg, var(--u-accent), var(--u-accent-600));
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.32);
}
.btn-vivo:hover,
.btn-vivo:focus { filter: brightness(1.05); color: #fff; }
.btn-vivo:active { transform: translateY(1px); }

.admin-access-btn {
    background: linear-gradient(135deg, var(--u-accent), var(--u-accent-600));
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.3);
}

/* Campo de busca e foco geral seguem o laranja. */
.u-busca input:focus {
    border-color: var(--u-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--u-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

/* Aba ativa: laranja para separar "onde estou" de "identidade da marca". */
@media (max-width: 767.98px) {
    .app-tabs.u-segmented .nav-link.active { color: var(--u-accent-600); }
}

/* =============================================================================
   VISÃO GERAL POR PILAR (substitui o gráfico de barras)
   Mostra o mesmo que o gráfico mostrava — o atingimento — e ainda os valores
   absolutos de realizado x meta, que o gráfico não trazia.
   ========================================================================== */
.u-resumo {
    background: var(--u-surface);
    border: 1px solid var(--u-line-soft);
    border-radius: var(--u-r-lg);
    box-shadow: var(--u-shadow-1);
    padding: 12px;
    margin-bottom: 14px;
}
.u-resumo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.u-resumo-title {
    font-family: var(--u-font-titulo);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--u-ink-2);
}
.u-resumo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
    gap: 8px;
}
.u-resumo-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 11px 7px;
    border-radius: var(--u-r);
    border: 1px solid var(--u-line-soft);
    background: linear-gradient(180deg, #fff, var(--u-surface-2));
    text-decoration: none;
    color: inherit;
    transition: transform var(--u-fast) var(--u-ease), box-shadow var(--u-fast) var(--u-ease);
    animation: u-rise var(--u-mid) var(--u-ease) both;
}
.u-resumo-tile:active { transform: scale(0.98); box-shadow: var(--u-shadow-2); }
.u-resumo-tile .u-ring { width: 50px; height: 50px; }
.u-resumo-nome {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--u-ink-2);
    text-align: center;
    line-height: 1.15;
}
.u-resumo-vals {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    text-align: center;
}
.u-resumo-vals strong { font-size: 0.74rem; font-weight: 800; color: var(--u-ink); }
.u-resumo-vals span { font-size: 0.62rem; color: var(--u-ink-3); font-weight: 600; }

@media (max-width: 575.98px) {
    .u-resumo-grid { grid-template-columns: repeat(auto-fit, minmax(min(102px, 100%), 1fr)); gap: 6px; }
    .u-resumo-tile { padding: 9px 5px; }
    .u-resumo-tile .u-ring { width: 44px; height: 44px; }
    .u-resumo-vals strong { font-size: 0.68rem; }
}

/* =============================================================================
   SIGLA DA LOJA (no lugar do número)
   ========================================================================== */
.gerente-loja-num {
    width: auto;
    min-width: 44px;
    padding: 0 9px;
    font-family: var(--u-font-titulo);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--u-accent), var(--u-accent-600));
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
/* Siglas de 3 letras respiram melhor com fonte um pouco menor. */
.gerente-loja-num[data-len="3"] { font-size: 0.8rem; letter-spacing: 0; }

/* =============================================================================
   VALORES NOS TILES DE PILAR (Gerentes — detalhe)
   ========================================================================== */
.gerentes-detalhe .card-vals {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    text-align: center;
}
.gerentes-detalhe .card-vals strong {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--u-ink);
    font-variant-numeric: tabular-nums;
}
.gerentes-detalhe .card-vals span { font-size: 0.62rem; color: var(--u-ink-3); font-weight: 600; }

/* Projeção do mês, no pé do card: onde a loja fecha o mês se mantiver o ritmo
   atual. Fica separada por um filete para não se confundir com o realizado do
   período, que é o número grande logo acima. */
.gerentes-detalhe .gd-proj {
    order: 4;
    width: 100%;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px dashed var(--u-line-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.18;
    text-align: center;
}
.gerentes-detalhe .gd-proj-rot {
    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--u-ink-3);
}
.gerentes-detalhe .gd-proj-pct {
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.gerentes-detalhe .gd-proj-abs {
    font-size: 0.56rem;
    color: var(--u-ink-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.gerentes-detalhe .gd-proj.is-ok   .gd-proj-pct { color: var(--u-ok, #27ae60); }
.gerentes-detalhe .gd-proj.is-warn .gd-proj-pct { color: var(--u-warn, #f39c12); }
.gerentes-detalhe .gd-proj.is-bad  .gd-proj-pct { color: var(--u-bad, #e74c3c); }

/* Selo na Meta DU quando o valor exibido já é o recalculado com GAP — sem ele
   o gerente veria a meta subir sem saber por quê. */
/* Empilhado (block) e não inline: a coluna é estreita e de largura fixa, então
   um selo ao lado do valor estouraria a célula. Embaixo, a linha só cresce em
   altura e o valor continua inteiro. */
.gerentes-detalhe .gd-gap-tag {
    display: block;
    width: fit-content;
    margin: 3px auto 0;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
    background: #fdece8;
    color: #c0392b;
    border: 1px solid #f3c4b8;
}

@media (max-width: 575.98px) {
    .gerentes-detalhe .card-vals strong { font-size: 0.68rem; }
    .gerentes-detalhe .card-vals span { font-size: 0.58rem; }
    .gerentes-detalhe .gd-proj-pct { font-size: 0.66rem; }
    .gerentes-detalhe .gd-proj-abs { font-size: 0.52rem; }
}

/* =============================================================================
   ABAS VERTICAIS NO CELULAR
   A faixa rolável mostrava só ~3 abas por vez e as demais ficavam escondidas.
   Empilhado, o operador vê as 6 de uma vez e sabe o que existe.
   ========================================================================== */
@media (max-width: 767.98px) {
    .app-tabs.u-segmented {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        gap: 4px;
        padding: 5px;
        border-radius: var(--u-r);
    }
    .app-tabs.u-segmented .nav-item { width: 100%; }
    .app-tabs.u-segmented .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        text-align: left;
        border-radius: var(--u-r-sm);
        padding: 11px 13px;
        font-size: 0.84rem;
    }
    /* Marcador da aba ativa à esquerda — leitura rápida na vertical. */
    .app-tabs.u-segmented .nav-link.active::before {
        content: "";
        width: 3px;
        height: 15px;
        border-radius: 999px;
        background: var(--u-accent);
        flex-shrink: 0;
    }
}

/* =============================================================================
   BOTÃO DE PRINT — no topo, em destaque
   ========================================================================== */
.gd-captura {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--u-accent), var(--u-accent-600));
    color: #fff;
    font-family: var(--u-font-titulo);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.4);
    transition: transform var(--u-fast) var(--u-ease), filter var(--u-fast) var(--u-ease);
}
.gd-captura i { font-size: 1rem; line-height: 1; }
.gd-captura:hover { color: #fff; filter: brightness(1.06); }
.gd-captura:active { transform: scale(0.95); }
.gd-captura:disabled { opacity: 0.75; }
.gd-captura.is-ocupado i { animation: gd-spin 0.9s linear infinite; }
.gd-captura:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes gd-spin { to { transform: rotate(360deg); } }

/* Some da imagem gerada. */
.gd-em-captura .gd-captura,
.gd-em-captura .u-bottomnav,
.gd-em-captura .app-navbar,
.gd-em-captura form { visibility: hidden !important; }

/* Sem animação de entrada durante a captura: o 1º quadro delas é opacity:0 e,
   no clone que o gerador usa, a animação nunca roda — sairia tudo invisível.
   Lista explícita, e não `.gd-em-captura *`: o seletor universal fazia o gerador
   recalcular estilo de cada nó da página e travar. */
.gd-em-captura .hero-card,
.gd-em-captura .panel-card,
.gd-em-captura .pilar-card,
.gd-em-captura .card-item,
.gd-em-captura .u-card,
.gd-em-captura .u-pilar-tile,
.gd-em-captura .u-resumo-tile,
.gd-em-captura .u-meter-fill,
.gd-em-captura .gerente-loja-card,
.gd-em-captura .u-drawer-item { animation: none !important; opacity: 1 !important; }

/* Sombras desligadas SÓ durante a captura: o gerador de imagem desenha
   box-shadow sem desfoque, virando um contorno cinza duro que não existe na
   tela — era isso que sujava as bordas do print. Sem sombra, o que sobra são
   as bordas reais (1px lilás), idênticas ao site.
   (Os anéis não são mais achatados aqui: o captura.js pinta cada um com o arco
   e as cores exatos da tela.) */
.gd-em-captura .u-pagehead,
.gd-em-captura .hero-card,
.gd-em-captura .panel-card,
.gd-em-captura .card-item,
.gd-em-captura .u-pilar-tile,
.gd-em-captura .u-card,
.gd-em-captura .u-resumo-tile,
.gd-em-captura .gd-grupo,
.gd-em-captura .mini-table-wrap,
.gd-em-captura .gd-bateu { box-shadow: none !important; }

/* ===== Layout de DESKTOP na imagem =====
   O container é travado em 1440px pelo JS e aqui as grades são fixadas: as
   media queries continuam olhando a largura real do aparelho, então sem isto
   o print sairia empilhado como no celular. */
.gd-em-captura .u-mobile-only { display: none !important; }
.gd-em-captura .u-desktop-only { display: block !important; }
/* No print os grupos voltam a se espalhar e centralizar: a media query de
   celular (1 coluna) continua valendo durante a captura, então é reposta aqui. */
.gd-em-captura .gd-grupo .tables-section,
.gd-em-captura .gd-grupo .u-pilares-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    justify-content: center !important;
}
.gd-em-captura .cards-container { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.gd-em-captura .mini-table-wrap { overflow: visible !important; }
.gd-em-captura .resultados-scroll { max-height: none !important; overflow: visible !important; }

/* ===== Aba PPL =====
   Reaproveita os anéis e os cards do resto do sistema; o que é próprio daqui é
   a barra de controles e a tabela de dupla coluna (real/meta + %) por ponto. */
.ppl-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.ppl-modos {
    display: inline-flex;
    background: var(--u-surface-2);
    border: 1px solid var(--u-line-soft);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.ppl-modo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--u-ink-3);
    font-family: var(--u-font-titulo);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.ppl-modo:hover { color: var(--u-ink); }
.ppl-modo.is-on {
    background: var(--u-purple);
    color: #fff;
    box-shadow: 0 2px 8px rgba(102, 0, 153, 0.28);
}
.ppl-modos-sm .ppl-modo { padding: 5px 11px; font-size: 0.68rem; }
.ppl-periodo {
    font-size: 0.78rem;
    color: var(--u-ink-3);
    font-weight: 600;
}
.ppl-filtros {
    display: flex;
    gap: 8px;
    margin-left: auto;
    /* nowrap: com wrap os dois selects empilhavam e a barra ficava com o dobro
       da altura mesmo sobrando espaço na linha. */
    flex-wrap: nowrap;
}
.ppl-filtros .form-select { min-width: 150px; }
.ppl-cards { margin-bottom: 16px; }

.ppl-tabela-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
/* O título já vem centralizado do .gd-grupo-titulo; aqui ele divide a linha
   com o seletor de agrupamento, então os filetes laterais atrapalhariam. */
.ppl-tabela-head .gd-grupo-titulo::before,
.ppl-tabela-head .gd-grupo-titulo::after { display: none; }

.ppl-table { font-size: 0.8rem; }
.ppl-table thead th {
    background: var(--u-surface-2);
    color: var(--u-ink-3);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    vertical-align: middle;
}
.ppl-table th.ppl-grupo-col { border-left: 1px solid var(--u-line-soft); }
.ppl-table th.ppl-sub { font-size: 0.55rem; font-weight: 700; }
/* São 6 pontos x 2 colunas: a tabela rola na horizontal em qualquer tela, então
   a coluna do nome fica travada para não se perder de vista ao arrastar. */
.ppl-table .ppl-col-nome {
    text-align: left;
    font-weight: 700;
    color: var(--u-ink);
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--u-surface);
}
.ppl-table thead th.ppl-col-nome { background: var(--u-surface-2); z-index: 3; }
.ppl-table tr.total-row .ppl-col-nome { background: #ece4f8; }
.ppl-table .ppl-col-pdv { text-align: left; color: var(--u-ink-3); font-size: 0.72rem; }
.ppl-table .ppl-vals { white-space: nowrap; }
.ppl-table .ppl-vals strong { color: var(--u-ink); }
.ppl-table .ppl-sep { color: var(--u-ink-3); }
.ppl-table .ppl-meta { color: var(--u-ink-3); font-size: 0.74rem; }
.ppl-chip {
    display: inline-block;
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
}
.ppl-chip.is-ok { background: rgba(39, 174, 96, 0.14); color: #1e8449; }
.ppl-chip.is-warn { background: rgba(243, 156, 18, 0.16); color: #b9770e; }
.ppl-chip.is-bad { background: rgba(231, 76, 60, 0.14); color: #c0392b; }
/* Mesmo destaque de TOTAL usado nas tabelas de Gerentes. */
.ppl-table tr.total-row td {
    background: #ece4f8;
    font-weight: 800;
    border-top: 2px solid var(--u-purple);
}

@media (max-width: 767.98px) {
    .ppl-bar { gap: 8px; }
    .ppl-filtros { margin-left: 0; width: 100%; }
    .ppl-filtros .form-select { flex: 1 1 140px; min-width: 0; }
    .ppl-periodo { width: 100%; order: 3; }
    .ppl-table { font-size: 0.72rem; }
}

/* Botão de envio ao grupo: verde do WhatsApp para separar de "salvar". */
.gd-captura-zap {
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 6px 18px rgba(18, 140, 126, 0.38);
}

/* =============================================================================
   GRUPOS Serviços / Produtos (Gerentes e Parcial por vendedor)
   ========================================================================== */
.gd-grupo { margin-bottom: 14px; }
.gd-grupo-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--u-font-titulo);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--u-ink-2);
}
.gd-grupo-titulo i { color: var(--u-accent); font-size: 0.92rem; line-height: 1; }
/* Filete dos dois lados do título, para ler como divisor de seção. */
.gd-grupo-titulo::before,
.gd-grupo-titulo::after {
    content: "";
    height: 1px;
    flex: 1 1 0;
    max-width: 120px;
    background: linear-gradient(90deg, transparent, var(--u-line));
}
.gd-grupo-titulo::after { background: linear-gradient(90deg, var(--u-line), transparent); }

/* Colunas estreitas o bastante para os 4 cards de Serviços caberem numa linha
   só — é o que faz a linha de TOTAL de todos ficar alinhada. Eles preenchem o
   card do grupo (1fr), e o próprio grupo já é centralizado na página. */
.gerentes-detalhe .gd-grupo .tables-section,
.gd-grupo .u-pilares-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    justify-content: center;
}
@media (max-width: 575.98px) {
    /* No celular volta a ocupar a largura toda: centralizar desperdiçaria espaço. */
    .gerentes-detalhe .gd-grupo .tables-section,
    .gd-grupo .u-pilares-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Card externo que envolve cada grupo (Serviços / Produtos). */
.gd-grupo {
    background: var(--u-surface);
    border: 1px solid var(--u-line-soft);
    border-radius: var(--u-r-lg);
    box-shadow: var(--u-shadow-1);
    padding: 16px;
}
.gd-grupo .gd-grupo-titulo { margin-top: 0; }
@media (max-width: 575.98px) { .gd-grupo { padding: 12px; } }

/* --- Selo GAP nas tabelas de Resultados (parcial) -------------------------
   A META cobrada na parcial é a META DU COM GAP: (meta do mês - realizado) /
   dias úteis restantes. O selo (e o title da célula, com a Meta DU plana ao
   lado) evita a leitura de que "a meta mudou sozinha". Inline aqui porque a
   coluna META da tabela de Resultados é larga o bastante. */
.resultados-table .res-gap-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    background: #fdece8;
    color: #c0392b;
    border: 1px solid #f3c4b8;
}

/* Mobile: sem espaço para o selo — a meta com GAP fica pontilhada e o valor
   plano aparece no toque/hover (title). */
.u-card-meta.has-gap,
.u-mono-num.has-gap {
    border-bottom: 1px dotted currentColor;
}

/* --- Pilar expandido (Resultados) -----------------------------------------
   Botão no canto direito do título de cada pilar. Absoluto para o nome do
   pilar continuar centralizado como sempre foi. */
.res-title-bar { position: relative; }
.res-expandir {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(91, 50, 155, 0.28);
    border-radius: 7px;
    background: #fff;
    color: #571381;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.res-expandir:hover,
.res-expandir:focus-visible {
    background: #571381;
    color: #fff;
    box-shadow: 0 3px 10px rgba(87, 19, 129, 0.3);
    outline: none;
}

/* Modal em tela cheia. O corpo nunca rola: o JS escolhe a maior fonte
   (--pm-fs) com que a tabela inteira cabe. Tudo na tabela é medido em em,
   então padding e selos acompanham a fonte. */
.pilar-modal-content { border-radius: 0; }
.pilar-modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 18px;
}
.pilar-modal-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    --pm-fs: 14px;
}
.pilar-modal-corpo .resultados-table {
    width: 100%;
    margin: 0;
    font-size: var(--pm-fs);
}
.pilar-modal-corpo .resultados-table thead th {
    font-size: 0.82em;
    padding: 0.4em 0.9em;
    line-height: 1.2;
    background: #f4ecff;
}
.pilar-modal-corpo .resultados-table tbody td,
.pilar-modal-corpo .resultados-table tfoot td {
    font-size: 1em;
    padding: 0.28em 0.9em;
    line-height: 1.25;
}
/* A 1ª coluna herda o fundo da linha (fora do .resultados-scroll não é sticky). */
.pilar-modal-corpo .resultados-table td:first-child { font-weight: 700; }
.pilar-modal-corpo .resultados-table tfoot td {
    background: #5b329b;
    color: #fff;
    font-weight: 700;
}
.pilar-modal-corpo .res-gap-tag { font-size: 0.55em; }
.pilar-modal-corpo .pm-pct { font-weight: 800; }
.pilar-modal-corpo tbody tr:not(.bl-row-area) .pm-pct.is-ok { color: #0a7a3d; }
.pilar-modal-corpo tbody tr:not(.bl-row-area) .pm-pct.is-warn { color: #b35c00; }
.pilar-modal-corpo tbody tr:not(.bl-row-area) .pm-pct.is-bad { color: #c0392b; }

.pilar-modal-resumo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.pilar-modal-vals {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pilar-modal-de { opacity: 0.7; font-weight: 500; margin: 0 2px; }
@media (max-width: 575.98px) {
    .pilar-modal-vals { display: none; }
}

/* Desafio BL no modal expandido: mesma régua em em da tabela de Resultados. */
.pilar-modal-corpo .bl-table {
    width: 100%;
    margin: 0;
    font-size: var(--pm-fs);
}
.pilar-modal-corpo .bl-table thead th {
    font-size: 0.82em;
    padding: 0.4em 0.9em;
    line-height: 1.2;
    white-space: nowrap;
}
.pilar-modal-corpo .bl-table tbody td {
    font-size: 1em;
    padding: 0.28em 0.9em;
    line-height: 1.25;
    white-space: nowrap;
}
.pilar-modal-corpo .bl-table td:first-child { font-weight: 700; }
.pilar-modal-corpo .bl-compare-cell { gap: 0.35em; }
.pilar-modal-corpo .bl-compare-cell i { font-size: 1em; }

/* No celular a tabela do Desafio BL fica rolável na própria tela: uma tela só
   com todas as lojas ficaria ilegível. Mesmo corte das utilidades u-*-only. */
@media (max-width: 991.98px) {
    .bl-panel .res-expandir { display: none; }
}