/* ==================================================================
   Tema Moontra Coffee: los dos colores de Empresa (primario y acento)
   con degradados. Se carga después de app.css. Los colores salen de
   --brand-primary y --brand-accent, que base.html arma desde Empresa.
   ================================================================== */
:root {
  --mt-1: var(--brand-primary, #fc3f00);
  --mt-2: var(--brand-accent, #303030);
  --mt-grad: linear-gradient(135deg, var(--mt-1) 0%, var(--mt-2) 100%);
  --mt-grad-hover: linear-gradient(135deg, color-mix(in srgb, var(--mt-1) 88%, white) 0%, color-mix(in srgb, var(--mt-2) 85%, white) 100%);
  --mt-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--mt-1) 12%, white) 0%, color-mix(in srgb, var(--mt-2) 10%, white) 100%);
  --mt-tint: color-mix(in srgb, var(--mt-1) 10%, white);

}

/* ── Botones principales: degradado ─────────────────────────────── */
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background: var(--mt-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--mt-1) 55%, transparent);
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--mt-grad-hover) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--mt-1) 60%, transparent);
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-primary[disabled] { opacity: .55; box-shadow: none; }



/* ── Pestañas internas activas (Ventas, Empresa, Inventario, CRM…) ─ */
.ventas-tab.is-active, .empresa-tab.is-active, .inventario-tab.is-active,
.productos-tab.is-active, .fabrica-tab.is-active, .crm-tab.is-active,
.pm-tab.is-active, .gp-tab.is-active {
  background: var(--mt-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.ventas-tab.is-active svg, .empresa-tab.is-active svg, .inventario-tab.is-active svg,
.productos-tab.is-active svg, .fabrica-tab.is-active svg, .crm-tab.is-active svg { color: #fff; stroke: #fff; }

/* ── Menú lateral ───────────────────────────────────────────────── */
.vnav-item.is-active {
  background: var(--mt-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--mt-1) 60%, transparent);
}
.vnav-item.is-active svg { opacity: 1; }
.vnav-item:not(.is-active):not(.is-soon):hover { background: var(--mt-tint) !important; }
.vnav-group.has-active .vnav-head { color: var(--mt-1); }
.vnav { border-right: 0; box-shadow: inset -1px 0 0 #ececec; }
.vnav::before {               /* filo de marca a la izquierda */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mt-grad);
}
.vnav-toggle:hover { border-color: color-mix(in srgb, var(--mt-1) 40%, white); }

/* Barra superior: línea de marca */
.app-topbar { border-bottom: 0 !important; box-shadow: 0 1px 0 #ececec; }
.app-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--mt-grad);
}
.app-user-avatar, .ts-avatar { background: var(--mt-grad) !important; color: #fff !important; }

/* ── Paneles con encabezado de color ────────────────────────────── */
.pv-hero {
  background: var(--mt-grad-soft) !important;
  border-color: color-mix(in srgb, var(--mt-1) 22%, white) !important;
}
.pv-export { background: var(--mt-grad) !important; border-color: transparent !important; }

/* ── Chips y filtros activos ────────────────────────────────────── */
.cat-pill[data-active="true"], .cat-pill.is-active,
.date-chip.active, .vel-chip.active, .ads-chip.active, .wa-stage-chip.active {
  background: var(--mt-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Insignias y foco */
.badge-primary, .badge-brand { background: var(--mt-grad) !important; color: #fff !important; }
input:focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--mt-1) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-1) 18%, transparent) !important;
  outline: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--mt-1); }

/* Catálogo público: buscador y botones de compra */
.cat-search-input:focus { border-color: var(--mt-1) !important; }
.cat-card .btn, .cat-add-btn, .btn-add-cart { background: var(--mt-grad) !important; color: #fff !important; border-color: transparent !important; }

/* Pestañas activas genéricas (.tabs) y otros fondos que usaban el azul heredado */
.tabs a.is-active, .tabs button.is-active {
  background: var(--mt-grad) !important;
  color: #fff !important;
}
.img-tile.is-primary, .detail-thumbs .detail-thumb.is-active { border-color: var(--mt-1) !important; }