/* =========================================================================
   AÇÕES DE MÓDULO — "Testar grátis" / "Comprar"
   -------------------------------------------------------------------------
   Componente renderizado por cr_render_modulo_acoes() (inc/inc-modulos-acoes.php)
   nos cards do dashboard e da tela "Ativar Módulos".

   Consome os tokens já definidos em sistema.css (--primary, --radius-sm,
   --border-color, --text-muted...) em vez de cores soltas, pra o botão
   envelhecer junto com o resto do sistema quando a paleta mudar.
   ========================================================================= */

.cr-mod-acoes { display: flex; flex-direction: column; gap: 10px; }

.cr-mod-preco {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.cr-mod-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.cr-mod-btn {
    /* Crescem juntos e dividem a linha em partes iguais: dois botões de
       larguras diferentes lado a lado deixam o card visualmente torto. */
    flex: 1 1 0; min-width: max-content;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    font: inherit; font-size: .82rem; font-weight: 600; line-height: 1.2;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.cr-mod-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-soft-strong, rgba(63, 80, 46, .14));
}
.cr-mod-btn[disabled] { opacity: .55; cursor: progress; }

/* Ação principal: uma só por card. */
.cr-mod-btn--principal { background: var(--primary, #3f502e); color: #fff; }
.cr-mod-btn--principal:hover,
.cr-mod-btn--principal:focus-visible { background: var(--primary-hover, #354426); color: #fff; }

/* Ação secundária: presente, mas sem disputar atenção com a principal. */
.cr-mod-btn--sutil {
    background: transparent;
    border-color: var(--border-color, #e6e9ee);
    color: var(--text-muted, #64748b);
}
.cr-mod-btn--sutil:hover,
.cr-mod-btn--sutil:focus-visible {
    background: var(--primary-soft, rgba(63, 80, 46, .08));
    border-color: var(--primary, #3f502e);
    color: var(--primary, #3f502e);
}

.cr-mod-aviso {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 0;
    font-size: .76rem; line-height: 1.4;
    color: var(--danger, #f43f5e);
}

.cr-mod-spinner {
    width: 13px; height: 13px; flex: none;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cr-mod-girar .7s linear infinite;
}
@keyframes cr-mod-girar { to { transform: rotate(360deg); } }

/* Card estreito (grade de "Ativar Módulos" e telas pequenas): empilhado,
   porque dois botões lado a lado ali viram duas colunas de texto quebrado.
   Empilhado, o min-width de conteúdo sai de cena — senão um rótulo longo
   estoura a largura do card. */
.cr-mod-acoes--pagina .cr-mod-botoes { flex-direction: column; }
.cr-mod-acoes--pagina .cr-mod-btn { min-width: 0; }

/* Cards do dashboard (e o agente de IA dentro deles): seis cards por
   fileira não comportam dois botões lado a lado — empilhados, cada card
   virava uma torre de botões. Aqui a principal ocupa a largura toda e,
   embaixo dela, preço à esquerda e a ação secundária como link à direita.
   Preço embaixo (e não em cima) pra o botão principal ficar na mesma
   altura em todos os cards, tenham eles preço ou não. */
.cr-mod-acoes--dashboard,
.cr-mod-acoes--agente {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
}
.cr-mod-acoes--dashboard .cr-mod-botoes,
.cr-mod-acoes--agente .cr-mod-botoes { display: contents; }
.cr-mod-acoes--dashboard .cr-mod-btn,
.cr-mod-acoes--agente .cr-mod-btn { min-width: 0; }
.cr-mod-acoes--dashboard .cr-mod-btn--principal,
.cr-mod-acoes--agente .cr-mod-btn--principal { grid-column: 1 / -1; grid-row: 1; }
.cr-mod-acoes--dashboard .cr-mod-preco,
.cr-mod-acoes--agente .cr-mod-preco { grid-column: 1; grid-row: 2; line-height: 1.3; }
.cr-mod-acoes--dashboard .cr-mod-btn--sutil,
.cr-mod-acoes--agente .cr-mod-btn--sutil {
    grid-column: 2; grid-row: 2;
    justify-self: end;
    gap: 4px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--primary, #3f502e);
    font-size: .76rem;
    white-space: nowrap;
}
.cr-mod-acoes--dashboard .cr-mod-btn--sutil::after,
.cr-mod-acoes--agente .cr-mod-btn--sutil::after { content: "\2192"; }
.cr-mod-acoes--dashboard .cr-mod-btn--sutil:hover,
.cr-mod-acoes--dashboard .cr-mod-btn--sutil:focus-visible,
.cr-mod-acoes--agente .cr-mod-btn--sutil:hover,
.cr-mod-acoes--agente .cr-mod-btn--sutil:focus-visible {
    background: none;
    color: var(--primary-hover, #354426);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cr-mod-acoes--dashboard .cr-mod-aviso,
.cr-mod-acoes--agente .cr-mod-aviso { grid-column: 1 / -1; }

/* Agente de IA aninhado no card do módulo: mesmo desenho, um degrau
   menor, pra não competir com a ação do módulo que o contém. */
.cr-mod-acoes--agente .cr-mod-btn--principal {
    padding: 8px 12px;
    font-size: .76rem;
}
.cr-mod-acoes--agente .cr-mod-preco { font-size: .72rem; }
.cr-mod-acoes--agente .cr-mod-btn--sutil { font-size: .72rem; }

@media (max-width: 560px) {
    .cr-mod-botoes { flex-direction: column; }
    .cr-mod-btn { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-mod-btn { transition: none; }
    .cr-mod-spinner { animation-duration: 2s; }
}