/*=====================================================
  SISTEMA DE ASSINATURAS GCA — v1 (2026-08-20)

  Tela do usuário (views/assinatura.html, js/assinatura.js), tela do
  Administrator (views/assinaturas-admin.html, extensão de
  js/administrador.js), aviso na sidebar (js/app.js) e banner no
  Dashboard (js/dashboard.js). Reaproveita ao máximo o que já existe:
  cartão base (.card, css/cards.css), painel (.panel/.panel-header,
  css/dashboard.css), badge base (.badge, css/comissoes.css), modal
  (.modal-overlay/.modal-*, css/comissoes.css), config-card
  (css/configuracoes.css), tabela (.dashboard-table). Só o que é
  genuinamente novo desta tela ganha CSS aqui.
=====================================================*/


/* ===========================
   STATUS DA ASSINATURA (tela do usuário)
=========================== */

.asn-card-status{
    margin-bottom:22px;
}

.asn-status-cabecalho{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    margin-bottom:8px;

}

.asn-status-cabecalho h2{
    margin-top:6px;
    font-size:20px;
}

.asn-status-dias{
    font-size:14px;
    font-weight:600;
    color:var(--gca-texto-secundario);
    white-space:nowrap;
}

.asn-status-mensagem{
    font-size:14px;
    line-height:1.55;
    color:var(--gca-texto-secundario);
}


/* ===========================
   STATUS COMPACTO — topo (reestruturação 2026-09-18)
   Junta status + plano + vencimento numa única linha, no lugar dos
   dois blocos separados de antes (.asn-status-cabecalho sozinho +
   .asn-panel-plano). asnRenderizarStatus()/asnRenderizarPlano()
   (js/assinatura.js) continuam escrevendo nos mesmos ids de sempre —
   só a moldura ao redor mudou.
=========================== */

.asn-status-topo{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:18px;

    margin-bottom:10px;

}

.asn-status-rotulo{
    display:block;
    margin-bottom:4px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--gca-texto-terciario);
}

.asn-status-plano-linha{
    display:flex;
    align-items:center;
    gap:10px;
}

.asn-status-plano-linha strong{
    font-size:22px;
}

.asn-status-acoes{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

.asn-status-acoes .asn-plano-vencimento{
    margin-top:0;
    font-size:13px;
    color:var(--gca-texto-secundario);
}

/* Leve destaque pedido pelo usuário (2026-09-18, ajustado 2026-09-18 —
   era a borda do card inteiro, o pedido era só neste botão) — pra ele
   se destacar como "é aqui que se paga". */
.asn-btn-ver-historico{
    font-size:13px;
    padding:8px 14px;
    white-space:nowrap;
    border-color:#8B0000;
    color:#8B0000;
}

.asn-btn-ver-historico i{
    width:14px;
    height:14px;
}

@media(max-width:600px){
    .asn-status-topo{
        flex-direction:column;
        align-items:flex-start;
    }
    .asn-status-acoes{
        align-items:flex-start;
        width:100%;
    }
    .asn-btn-ver-historico{
        width:100%;
        justify-content:center;
    }
}


/* ===========================
   PLANOS — cards de pricing (reestruturação 2026-09-18)
   Só o GCA Essential é contratável hoje — Advanced/Business aparecem
   como roadmap comercial visual ("Em breve"), conteúdo 100% estático,
   sem preço real e sem nenhum caminho de contratação. Ver
   PRODUCT_DISCOVERY.md pra o racional completo da estrutura de planos.
=========================== */

.asn-planos-secao{
    margin-bottom:26px;
}

.asn-planos-cabecalho{
    text-align:center;
    max-width:580px;
    margin:0 auto 26px;
}

.asn-planos-cabecalho h2{
    font-size:23px;
    margin-bottom:8px;
}

.asn-planos-destaque{
    color:#8B0000;
}

.asn-planos-cabecalho p{
    font-size:13.5px;
    line-height:1.55;
    color:var(--gca-texto-secundario);
}

.asn-planos-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    align-items:stretch;
}

.asn-plano-card{

    position:relative;

    display:flex;
    flex-direction:column;

    padding:26px 24px;

    border-radius:18px;
    background:var(--gca-fundo-card-glass);
    backdrop-filter:var(--gca-blur-glass);
    -webkit-backdrop-filter:var(--gca-blur-glass);
    border:1px solid var(--gca-borda);
    box-shadow:var(--gca-sombra-card);

}

.asn-plano-card--destaque{
    border-color:#8B0000;
    box-shadow:0 0 0 1px #8B0000, var(--gca-sombra-card);
}

/* Business (pedido do usuário, 2026-09-18): "mais contraste, sem
   parecer desabilitado" — não é o mesmo destaque forte do Advanced
   (perderia a hierarquia entre os dois planos futuros), só uma
   borda com o tom de acento em baixa opacidade + fundo um degrau
   mais sólido que o glass padrão, pra ler como "presente", não
   apagado. */
.asn-plano-card--business{
    background:var(--gca-fundo-elevado);
    border-color:rgba(139,0,0,.35);
}

.asn-plano-ribbon{

    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);

    padding:5px 16px;

    border-radius:20px;
    background:#8B0000;
    color:#fff;

    font-size:10.5px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    white-space:nowrap;

}

.asn-plano-icone{

    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;
    margin-bottom:14px;

    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-principal);

}

.asn-plano-icone i{
    width:20px;
    height:20px;
}

.asn-plano-icone--destaque{
    background:#8B0000;
    color:#fff;
}

.asn-plano-card h3{
    font-size:18px;
    margin-bottom:4px;
}

.asn-plano-descricao{
    min-height:34px;
    margin-bottom:16px;
    font-size:13px;
    line-height:1.5;
    color:var(--gca-texto-secundario);
}

.asn-plano-card .asn-plano-preco{
    display:flex;
    align-items:baseline;
    gap:6px;
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid var(--gca-borda);
}

.asn-plano-preco--futuro span{
    font-size:19px;
    font-weight:700;
    color:var(--gca-texto-terciario);
}

.asn-plano-tudo-de{
    margin-bottom:10px;
    font-size:12px;
    font-weight:600;
    color:var(--gca-texto-terciario);
}

/* "Tudo do Essential, mais:" do Advanced um pouco mais destacado
   (pedido do usuário, 2026-09-18) — mesma cor de acento do card, não
   só um cinza a mais. */
.asn-plano-tudo-de--destaque{
    font-size:12.5px;
    color:#8B0000;
}

.asn-plano-features{
    display:flex;
    flex-direction:column;
    gap:10px;

    flex:1;

    margin:0 0 20px;
    padding:0;

    list-style:none;
}

.asn-plano-features li{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:13px;
    line-height:1.4;
    color:var(--gca-texto-principal);
}

.asn-plano-features li i{
    width:15px;
    height:15px;
    margin-top:1px;
    flex-shrink:0;
    color:#0b7d38;
}

/* Planos futuros: o check some de verde (isso é "já incluído no que eu
   tenho"), vira neutro — é roadmap, não posse. Continua legível e
   "proposital", nunca com cara de quebrado/desabilitado. */
.asn-plano-card--futuro .asn-plano-features li i{
    color:var(--gca-texto-terciario);
}

.asn-plano-cta{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 18px;

    border-radius:10px;

    font-size:13.5px;
    font-weight:600;

}

.asn-plano-cta i{
    width:16px;
    height:16px;
}

.asn-plano-cta--atual{
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-secundario);
    border:1px solid var(--gca-borda);
}

.asn-plano-cta--futuro{
    background:transparent;
    color:var(--gca-texto-terciario);
    border:1px dashed var(--gca-borda-sutil);
}

.asn-plano-cta--destaque{
    color:#8B0000;
    border-color:#8B0000;
}

/* Advanced (2026-09-18): antes era só um <div>; agora vira <button>
   real assim que o plano existe no banco (asnAtualizarCardAdvanced,
   js/assinatura.js) — reset dos estilos padrão de botão do navegador,
   o visual em si continua vindo de .asn-plano-cta--futuro/--destaque. */
button.asn-plano-cta{
    width:100%;
    font-family:inherit;
    cursor:pointer;
    transition:background-color .15s ease, opacity .15s ease;
}

button.asn-plano-cta:disabled{
    cursor:default;
}

button.asn-plano-cta--destaque:not(:disabled):hover{
    background:rgba(139,0,0,.08);
}

@media(max-width:1100px){
    .asn-planos-grid{
        grid-template-columns:1fr;
    }
}


/* ===========================
   COMPARATIVO DE PLANOS (2026-09-18)
=========================== */

.asn-panel-comparativo{
    margin-bottom:22px;
}

.asn-tabela-comparativo th:not(:first-child),
.asn-tabela-comparativo td:not(:first-child){
    text-align:center;
}

.asn-comp-sim i{
    width:16px;
    height:16px;
    color:#0b7d38;
}

.asn-comp-nao{
    color:var(--gca-texto-terciario);
}


/* ===========================
   PLANO
=========================== */

.asn-panel-plano{
    margin-bottom:22px;
}

.asn-plano-linha{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    padding:16px 18px;

    border-radius:14px;
    background:var(--gca-fundo-elevado);

}

.asn-plano-linha strong{
    display:block;
    font-size:16px;
}

.asn-plano-vencimento{
    display:block;
    margin-top:4px;
    font-size:13px;
    color:var(--gca-texto-secundario);
}

.asn-plano-preco{
    text-align:right;
    white-space:nowrap;
}

.asn-plano-preco span{
    font-size:22px;
    font-weight:700;
    color:#8B0000;
}

.asn-plano-preco small{
    font-size:12.5px;
    color:var(--gca-texto-secundario);
}


/* ===========================
   O QUE MEU PLANO POSSUI (tela do usuário)
=========================== */

.asn-panel-recursos{
    margin-bottom:22px;
}

.asn-recursos-intro{
    margin:-6px 0 18px;
    font-size:13.5px;
    color:var(--gca-texto-secundario);
}

.asn-recursos-grade{

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;

    margin-bottom:16px;

}

.asn-recurso{

    display:flex;
    align-items:flex-start;
    gap:12px;

    padding:14px;

    border-radius:12px;
    background:var(--gca-fundo-elevado);

}

.asn-recurso strong{
    display:block;
    margin-bottom:3px;
    font-size:13.5px;
}

.asn-recurso span{
    font-size:12.5px;
    line-height:1.45;
    color:var(--gca-texto-secundario);
}

/* Mesmo desenho de badge colorido já usado em Dashboard (.dash-card
   .card-icon) e Comissões (.card-resumo .card-icon) — cores próprias
   aqui pra não depender de nenhum outro CSS de módulo carregar antes. */
.asn-recurso-icone{

    width:34px;
    height:34px;

    border-radius:9px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;

    color:#fff;

}

.asn-recurso-icone i{
    width:16px;
    height:16px;
}

.asn-recurso-icone--azul{ background:#2563eb; }
.asn-recurso-icone--verde{ background:#16a34a; }
.asn-recurso-icone--roxo{ background:#7c3aed; }
.asn-recurso-icone--laranja{ background:#ea580c; }
.asn-recurso-icone--vermelho{ background:#8B0000; }

.asn-recursos-rodape{

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 14px;

    border-radius:10px;
    background:#dff5e5;
    color:#0b7d38;

    font-size:13px;
    font-weight:600;

}

.asn-recursos-rodape i{
    width:16px;
    height:16px;
    flex-shrink:0;
}


/* ===========================
   PAGAMENTO VIA PIX
=========================== */

.asn-panel-pagamento{
    margin-bottom:22px;
}

.asn-pix-grid{

    display:grid;
    grid-template-columns:220px 1fr;
    gap:26px;
    align-items:start;

}

.asn-pix-qrcode{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:14px;

    border-radius:14px;
    background:#fff;

}

.asn-pix-qrcode canvas,
.asn-pix-qrcode img{
    display:block;
    max-width:100%;
    height:auto;
}

.asn-pix-dados{
    display:flex;
    flex-direction:column;
}

.asn-pix-dados label{
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
}

.asn-pix-dados textarea{

    resize:none;

    padding:12px 14px;
    margin-bottom:12px;

    border:1px solid var(--gca-borda);
    border-radius:10px;
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-principal);

    font-family:"Courier New", monospace;
    font-size:12.5px;
    line-height:1.5;

}

.asn-pix-dados .btn-secondary{
    margin-bottom:10px;
}

.asn-btn-ja-paguei{
    width:100%;
    justify-content:center;
}

/* .btn-primary (css/comissoes.css) já define display:flex sem guarda
   de [hidden] — regra de autor vence o display:none padrão do
   navegador pro atributo hidden, então setar
   btnJaPaguei.hidden=true (js/assinatura.js) não escondia o botão de
   verdade. Mesma causa já documentada em .form-group[hidden]
   (comissoes.css) — reaplicando aqui, escopado só a este botão. */
.asn-btn-ja-paguei[hidden]{
    display:none;
}

.asn-pix-aviso{

    display:flex;
    align-items:flex-start;
    gap:10px;

    margin-top:12px;
    padding:12px 14px;

    border-radius:10px;
    background:#fff3d6;
    color:#8a5a00;

    font-size:13px;
    line-height:1.5;

}

/* Mesmo motivo do botão acima — display:flex sem guarda de [hidden]. */
.asn-pix-aviso[hidden]{
    display:none;
}

.asn-pix-aviso i{
    width:16px;
    height:16px;
    flex-shrink:0;
    margin-top:1px;
}

.asn-pix-upgrade-aviso{

    display:flex;
    align-items:flex-start;
    gap:10px;

    margin-bottom:12px;
    padding:12px 14px;

    border-radius:10px;
    background:rgba(139,0,0,.08);
    color:#8B0000;
    border:1px solid rgba(139,0,0,.25);

    font-size:13px;
    line-height:1.5;

}

.asn-pix-upgrade-aviso[hidden]{
    display:none;
}

.asn-pix-upgrade-aviso i{
    width:16px;
    height:16px;
    flex-shrink:0;
    margin-top:1px;
}

.asn-pix-upgrade-aviso span{
    flex:1;
}

.asn-link-cancelar{
    background:none;
    border:none;
    padding:0;
    color:inherit;
    text-decoration:underline;
    font-size:inherit;
    font-family:inherit;
    cursor:pointer;
    white-space:nowrap;
}

.asn-pix-nao-configurado{
    padding:20px;
    color:var(--gca-texto-secundario);
    font-size:13.5px;
    line-height:1.6;
}


/* ===========================
   HISTÓRICO
=========================== */

.asn-panel-historico{
    margin-bottom:22px;
}

.asn-tabela-vazia{
    text-align:center;
    color:var(--gca-texto-terciario);
    padding:22px 0 !important;
}


/* ===========================
   BADGES — status da assinatura
=========================== */

.asn-badge-avaliacao{
    background:#e6f0fd;
    color:#1d4ed8;
}

.asn-badge-ativo{
    background:#dff5e5;
    color:#0b7d38;
}

.asn-badge-atraso{
    background:#fff3d6;
    color:#bb7a00;
}

.asn-badge-cancelado{
    background:#fde3e3;
    color:#c62828;
}


/* ===========================
   BADGES — status do pagamento
   (vocabulário deliberadamente separado do status da assinatura —
   nunca misturar os dois, ver js/assinaturas-core.js)
=========================== */

.asn-badge-pagamento-aguardando{
    background:#fff3d6;
    color:#bb7a00;
}

/* Tela do Administrator (2026-09-19) — mesmo selo, empilhado abaixo do
   nome na tabela de Assinaturas (renderizarTabelaAssinaturas,
   js/administrador.js), pra identificar quem tem pagamento aguardando
   sem precisar abrir "Gerenciar" um por um. */
.asn-selo-aguardando{
    margin-top:4px;
    font-size:11px;
    padding:3px 9px;
}

.asn-badge-pagamento-confirmado{
    background:#dff5e5;
    color:#0b7d38;
}

.asn-badge-pagamento-recusado{
    background:#fde3e3;
    color:#c62828;
}


/* ===========================
   ADMINISTRATOR — KPIs + configuração do plano
=========================== */

.asn-admin-kpis{

    display:grid;
    /* 6 cards desde 2026-09-07 (separou "Avaliação expirada" de
       "Canceladas") — breakpoints abaixo (1300px/700px) já dividem 6
       igual (3x2 / 2x3), não precisaram mudar. */
    grid-template-columns:repeat(6, 1fr);
    gap:14px;

    margin-bottom:22px;

}

.asn-admin-config-plano{
    margin-bottom:22px;
}


/* ===========================
   ADMINISTRATOR — modal "Gerenciar assinatura"
=========================== */

.asn-modal-resumo{

    display:flex;
    flex-direction:column;
    gap:10px;

    margin-bottom:18px;
    padding:16px 18px;

    border-radius:14px;
    background:var(--gca-fundo-elevado);

}

.asn-modal-resumo-linha{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13.5px;
}

.asn-modal-resumo-linha span{
    color:var(--gca-texto-secundario);
}

.asn-modal-acoes{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;

    margin-bottom:18px;

}

.asn-modal-pagamento-pendente{
    width:100%;
    margin-bottom:4px;
    font-size:13.5px;
    color:#bb7a00;
    font-weight:600;
}

.asn-modal-sem-pendencia{
    font-size:13.5px;
    color:var(--gca-texto-terciario);
}

.asn-modal-separador{
    border:none;
    border-top:1px solid var(--gca-borda);
    margin:18px 0;
}

.asn-btn-cancelar-assinatura{
    color:#c62828;
    margin-right:auto;
}

.asn-btn-reativar-assinatura{
    margin-right:auto;
}

/* .btn-secondary/.btn-primary (css/style.css e css/comissoes.css) já
   definem display:flex sem guarda de [hidden] — mesma causa do botão
   "Já paguei" acima: sem isto, alternar Cancelar/Reativar via
   .hidden no modal de gerenciar assinatura não escondia o botão de
   verdade. */
.asn-btn-cancelar-assinatura[hidden],
.asn-btn-reativar-assinatura[hidden]{
    display:none;
}


/* ===========================
   AVISO NA SIDEBAR
=========================== */

.sidebar-assinatura-aviso{

    display:block;

    margin-bottom:10px;
    padding:8px 10px;

    border-radius:10px;
    background:rgba(255,255,255,.08);

    font-size:11.5px;
    font-weight:600;
    color:var(--gca-texto-secundario, #AEB6C2);
    text-align:center;

}

.sidebar-assinatura-aviso--atraso{
    background:rgba(230,57,80,.15);
    color:#F2495C;
}


/* ===========================
   BANNER DE AVISO NO DASHBOARD
=========================== */

.assinatura-aviso-banner{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:18px;
    padding:14px 18px;

    border-radius:14px;
    background:#e6f0fd;
    color:#1d4ed8;

    font-size:13.5px;
    font-weight:600;

}

/* Mesma causa dos outros [hidden] desta feature (botão "Já paguei",
   aviso de aguardando, Cancelar/Reativar) — display:flex sem guarda
   vencia o display:none padrão do navegador pro atributo hidden, e o
   banner (vazio, mas com fundo colorido) aparecia como uma faixa sem
   texto pra quem não tinha aviso nenhum pra ver (achado em produção,
   v34.2.2). */
.assinatura-aviso-banner[hidden]{
    display:none;
}

.assinatura-aviso-banner i{
    width:18px;
    height:18px;
    flex-shrink:0;
}

.assinatura-aviso-banner a{
    margin-left:auto;
    color:inherit;
    text-decoration:underline;
    white-space:nowrap;
}

.assinatura-aviso-banner--atraso{
    background:#fff3d6;
    color:#8a5a00;
}


/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:1300px){
    .asn-admin-kpis{
        grid-template-columns:repeat(3, 1fr);
    }
    .asn-recursos-grade{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:900px){
    .asn-pix-grid{
        grid-template-columns:1fr;
    }
    .asn-pix-qrcode{
        justify-self:center;
    }
}

@media(max-width:520px){
    .asn-recursos-grade{
        grid-template-columns:1fr;
    }
}

@media(max-width:767px){
    .asn-admin-kpis{
        grid-template-columns:repeat(2, 1fr);
    }
    .asn-plano-linha{
        flex-direction:column;
        align-items:flex-start;
    }
    .asn-plano-preco{
        text-align:left;
    }
}


/* =====================================================
   DARK PREMIUM
===================================================== */

[data-theme="dark-premium"] .asn-status-dias{
    color:var(--gca-texto-secundario);
}

[data-theme="dark-premium"] .asn-plano-preco span{
    color:#F2495C;
}

[data-theme="dark-premium"] .asn-btn-ver-historico{
    border-color:#E63950;
    color:#F2495C;
}

[data-theme="dark-premium"] .asn-planos-destaque{
    color:#E63950;
}

[data-theme="dark-premium"] .asn-plano-card--destaque{
    border-color:#E63950;
    box-shadow:0 0 0 1px #E63950, 0 20px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

[data-theme="dark-premium"] .asn-plano-card--business{
    border-color:rgba(230,57,80,.35);
}

[data-theme="dark-premium"] .asn-plano-tudo-de--destaque{
    color:#F2495C;
}

[data-theme="dark-premium"] .asn-plano-ribbon{
    background:#E63950;
}

[data-theme="dark-premium"] .asn-plano-icone--destaque{
    background:#E63950;
    box-shadow:0 0 14px 2px rgba(230,57,80,.35);
}

[data-theme="dark-premium"] .asn-plano-features li i{
    color:#4ade80;
}

[data-theme="dark-premium"] .asn-plano-card--futuro .asn-plano-features li i{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .asn-plano-cta--destaque{
    color:#F2495C;
    border-color:#E63950;
}

[data-theme="dark-premium"] button.asn-plano-cta--destaque:not(:disabled):hover{
    background:rgba(230,57,80,.1);
}

[data-theme="dark-premium"] .asn-comp-sim i{
    color:#4ade80;
}

[data-theme="dark-premium"] .asn-pix-qrcode{
    background:#fff;
}

/* Vermelho GCA no dark premium usa o tom próprio do tema (#E63950), não
   o #8B0000 do claro — mesma convenção seguida em todo o sistema (ver
   comissoes.css/dashboard.css). Os outros 3 tons ganham o mesmo brilho
   sutil já usado nos badges coloridos de Dashboard/Comissões. */
[data-theme="dark-premium"] .asn-recurso-icone--vermelho{
    background:#E63950;
    box-shadow:0 0 14px 2px rgba(230,57,80,.35);
}
[data-theme="dark-premium"] .asn-recurso-icone--azul{ box-shadow:0 0 14px 2px rgba(37,99,235,.35); }
[data-theme="dark-premium"] .asn-recurso-icone--verde{ box-shadow:0 0 14px 2px rgba(22,163,74,.35); }
[data-theme="dark-premium"] .asn-recurso-icone--roxo{ box-shadow:0 0 14px 2px rgba(124,58,237,.35); }
[data-theme="dark-premium"] .asn-recurso-icone--laranja{ box-shadow:0 0 14px 2px rgba(234,88,12,.35); }

[data-theme="dark-premium"] .asn-recursos-rodape{
    background:rgba(22,163,74,.18);
    color:#4ade80;
}

[data-theme="dark-premium"] .asn-pix-aviso{
    background:rgba(255,193,7,.12);
    color:#f3c669;
}

[data-theme="dark-premium"] .asn-pix-upgrade-aviso{
    background:rgba(230,57,80,.1);
    color:#F2495C;
    border-color:rgba(230,57,80,.3);
}

[data-theme="dark-premium"] .asn-badge-avaliacao{
    background:rgba(37,99,235,.18);
    color:#7fa8ff;
}

[data-theme="dark-premium"] .asn-badge-ativo{
    background:rgba(22,163,74,.18);
    color:#4ade80;
}

[data-theme="dark-premium"] .asn-badge-atraso,
[data-theme="dark-premium"] .asn-badge-pagamento-aguardando{
    background:rgba(234,158,12,.18);
    color:#f3c669;
}

[data-theme="dark-premium"] .asn-badge-cancelado,
[data-theme="dark-premium"] .asn-badge-pagamento-recusado{
    background:rgba(242,73,92,.18);
    color:#f87171;
}

[data-theme="dark-premium"] .asn-badge-pagamento-confirmado{
    background:rgba(22,163,74,.18);
    color:#4ade80;
}

[data-theme="dark-premium"] .asn-modal-pagamento-pendente{
    color:#f3c669;
}

[data-theme="dark-premium"] .asn-btn-cancelar-assinatura{
    color:#f87171;
}

[data-theme="dark-premium"] .assinatura-aviso-banner{
    background:rgba(37,99,235,.15);
    color:#7fa8ff;
}

[data-theme="dark-premium"] .assinatura-aviso-banner--atraso{
    background:rgba(234,158,12,.15);
    color:#f3c669;
}