/* ============================================================================
   FLUS WEB BRAND 1.1.1
   Identidad oficial violeta de FLUS Web.
   IMPORTANTE: verde se conserva para estados semánticos de éxito/OK.
============================================================================ */

:root {
  --flus-brand: #7c3aed;
  --flus-brand-dark: #4c1d95;
  --flus-brand-deep: #2e1065;
  --flus-brand-light: #a78bfa;
  --flus-brand-soft: #c4b5fd;
  --flus-brand-rgb: 124, 58, 237;
}

body.flus-web-edition,
body.page-login {
  --accent: var(--flus-brand);
  --accent-cyan: #8b5cf6;
  --accent-blue: #7c3aed;
  --nav-logo-color: #7c3aed;
  --nav-pill-active-bg: linear-gradient(135deg, #6d28d9, #a855f7);
  --nav-pill-active-text: #ffffff;
  --nav-icon-active-border: rgba(124, 58, 237, 0.52);
  --nav-icon-active-shadow: 0 10px 30px rgba(124, 58, 237, 0.20);
  --btn-primary-bg: linear-gradient(135deg, #6d28d9, #9333ea);
  --btn-primary-text: #ffffff;
  --table-row-hover: rgba(124, 58, 237, 0.08);
}

body[data-theme="dark"].flus-web-edition,
body[data-theme="dark"].page-login {
  --accent-cyan: #a78bfa;
  --accent-blue: #8b5cf6;
  --nav-logo-color: #c4b5fd;
  --nav-pill-active-bg: linear-gradient(135deg, #7c3aed, #a855f7);
  --nav-pill-active-text: #ffffff;
  --nav-icon-active-border: rgba(167, 139, 250, 0.58);
  --nav-icon-active-shadow: 0 10px 30px rgba(124, 58, 237, 0.26);
  --btn-primary-bg: linear-gradient(135deg, #7c3aed, #a855f7);
  --btn-primary-text: #ffffff;
  --table-row-hover: rgba(167, 139, 250, 0.10);
}

/* Marca y navegación */
body.flus-web-edition .nav-logo {
  background: linear-gradient(135deg, #7c3aed 5%, #a855f7 52%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

body.flus-web-edition .nav-brand:hover .nav-logo {
  color: transparent;
  filter: brightness(1.12);
}

body.flus-web-edition .nav-vender,
body.flus-web-edition .nav-avatar {
  background: linear-gradient(135deg, #6d28d9, #a855f7);
}

body.flus-web-edition .nav-vender {
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24);
}

body.flus-web-edition .nav-vender:hover {
  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.32);
}

body.flus-web-edition .nav-vender.active {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.34), 0 14px 30px rgba(124, 58, 237, 0.26);
}

/* Página de inicio: la tarjeta principal representa la marca, no estado OK */
body.flus-web-edition.page-index .index-card-primary,
body.flus-web-edition .page-index .index-card-primary {
  background: linear-gradient(145deg, #7c3aed 0%, #5b21b6 55%, #17172b 100%);
  border-color: rgba(167, 139, 250, 0.62);
  box-shadow: 0 16px 36px rgba(91, 33, 182, 0.26);
}

body.flus-web-edition.page-index .index-card-primary .card-title,
body.flus-web-edition.page-index .index-card-primary .card-desc,
body.flus-web-edition.page-index .index-card-primary .card-icon,
body.flus-web-edition .page-index .index-card-primary .card-title,
body.flus-web-edition .page-index .index-card-primary .card-desc,
body.flus-web-edition .page-index .index-card-primary .card-icon {
  color: #f5f3ff;
}

body.flus-web-edition.page-index .index-card-primary .card-tag,
body.flus-web-edition .page-index .index-card-primary .card-tag {
  color: #ddd6fe;
}

body.flus-web-edition.page-index .index-card-primary::after,
body.flus-web-edition .page-index .index-card-primary::after {
  background: linear-gradient(90deg, rgba(221, 214, 254, 0.95), rgba(221, 214, 254, 0));
}

body.flus-web-edition .index-card::after {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.80), rgba(124, 58, 237, 0));
}

/* LOGIN: mismo logo oficial, nueva paleta FLUS Web */
body.page-login {
  background:
    radial-gradient(circle at 20% 5%, rgba(124, 58, 237, 0.30), transparent 36%),
    radial-gradient(circle at 85% 82%, rgba(168, 85, 247, 0.20), transparent 38%),
    linear-gradient(145deg, #0b0715 0%, #171027 48%, #0b0715 100%) !important;
}

body.page-login .login-card {
  border-color: rgba(167, 139, 250, 0.18);
  background: linear-gradient(180deg, rgba(31, 24, 48, 0.96), rgba(17, 13, 29, 0.98));
  box-shadow: 0 28px 80px rgba(12, 7, 24, 0.62), 0 0 0 1px rgba(124, 58, 237, 0.04);
}

body.page-login .login-logo .logo-sistema {
  filter: drop-shadow(0 14px 30px rgba(124, 58, 237, 0.30));
}

body.page-login .login-logo:hover .logo-sistema {
  filter: drop-shadow(0 0 22px rgba(167, 139, 250, 0.48));
}

body.page-login .login-logo:active .logo-sistema {
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.58));
}

body.page-login .login-form input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16), 0 8px 20px rgba(8, 5, 18, 0.70);
}

body.page-login .btn-primary {
  background: linear-gradient(90deg, #6d28d9, #9333ea) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.20);
}

body.page-login .btn-primary:hover {
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.38);
}

body.page-login .login-brand-edition {
  color: #a78bfa;
}

/* PWA / controles de instalación que usan primary */
body.flus-web-edition {
  --primary: #7c3aed;
}

/* Accesibilidad: foco visible consistente con la identidad */
body.flus-web-edition :where(a, button, input, select, textarea):focus-visible,
body.page-login :where(a, button, input, select, textarea):focus-visible {
  outline-color: #a78bfa;
}