/* ==========================================================================
   BOTOES DE ACAO TEMATICOS
   --------------------------------------------------------------------------
   Camada final para padronizar botoes de comando sem afetar switches,
   radios segmentados, toggles, menus ou controles de selecao.
   ========================================================================== */

:root {
  --vm-button-blue-from: #2563eb;
  --vm-button-blue-to: #38bdf8;
  --vm-button-blue-shadow: rgba(37, 99, 235, 0.28);
  --vm-button-green-from: #16a34a;
  --vm-button-green-to: #22c55e;
  --vm-button-green-shadow: rgba(22, 163, 74, 0.28);
  --vm-button-violet-from: #7c3aed;
  --vm-button-violet-to: #a855f7;
  --vm-button-violet-shadow: rgba(124, 58, 237, 0.28);
  --vm-button-dark-from: #475569;
  --vm-button-dark-to: #0f172a;
  --vm-button-dark-shadow: rgba(15, 23, 42, 0.22);
  --vm-button-teal-from: #0c9488;
  --vm-button-teal-to: #0a7268;
  --vm-button-teal-shadow: rgba(0, 75, 68, 0.28);
}

body {
  --vm-action-button-from: var(--vm-button-blue-from);
  --vm-action-button-to: var(--vm-button-blue-to);
  --vm-action-button-shadow: var(--vm-button-blue-shadow);
}

/* Páginas com hero teal: botões primários (Editar/Confirmar/Filtrar/btn-modern)
   usam teal em vez do azul padrão. Azul fica reservado ao consignado. */
body:has(.page-titlebar-teal) {
  --vm-action-button-from: var(--vm-button-teal-from);
  --vm-action-button-to: var(--vm-button-teal-to);
  --vm-action-button-shadow: var(--vm-button-teal-shadow);
}

.page-titlebar-green,
.bolinhas-form-shell,
.bolinhas-list-shell,
.bolinhas-view-shell,
.bolinhas-control-shell,
.bolinha-products-shell {
  --vm-action-button-from: var(--vm-button-green-from);
  --vm-action-button-to: var(--vm-button-green-to);
  --vm-action-button-shadow: var(--vm-button-green-shadow);
}

.page-titlebar-violet,
.commercial-page--pelucias,
.pelucias-form-shell,
.pelucias-list-shell,
.pelucias-view-shell,
.pelucias-control-shell,
.pelucia-products-shell {
  --vm-action-button-from: var(--vm-button-violet-from);
  --vm-action-button-to: var(--vm-button-violet-to);
  --vm-action-button-shadow: var(--vm-button-violet-shadow);
}

.page-titlebar-blue,
.consignados-form-shell,
.consignados-list-shell,
.consignados-view-shell,
.consignados-control-shell,
.consignado-products-shell {
  --vm-action-button-from: var(--vm-button-blue-from);
  --vm-action-button-to: var(--vm-button-blue-to);
  --vm-action-button-shadow: var(--vm-button-blue-shadow);
}

.page-titlebar-neutral,
.form-page-body,
.list-page-body,
.form-shell-modern,
.list-shell {
  --vm-neutral-button-from: var(--vm-button-dark-from);
  --vm-neutral-button-to: var(--vm-button-dark-to);
  --vm-neutral-button-shadow: var(--vm-button-dark-shadow);
}

:is(
  .btn-modern,
  .list-action,
  .btn-filter-apply,
  .table-btn-save,
  .table-btn-pay,
  .table-btn-edit,
  .table-btn-activate,
  .cookie-btn-primary,
  .commercial-btn-primary,
  .demo-btn-primary,
  .pricing-btn-primary,
  .privacy-btn-primary,
  .homepage-body .btn-primary,
  .btn.btn-primary
) {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(
    135deg,
    var(--vm-action-button-from) 0%,
    var(--vm-action-button-to) 100%
  ) !important;
  box-shadow: 0 15px 30px var(--vm-action-button-shadow) !important;
}

:is(
  .btn-modern,
  .list-action,
  .btn-filter-apply,
  .table-btn-save,
  .table-btn-pay,
  .table-btn-edit,
  .table-btn-activate,
  .cookie-btn-primary,
  .commercial-btn-primary,
  .demo-btn-primary,
  .pricing-btn-primary,
  .privacy-btn-primary,
  .homepage-body .btn-primary,
  .btn.btn-primary
):hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px var(--vm-action-button-shadow) !important;
}

:is(
  .btn-modern,
  .list-action,
  .btn-filter-apply,
  .table-btn-save,
  .table-btn-pay,
  .table-btn-edit,
  .table-btn-activate,
  .cookie-btn-primary,
  .commercial-btn-primary,
  .demo-btn-primary,
  .pricing-btn-primary,
  .privacy-btn-primary,
  .homepage-body .btn-primary,
  .btn.btn-primary
):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vm-action-button-to) 34%, transparent);
  outline-offset: 3px;
}

:is(
  .btn-modern,
  .list-action,
  .btn-filter-apply,
  .table-btn-save,
  .table-btn-pay,
  .table-btn-edit,
  .table-btn-activate,
  .cookie-btn-primary,
  .commercial-btn-primary,
  .demo-btn-primary,
  .pricing-btn-primary,
  .privacy-btn-primary,
  .homepage-body .btn-primary,
  .btn.btn-primary
):disabled,
:is(
  .btn-modern,
  .list-action,
  .btn-filter-apply,
  .table-btn-save,
  .table-btn-pay,
  .table-btn-edit,
  .table-btn-activate,
  .cookie-btn-primary,
  .commercial-btn-primary,
  .demo-btn-primary,
  .pricing-btn-primary,
  .privacy-btn-primary,
  .homepage-body .btn-primary,
  .btn.btn-primary
)[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
  box-shadow: none !important;
}

:is(
  .btn-modern-secondary,
  .btn-filter-reset,
  .table-btn-view,
  .table-btn-pause,
  .cookie-btn-secondary,
  .commercial-btn-secondary,
  .demo-btn-secondary,
  .pricing-btn-secondary,
  .privacy-btn-secondary,
  .btn.btn-dark,
  .btn.btn-secondary
) {
  color: #334155 !important;
  border: 0 !important;
  background: linear-gradient(
    135deg,
    #f8fafc 0%,
    #e2e8f0 100%
  ) !important;
  box-shadow: 0 8px 18px rgba(51, 65, 85, 0.14) !important;
}

:is(
  .btn-modern-secondary,
  .btn-filter-reset,
  .table-btn-view,
  .table-btn-pause,
  .cookie-btn-secondary,
  .commercial-btn-secondary,
  .demo-btn-secondary,
  .pricing-btn-secondary,
  .privacy-btn-secondary,
  .btn.btn-dark,
  .btn.btn-secondary
):hover {
  color: #0f172a !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(51, 65, 85, 0.18) !important;
}

.btn-modern-danger,
.table-btn-delete,
.pelucia-product-remove-button,
.bolinha-product-remove-button,
.consignado-product-remove-button {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #dc2626 0%, #fb7185 100%) !important;
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22) !important;
}

.btn-modern-danger:hover,
.table-btn-delete:hover,
.pelucia-product-remove-button:hover,
.bolinha-product-remove-button:hover,
.consignado-product-remove-button:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(220, 38, 38, 0.28) !important;
}

.page-titlebar-green ~ .list-stage,
.page-titlebar-green ~ .form-stage {
  --vm-action-button-from: var(--vm-button-green-from);
  --vm-action-button-to: var(--vm-button-green-to);
  --vm-action-button-shadow: var(--vm-button-green-shadow);
}

.page-titlebar-violet ~ .list-stage,
.page-titlebar-violet ~ .form-stage {
  --vm-action-button-from: var(--vm-button-violet-from);
  --vm-action-button-to: var(--vm-button-violet-to);
  --vm-action-button-shadow: var(--vm-button-violet-shadow);
}

.page-titlebar-blue ~ .list-stage,
.page-titlebar-blue ~ .form-stage {
  --vm-action-button-from: var(--vm-button-blue-from);
  --vm-action-button-to: var(--vm-button-blue-to);
  --vm-action-button-shadow: var(--vm-button-blue-shadow);
}

.page-titlebar-neutral ~ .list-stage,
.page-titlebar-neutral ~ .form-stage {
  --vm-action-button-from: var(--vm-button-dark-from);
  --vm-action-button-to: var(--vm-button-dark-to);
  --vm-action-button-shadow: var(--vm-button-dark-shadow);
}

/* =========================================================================
   Paleta teal (Estabelecimentos / Financeiro / Rotas) e padronização de
   botões secundários de tabela. Este arquivo é o último a carregar, então
   estas regras vencem os estilos por página.
   ========================================================================= */

/* Botões secundários de tabela (Ver / Recibo / Pausar): verde-teal sólido
   da paleta (#5FA8A1 → #4A8F89, texto branco), no mesmo padrão preenchido
   dos demais botões de ação. Especificidade (0,3,0) para vencer overrides
   por página (ex.: lançamentos). */
.modern-table .table-actions .table-btn-view,
.modern-table .table-actions .table-btn-pause,
.modern-table .table-actions-launch .table-btn-view,
.modern-table .table-actions-launch .table-btn-pause,
.table-btn.table-btn-view,
.table-btn.table-btn-pause {
  color: #ffffff !important;
  background: linear-gradient(135deg, #5fa8a1 0%, #4a8f89 100%) !important;
  box-shadow: 0 10px 22px rgba(74, 143, 137, 0.26) !important;
}

.modern-table .table-actions .table-btn-view:hover,
.modern-table .table-actions .table-btn-pause:hover,
.modern-table .table-actions-launch .table-btn-view:hover,
.modern-table .table-actions-launch .table-btn-pause:hover,
.table-btn.table-btn-view:hover,
.table-btn.table-btn-pause:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #51988f 0%, #3f7d77 100%) !important;
  box-shadow: 0 14px 28px rgba(74, 143, 137, 0.32) !important;
}

/* Item 3 — CTA mint (#7fcac3) nas páginas teal: texto escuro inclusive no hover. */
body:has(.page-titlebar-teal) .list-action:not(.list-action-secondary),
body:has(.page-titlebar-teal) .list-action:not(.list-action-secondary):hover {
  color: #00302f !important;
  background: linear-gradient(135deg, #7fcac3 0%, #5fb6ae 100%) !important;
  border: 1px solid rgba(0, 75, 68, 0.18) !important;
}

/* Botões secundários (CSV/Importar) nas páginas teal — claro com texto teal. */
body:has(.page-titlebar-teal) .list-action-secondary,
body:has(.page-titlebar-teal) .list-action-secondary:hover {
  color: #0c4f48 !important;
  background: #eafaf7 !important;
  border: 1px solid rgba(0, 75, 68, 0.18) !important;
}

/* Secundários dentro do próprio hero teal ficam translúcidos. */
.page-titlebar-teal .list-action-secondary,
.page-titlebar-teal .list-action-secondary:hover {
  color: #eafaf7 !important;
  background: rgba(127, 202, 195, 0.18) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(127, 202, 195, 0.35) !important;
}

/* Item 1 — Footers de ação nas páginas teal acompanham o hero. */
body:has(.page-titlebar-teal) .form-actions-bar,
body:has(.page-titlebar-teal) .view-actions {
  background: linear-gradient(135deg, #00383f 0%, #004b44 100%) !important;
  box-shadow: 0 18px 35px rgba(0, 75, 68, 0.22) !important;
}

/* Produto: .view-actions nos visualizarDados usa fundo branco (igual ao form-actions-bar
   de produto) com botões coloridos por produto. Secundários ficam na cor do produto. */
body:has(.page-titlebar-green) .view-actions,
.bolinhas-view-shell .view-actions {
  background: linear-gradient(180deg, #ffffff 0%, #f4fdf6 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.22) !important;
  box-shadow: 0 14px 34px rgba(22, 163, 74, 0.1) !important;
}

body:has(.page-titlebar-violet) .view-actions,
.pelucias-view-shell .view-actions {
  background: linear-gradient(180deg, #ffffff 0%, #faf4ff 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.1) !important;
}

body:has(.page-titlebar-blue) .view-actions,
.consignados-view-shell .view-actions {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.1) !important;
}

/* Texto nos footers de produto: escuro sobre fundo claro. */
body:has(.page-titlebar-green) .view-actions .view-actions-copy strong,
body:has(.page-titlebar-violet) .view-actions .view-actions-copy strong,
body:has(.page-titlebar-blue) .view-actions .view-actions-copy strong {
  color: #0f172a !important;
}

body:has(.page-titlebar-green) .view-actions .view-actions-copy,
body:has(.page-titlebar-green) .view-actions .view-actions-copy span,
body:has(.page-titlebar-violet) .view-actions .view-actions-copy,
body:has(.page-titlebar-violet) .view-actions .view-actions-copy span,
body:has(.page-titlebar-blue) .view-actions .view-actions-copy,
body:has(.page-titlebar-blue) .view-actions .view-actions-copy span {
  color: #475569 !important;
}

/* Texto descritivo do footer teal — legível sobre o fundo escuro. */
body:has(.page-titlebar-teal) .form-actions-bar .form-actions-copy,
body:has(.page-titlebar-teal) .view-actions .view-actions-copy,
body:has(.page-titlebar-teal) .form-actions-bar .form-actions-copy span,
body:has(.page-titlebar-teal) .view-actions .view-actions-copy span {
  color: rgba(231, 248, 245, 0.82) !important;
}

body:has(.page-titlebar-teal) .form-actions-bar .form-actions-copy strong,
body:has(.page-titlebar-teal) .view-actions .view-actions-copy strong {
  color: #ffffff !important;
}

/* Botões do footer teal = brancos sólidos com texto escuro (mesmo padrão do
   cadastrar lançamentos — dois botões brancos sobre o fundo escuro). */
body:has(.page-titlebar-teal) .form-actions-bar .btn-modern,
body:has(.page-titlebar-teal) .view-actions .btn-modern,
body:has(.page-titlebar-teal) .form-actions-bar .btn-modern-secondary,
body:has(.page-titlebar-teal) .view-actions .btn-modern-secondary {
  color: #0f172a !important;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

body:has(.page-titlebar-teal) .form-actions-bar .btn-modern:hover,
body:has(.page-titlebar-teal) .view-actions .btn-modern:hover,
body:has(.page-titlebar-teal) .form-actions-bar .btn-modern-secondary:hover,
body:has(.page-titlebar-teal) .view-actions .btn-modern-secondary:hover {
  color: #0f172a !important;
  background: linear-gradient(135deg, #ffffff 0%, #e8eef6 100%) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22) !important;
}