/* =================================================================
 * painel-premium.css
 * Camada visual PREMIUM compartilhada do painel Viure.
 *
 * Como usar em qualquer página:
 *   <div class="container-fluid painel-polish painel-premium ...">
 *
 * Tudo é OPT-IN via wrapper .painel-premium — nada vaza para páginas
 * que não optaram. Componentes reutilizáveis abaixo.
 *
 * Componentes:
 *   .hero                   — banda de cabeçalho com glow ambiente
 *   .page-title             — título com gradiente + ícone animado
 *   .page-actions .btn-*    — botões premium com shine
 *   .card-filtros           — card de filtros com header em gradiente
 *   .periodo-bar            — faixa indicadora de período/contexto
 *   .kpi-card               — card de KPI (is-primary/gold/success/warning/danger)
 *   .card-listagem          — card de listagem com header em gradiente
 *                             (is-gold/success/dark/danger/warning)
 *   .meta-bloco             — bloco de meta com progress bar animada
 *   .balanco-item           — item de balanço/categoria com hover glow
 *   .carro-bloco            — bloco agrupador (carro, equipe, grupo)
 *   .vendedor-card          — card linha (vendedor, item, etc.)
 *   .comissao-pills .pill   — pills de comissão/percentual (.p3/.p4/.p5)
 *   .empty-block            — empty state animado
 *   .stat-pill              — pill estatística inline
 *
 * Modificadores de cor em todos cards: .is-primary .is-gold .is-success
 *                                       .is-warning .is-danger .is-dark
 *
 * Respeita prefers-reduced-motion + print.
 * ================================================================= */


/* ============================================================ */
/* 0. AMBIENT BACKGROUND (sutil, complementa .painel-polish)     */
/* ============================================================ */
.painel-premium {
    background-image:
        radial-gradient(ellipse at top right,    rgba(201, 162, 39, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at bottom left,  rgba(15, 46, 34, 0.06)  0%, transparent 55%),
        radial-gradient(ellipse at center,        rgba(201, 162, 39, 0.02) 0%, transparent 70%);
    background-attachment: fixed;
}


/* ============================================================ */
/* 1. UPPERCASE SELETIVO                                         */
/* ============================================================ */
.painel-premium .page-title,
.painel-premium .card-header,
.painel-premium .badge,
.painel-premium .form-label,
.painel-premium .kpi-label,
.painel-premium .label-mini,
.painel-premium .section-title,
.painel-premium .pill { text-transform: uppercase; }


/* ============================================================ */
/* 2. HERO BAND                                                  */
/* ============================================================ */
.painel-premium .hero {
    position: relative;
    background:
        radial-gradient(circle at 12% 30%, rgba(201, 162, 39, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 88% 70%, rgba(15, 46, 34, 0.20)  0%, transparent 50%),
        linear-gradient(135deg, #FFFFFF 0%, #F8F5EC 100%);
    border: 1px solid var(--viure-border);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--viure-shadow-sm);
}
.painel-premium .hero::before,
.painel-premium .hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    filter: blur(20px);
}
.painel-premium .hero::before {
    top: -50%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.12) 0%, transparent 65%);
    animation: viurePremiumFloat 12s ease-in-out infinite;
}
.painel-premium .hero::after {
    bottom: -40%; left: -8%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(15, 46, 34, 0.10) 0%, transparent 65%);
    animation: viurePremiumFloat 14s ease-in-out infinite reverse;
}
@keyframes viurePremiumFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(15px, -10px) scale(1.05); }
}
.painel-premium .hero > * { position: relative; z-index: 1; }

/* Variante dark — banda em verde profundo (dashboard, painéis principais) */
.painel-premium .hero.is-dark {
    background:
        radial-gradient(ellipse 600px 280px at 100% 100%, rgba(201, 162, 39, 0.18), transparent 60%),
        radial-gradient(ellipse 500px 250px at 0% 0%, rgba(201, 162, 39, 0.08), transparent 60%),
        linear-gradient(135deg, #0F2E22 0%, #1B4332 60%, #143628 100%);
    color: #fff;
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow: 0 14px 40px rgba(15, 46, 34, 0.25), inset 0 1px 0 rgba(201, 162, 39, 0.18);
}
.painel-premium .hero.is-dark::after {
    /* sobrepõe o blur claro com um dourado discreto no canto */
    background: radial-gradient(circle, rgba(201, 162, 39, 0.18) 0%, transparent 65%);
}
.painel-premium .hero.is-dark::before {
    /* faixa fina dourada no topo */
    top: 0; right: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--viure-gold) 50%, transparent);
    filter: none;
    animation: none;
    opacity: .55;
}
.painel-premium .hero.is-dark .page-title {
    background: linear-gradient(135deg, #fff 0%, var(--viure-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.painel-premium .hero.is-dark .page-title-icon {
    color: var(--viure-gold);
    -webkit-text-fill-color: var(--viure-gold);
}
.painel-premium .hero.is-dark .page-subtitle,
.painel-premium .hero.is-dark .hero-greeting {
    color: var(--viure-gold);
}
.painel-premium .hero.is-dark .hero-name {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.painel-premium .hero.is-dark .hero-greeting {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 .15rem;
}
.painel-premium .hero.is-dark .hero-date {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    padding-left: .65rem;
    border-left: 2px solid var(--viure-gold);
}
.painel-premium .hero.is-dark .status-online {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--viure-success);
    padding: .35rem .85rem;
    background: rgba(82, 183, 136, 0.12);
    border: 1px solid rgba(82, 183, 136, 0.45);
    border-radius: 999px;
}
.painel-premium .hero.is-dark .status-online::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--viure-success);
    box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.65);
    animation: viurePremiumPulse 1.8s ease-out infinite;
}
@keyframes viurePremiumPulse {
    0%   { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(82, 183, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0); }
}
.painel-premium .hero.is-dark .hero-tag {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--viure-gold);
}
.painel-premium .hero.is-dark .hero-tag i { margin-right: .35rem; }
.painel-premium .hero-info {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    align-items: flex-end;
}
@media (max-width: 767.98px) {
    .painel-premium .hero { padding: 1.25rem 1.25rem; }
    .painel-premium .hero.is-dark .hero-name { font-size: 1.5rem; }
    .painel-premium .hero-info { align-items: flex-start; }
}


/* ============================================================ */
/* 3.5. QUICK ACTIONS (atalhos com ícone dourado)                */
/* ============================================================ */
.painel-premium .quick-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
    margin-bottom: 2rem;
}
@media (max-width: 991.98px) {
    .painel-premium .quick-actions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .painel-premium .quick-actions { grid-template-columns: repeat(2, 1fr); }
}
.painel-premium .quick-action {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: var(--viure-surface);
    border: 1px solid var(--viure-border);
    border-radius: 12px;
    text-decoration: none;
    box-shadow: var(--viure-shadow-sm);
    transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.painel-premium .quick-action::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(201, 162, 39, 0.10) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .65s ease;
    pointer-events: none;
}
.painel-premium .quick-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15, 46, 34, 0.12);
    border-color: rgba(201, 162, 39, 0.45);
}
.painel-premium .quick-action:hover::after { transform: translateX(100%); }
.painel-premium .quick-action .quick-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--viure-gold) 0%, var(--viure-gold-hover) 100%);
    color: var(--viure-dark);
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(201, 162, 39, 0.30);
    transition: transform .25s ease, box-shadow .25s ease;
}
.painel-premium .quick-action:hover .quick-icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 6px 14px rgba(201, 162, 39, 0.40);
}
.painel-premium .quick-action .quick-label {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--viure-text);
}


/* ============================================================ */
/* 3.6. SECTION TITLE (subtítulo de seção com barra dourada)     */
/* ============================================================ */
.painel-premium .section-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 .25rem;
    letter-spacing: .02em;
    color: var(--viure-text);
    text-transform: uppercase;
}
.painel-premium .section-title-bar {
    display: inline-block;
    width: 64px; height: 3px;
    background: linear-gradient(90deg, var(--viure-gold), var(--viure-gold-hover));
    border-radius: 999px;
    margin-bottom: 1.5rem;
}


/* ============================================================ */
/* 3. PAGE TITLE (gradiente + ícone animado)                     */
/* ============================================================ */
.painel-premium .page-title {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--viure-primary);
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    background: linear-gradient(135deg, var(--viure-primary) 0%, var(--viure-gold-hover) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.painel-premium .page-title-icon {
    -webkit-text-fill-color: var(--viure-gold);
    color: var(--viure-gold);
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 6px rgba(201, 162, 39, 0.35));
    animation: viurePremiumIcon 3.5s ease-in-out infinite;
}
@keyframes viurePremiumIcon {
    0%, 92%, 100% { transform: rotate(0) scale(1); }
    94%           { transform: rotate(-8deg) scale(1.12); }
    96%           { transform: rotate(6deg)  scale(1.08); }
    98%           { transform: rotate(-3deg) scale(1.05); }
}
.painel-premium .page-subtitle {
    margin: .25rem 0 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--viure-text-muted);
    letter-spacing: .14em;
    text-transform: uppercase;
}


/* ============================================================ */
/* 4. PAGE ACTIONS (botões premium com shine)                    */
/* ============================================================ */
.painel-premium .page-actions .btn,
.painel-premium .btn-action {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 12px;
    padding: .6rem 1.25rem;
    box-shadow: var(--viure-shadow-sm);
    transition: transform .22s ease, box-shadow .25s ease, filter .2s ease;
    border: none;
    position: relative;
    overflow: hidden;
}
.painel-premium .page-actions .btn::after,
.painel-premium .btn-action::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .65s ease;
    pointer-events: none;
}
.painel-premium .page-actions .btn:hover,
.painel-premium .btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 46, 34, 0.18);
    filter: brightness(1.06);
}
.painel-premium .page-actions .btn:hover::after,
.painel-premium .btn-action:hover::after { transform: translateX(100%); }

/* Variantes de cor — botão de ação */
.painel-premium .btn-action.is-dark,
.painel-premium .page-actions .btn-print {
    background: linear-gradient(135deg, var(--viure-dark) 0%, #000 100%);
    color: var(--viure-gold);
}
.painel-premium .btn-action.is-success,
.painel-premium .page-actions .btn-export {
    background: linear-gradient(135deg, var(--viure-success) 0%, #3FA374 100%);
    color: #fff;
}
.painel-premium .btn-action.is-primary {
    background: linear-gradient(135deg, var(--viure-primary) 0%, var(--viure-primary-hover) 100%);
    color: #fff;
}
.painel-premium .btn-action.is-gold {
    background: linear-gradient(135deg, var(--viure-gold) 0%, var(--viure-gold-hover) 100%);
    color: var(--viure-dark);
}
.painel-premium .btn-action.is-danger {
    background: linear-gradient(135deg, var(--viure-danger) 0%, #7a1a1d 100%);
    color: #fff;
}


/* ============================================================ */
/* 5. CARD DE FILTROS                                            */
/* ============================================================ */
.painel-premium .card-filtros {
    border: 1px solid var(--viure-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--viure-shadow-sm);
}
.painel-premium .card-filtros .card-header {
    background: linear-gradient(135deg, var(--viure-primary) 0%, var(--viure-primary-hover) 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--viure-gold);
    font-size: .82rem;
    letter-spacing: .08em;
    padding: .85rem 1.15rem;
}
.painel-premium .card-filtros .card-body {
    background: linear-gradient(180deg, rgba(15, 46, 34, 0.02), transparent) !important;
    padding: 1.15rem 1.15rem 1.25rem;
}

/* Form polish dentro do wrapper */
.painel-premium .form-control,
.painel-premium .form-select {
    border-radius: 10px;
    border-color: var(--viure-border);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.painel-premium .form-control:hover,
.painel-premium .form-select:hover { border-color: var(--viure-gold); }
.painel-premium .form-control:focus,
.painel-premium .form-select:focus {
    border-color: var(--viure-gold);
    box-shadow: 0 0 0 .2rem rgba(201, 162, 39, 0.20);
    transform: translateY(-1px);
}
.painel-premium .btn-filtrar {
    background: linear-gradient(135deg, var(--viure-primary) 0%, var(--viure-primary-hover) 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: .58rem 1rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: transform .18s ease, box-shadow .25s ease, color .2s ease;
}
.painel-premium .btn-filtrar:hover {
    color: var(--viure-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 46, 34, 0.25);
}


/* ============================================================ */
/* 6. PERIODO BAR (shimmer)                                      */
/* ============================================================ */
.painel-premium .periodo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    background: linear-gradient(135deg, rgba(15, 46, 34, 0.04), rgba(201, 162, 39, 0.07));
    border: 1px solid rgba(15, 46, 34, 0.08);
    border-left: 5px solid var(--viure-gold);
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: 700;
    color: var(--viure-text);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .88rem;
    position: relative;
    overflow: hidden;
}
.painel-premium .periodo-bar::before {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 70%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.20), transparent);
    animation: viurePremiumShimmer 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes viurePremiumShimmer {
    0%, 100% { left: -150%; }
    50%      { left:  150%; }
}
.painel-premium .periodo-bar i { color: var(--viure-gold); }
.painel-premium .periodo-bar strong {
    color: var(--viure-primary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}


/* ============================================================ */
/* 7. KPI CARD (premium: side-bar + shine + hover lift)          */
/* ============================================================ */
.painel-premium .kpi-card {
    position: relative;
    background: var(--viure-surface, #fff);
    border: 1px solid var(--viure-border);
    border-radius: 16px;
    padding: 1.3rem 1.45rem;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--viure-shadow-sm);
    transition: transform .3s cubic-bezier(.2,.65,.3,1), box-shadow .3s ease, border-color .25s ease;
    isolation: isolate;
}
.painel-premium .kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 46, 34, 0.14);
    border-color: rgba(201, 162, 39, 0.45);
}
.painel-premium .kpi-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    transition: width .3s ease;
}
.painel-premium .kpi-card:hover::before { width: 7px; }
.painel-premium .kpi-card.is-primary::before { background: linear-gradient(180deg, var(--viure-primary), var(--viure-primary-hover)); }
.painel-premium .kpi-card.is-gold::before    { background: linear-gradient(180deg, var(--viure-gold), var(--viure-gold-hover)); }
.painel-premium .kpi-card.is-success::before { background: linear-gradient(180deg, var(--viure-success), #3FA374); }
.painel-premium .kpi-card.is-warning::before { background: linear-gradient(180deg, var(--viure-warning), #B58712); }
.painel-premium .kpi-card.is-danger::before  { background: linear-gradient(180deg, var(--viure-danger), #7a1a1d); }
.painel-premium .kpi-card.is-dark::before    { background: linear-gradient(180deg, var(--viure-dark), #000); }

/* Brilho diagonal ao hover */
.painel-premium .kpi-card::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(120deg, transparent 40%, rgba(201, 162, 39, 0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform .8s ease;
    pointer-events: none;
    z-index: 0;
}
.painel-premium .kpi-card:hover::after { transform: translateX(60%); }
.painel-premium .kpi-card > * { position: relative; z-index: 1; }

.painel-premium .kpi-card .kpi-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--viure-text-muted);
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.painel-premium .kpi-card .kpi-label i {
    color: var(--viure-gold);
    transition: transform .35s ease;
}
.painel-premium .kpi-card:hover .kpi-label i { transform: scale(1.2) rotate(-8deg); }
.painel-premium .kpi-card .kpi-value {
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--viure-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    margin: 0;
}
.painel-premium .kpi-card.is-success .kpi-value { color: var(--viure-success); }
.painel-premium .kpi-card.is-primary .kpi-value { color: var(--viure-primary); }
.painel-premium .kpi-card.is-gold    .kpi-value { color: var(--viure-gold-hover); }
.painel-premium .kpi-card.is-warning .kpi-value { color: var(--viure-warning); }
.painel-premium .kpi-card.is-danger  .kpi-value { color: var(--viure-danger); }
.painel-premium .kpi-card.is-dark    .kpi-value { color: var(--viure-dark); }

.painel-premium .kpi-card .kpi-sub {
    margin-top: .55rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--viure-text-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.painel-premium .kpi-card .kpi-sub.is-success { color: var(--viure-success); }
.painel-premium .kpi-card .kpi-sub.is-danger  { color: var(--viure-danger); }
.painel-premium .kpi-card .kpi-sub.is-warning { color: var(--viure-warning); }


/* ============================================================ */
/* 8. CARD DE LISTAGEM (header em gradiente)                     */
/* ============================================================ */
.painel-premium .card-listagem {
    border: 1px solid var(--viure-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--viure-shadow-sm);
    transition: box-shadow .3s ease;
}
.painel-premium .card-listagem:hover {
    box-shadow: 0 14px 28px rgba(15, 46, 34, 0.10);
}
.painel-premium .card-listagem .card-header {
    background: linear-gradient(135deg, var(--viure-primary) 0%, var(--viure-primary-hover) 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--viure-gold);
    font-size: .88rem;
    letter-spacing: .06em;
    padding: .9rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.painel-premium .card-listagem .card-header i { transition: transform .35s ease; }
.painel-premium .card-listagem:hover .card-header i { transform: scale(1.15) rotate(-8deg); }

.painel-premium .card-listagem.is-gold .card-header {
    background: linear-gradient(135deg, var(--viure-gold) 0%, var(--viure-gold-hover) 100%) !important;
    color: var(--viure-dark) !important;
    border-bottom-color: var(--viure-primary);
}
.painel-premium .card-listagem.is-success .card-header {
    background: linear-gradient(135deg, var(--viure-success) 0%, #3FA374 100%) !important;
    color: #0E3A24 !important;
}
.painel-premium .card-listagem.is-dark .card-header {
    background: linear-gradient(135deg, var(--viure-dark) 0%, #000 100%) !important;
    color: var(--viure-gold) !important;
}
.painel-premium .card-listagem.is-danger .card-header {
    background: linear-gradient(135deg, var(--viure-danger) 0%, #7a1a1d 100%) !important;
    color: #fff !important;
}
.painel-premium .card-listagem.is-warning .card-header {
    background: linear-gradient(135deg, var(--viure-warning) 0%, #B58712 100%) !important;
    color: var(--viure-dark) !important;
}


/* ============================================================ */
/* 9. META BLOCO (progress bar com shine)                        */
/* ============================================================ */
.painel-premium .meta-bloco {
    background: linear-gradient(135deg, rgba(15, 46, 34, 0.04), rgba(201, 162, 39, 0.07));
    border: 1px solid rgba(15, 46, 34, 0.08);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}
.painel-premium .meta-label-mini {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--viure-text-muted);
    font-weight: 700;
    display: block;
    margin-bottom: .15rem;
}
.painel-premium .meta-valor-realizado {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--viure-success);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.painel-premium .meta-valor-meta {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--viure-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.painel-premium .meta-status {
    margin-top: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.painel-premium .meta-status.is-pending { color: var(--viure-danger); }
.painel-premium .meta-status.is-done    { color: var(--viure-success); }
.painel-premium .meta-status.is-done i  {
    animation: viurePremiumTrophy 2s ease-in-out infinite;
}
@keyframes viurePremiumTrophy {
    0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 transparent); }
    50%      { transform: scale(1.2) rotate(8deg); filter: drop-shadow(0 0 6px var(--viure-gold)); }
}


/* ============================================================ */
/* 10. PROGRESS BARS PREMIUM (com shine)                         */
/* ============================================================ */
.painel-premium .progress {
    overflow: hidden;
    position: relative;
}
.painel-premium .progress-bar.has-shine {
    position: relative;
    overflow: hidden;
    transition: width 1.4s cubic-bezier(.2, .65, .3, 1);
}
.painel-premium .progress-bar.has-shine::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: viurePremiumProgressShine 2.8s ease-in-out infinite;
}
@keyframes viurePremiumProgressShine {
    0%   { left: -50%; }
    100% { left: 110%; }
}

/* Variantes de gradiente para progress-bar */
.painel-premium .progress-bar.bar-primary-gold {
    background: linear-gradient(135deg, var(--viure-primary), var(--viure-gold)) !important;
    color: #fff;
}
.painel-premium .progress-bar.bar-success {
    background: linear-gradient(135deg, var(--viure-success), #3FA374) !important;
    color: #0E3A24;
}
.painel-premium .progress-bar.bar-gold {
    background: linear-gradient(135deg, var(--viure-gold), var(--viure-gold-hover)) !important;
    color: var(--viure-dark);
}
.painel-premium .progress-bar.bar-danger {
    background: linear-gradient(135deg, var(--viure-danger), #7a1a1d) !important;
    color: #fff;
}


/* ============================================================ */
/* 11. BALANCO ITEM (cards de categoria/balanço)                 */
/* ============================================================ */
.painel-premium .balanco-item {
    background: linear-gradient(180deg, #fff, rgba(201, 162, 39, 0.02));
    border: 1px solid var(--viure-border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.painel-premium .balanco-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(201, 162, 39, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.painel-premium .balanco-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 46, 34, 0.10);
    border-color: rgba(201, 162, 39, 0.45);
}
.painel-premium .balanco-item:hover::before { opacity: 1; }
.painel-premium .balanco-item .cat-nome {
    font-size: .92rem;
    font-weight: 800;
    color: var(--viure-primary);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.painel-premium .balanco-item .cat-total {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--viure-gold-hover);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.painel-premium .balanco-item .cat-sublabel {
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--viure-text-muted);
    font-weight: 700;
    line-height: 1;
    margin-top: .15rem;
}


/* ============================================================ */
/* 12. CARRO BLOCO (agrupador de seção)                          */
/* ============================================================ */
.painel-premium .carro-bloco {
    background: linear-gradient(180deg, #fff 0%, rgba(15, 46, 34, 0.025) 100%);
    border-bottom: 1px solid var(--viure-border);
    padding: 1.5rem;
    transition: background .3s ease;
}
.painel-premium .carro-bloco:hover {
    background: linear-gradient(180deg, #fff 0%, rgba(201, 162, 39, 0.04) 100%);
}
.painel-premium .carro-bloco:last-child { border-bottom: none; }
.painel-premium .carro-titulo {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--viure-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.painel-premium .carro-titulo i {
    color: var(--viure-gold);
    transition: transform .3s ease;
}
.painel-premium .carro-bloco:hover .carro-titulo i { transform: translateX(3px) scale(1.08); }

.painel-premium .carro-meta {
    background: rgba(15, 46, 34, 0.03);
    border-radius: 10px;
    padding: .7rem .9rem;
    border: 1px solid rgba(15, 46, 34, 0.05);
}
.painel-premium .carro-meta .progress { height: 10px; border-radius: 999px; background: rgba(15, 46, 34, 0.08); }
.painel-premium .carro-meta .label-mini {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--viure-text-muted);
}
.painel-premium .carro-meta .valor-mini {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--viure-text);
}


/* ============================================================ */
/* 13. VENDEDOR CARD (card-linha genérico)                       */
/* ============================================================ */
.painel-premium .vendedor-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .7rem;
}
.painel-premium .vendedor-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--viure-border);
    border-radius: 14px;
    padding: 1.05rem 1.2rem 1.05rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    transition: transform .22s cubic-bezier(.2,.65,.3,1), box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}
@media (min-width: 768px) {
    .painel-premium .vendedor-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
    }
}
.painel-premium .vendedor-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--viure-gold);
    transition: width .25s ease, background .25s ease;
}
.painel-premium .vendedor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 46, 34, 0.12);
    border-color: rgba(201, 162, 39, 0.45);
}
.painel-premium .vendedor-card:hover::before {
    width: 6px;
    background: linear-gradient(180deg, var(--viure-gold), var(--viure-primary));
}

.painel-premium .vendedor-info { flex: 1 1 auto; min-width: 0; }
.painel-premium .vendedor-info .nome {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--viure-primary);
    margin: 0 0 .3rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.painel-premium .vendedor-info .nome i {
    color: var(--viure-gold);
    transition: transform .3s ease;
}
.painel-premium .vendedor-card:hover .nome i { transform: scale(1.2) rotate(-6deg); }
.painel-premium .vendedor-info .stats {
    font-size: .82rem;
    color: var(--viure-text-muted);
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}
.painel-premium .vendedor-info .stats i { color: var(--viure-gold); margin-right: .3rem; }

.painel-premium .vendedor-total {
    flex: 0 0 auto;
    min-width: 160px;
    text-align: left;
}
@media (min-width: 768px) {
    .painel-premium .vendedor-total {
        text-align: right;
        padding-left: 1rem;
        border-left: 1px solid var(--viure-border);
    }
}
.painel-premium .vendedor-total .label-mini {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--viure-text-muted);
    text-transform: uppercase;
}
.painel-premium .vendedor-total .valor-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--viure-success);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin: .15rem 0 0;
}


/* ============================================================ */
/* 14. PILLS (comissões / categorias / status)                   */
/* ============================================================ */
.painel-premium .comissao-bloco {
    flex: 0 0 auto;
    min-width: 240px;
}
@media (min-width: 768px) {
    .painel-premium .comissao-bloco {
        padding-left: 1rem;
        border-left: 1px solid var(--viure-border);
    }
}
.painel-premium .comissao-bloco .label-mini {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--viure-text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: .35rem;
}
.painel-premium .comissao-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.painel-premium .pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .42rem .7rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border: 1px solid;
    transition: transform .2s ease, box-shadow .25s ease;
    cursor: default;
}
.painel-premium .pill:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 10px rgba(15, 46, 34, 0.18);
}
.painel-premium .pill.p3,
.painel-premium .pill.is-primary-soft {
    background: rgba(15, 46, 34, 0.06);
    color: var(--viure-primary);
    border-color: rgba(15, 46, 34, 0.18);
}
.painel-premium .pill.p4,
.painel-premium .pill.is-gold-soft {
    background: rgba(201, 162, 39, 0.13);
    color: var(--viure-gold-hover);
    border-color: rgba(201, 162, 39, 0.45);
}
.painel-premium .pill.p5,
.painel-premium .pill.is-primary {
    background: linear-gradient(135deg, var(--viure-primary), var(--viure-primary-hover));
    color: var(--viure-gold);
    border-color: var(--viure-primary);
    box-shadow: 0 2px 6px rgba(15, 46, 34, 0.20);
}
.painel-premium .pill.is-success {
    background: rgba(82, 183, 136, 0.15);
    color: var(--viure-success);
    border-color: rgba(82, 183, 136, 0.45);
}
.painel-premium .pill.is-danger {
    background: rgba(155, 34, 38, 0.13);
    color: var(--viure-danger);
    border-color: rgba(155, 34, 38, 0.40);
}
.painel-premium .pill.is-warning {
    background: rgba(212, 160, 23, 0.16);
    color: #B58712;
    border-color: rgba(212, 160, 23, 0.50);
}


/* ============================================================ */
/* 15. STAT PILL (stat inline pequeno)                           */
/* ============================================================ */
.painel-premium .stat-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(15, 46, 34, 0.04);
    border: 1px solid rgba(15, 46, 34, 0.08);
    color: var(--viure-text);
    border-radius: 999px;
    padding: .3rem .65rem;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.painel-premium .stat-pill i { color: var(--viure-gold); }


/* ============================================================ */
/* 16. EMPTY BLOCK                                               */
/* ============================================================ */
.painel-premium .empty-block {
    background: linear-gradient(135deg, rgba(82, 183, 136, 0.05), rgba(201, 162, 39, 0.06));
    border: 1px dashed rgba(15, 46, 34, 0.20);
    border-radius: 14px;
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--viure-text-muted);
    font-weight: 700;
}
.painel-premium .empty-block i {
    display: block;
    font-size: 2.5rem;
    color: var(--viure-gold);
    margin-bottom: .65rem;
    opacity: .85;
    animation: viurePremiumEmptyFloat 4s ease-in-out infinite;
}
@keyframes viurePremiumEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}


/* ============================================================ */
/* 17. NÚMEROS (tabular-nums utility)                            */
/* ============================================================ */
.painel-premium .num,
.painel-premium [data-count] {
    font-variant-numeric: tabular-nums;
}


/* ============================================================ */
/* 18. PRINT MODE                                                */
/* ============================================================ */
@media print {
    .painel-premium .no-print { display: none !important; }
    .painel-premium .hero {
        background: #fff !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    .painel-premium .hero::before,
    .painel-premium .hero::after { display: none !important; }
    .painel-premium .page-title {
        -webkit-text-fill-color: #000 !important;
        background: none !important;
        color: #000 !important;
    }
    .painel-premium .card,
    .painel-premium .kpi-card,
    .painel-premium .balanco-item,
    .painel-premium .vendedor-card,
    .painel-premium .card-listagem {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }
    .painel-premium .card-listagem .card-header,
    .painel-premium .card-filtros .card-header {
        background: #f1f1f1 !important;
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
    }
    .painel-premium .kpi-card::before,
    .painel-premium .vendedor-card::before { display: none !important; }
    .painel-premium .progress-bar.has-shine::after,
    .painel-premium .periodo-bar::before { display: none !important; }
    .painel-premium .hero.is-dark {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
    }
    .painel-premium .hero.is-dark .page-title,
    .painel-premium .hero.is-dark .hero-name,
    .painel-premium .hero.is-dark .hero-greeting,
    .painel-premium .hero.is-dark .hero-date,
    .painel-premium .hero.is-dark .hero-tag {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }
    .painel-premium .quick-action { box-shadow: none !important; border: 1px solid #ddd !important; }
    .painel-premium .quick-action::after { display: none !important; }
    .painel-premium { background: #fff !important; }
}


/* ============================================================ */
/* 19. ACESSIBILIDADE — prefers-reduced-motion                   */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .painel-premium .hero::before,
    .painel-premium .hero::after,
    .painel-premium .page-title-icon,
    .painel-premium .periodo-bar::before,
    .painel-premium .progress-bar.has-shine::after,
    .painel-premium .empty-block i,
    .painel-premium .meta-status.is-done i,
    .painel-premium .kpi-card,
    .painel-premium .vendedor-card,
    .painel-premium .balanco-item,
    .painel-premium .page-actions .btn,
    .painel-premium .btn-action,
    .painel-premium .card-listagem,
    .painel-premium .progress-bar,
    .painel-premium .hero.is-dark .status-online::before,
    .painel-premium .quick-action,
    .painel-premium .quick-action::after {
        animation: none !important;
        transition: none !important;
    }
}