/**
 * UI polish — profundidad, motion y superficies (2026-ready).
 * Carga después de tokens + ux-responsive-base. Respeta prefers-reduced-motion.
 */

:root {
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --duration-slow: 0.28s;
  --shadow-ambient: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-panel-hover: 0 14px 48px rgba(0, 0, 0, 0.32);
  --shadow-glow-primary: 0 0 24px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* Sistema de color del UA + base */
html {
  color-scheme: dark;
  background-color: var(--bg-deep);
  scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 48%, transparent);
  background-clip: padding-box;
}

@supports (interpolate-size: allow-keywords) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* Tipografía: títulos equilibrados en bloques (evita viudas feas) */
@supports (text-wrap: balance) {
  h1,
  h2,
  h3,
  .ui-page-title,
  .ui-section-title {
    text-wrap: balance;
  }
}

/* Canvas: halos + textura fina (capa superior = “film grain” digital) */
body {
  background-image:
    repeating-linear-gradient(
      -11deg,
      transparent 0,
      transparent 3px,
      color-mix(in srgb, var(--text) 2.5%, transparent) 3px,
      color-mix(in srgb, var(--text) 2.5%, transparent) 4px
    ),
    radial-gradient(ellipse 130% 90% at 50% -25%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 55% at 108% 35%, color-mix(in srgb, var(--secondary-brand) 9%, transparent), transparent 52%),
    radial-gradient(ellipse 65% 50% at -8% 85%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 48%);
  background-size:
    200px 200px,
    auto,
    auto,
    auto;
  background-attachment: fixed, fixed, fixed, fixed;
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-image: none;
    background-attachment: scroll;
  }
}

/* Shell por encima del fondo (stacking limpio) */
#root,
.app-shell {
  position: relative;
  z-index: 1;
}

/* Barra superior: glass más actual + borde tenue */
.app-topbar {
  background: color-mix(in srgb, var(--bg-deep) 86%, var(--bg-elevated));
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--text) 8%, transparent) inset,
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 0 40px color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Drawer móvil: mismo lenguaje “glass” */
.app-nav-drawer {
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  background: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg-deep));
}

.app-nav-drawer-backdrop {
  backdrop-filter: blur(6px) saturate(0.95);
  -webkit-backdrop-filter: blur(6px) saturate(0.95);
}

/* Toolbar Epic / iconos: micro-interacción */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .header-toolbar__icon-btn {
    transition:
      transform 0.16s var(--ease-spring),
      border-color var(--duration) var(--ease-out),
      background var(--duration) var(--ease-out);
  }

  .header-toolbar__icon-btn:hover {
    transform: translateY(-1px);
  }

  .header-toolbar__epic {
    transition:
      transform 0.16s var(--ease-spring),
      filter var(--duration) var(--ease-out),
      box-shadow var(--duration) var(--ease-out);
  }

  .header-toolbar__epic:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--text) 38%, transparent),
      0 4px 16px color-mix(in srgb, var(--primary) 35%, transparent);
  }
}

/* Navegación principal: transición suave al hover */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .app-topnav__link {
    transition:
      color var(--duration) var(--ease-out),
      background var(--duration) var(--ease-out),
      border-color var(--duration) var(--ease-out);
  }
}

/* Paneles: profundidad base + hover en desktop */
.ui-panel {
  box-shadow: var(--shadow-inset-top), var(--shadow-ambient);
  border-color: color-mix(in srgb, var(--border) 92%, var(--primary));
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ui-panel {
    transition:
      border-color var(--duration-slow) var(--ease-out),
      box-shadow var(--duration-slow) var(--ease-out),
      transform var(--duration) var(--ease-out);
  }

  .ui-panel:hover {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    box-shadow: var(--shadow-inset-top), var(--shadow-panel-hover), 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-panel:hover {
    transform: none;
  }
}

/* Botones primarios: feedback táctil + glow suave */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ui-btn--primary {
    transition:
      filter var(--duration) var(--ease-out),
      transform 0.14s var(--ease-spring),
      box-shadow var(--duration) var(--ease-out);
    box-shadow: var(--shadow-btn-outer, 0 2px rgba(0, 0, 0, 0.45)), var(--shadow-btn-inset-light), var(--shadow-glow-primary);
  }

  .ui-btn--primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
  }

  .ui-btn--primary:active:not(:disabled) {
    transform: translateY(0) scale(0.99);
  }
}

/* Footer legal: subrayado suave */
.site-footer__legal a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.site-footer__legal a:hover {
  text-decoration-color: color-mix(in srgb, var(--primary) 65%, transparent);
}

/* Focus visible: anillo más definido */
:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: color-mix(in srgb, var(--primary) 85%, var(--text));
  outline-offset: 3px;
}