/* ============================================================
   ORBIX SIGNATURE — firma visual UNIFICADA de todo el ecosistema
   (2026-07-21). La cargan Kyro, Nexus ERP, Axis, Landing y Panel
   → todas iguales, complementarias y con el mismo "wow", sin perder
   la esencia de cada una. Audaz pero elegante. Solo estética
   (fondo, profundidad, tipografía, detalles) — no toca estructura
   ni lógica. Respeta la paleta ORBIX elegida y reduced-motion.
   ============================================================ */

/* ── Tipografía más fina y nítida (todas las apps) ─────────────────── */
:root[data-orbix-theme] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}

/* ── LEGIBILIDAD EN COMPUTADOR — misma escala de letra en TODO el
   ecosistema (2026-07-22, reclamo Sebas: "un poco más grande, así todas").
   Casi todo usa rem → subir la raíz escala proporcional y parejo en Kyro,
   ERP, Tienda, Axis, landing y panel. `:root[data-orbix-theme]` gana por
   especificidad sobre cualquier `html{font-size}` propio. Móvil/tablet
   intactos (solo ≥1024px). ── */
@media (min-width: 1024px) { :root[data-orbix-theme] { font-size: 19px; } }
@media (min-width: 1600px) { :root[data-orbix-theme] { font-size: 20px; } }

/* ── MISMA TIPOGRAFÍA EN TODAS: Inter en todo el ecosistema.
   La Tienda usaba Plus Jakarta Sans/Space Grotesk vía su token `--font-main`;
   se re-apunta a Inter (var(--font-sans)) para que iguale a Kyro/ERP/Axis/…
   Las demás apps no usan `--font-main` → inofensivo para ellas. ── */
:root[data-orbix-theme] { --font-main: var(--font-sans, 'Inter', system-ui, sans-serif); }

/* ── FONDO VIVO: aurora que respira, detrás de todo el contenido ───── */
:root[data-orbix-theme] body::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 22%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%),
    radial-gradient(42% 42% at 84% 14%, color-mix(in srgb, var(--purple, var(--accent-2, var(--accent))) 20%, transparent), transparent 72%),
    radial-gradient(48% 48% at 62% 92%, color-mix(in srgb, var(--cyan, var(--accent)) 16%, transparent), transparent 72%);
  filter: blur(46px) saturate(1.1);
  opacity: 0.85;
  animation: orbix-aurora 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes orbix-aurora {
  0%   { transform: translate3d(0, 0, 0)      scale(1); }
  50%  { transform: translate3d(-1.5%, 1.5%,0) scale(1.05); }
  100% { transform: translate3d(2%, -2%, 0)   scale(1.09); }
}

/* ── Malla de puntos fina = profundidad sutil (desvanece a los bordes) */
:root[data-orbix-theme] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1.4px);
  background-size: 28px 28px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 38%, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 38%, #000 42%, transparent 100%);
}

/* ── Detalles finos universales (los que nadie ve pero se sienten) ─── */
:root[data-orbix-theme] ::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--text);
}
:root[data-orbix-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-orbix-theme] ::-webkit-scrollbar-track { background: transparent; }
:root[data-orbix-theme] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 15%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
:root[data-orbix-theme] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 26%, transparent);
  background-clip: padding-box;
}
:root[data-orbix-theme] :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── PROFUNDIDAD 3D + GLASS PREMIUM en tarjetas (apps con .card/.panel:
     Axis, ERP, Landing, Panel). Kyro usa estilos propios (se trata aparte). */
:root[data-orbix-theme] .card,
:root[data-orbix-theme] .panel,
:root[data-orbix-theme] .glass {
  position: relative;
  transition: transform 0.28s var(--ease, cubic-bezier(0.23,1,0.32,1)),
              box-shadow 0.28s ease, border-color 0.28s ease;
}
/* Borde superior con glow del acento = filo de cristal (el detalle "caro") */
:root[data-orbix-theme] .card::after,
:root[data-orbix-theme] .panel::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent) 45%, transparent),
    transparent 42%,
    color-mix(in srgb, var(--purple, var(--accent-2, var(--accent))) 22%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.55; transition: opacity 0.28s ease;
}
@media (hover: hover) and (pointer: fine) {
  :root[data-orbix-theme] .card:hover,
  :root[data-orbix-theme] .panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px color-mix(in srgb, var(--accent) 14%, rgba(0,0,0,0.4)),
                0 4px 12px rgba(0,0,0,0.25);
  }
  :root[data-orbix-theme] .card:hover::after,
  :root[data-orbix-theme] .panel:hover::after { opacity: 1; }
}

/* Botón primario con halo vivo (relieve, no plano) */
:root[data-orbix-theme] .btn--sale,
:root[data-orbix-theme] button.go,
:root[data-orbix-theme] .btn-primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent),
              inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
}

/* ── Reduce el movimiento si el sistema lo pide (accesibilidad) ────── */
@media (prefers-reduced-motion: reduce) {
  :root[data-orbix-theme] body::before { animation: none; }
  :root[data-orbix-theme] .card:hover,
  :root[data-orbix-theme] .panel:hover { transform: none; }
}