/* ============================================================================
   12) ★ EFECTOS CABRONES ★ — capa de "muy cabrón"
   ----------------------------------------------------------------------------
   Set de utilidades visuales que se pueden aplicar a cualquier elemento.
   Ninguna es obligatoria — se opt-in con clases. Pensadas para no molestar
   en uso prolongado: animaciones lentas, glows opacos, efectos sutiles.
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────────────────
   12.1) MESH GRADIENT ORBS — fondo animado
   ----------------------------------------------------------------------------
   Uso: <div class="abk-orbs"></div> como primer hijo del shell o de un hero.
   Posición absoluta, no captura clicks, fija al viewport.
   ──────────────────────────────────────────────────────────────────────────── */
.abk-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.abk-orbs::before,
.abk-orbs::after,
.abk-orbs > .abk-orb {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  /* LIGHT default: muy contained — apenas un hint de color en el fondo */
  opacity: .14;
}
html[data-theme="dark"] .abk-orbs::before,
html[data-theme="dark"] .abk-orbs::after,
html[data-theme="dark"] .abk-orbs > .abk-orb {
  /* DARK: orbs vivos contra noir */
  opacity: .55;
}
.abk-orbs::before {
  width: 60vmax; height: 60vmax;
  background: radial-gradient(circle, var(--abk-primary-glow), transparent 70%);
  top: -25%; left: -15%;
  animation: abk-drift1 28s ease-in-out infinite;
}
.abk-orbs::after {
  width: 50vmax; height: 50vmax;
  background: radial-gradient(circle, var(--abk-accent-glow), transparent 70%);
  bottom: -20%; right: -10%;
  animation: abk-drift2 36s ease-in-out infinite;
}
.abk-orbs > .abk-orb {
  width: 40vmax; height: 40vmax;
  background: radial-gradient(circle, rgba(168,85,247,.20), transparent 70%);
  top: 30%; left: 50%;
  animation: abk-drift3 44s ease-in-out infinite;
}
@keyframes abk-drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(8vw, 6vh) scale(1.1); }
}
@keyframes abk-drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-10vw, -5vh) scale(1.15); }
}
@keyframes abk-drift3 {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  33%     { transform: translate(-30%,-60%) scale(1.1); }
  66%     { transform: translate(-70%,-40%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .abk-orbs::before,
  .abk-orbs::after,
  .abk-orbs > .abk-orb { animation: none !important; }
}

/* Los orbs son identidad EXCLUSIVA de Cosmic Blue (tema base, sin atributo
   data-abk-variant). Cualquier variante activa (aurora/nebula/ember/pearl/
   galaxy/… y cualquier tema futuro) los apaga: el contenedor entero deja de
   renderizar/animar. Robusto por diseño: un tema nuevo trae su data-abk-variant
   → sin orbs, sin tener que tocar nada aquí. */
html[data-abk-variant] .abk-orbs { display: none; }

/* ────────────────────────────────────────────────────────────────────────────
   12.2) GLASSMORPHISM
   ----------------------------------------------------------------------------
   Aplica a cualquier card/panel: <div class="abk-card abk-glass">...</div>
   Backdrop-blur real + transparencia + borde gradient sutil.
   ──────────────────────────────────────────────────────────────────────────── */
.abk-glass {
  background: var(--abk-glass-bg) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--abk-glass-border) !important;
  box-shadow:
    var(--abk-shadow-2),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.abk-glass-strong {
  background: var(--abk-glass-bg) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--abk-glass-border) !important;
  position: relative;
  overflow: hidden;
}
/* Borde con gradient interior para .abk-glass-strong */
.abk-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(168,85,247,.50),
    rgba(167,139,250,.20) 40%,
    transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   12.3) GRADIENT TEXT — para H1/H2 destacados
   ----------------------------------------------------------------------------
   Uso: <h1 class="abk-h1 abk-gradient-text">Bienvenido</h1>
   ──────────────────────────────────────────────────────────────────────────── */
.abk-gradient-text {
  /* LIGHT default: SÓLIDO violet-900 — máxima legibilidad sobre blanco.
     El gradient solo se activa en DARK donde sí se lee bien. */
  color: #4c1d95;
  font-weight: 800;
}
html[data-theme="dark"] .abk-gradient-text {
  background: var(--abk-grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: abk-gradient-shift 8s ease-in-out infinite;
  display: inline-block;
}
@keyframes abk-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .abk-gradient-text { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   12.4) BOTÓN PRIMARIO — gradient + shine sweep on hover + glow
   ----------------------------------------------------------------------------
   Override del .abk-btn--primary base. Mantiene el API.
   ──────────────────────────────────────────────────────────────────────────── */
.abk-btn--primary {
  /* LIGHT default: violet sólido (color marca). En dark, gradient. */
  background: var(--abk-primary);
  border-color: var(--abk-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px var(--abk-primary-glow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html[data-theme="dark"] .abk-btn--primary {
  background: var(--abk-grad-primary);
  border-color: transparent;
  box-shadow:
    0 4px 14px var(--abk-primary-glow),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.abk-btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform .6s var(--abk-ease);
  z-index: 0;
}
.abk-btn--primary > * { position: relative; z-index: 1; }
.abk-btn--primary:hover {
  background: var(--abk-primary-2);                  /* sólido más oscuro */
  border-color: var(--abk-primary-2);
  box-shadow: 0 4px 14px var(--abk-primary-glow);
  transform: translateY(-1px);
}
html[data-theme="dark"] .abk-btn--primary:hover {
  background: linear-gradient(135deg, var(--abk-primary-3) 0%, var(--abk-primary) 100%);
  box-shadow:
    0 6px 24px var(--abk-primary-glow),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 32px var(--abk-primary-glow);
}
.abk-btn--primary:hover::before { transform: translateX(100%); }
.abk-btn--primary:active { transform: translateY(0) scale(.98); }

html[data-theme="dark"] .abk-btn--primary {
  box-shadow:
    0 4px 18px var(--abk-primary-glow),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

/* ────────────────────────────────────────────────────────────────────────────
   12.5) FOCUS RING ANIMADO — para inputs y botones
   ----------------------------------------------------------------------------
   Override del :focus-visible de los componentes globales.
   ──────────────────────────────────────────────────────────────────────────── */
.abk-input:focus,
.abk-select:focus,
.abk-textarea:focus,
.abk-btn:focus-visible {
  box-shadow:
    var(--abk-shadow-focus),
    0 0 16px var(--abk-primary-glow);
}

/* ────────────────────────────────────────────────────────────────────────────
   12.6) SOMBRA COLOREADA + LIFT en CARDS
   ----------------------------------------------------------------------------
   Hover en cualquier .abk-card: lift sutil + sombra tinted.
   ──────────────────────────────────────────────────────────────────────────── */
.abk-card {
  transition: transform var(--abk-transition), box-shadow var(--abk-transition), border-color var(--abk-transition);
}
.abk-card:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--abk-shadow-3),
    0 12px 40px var(--abk-primary-glow);
  border-color: var(--abk-border-strong);
}

/* ────────────────────────────────────────────────────────────────────────────
   12.7) MODAL con BACKDROP BLUR REAL + ENTRADA SUAVE
   ----------------------------------------------------------------------------
   Override del .abk-modal__overlay.
   ──────────────────────────────────────────────────────────────────────────── */
.abk-modal__overlay {
  background: var(--abk-surface-overlay);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.abk-modal__dialog {
  box-shadow:
    var(--abk-shadow-modal),
    0 0 0 1px var(--abk-border-section) inset;
}

/* ────────────────────────────────────────────────────────────────────────────
   12.8) BADGES y PILLS con GLOW
   ----------------------------------------------------------------------------
   Override de los .abk-pill--ok/warn/err con sombra teñida sutil.
   ──────────────────────────────────────────────────────────────────────────── */
.abk-pill--ok    { box-shadow: 0 0 0 1px var(--abk-ok-bg), 0 0 12px var(--abk-ok-glow); }
.abk-pill--warn  { box-shadow: 0 0 0 1px var(--abk-warn-bg), 0 0 12px var(--abk-warn-glow); }
.abk-pill--err   { box-shadow: 0 0 0 1px var(--abk-err-bg), 0 0 12px var(--abk-err-glow); }

/* ────────────────────────────────────────────────────────────────────────────
   12.9) STATUS DOT pulsante (para servicios/online)
   ----------------------------------------------------------------------------
   Uso: <span class="abk-dot abk-dot--ok"></span>
   ──────────────────────────────────────────────────────────────────────────── */
.abk-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--abk-text-muted);
  flex-shrink: 0;
}
.abk-dot--ok   { background: var(--abk-ok-strong);   box-shadow: 0 0 0 0 var(--abk-ok-glow);   animation: abk-pulse-ok 2s ease-in-out infinite; }
.abk-dot--warn { background: var(--abk-warn-strong); box-shadow: 0 0 0 0 var(--abk-warn-glow); animation: abk-pulse-warn 2s ease-in-out infinite; }
.abk-dot--err  { background: var(--abk-err-strong);  box-shadow: 0 0 0 0 var(--abk-err-glow);  animation: abk-pulse-err 1.4s ease-in-out infinite; }
@keyframes abk-pulse-ok   { 0% { box-shadow: 0 0 0 0 var(--abk-ok-glow);   } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes abk-pulse-warn { 0% { box-shadow: 0 0 0 0 var(--abk-warn-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes abk-pulse-err  { 0% { box-shadow: 0 0 0 0 var(--abk-err-glow);  } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .abk-dot--ok, .abk-dot--warn, .abk-dot--err { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   12.10) SKELETON SHIMMER — placeholder de carga
   ----------------------------------------------------------------------------
   Uso: <div class="abk-skel" style="width:200px;height:18px"></div>
   ──────────────────────────────────────────────────────────────────────────── */
.abk-skel {
  background: linear-gradient(90deg,
    var(--abk-surface-2) 0%,
    var(--abk-bg-2) 50%,
    var(--abk-surface-2) 100%);
  background-size: 200% 100%;
  animation: abk-shimmer 1.4s linear infinite;
  border-radius: var(--abk-radius-sm);
  color: transparent;
}
html[data-theme="dark"] .abk-skel {
  background: linear-gradient(90deg,
    rgba(168,85,247,.06) 0%,
    rgba(168,85,247,.16) 50%,
    rgba(168,85,247,.06) 100%);
  background-size: 200% 100%;
}
@keyframes abk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .abk-skel { animation: none; background: var(--abk-surface-2); }
}

/* ────────────────────────────────────────────────────────────────────────────
   12.11) SCROLLBAR custom — slim + tinted
   ----------------------------------------------------------------------------
   Aplica globalmente. Si quieres scrollbar normal en algún elemento, agrega
   .abk-scroll-default a su contenedor.
   ──────────────────────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--abk-primary) transparent;
}
*::-webkit-scrollbar           { width: 10px; height: 10px; }
*::-webkit-scrollbar-track     { background: transparent; }
*::-webkit-scrollbar-thumb     {
  background: linear-gradient(180deg, var(--abk-primary) 0%, var(--abk-primary-2) 100%);
  border-radius: var(--abk-radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--abk-primary-3) 0%, var(--abk-primary) 100%);
  background-clip: padding-box;
}
.abk-scroll-default,
.abk-scroll-default * {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

/* ────────────────────────────────────────────────────────────────────────────
   12.12) SHELL CHROMA — el shell (sidebar/header) con glow ambiente
   ----------------------------------------------------------------------------
   El sidebar y el header tienen un glow de borde fucsia muy sutil para
   integrarlos con el resto de la paleta.
   ──────────────────────────────────────────────────────────────────────────── */
body {
  position: relative;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 0% 100%, var(--abk-primary-glow), transparent 60%),
    radial-gradient(600px 300px at 100% 0%, var(--abk-accent-glow), transparent 60%);
  opacity: .05;                      /* LIGHT: muy contained */
  z-index: 0;
  mix-blend-mode: multiply;          /* multiply va mejor sobre blanco */
}
/* Asegura que TODO el contenido quede sobre los efectos */
.main-content,
.main-header,
.sidebar,
.status-strip { position: relative; z-index: 1; }
html[data-theme="dark"] body::after {
  /* En DARK: APAGADO totalmente — el glow morado/violet tintaba el body
     y el user lo quería neutro. Cero glow. */
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   12.13) NEÓN UTIL — para títulos/elementos que deben pegar
   ----------------------------------------------------------------------------
   Uso: <span class="abk-neon">CABRÓN</span>
   ──────────────────────────────────────────────────────────────────────────── */
.abk-neon {
  color: var(--abk-primary-3);
  text-shadow:
    0 0 8px var(--abk-primary-glow),
    0 0 24px var(--abk-primary-glow),
    0 0 48px var(--abk-accent-glow);
}
html[data-theme="dark"] .abk-neon {
  text-shadow:
    0 0 12px var(--abk-primary-glow),
    0 0 32px var(--abk-primary-glow),
    0 0 64px var(--abk-accent-glow);
}

/* ============================================================================
   ★ DETALLITOS COOL ★
   ----------------------------------------------------------------------------
   Microdetalles que dan personalidad sin estorbar.
   ============================================================================ */

/* ─── ::selection custom (cuando seleccionas texto) ─── */
::selection {
  background: var(--abk-primary-glow);
  color: var(--abk-text);
  text-shadow: 0 0 8px var(--abk-primary-glow);
}
html[data-theme="dark"] ::selection {
  color: #ffffff;
}

/* ─── caret-color en inputs ─── */
.abk-input,
.abk-textarea,
input,
textarea {
  caret-color: var(--abk-primary);
}

/* ─── Links inline (.abk-link) con underline animado ───
   Uso: <a class="abk-link" href="…">texto</a>
   ─────────────────────────────────────────────────── */
.abk-link {
  color: var(--abk-text-link);
  text-decoration: none;
  position: relative;
  font-weight: 600;
  transition: color .2s var(--abk-ease);
}
.abk-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--abk-grad-primary);
  border-radius: var(--abk-radius-pill);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--abk-ease);
}
.abk-link:hover {
  color: var(--abk-primary);
}
.abk-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─── Pink touch sutil en hover de cards y badges (sólo tema cosmic-blue) ─── */
:root .abk-card:hover,
html[data-abk-theme="cosmic-blue"] .abk-card:hover,
html:not([data-abk-theme]) .abk-card:hover {
  border-color: var(--abk-pink, var(--abk-border-strong));
  box-shadow:
    var(--abk-shadow-3),
    0 12px 40px var(--abk-primary-glow),
    0 0 24px var(--abk-pink-glow, transparent);
}

/* ─── Botón con tinte rosa secundario (.abk-btn--accent-pink) ─── */
.abk-btn--accent-pink {
  background: linear-gradient(135deg, var(--abk-pink, var(--abk-primary-3)) 0%, var(--abk-primary) 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px var(--abk-pink-glow, var(--abk-primary-glow));
}

/* ─── Cursor flecha custom para .abk-pointer ─── */
.abk-pointer { cursor: pointer; }

/* ─── Theme switcher (control en el header) ─── */
.abk-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--abk-radius-sm);
}
.abk-theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s var(--abk-ease), border-color .15s;
  flex-shrink: 0;
  position: relative;
}
.abk-theme-swatch:hover { transform: scale(1.12); }
.abk-theme-swatch.is-active {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 12px currentColor;
}
.abk-theme-swatch[data-theme-name="cosmic-blue"]    { background: linear-gradient(135deg, #a855f7, #f472b6); color: #a855f7; }
.abk-theme-swatch[data-theme-name="bluemonster"] { background: linear-gradient(135deg, #2563eb, #06b6d4); color: #2563eb; }
.abk-theme-swatch[data-theme-name="emerald"]     { background: linear-gradient(135deg, #10b981, #f59e0b); color: #10b981; }

/* ─── Login: fondo "color" vs "blanco" ─────────────────────────────────────
   IMPORTANTE: solo cambia el BACKGROUND del body (el lienzo detrás del modal).
   El modal del login (.login-box) se queda IGUAL — deep purple glassmorphism
   con texto claro. La caja queda visible/atractiva sobre lavanda clara
   gracias a su sombra y borde violet. */
body.abk-login-bg-light {
  background: #fafaff !important;
}
body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.10), transparent 60%) !important;
}
/* Bumpeamos un poco la sombra del login-box para que destaque sobre fondo
   claro (mismo modal, solo más "lifted") */
body.abk-login-bg-light .login-box {
  box-shadow:
    0 30px 80px rgba(50,30,120,.30),
    0 8px 30px rgba(109,40,217,.25),
    0 0 0 1px rgba(168,85,247,.22) inset !important;
}

/* (Removido: el toggle flotante .abk-login-bg-toggle. La preferencia ahora
    se controla server-side desde el módulo Temas → Pantalla de login.) */

/* ─── Login: respiración suave del logo ─── */
.login-box .logo {
  animation: abk-breathe 4s ease-in-out infinite;
}
@keyframes abk-breathe {
  0%, 100% {
    filter: drop-shadow(0 2px 12px rgba(168,85,247,.30));
    transform: scale(1);
  }
  50%      {
    filter: drop-shadow(0 4px 20px rgba(34,211,238,.30));
    transform: scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-box .logo { animation: none; }
}

/* ============================================================================
   14) NOTAS DE COMPATIBILIDAD
   ============================================================================
   - Los tokens legacy --main-bg, --header-bg, --theme-* y los antiguos
     --abaku-* (renombrados a --abk-*) viven en dashboard.css y APUNTAN a los
     tokens --abk-* de aquí. No agregar nuevos tokens en dashboard.css.
   - Cuando un módulo se refactoriza, debe quitar sus alias y usar --abk-*
     directamente.
   - El sistema de TEMAS (data-abk-theme) es ortogonal al de modo (data-theme):
     puedes combinar bluemonster + dark, cosmic-blue + light, etc.
   ============================================================================ */