/* ============================================================
   WRD — rango.css  ·  La identidad del socio
   ============================================================
   Construido ENCIMA de css/tienda.css («Noche y Día»).

   Qué vive acá:
     1. El chip de rango en la barra (#chip-rango) — y "Entrar" sin sesión
     2. El riel de sellos (.chip-sellos / .sello)
     3. Premium en la barra y su candado (.premium-link / .bloqueado)
     4. El ascenso de rango (.kanji-trazo)
     5. El aviso (.toast-rango)

   Este archivo NO crea el DOM: js/gate-ui.js llena #chip-rango y
   dispara .kanji-trazo / .toast-rango; js/rangos.js decide cuándo.
   ============================================================ */


/* ============================================================
   1 · EL CHIP DE RANGO  ·  #chip-rango .chip-rango
   Una pastilla de papel sobre la barra de chocolate, con sombra dura
   naranja: kanji + nombre + número arriba, el riel de sellos abajo.
   ============================================================ */

.chip-rango {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  min-height: 48px;
  padding: 6px 12px 7px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 2px solid var(--t-noche);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--t-naranja);
}

.chip-rango:empty { display: none; }

/* Sin sesión: el lugar del chip es "Entrar" (lo pone gate-ui.js). */
.chip-rango.chip-rango--visita {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.chip-entrar {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 16px;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 2px solid var(--t-noche);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--t-naranja);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.chip-entrar:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--t-naranja); }

.chip-kanji {
  font-family: var(--wrd-font-kanji);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--t-noche);
}

.chip-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--t-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--t-choco);
}

.chip-numero {
  font-family: var(--t-font-display);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--t-choco-3);
}

@media (max-width: 29.99em) {
  .premium-page .chip-numero { display: none; }
}

/* La escalera de luz del chip: del rango 5 para arriba la sombra dura
   pasa a mango y crece un punto. */
#chip-rango[data-rango='5'],
#chip-rango[data-rango='6'] { box-shadow: 3px 3px 0 var(--t-mango); }
#chip-rango[data-rango='7'] { box-shadow: 4px 4px 0 var(--t-mango); }

/* Rango provisional (las 40 noches siguen abiertas): filo punteado. */
.chip-rango.chip-provisional {
  border-style: dashed;
  border-color: var(--t-choco-3);
  cursor: help;
}


/* ============================================================
   2 · EL RIEL DE SELLOS  ·  .chip-sellos / .sello
   ============================================================ */

.chip-sellos {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 6px;
}

.sello {
  flex: 1 1 0;
  min-width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--t-crema-2);
  transition: background-color 240ms var(--t-suave);
}

.sello.lleno { background: var(--t-naranja); }

.chip-sellos .sello.lleno:last-child,
.chip-sellos .sello.lleno:has(+ .sello:not(.lleno)) { background: var(--t-rojo); }

.sello.anim { animation: wrd-sello-pop 260ms var(--t-rebote) both; }

@keyframes wrd-sello-pop {
  0%   { transform: scaleY(0.2) scaleX(0.3); background: var(--t-mango); }
  100% { transform: none; }
}


/* ============================================================
   3 · PREMIUM EN LA BARRA  ·  .premium-link (y .bloqueado)
   ============================================================ */

.premium-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 14px;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--t-choco);
  background: var(--t-mango);
  border: 2px solid var(--t-noche);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--t-naranja);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.premium-link:hover { color: var(--t-choco); background: var(--t-mango); box-shadow: 3px 3px 0 var(--t-rojo); }
.premium-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--t-naranja); }

.premium-link.bloqueado,
.premium-link.bloqueado:hover {
  color: var(--t-choco-2);
  background: var(--t-crema);
  box-shadow: 3px 3px 0 var(--t-noche-3);
  cursor: not-allowed;
}

.premium-link.bloqueado::before {
  content: '🔒';
  margin-inline-end: 0.3em;
  font-size: 0.85em;
}

.premium-link.sacudir { animation: wrd-sacudida 300ms ease-in-out both; }

@keyframes wrd-sacudida {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px) rotate(-2deg); }
  40%, 80% { transform: translateX(4px) rotate(2deg); }
}


/* ============================================================
   4 · EL ASCENSO DE RANGO  ·  .kanji-trazo
   La noche cae de golpe y el kanji nuevo se estampa en una ficha
   mango gigante, con el sol de cartel girando detrás.
   ============================================================ */

.kanji-trazo {
  position: fixed;
  inset: 0;
  z-index: var(--wrd-z-intro);
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--wrd-font-kanji);
  font-size: 120px;
  font-weight: 600;
  line-height: 1;
  color: var(--t-noche);
  background:
    var(--t-chispitas) 0 0 / 160px 160px,
    rgb(30 18 12 / 0.94);
  animation: wrd-kanji-velo 300ms ease-out both;
}

/* El sol detrás. */
.kanji-trazo::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--t-mango) 0deg 10deg, var(--t-naranja-2) 10deg 20deg);
  animation: t-gira 12s linear infinite, wrd-kanji-sol 420ms var(--t-rebote) both;
}

/* La ficha donde se estampa el kanji (el texto va encima). */
.kanji-trazo::after {
  content: '';
  position: absolute;
  width: 176px;
  height: 176px;
  background: var(--t-papel);
  border: 4px solid var(--t-noche);
  border-radius: 34px;
  box-shadow: 8px 8px 0 var(--t-rojo);
  transform: rotate(-6deg);
  animation: wrd-kanji-ficha 520ms var(--t-rebote) 80ms both;
}

@keyframes wrd-kanji-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes wrd-kanji-sol { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wrd-kanji-ficha {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(-3deg); opacity: 1; }
  100% { transform: scale(1) rotate(-6deg); }
}

/* El kanji mismo vive en el texto del nodo: tiene que quedar encima
   de ::before/::after (que se pintan en orden). */
.kanji-trazo {
  isolation: isolate;
  text-shadow: none;
}

.kanji-trazo::before { z-index: -2; }
.kanji-trazo::after { z-index: -1; }


/* ============================================================
   5 · EL AVISO  ·  .toast-rango
   Mini sticker abajo al centro ("Subiste a 灯 Farol", "Se nos acabó…").
   ============================================================ */

.toast-rango {
  position: fixed;
  z-index: calc(var(--wrd-z-intro) + 20);
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px) + 12px);
  width: min(90vw, 340px);
  padding: 14px 18px;
  text-align: center;
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--t-choco);
  background: var(--t-mango);
  border: var(--t-borde);
  border-radius: var(--t-r-2);
  box-shadow: 5px 5px 0 var(--t-choco);
  transform: translateX(-50%);
  animation: wrd-toast-entra 360ms var(--t-rebote) both;
}

@keyframes wrd-toast-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(24px) rotate(-3deg); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast-rango,
  .kanji-trazo,
  .kanji-trazo::before,
  .kanji-trazo::after,
  .sello.anim,
  .premium-link.sacudir { animation: none !important; }
  .kanji-trazo::after { transform: rotate(-6deg); }
  .chip-entrar, .premium-link { transition: none; }
}