/* =====================================================================
   SOTW para Tebex — la tienda de StrafePvP
   ---------------------------------------------------------------------
   Copia en CSS plano del sistema de la web (docs/design-system.md).
   La fuente de verdad sigue siendo apps/web/app/globals.css y
   packages/ui/src: si allí cambia un token o un componente, se cambia
   aquí igual. Los nombres de clase son los de la web (`.panel`,
   `.panel-head`, `.type-label`…) para que se reconozcan al compararlos.

   Tebex no tiene Tailwind: lo que en la web son utilidades sueltas aquí
   es una clase por componente (`.btn`, `.status`, `.notice`, `.data-table`).
   ===================================================================== */

/* =====================================================================
   TOKENS
   ===================================================================== */
:root {
  /* ---- color ---------------------------------------------------- */
  --color-ink: #13151D;
  --color-raised: #0E1016;
  --color-well: #0A0B10;
  --color-line: #242733;
  --color-line-hi: #353947;
  --color-mute: #8D93A5;
  --color-text: #E4E6EC;
  --color-live: #F08A00;
  --color-live-hi: #FF9F1C;
  --color-earned: #FFC23D;
  --color-silver: #C3CAD6;
  --color-bronze: #D08A4E;
  --color-pos: #4CAF6A;
  --color-neg: #E5484D;
  --color-discord: #5865F2;

  /* ---- tipografía ------------------------------------------------ */
  --font-sans: "Poppins", "Segoe UI", Arial, sans-serif;

  /* ---- forma ----------------------------------------------------- */
  --radius-xs: 0.375rem;
  --radius-card: 0.5rem;
  --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 12px 32px -16px rgba(0, 0, 0, 0.7);

  /* ---- motion: ticks de 50 ms ------------------------------------ */
  --tick-1: 50ms;
  --tick-2: 100ms;
  --tick-4: 200ms;
  --tick-8: 400ms;
  --tick-16: 800ms;
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-strafe: cubic-bezier(0.85, 0, 0.15, 1);

  /* ---- contenedores ---------------------------------------------- */
  --container-read: 46rem;
  --container-wide: 75rem;

  /* ---- cabecera -------------------------------------------------- */
  /* La URL de la captura la escribe head.twig con asset('backdrop.jpg'). */
  --backdrop-image: none;
  --backdrop-h: 34rem;

  /* ---- pie legal de Tebex (obligatorio, no se puede ocultar) ----- */
  --tebex-legal-footer-background-color: var(--color-well);
  --tebex-legal-footer-text-color: var(--color-mute);
  --tebex-legal-footer-border-color: var(--color-line);
  --tebex-legal-footer-max-width: var(--container-wide);
  --tebex-legal-footer-logo-color: var(--color-mute);
}

/* =====================================================================
   BASE
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--color-ink);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  margin: 0;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--color-live);
  color: #000;
}

:focus-visible {
  outline: 2px solid var(--color-live);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-ink); }
::-webkit-scrollbar-thumb { background: var(--color-line-hi); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-mute); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   TIPOGRAFÍA
   ===================================================================== */
.type-display {
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.type-title {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.type-heading {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
}

.type-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 72ch;
}

.type-sm {
  font-size: 0.84375rem;
  line-height: 1.55;
  color: var(--color-mute);
  max-width: 68ch;
}

.type-label {
  font-size: 0.6875rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mute);
}

.type-data {
  font-variant-numeric: tabular-nums;
}

.type-field-label {
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-mute);
}

.type-rank {
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.link {
  color: var(--color-live);
  transition: color var(--tick-2) var(--ease-out);
}
.link:hover {
  color: var(--color-live-hi);
}

/* Contenido HTML que escribe el equipo en el panel de Tebex (portada,
   descripción de paquete y de categoría, páginas). Un único estilo, como
   el Markdown de las noticias de la web. */
.prose {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.prose > * + * { margin-top: 0.875rem; }
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
}
.prose h1, .prose h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.prose h3, .prose h4 { font-size: 1rem; }
.prose * + h1,
.prose * + h2,
.prose * + h3 { margin-top: 1.5rem; }
.prose strong, .prose b { color: #fff; font-weight: 600; }
.prose a { color: var(--color-live); transition: color var(--tick-2) var(--ease-out); }
.prose a:hover { color: var(--color-live-hi); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.25rem; }
.prose li::marker { color: var(--color-mute); }
.prose img { height: auto; border-radius: var(--radius-card); border: 1px solid var(--color-line); }
.prose hr { border: 0; height: 1px; background: var(--color-line); margin-block: 1.5rem; }
.prose blockquote {
  margin-inline: 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--color-line-hi);
  background: var(--color-well);
  border-radius: var(--radius-xs);
  color: var(--color-mute);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.prose th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mute); background: var(--color-well); }
.prose th, .prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-line); }
.prose code { font-size: 0.875em; background: var(--color-well); border: 1px solid var(--color-line); border-radius: var(--radius-xs); padding: 0.1em 0.35em; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .container-wide { padding-inline: 1.5rem; }
}

.container-read {
  width: 100%;
  max-width: var(--container-read);
  margin-inline: auto;
}

.site-main {
  flex: 1;
  width: 100%;
}

.sec-open { padding-block: 1.25rem; }

/* El aviso de Tebex (page.message), entre el banner y el contenido. */
.flash { margin-bottom: 1.5rem; }

.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.stack { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

/* =====================================================================
   PANEL — la unidad de contenido
   ===================================================================== */
.panel {
  background-color: var(--color-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-well);
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.panel-head-main {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.75rem;
}

.panel-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.panel-body { padding: 1.25rem; }

.panel-foot {
  padding: 0.875rem 1.25rem;
  background-color: var(--color-well);
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* «Ver todo» de la franja. */
.panel-link {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-live);
  white-space: nowrap;
  transition: color var(--tick-2) var(--ease-out);
}
.panel-link:hover { color: var(--color-live-hi); }

.rule {
  border: 0;
  height: 1px;
  background: var(--color-line);
  margin-block: 1.25rem;
}

/* =====================================================================
   CABECERA — la captura de fondo
   ===================================================================== */
.site-backdrop {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--backdrop-h);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #1A120C;
}

.site-backdrop::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: var(--backdrop-image),
    radial-gradient(circle at 14% 30%, rgba(255, 196, 64, 0.55) 0 2.5%, transparent 9%),
    radial-gradient(circle at 22% 58%, rgba(255, 170, 40, 0.35) 0 3%, transparent 11%),
    radial-gradient(circle at 51% 22%, rgba(255, 210, 90, 0.45) 0 2%, transparent 8%),
    radial-gradient(circle at 63% 48%, rgba(255, 180, 60, 0.4) 0 2.5%, transparent 9%),
    radial-gradient(circle at 84% 34%, rgba(255, 200, 80, 0.5) 0 2%, transparent 8%),
    radial-gradient(ellipse at 30% 80%, rgba(170, 110, 30, 0.55), transparent 45%),
    radial-gradient(ellipse at 75% 75%, rgba(120, 60, 20, 0.6), transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(90, 50, 20, 0.9), transparent 70%),
    linear-gradient(180deg, #3A2410, #1E130B);
  background-size: cover;
  background-position: center;
  filter: blur(6px) saturate(1.05);
}

.site-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 16, 0.35) 0%, rgba(10, 11, 16, 0.25) 45%, var(--color-ink) 100%);
}

/* ---- Barra superior (metabar) ----------------------------------- */
.site-header {
  position: relative;
  z-index: 50;
}

.metabar {
  background: rgba(0, 0, 0, 0.65);
}

.metabar-inner {
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.metabar-start {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
@media (min-width: 768px) {
  /* Deja sitio al logo, que sobresale hasta aquí. */
  .metabar-start { padding-left: 8.5rem; }
}

.metabar-end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.meta-link {
  font-size: 0.8125rem;
  color: rgba(228, 230, 236, 0.75);
  white-space: nowrap;
  transition: color var(--tick-2) var(--ease-out);
}
.meta-link:hover { color: #fff; }

.meta-link-strong {
  font-weight: 500;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--tick-2) var(--ease-out);
}
.meta-link-strong:hover { text-decoration-color: var(--color-live); }

/* IP que se copia al pulsar. */
.server-ip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.server-ip-address {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  transition: color var(--tick-2) var(--ease-out);
}
.server-ip:hover .server-ip-address { color: var(--color-live); }
.server-ip-hint {
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(228, 230, 236, 0.5);
  transition: color var(--tick-2) var(--ease-out);
}
.server-ip:hover .server-ip-hint { color: rgba(228, 230, 236, 0.8); }
.server-ip.is-copied .server-ip-hint { display: inline; color: var(--color-pos); }
@media (min-width: 640px) {
  .server-ip-hint { display: inline; }
}

/* Sesión: «Conectado como» + nombre + cabeza. */
.session {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-align: right;
}
.session-text {
  display: none;
  flex-direction: column;
  line-height: 1;
}
@media (min-width: 640px) {
  .session-text { display: flex; }
}
.session-label {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-live);
}
.session-name {
  margin-top: 0.125rem;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
}

.mc-head {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-xs);
  background: var(--color-raised);
  image-rendering: pixelated;
  object-fit: cover;
}
.mc-head-lg { width: 3rem; height: 3rem; }

/* ---- Navegación ------------------------------------------------- */
.nav {
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-inner {
  height: 4rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .nav-inner { height: 4.5rem; }
}

/* El logo sobresale por arriba hasta la barra superior. */
.nav-logo {
  position: relative;
  flex: none;
  width: 3rem;
  height: 3rem;
}
.nav-logo img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3rem;
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  transition: transform var(--tick-4) var(--ease-out);
}
.nav-logo-text {
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .nav-logo { width: 7rem; height: 100%; }
  .nav-logo img {
    width: 7rem;
    top: auto;
    bottom: -0.75rem;
    transform: none;
  }
  .nav-logo:hover img { transform: translateY(0.375rem); }
}

.nav-list {
  display: none;
  align-items: center;
  gap: 1.75rem;
  height: 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .nav-list { display: flex; }
}

.nav-item {
  position: relative;
  height: 100%;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(228, 230, 236, 0.8);
  transition: color var(--tick-2) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  border-radius: 9999px 9999px 0 0;
  background: var(--color-live);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tick-2) var(--ease-out);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(0.5); }
.nav-link[aria-current="page"],
.nav-item.is-active > .nav-link { color: #fff; }
.nav-link[aria-current="page"]::after,
.nav-item.is-active > .nav-link::after { transform: scaleX(1); }

/* Flecha de submenú, dibujada con bordes como la del `Select`. */
.nav-caret {
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* Submenú de subcategorías: un panel flotante que entra de lado. */
.nav-sub {
  display: none;
  position: absolute;
  left: -1rem;
  top: 100%;
  min-width: 13rem;
  padding-block: 0.5rem;
  background: var(--color-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  z-index: 50;
}
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub {
  display: block;
  animation: pop-in var(--tick-4) var(--ease-out) both;
}

.menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text);
  text-align: left;
  transition: color var(--tick-2) var(--ease-out), background-color var(--tick-2) var(--ease-out);
}
.menu-item:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.menu-item[aria-current="page"] { color: var(--color-live); }

.nav-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Contador de la cesta, dentro del botón principal. */
.basket-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.3125rem;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.06);
  transition: background-color var(--tick-2) var(--ease-out);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.nav-toggle span {
  display: block;
  width: 1rem;
  height: 2px;
  border-radius: 9999px;
  background: var(--color-text);
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

/* Cajón móvil. */
.nav-drawer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.7);
}
@media (min-width: 768px) {
  .nav-drawer { display: none !important; }
}
.nav-drawer-list { padding-block: 0.5rem; }
.drawer-link {
  display: block;
  padding-block: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-drawer-list > li:last-child > .drawer-link { border-bottom: 0; }
.drawer-link[aria-current="page"] { color: var(--color-live); }
.drawer-sub .drawer-link {
  padding-left: 1rem;
  font-size: 0.8125rem;
  color: var(--color-mute);
}
.drawer-sub .drawer-link[aria-current="page"] { color: var(--color-live); }

/* =====================================================================
   BANNER DE PÁGINA
   ===================================================================== */
.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 10rem;
  padding-block: 2rem;
}
@media (min-width: 768px) {
  .banner { min-height: 12.5rem; padding-block: 2.5rem; }
}

.banner-hero {
  min-height: 0;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .banner-hero { min-height: 0; padding-top: 2rem; padding-bottom: 3.5rem; }
}

.banner-logo {
  width: 13rem;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
  animation: breathe 4s var(--ease-out) infinite;
}
@media (min-width: 768px) {
  .banner-logo { width: 17rem; }
}

.banner-eyebrow {
  margin-bottom: 0.5rem;
  color: rgba(228, 230, 236, 0.8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.banner-title { color: #fff; }

.banner-description {
  margin-top: 0.75rem;
  max-width: 46rem;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
@media (min-width: 768px) {
  .banner-description { font-size: 1.125rem; }
}

.banner-children { margin-top: 1.25rem; }
.banner-hero .banner-children { margin-top: 1.5rem; }

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* La IP del hero: el botón sólido de la marca, en dos líneas. */
.copy-ip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 16rem;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-xs);
  background: var(--color-live);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background-color var(--tick-2) var(--ease-out), transform var(--tick-2) var(--ease-out);
}
.copy-ip:hover { background: var(--color-live-hi); }
.copy-ip:active { transform: scale(0.98); transition-duration: var(--tick-1); }
.copy-ip-address {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .copy-ip-address { font-size: 1.5rem; }
}
.copy-ip-hint {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--tick-2) var(--ease-out),
    color var(--tick-2) var(--ease-out),
    filter var(--tick-2) var(--ease-out),
    transform var(--tick-2) var(--ease-out);
}
.btn:active { transform: scale(0.98); transition-duration: var(--tick-1); }

.btn-sm { height: 2rem; padding-inline: 0.875rem; font-size: 0.75rem; }
.btn-lg { height: 3rem; padding-inline: 1.75rem; font-size: 0.9375rem; }
.btn-block { width: 100%; }

.btn-primary,
.btn-danger {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.btn-primary { background: var(--color-live); }
.btn-primary:hover { background: var(--color-live-hi); }
.btn-danger { background: var(--color-neg); }
.btn-danger:hover { filter: brightness(1.1); }

.btn-secondary {
  background: rgba(36, 39, 51, 0.7);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn-secondary:hover { background: var(--color-line-hi); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--color-mute);
}
.btn-ghost:hover { color: #fff; }

/* El botón de Discord es el único que lleva su color: dato prestado. */
.btn-discord {
  background: var(--color-discord);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.btn-discord:hover { filter: brightness(1.1); }

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--color-line);
  color: var(--color-mute);
  box-shadow: none;
  text-shadow: none;
  filter: none;
  cursor: not-allowed;
  transform: none;
}
.btn-ghost:disabled,
.btn-ghost[disabled] { background: transparent; color: var(--color-line-hi); }
/* Un enlace no se puede deshabilitar: se le quita el puntero. */
a.btn[disabled],
a.btn[aria-disabled="true"] { pointer-events: none; }

/* Spinner dentro de un botón que está trabajando. */
.inline-spinner {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.btn:not(.is-busy) .inline-spinner { display: none; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =====================================================================
   SEGMENTED
   ===================================================================== */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  width: fit-content;
  max-width: 100%;
  background: var(--color-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.segment {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding-inline: 1rem;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-mute);
  transition: background-color var(--tick-2) var(--ease-out), color var(--tick-2) var(--ease-out);
}
.segment:hover { color: #fff; background: rgba(36, 39, 51, 0.6); }
.segment[aria-current="page"] {
  background: var(--color-live);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field + .field { margin-top: 1.25rem; }

.field-hint { font-size: 0.8125rem; color: var(--color-mute); }
.field-required { color: var(--color-live); }

.control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-well);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: border-color var(--tick-2) var(--ease-out);
}
.control::placeholder { color: rgba(141, 147, 165, 0.75); }
.control:hover { border-color: var(--color-line-hi); }
.control:focus { outline: none; border-color: var(--color-live); }
.control:disabled { color: var(--color-mute); cursor: not-allowed; }

select.control {
  appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.control-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.control-inline .control { flex: 1; min-width: 0; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Selector de cantidad: −  N  + */
.stepper {
  display: inline-flex;
  align-items: stretch;
  height: 2rem;
  background: var(--color-well);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  transition: border-color var(--tick-2) var(--ease-out);
}
.stepper:hover { border-color: var(--color-line-hi); }
.stepper:focus-within { border-color: var(--color-live); }
.stepper-btn {
  width: 2rem;
  font-weight: 600;
  color: var(--color-mute);
  transition: color var(--tick-2) var(--ease-out);
}
.stepper-btn:hover { color: #fff; }
.stepper-btn:disabled { color: var(--color-line-hi); cursor: not-allowed; }
.stepper-input {
  width: 2.5rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper-input:focus { outline: none; }
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =====================================================================
   AVISOS Y ESTADOS
   ===================================================================== */
.notice {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--color-line-hi);
  border-radius: var(--radius-xs);
  background: var(--color-well);
}
@media (min-width: 640px) {
  .notice { flex-direction: row; align-items: center; }
}
.notice-live { border-color: var(--color-live); background: rgba(240, 138, 0, 0.1); }
.notice-neg { border-color: var(--color-neg); background: rgba(229, 72, 77, 0.1); }
.notice-title { font-size: 0.875rem; font-weight: 700; color: #fff; }
.notice-neg .notice-title { color: var(--color-neg); }
.notice-text { margin-top: 0.125rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.5rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius-xs);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-line);
  color: var(--color-mute);
}
.status-live { background: var(--color-live); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.status-earned { background: rgba(255, 194, 61, 0.15); color: var(--color-earned); }
.status-pos { background: rgba(76, 175, 106, 0.15); color: var(--color-pos); }
.status-neg { background: rgba(229, 72, 77, 0.15); color: var(--color-neg); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--color-mute);
}

.live-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-pos);
  animation: live-pulse 1.6s var(--ease-out) infinite;
}
.off-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-neg);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
}
@media (min-width: 640px) {
  .empty-state { padding-block: 4rem; }
}
.empty-state .type-sm { margin-top: 0.5rem; }
.empty-state-action { margin-top: 1.5rem; }

.error-state {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(229, 72, 77, 0.4);
  border-radius: var(--radius-card);
  background: rgba(229, 72, 77, 0.1);
}

.skeleton {
  background: rgba(36, 39, 51, 0.6);
  border-radius: var(--radius-xs);
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* =====================================================================
   TABLA
   ===================================================================== */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table th {
  padding: 0.625rem 1rem;
  background: var(--color-well);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mute);
  white-space: nowrap;
}
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .shrink { width: 1%; white-space: nowrap; }

/* =====================================================================
   REGLA DE TICKS — aquí, barra de progreso de los objetivos
   ===================================================================== */
.ruler {
  position: relative;
  width: 100%;
  height: var(--ruler-h, 8px);
  overflow: hidden;
  flex: none;
}
.ruler-marks {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--color-line-hi) 0 1px, transparent 1px);
  background-size: calc(100% / var(--ruler-ticks, 12)) 100%;
  background-repeat: repeat-x;
}
.ruler-marks::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-line);
}
.ruler-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  background-image: linear-gradient(
    to right,
    var(--color-live) 0 1px,
    color-mix(in srgb, var(--color-live) 22%, transparent) 1px
  );
  background-size: calc(100% / var(--ruler-ticks, 12)) 100%;
}
.ruler-fill::after {
  content: "";
  position: absolute;
  right: 0;
  inset-block: 0;
  width: 1px;
  background: var(--color-live);
}
.ruler-loading .ruler-fill {
  will-change: width;
  animation: ruler-sweep 1.2s var(--ease-strafe) infinite;
}

/* =====================================================================
   TIENDA — paquetes
   ===================================================================== */
.package-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 560px) {
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.package-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--tick-2) var(--ease-out);
}
.package-card:hover { border-color: var(--color-line-hi); }

/* Imagen del paquete: los iconos de rango suelen ser cuadrados y con
   transparencia, así que van contenidos sobre la franja hundida. */
.package-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  background: var(--color-well);
  border-bottom: 1px solid var(--color-line);
}
/* La imagen se encaja en el marco, no lo estira: posición absoluta dentro
   del relleno y `contain`. */
.package-media > img {
  position: absolute;
  inset: 1.25rem;
  width: calc(100% - 2.5rem);
  height: calc(100% - 2.5rem);
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  transition: transform var(--tick-4) var(--ease-out);
}
.package-card:hover .package-media > img { transform: translateY(-0.25rem); }
.package-media-empty > img {
  inset: 30%;
  width: 40%;
  height: 40%;
  filter: grayscale(1);
  opacity: 0.25;
}
.package-media .status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.package-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  padding: 1rem 1.25rem 1.25rem;
}

.package-name {
  color: #fff;
  transition: color var(--tick-2) var(--ease-out);
}
a.package-name:hover { color: var(--color-live-hi); }

.package-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.package-actions .btn { flex: 1 1 auto; }

/* Precio: blanco y en negrita; el tachado del descuento, en gris. */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.price-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.price-currency { font-size: 0.75rem; font-weight: 600; color: var(--color-mute); }
.price-original {
  font-size: 0.875rem;
  color: var(--color-mute);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.price-note { font-size: 0.875rem; color: var(--color-mute); }
.price-lg .price-value { font-size: 1.75rem; }
.price-end { justify-content: flex-end; }

/* Lista (displayType «list»): una fila por paquete dentro de un panel. */
.package-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.package-row:last-child { border-bottom: 0; }
.package-row-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0.375rem;
  background: var(--color-well);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
}
.package-row-media img { max-height: 100%; width: auto; object-fit: contain; }
.package-row-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.package-row-end {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .package-row { grid-template-columns: 4rem minmax(0, 1fr) auto; }
  .package-row-end { grid-column: auto; justify-content: flex-end; }
}

/* Ficha de paquete: imagen a la izquierda, compra a la derecha. */
.package-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .package-detail { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.package-detail .package-media {
  aspect-ratio: auto;
  min-height: 15rem;
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
@media (min-width: 768px) {
  .package-detail .package-media {
    border-bottom: 0;
    border-right: 1px solid var(--color-line);
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
}
.package-buy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}
.package-buy .package-actions { margin-top: 0; }
.package-buy .rule { margin-block: 0.25rem; }

/* Galería: miniaturas bajo la imagen principal. */
.media-viewer { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.package-detail .package-media:has(.media-viewer) { min-height: 0; }
.media-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}
.media-stage img { max-height: 20rem; width: auto; object-fit: contain; }
.media-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.media-thumb {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.25rem;
  background: var(--color-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: border-color var(--tick-2) var(--ease-out);
}
.media-thumb:hover { border-color: var(--color-line-hi); }
.media-thumb[aria-pressed="true"] { border-color: var(--color-live); }
.media-thumb img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }

/* Vídeo de YouTube: fachada. Sólo se carga el iframe al pulsar. */
.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #000;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  transition: background-color var(--tick-2) var(--ease-out);
}
.video-play:hover { background: rgba(0, 0, 0, 0.1); }
.video-play-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-card);
  background: var(--color-live);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--tick-2) var(--ease-out);
}
.video-play:hover .video-play-icon { background: var(--color-live-hi); }
.video-play-icon::before {
  content: "";
  margin-left: 0.25rem;
  border-left: 1rem solid #fff;
  border-block: 0.625rem solid transparent;
}

/* Categorías en la portada. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background: var(--color-well);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  transition: border-color var(--tick-2) var(--ease-out), color var(--tick-2) var(--ease-out);
}
.category-tile:hover { border-color: var(--color-line-hi); color: #fff; }
.category-tile img {
  height: 4rem;
  width: auto;
  object-fit: contain;
  transition: transform var(--tick-4) var(--ease-out);
}
.category-tile:hover img { transform: translateY(-0.25rem); }

/* =====================================================================
   CESTA
   ===================================================================== */
.basket-region { transition: opacity var(--tick-4) var(--ease-out); }
.basket-region[aria-busy="true"] { opacity: 0.5; pointer-events: none; }

.basket-item-name {
  font-weight: 600;
  color: #fff;
  transition: color var(--tick-2) var(--ease-out);
}
a.basket-item-name:hover { color: var(--color-live-hi); }
.basket-options { margin-top: 0.25rem; }
.basket-options li + li { margin-top: 0.125rem; }

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.summary-row + .summary-row { margin-top: 0.5rem; }

.player-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.player-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #fff;
}

/* =====================================================================
   MÓDULOS DE LA BARRA LATERAL
   ===================================================================== */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.module-list > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.module-list > li:last-child { border-bottom: 0; }
.module-list-main { min-width: 0; flex: 1; }
.module-list-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.ruler-goal { --ruler-ticks: 10; --ruler-h: 12px; }

.goal-figures {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.panel-head .type-rank { font-size: 1.125rem; }

.top-donor {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.top-donor-skin {
  flex: none;
  width: 4rem;
  height: auto;
  image-rendering: pixelated;
}
.top-donor-name { font-size: 1.125rem; font-weight: 700; color: var(--color-earned); }

/* =====================================================================
   PIE
   ===================================================================== */
.site-footer {
  margin-top: 2.5rem;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid var(--color-line);
}
.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2rem;
}
@media (min-width: 768px) {
  .site-footer-inner { flex-direction: row; align-items: center; }
}
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-logo {
  width: 4rem;
  height: auto;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--tick-4) var(--ease-out), opacity var(--tick-4) var(--ease-out);
}
.footer-logo:hover { filter: grayscale(0); opacity: 1; }
.footer-copy { font-size: 0.9375rem; color: var(--color-text); }
.footer-disclaimer { margin-top: 0.125rem; font-size: 0.75rem; color: var(--color-mute); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
@media (min-width: 768px) {
  .footer-links { margin-left: auto; }
}
.footer-link {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-mute);
  transition: color var(--tick-2) var(--ease-out);
}
.footer-link:hover { color: #fff; }

/* =====================================================================
   UTILIDADES PUNTUALES
   ===================================================================== */
.text-white { color: #fff; }
.text-mute { color: var(--color-mute); }
.text-live { color: var(--color-live); }
.text-earned { color: var(--color-earned); }
.text-pos { color: var(--color-pos); }
.text-neg { color: var(--color-neg); }
.min-w-0 { min-width: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.row-gap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.hide-sm { display: none; }
@media (min-width: 640px) {
  .hide-sm { display: revert; }
}

/* =====================================================================
   MOTION
   ===================================================================== */
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.page-in { animation: page-in var(--tick-4) var(--ease-out) both; }

@keyframes pop-in {
  from { opacity: 0; transform: translate3d(0.375rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.pop-in { animation: pop-in var(--tick-4) var(--ease-out) both; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes skeleton-pulse {
  50% { opacity: 0.5; }
}

@keyframes ruler-sweep {
  0% { width: 0%; opacity: 1; }
  70% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ruler-loading .ruler-fill {
    width: 100%;
    opacity: 0.4;
  }
}