/* ═══════════════════════════════════════════════════════════════════════════
   Capa de "sabor Pokémon". Va DESPUÉS de base.css a propósito: base.css define
   la estructura y esta hoja el carácter, así se pueden tocar por separado.

   De dónde sale cada idea (mirando cómo lo resuelven los juegos y los fansites):
   · Pokédex de mano  -> la lente azul con brillo y las tres luces de estado
   · Interfaz de Gen 5 -> cajas con borde grueso de color y relleno más claro,
                          esquinas recortadas y tramas diagonales de fondo
   · Barra de PS       -> casquillo oscuro, relleno con brillo y etiqueta
   · Hierba alta       -> trama repetida muy tenue para que el fondo no sea plano
   · Fansites (PokémonDB, nuzlocke.app) -> el color de tipo manda en todo

   Regla: NADA de esto puede estorbar a las 4 de la mañana. Texturas al 3-6 %
   de opacidad y animaciones cortas, siempre bajo prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --pk-rojo:   #ee2b3b;   /* rojo pokéball */
  --pk-rojo-2: #b3121f;
  --pk-azul:   #2f7fe0;   /* azul de la lente */
  --pk-oro:    #f5c531;
  --sombra-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 26px rgba(0,0,0,.45);
  --sombra-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 44px rgba(0,0,0,.55);
  --curva: cubic-bezier(.2,.9,.25,1);
}

/* ── el fondo deja de ser plano ──────────────────────────────────────────── */
body {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(47,127,224,.10), transparent 60%),
    radial-gradient(900px 480px at 92% 0%, rgba(238,43,59,.08), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
/* trama de hierba alta, muy tenue: da textura sin distraer */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M4 26c0-5 2-8 2-12M10 26c0-6 3-9 3-14M17 26c0-5 2-8 2-12M24 26c0-6 2-9 2-13' stroke='%23ffffff' stroke-opacity='.045' fill='none' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ═══════════════════════════ la pokéball de marca ═════════════════════════ */
.pokeball {
  --d: 30px;
  width: var(--d); height: var(--d); border-radius: 50%; position: relative;
  flex: none; display: inline-block;
  background:
    linear-gradient(#ff4b58 0 46%, #14161d 46% 54%, #f4f6fb 54% 100%);
  box-shadow: 0 0 0 2px #0b0d12, 0 2px 10px rgba(238,43,59,.35),
              inset 0 -3px 6px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.25);
}
.pokeball::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: calc(var(--d) * .3); height: calc(var(--d) * .3); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #cfd6e4);
  box-shadow: 0 0 0 2px #14161d, 0 0 0 3px rgba(255,255,255,.5);
}
@keyframes pb-gira { to { transform: rotate(360deg); } }
.pokeball.gira { animation: pb-gira .75s var(--curva); }

/* ═══════════════════════════════ cabecera ═════════════════════════════════ */
.topbar {
  gap: 18px; padding: 11px 20px;
  background: linear-gradient(180deg, #151a25, #10131b);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 22px rgba(0,0,0,.45);
}
/* la franja roja de la pokéball recorre la cabecera */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--pk-rojo), var(--pk-oro) 45%, var(--pk-azul));
  opacity: .75;
}
.topbar { position: sticky; }

.marca { display: flex; align-items: center; gap: 10px; }
/* "EPIC RETO 2026" en una sola línea, y debajo el sello. El año iba en un
   renglón aparte y en gris; ahora va seguido y en blanco, misma tipografía. */
.marca-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.marca-txt {
  font: .9em/1.15 var(--mono); letter-spacing: .06em; color: var(--txt-dim);
  text-transform: uppercase; white-space: nowrap;
}
.marca-txt b { color: #fff; font-weight: inherit; letter-spacing: .06em; }

/* ── sello "Pokedex Edition": el mismo del launcher, a escala de barra ── */
.edicion {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px; border-radius: 999px;
  /* chapa metálica: dos mitades con el corte a media altura, como el launcher */
  background: linear-gradient(180deg, #e8eaf0 0%, #cfd3dc 48%, #e8eaf0 49%, #b9bec9 100%);
  border: 2px solid #0b0d12;
  box-shadow: 0 2px 0 #0b0d12, 0 4px 10px rgba(0,0,0,.5);
}
.edicion .ed-ico { width: 15px; height: 15px; flex: none; }
.edicion .ed-txt {
  font: 10px/1 var(--mono); font-synthesis: none;
  letter-spacing: .07em; color: #c62230;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
/* en pantallas estrechas la barra ya va justa: el sello es lo prescindible */
@media (max-width: 900px) { .edicion { display: none; } }

/* ── bloque de progreso ── */
.progreso { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 7px; }
.pg-datos { display: flex; align-items: center; gap: 12px; }
.pg-cifras { display: inline-flex; align-items: baseline; gap: 10px; }
.contador { font: 26px/1 var(--mono); letter-spacing: .02em; font-synthesis: none; }
.contador .total { color: var(--txt-dim); font-size: .62em; margin-left: 2px; }
.pg-pct { font: .8em/1 var(--mono); color: var(--pk-oro); font-synthesis: none; }

/* el margen automático lo lleva ahora el estado del juego, que va justo antes:
   así los dos quedan pegados en el extremo derecho en vez de separarse */
.reloj { gap: 7px; padding: 0 12px; color: var(--txt-dim); }
.reloj svg { width: 15px; height: 15px; fill: none; stroke: var(--pk-oro); stroke-width: 1.6; stroke-linecap: round; }
.reloj b { color: var(--txt); font-weight: 400; }

/* barra tipo casquillo, con brillo y avance animado */
.barra {
  height: 11px; border-radius: 99px; overflow: hidden;
  background: #05070c; border: 1px solid #000;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05);
}
.barra > i {
  display: block; height: 100%; border-radius: 99px; position: relative;
  background: linear-gradient(90deg, var(--pk-rojo), #ff8a3c 55%, var(--pk-oro));
  box-shadow: 0 0 12px rgba(245,197,49,.35);
  transition: width .6s var(--curva);
}
/* brillo superior: es lo que hace que parezca una barra del juego y no un div */
.barra > i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(rgba(255,255,255,.45), transparent);
  border-radius: 99px 99px 0 0;
}

/* ── pestañas: una sola caja de menú, como el menú de Blanco/Negro ────────
   Los botones no flotan sueltos: van dentro de un marco con filo oscuro,
   borde claro y separador entre ellos. La opción activa se hunde y enciende. */
nav.tabs {
  gap: 0; padding: 3px; border-radius: 12px;
  background: linear-gradient(180deg, #1a2337, #131a29);
  border: 2px solid #070a11;
  box-shadow: 0 0 0 1px rgba(150,190,255,.16) inset, 0 3px 8px rgba(0,0,0,.5);
}
nav.tabs button {
  position: relative; padding: 7px 16px 7px 27px; border-radius: 9px;
  border: 0; background: transparent; color: #8d9ab4;
  font-family: var(--mono); font-size: .82em; letter-spacing: .05em;
  font-synthesis: none; text-transform: uppercase;
  transition: color .18s, background .18s;
}
nav.tabs button + button::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: rgba(150,190,255,.14);
}
nav.tabs button::after {
  content: "►"; position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%) translateX(-5px); font-size: .75em;
  color: var(--pk-oro); opacity: 0; transition: opacity .2s, transform .2s var(--curva);
  text-shadow: 0 0 6px rgba(245,197,49,.5);
}
nav.tabs button:hover { color: #cfd9ea; }
nav.tabs button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(180deg, #3f6bb8, #2a4a86);
  box-shadow: 0 0 0 1px rgba(190,220,255,.55) inset, 0 2px 6px rgba(0,0,0,.45),
              0 0 14px rgba(63,107,184,.35);
}
nav.tabs button[aria-selected="true"]::after { opacity: 1; transform: translateY(-50%) translateX(0); }
nav.tabs button[aria-selected="true"] + button::before,
nav.tabs button:has(+ button[aria-selected="true"])::before { opacity: 0; }

/* ── "Dónde ver": morado siempre; en directo, ondas saliendo del punto ── */
.donde { position: relative; }
.directo {
  cursor: pointer; font-family: var(--font);
  --tw: #9146ff;
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 7px 15px; border-radius: 99px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--tw) 55%, transparent);
  background: linear-gradient(180deg, rgba(145,70,255,.22), rgba(145,70,255,.10));
  color: #d9c6ff; font: .82em/1 var(--font);
  transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.directo svg { width: 17px; height: 17px; fill: none; stroke: var(--tw); stroke-width: 1.7; stroke-linejoin: round; transition: stroke .2s; }
.directo:hover {
  color: #fff; border-color: var(--tw);
  background: linear-gradient(180deg, rgba(145,70,255,.34), rgba(145,70,255,.18));
  box-shadow: 0 0 0 3px rgba(145,70,255,.16);
}
.directo[data-on="true"] {
  background: linear-gradient(180deg, #9d5cff, #7526ee);
  border-color: #c3a3ff; color: #fff;
  box-shadow: 0 0 0 3px rgba(145,70,255,.22), 0 6px 20px rgba(145,70,255,.35);
}
.directo[data-on="true"] svg { stroke: #fff; }

/* el punto rojo y sus dos ondas, desfasadas para que salgan seguidas */
.d-luz { display: none; position: relative; width: 9px; height: 9px; border-radius: 50%; background: #ff4b58; flex: none; }
.directo[data-on="true"] .d-luz { display: block; }
.d-luz::before, .d-luz::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid rgba(255,110,120,.75);
  animation: onda 2.4s cubic-bezier(.15,.7,.3,1) infinite;
}
.d-luz::after { animation-delay: 1.2s; }
@keyframes onda {
  from { transform: scale(.55); opacity: .95; }
  to   { transform: scale(3.6); opacity: 0; }
}

/* la flechita del desplegable, más pequeña que el icono de la tele */
.directo .d-flecha { width: 11px; height: 11px; opacity: .8; transition: transform .2s; }
.directo[aria-expanded="true"] .d-flecha { transform: rotate(180deg); }

/* ── desplegable de canales: cada uno con su color de marca ── */
.donde-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 190px; padding: 6px; border-radius: 12px;
  background: #10141d; border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 2px;
}
.donde-menu[hidden] { display: none; }
.dm {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  color: var(--txt); font: .82em/1 var(--font);
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.dm svg { width: 18px; height: 18px; flex: none; fill: var(--marca); stroke: none; }
.dm span { flex: 1; }
.dm:hover { background: color-mix(in srgb, var(--marca) 16%, transparent); border-color: var(--marca); }
.dm.twitch  { --marca: #9146ff; }
.dm.youtube { --marca: #ff0033; }
.dm.tiktok  { --marca: #25f4ee; }
.dm.kick    { --marca: #53fc18; }

/* punto de "está emitiendo": de momento solo Twitch lo sabe */
.dm-punto { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.dm.vivo .dm-punto { background: #ff4b58; box-shadow: 0 0 0 3px rgba(255,75,88,.22); }

/* ── quién está jugando ── */
/* Va antes del estado del juego y con el mismo aire de pastilla, para que se
   lean como una sola cosa: quién juega y a qué. */
/* Las tres píldoras de la derecha —quién juega, si hay señal y el reloj— se
   miden IGUAL: misma altura, mismo redondeo, mismo borde. Antes cada una
   llevaba su propio padding (3px 12px 3px 4px contra 5px 11px) y con un
   avatar de 26 px dentro salían de tres alturas distintas. */
.quien, .enlace, .reloj {
  display: inline-flex; align-items: center; flex: none;
  height: 32px; box-sizing: border-box;
  border-radius: 99px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  font: .72em/1 var(--mono); font-synthesis: none; letter-spacing: .04em;
}

/* La primera que se vea es la que empuja al grupo a la derecha. Con el rótulo
   del jugador oculto el margen automático se quedaba en él, que no se pinta, y
   el grupo se descolgaba a la izquierda. */
.quien, .enlace { margin-left: auto; }
.quien:not([hidden]) ~ .enlace, .enlace ~ .reloj { margin-left: 0; }

.quien {
  gap: 8px; padding: 0 12px 0 3px; color: var(--txt);
}
.quien[hidden] { display: none; }
.quien img {
  width: 24px; height: 24px; border-radius: 50%;
  image-rendering: pixelated;                 /* es un sprite de 16 px */
  background: rgba(255,255,255,.06);
  object-fit: cover;
}
.quien b { font-weight: inherit; text-transform: uppercase; }

/* ── ¿habla el juego con la plataforma? ── */
.enlace { gap: 7px; padding: 0 12px; color: var(--txt-dim); }
.enlace b { font-weight: inherit; text-transform: uppercase; }
.e-luz { width: 7px; height: 7px; border-radius: 50%; background: #5b6273; flex: none; }
.enlace[data-on="true"] {
  color: #bdf5d3; background: rgba(62,207,122,.12); border-color: #2f6b45;
}
.enlace[data-on="true"] .e-luz {
  background: var(--ok);
  animation: latido-enlace 1.8s ease-in-out infinite;
}
@keyframes latido-enlace { 50% { box-shadow: 0 0 0 4px rgba(62,207,122,.22); } }
@media (prefers-reduced-motion: reduce) { .enlace[data-on="true"] .e-luz { animation: none; } }

/* ── la conexión solo aparece si se ha caído ── */
.conn {
  padding: 5px 12px; border-radius: 99px; font: .78em/1 var(--mono);
  font-synthesis: none; color: #ffd7db; background: rgba(238,43,59,.18);
  border: 1px solid var(--accent); flex: none;
}
.conn::before { content: none; }
.conn[data-on="true"] { display: none; }

/* ── la cabecera en pantallas estrechas ──────────────────────────────────────
   En una fila caben la marca, el progreso con sus tres píldoras (quién juega,
   señal y reloj), las pestañas y «Dónde ver» a partir de unos 1300 px. Por
   debajo, las píldoras se metían DEBAJO de las pestañas y en un móvil todo se
   salía por la derecha. Así que:
     · en pantallas medianas, dos filas: arriba marca, pestañas y «Dónde ver»;
       abajo el progreso a todo el ancho, con sitio para las tres píldoras;
     · en un móvil, tres: marca y «Dónde ver» (solo el icono), las pestañas a
       todo el ancho, y el progreso, con las píldoras pasando a otra línea si
       no caben.
   El alto lo mide app.js (--topbar), así que el mapa se ajusta solo. */
@media (max-width: 1300px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar nav.tabs { order: 1; margin-left: auto; }
  .topbar .donde { order: 2; }
  .topbar .conn { order: 3; }
  .topbar .progreso { order: 4; flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 700px) {
  .topbar { gap: 10px 12px; padding: 10px 12px 12px; }
  .marca-txt { font-size: .8em; }
  .topbar .donde { margin-left: auto; order: 1; }
  .directo { padding: 7px 10px; }
  .directo .d-txt, .directo .d-flecha { display: none; }
  .topbar nav.tabs { order: 2; flex: 1 1 100%; margin-left: 0; }
  .topbar nav.tabs button { flex: 1; justify-content: center; padding: 7px 10px 7px 22px; }
  .topbar nav.tabs button::after { left: 7px; }
  .topbar .progreso { order: 4; gap: 8px; }
  .pg-datos { flex-wrap: wrap; row-gap: 8px; gap: 8px; }
  .pg-cifras { flex: 1 1 100%; }
  .contador { font-size: 22px; }
  /* en su propia línea van seguidas desde la izquierda */
  .quien, .enlace, .quien:not([hidden]) ~ .enlace { margin-left: 0; }
  .quien, .enlace, .reloj { height: 28px; font-size: .66em; letter-spacing: .02em; }
  .enlace, .reloj { padding: 0 9px; gap: 6px; }
  .quien { padding: 0 9px 0 3px; gap: 6px; }
  .quien img { width: 21px; height: 21px; }
  main { padding-left: 12px; padding-right: 12px; }
  #panel-mundo { margin: 0 -12px; }
}

/* ══════════════════════════ rejilla de la Pokédex ═════════════════════════ */
.celda {
  border-radius: 8px;
  background: linear-gradient(180deg, #161a24, #11141c);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: transform .16s var(--curva), border-color .16s, box-shadow .16s;
}
.celda:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: color-mix(in srgb, var(--t, var(--accent-2)) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--t, var(--accent-2)) 45%, transparent),
              0 6px 18px color-mix(in srgb, var(--t, var(--accent-2)) 28%, transparent);
  z-index: 2;
}
.celda[data-estado="capturado"] {
  background: linear-gradient(180deg, #16241a, #101a13);
  border-color: #2f6b45;
}
/* destello que cruza la celda al capturar */
.celda[data-estado="capturado"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0;
  animation: destello .9s var(--curva) 1;
}
@keyframes destello { to { background-position: -30% 0; } }
.celda .num { font-size: 9px; opacity: .75; }

/* ══════════════════════ cabeceras de región de la lista ═══════════════════ */
.sep-region {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--reg) 20%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-left-width: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
/* franjas diagonales, como los recuadros de la interfaz de Gen 5 */
.sep-region::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(115deg,
    transparent 0 10px, color-mix(in srgb, var(--reg) 9%, transparent) 10px 12px);
  mask-image: linear-gradient(90deg, transparent 62%, #000);
}
.sep-region h3 {
  font-family: var(--mono); font-size: .95em; letter-spacing: .1em;
  text-transform: uppercase; font-synthesis: none;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.sr-barra { height: 7px; background: #05070c; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.sr-barra > i { box-shadow: 0 0 8px color-mix(in srgb, var(--reg) 60%, transparent); }
.sep-region.completa::before {
  content: "COMPLETA"; position: absolute; right: 14px; top: 12px;
  font: .62em/1 var(--mono); letter-spacing: .16em; color: var(--ok);
  border: 1px solid currentColor; padding: 4px 7px; border-radius: 4px;
}

/* ═══════════════════════════════ filtros ══════════════════════════════════ */
.filtros { align-items: center; padding: 16px 0 10px; }
.filtros input, .filtros select {
  background: #0d1017; border-color: #232a38; border-radius: 9px; padding: 8px 12px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
  transition: border-color .18s, box-shadow .18s;
}
.filtros input:focus, .filtros select:focus {
  outline: none; border-color: var(--pk-azul);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 0 3px rgba(47,127,224,.2);
}
#resumen { font: .82em/1 var(--mono); font-synthesis: none; }

/* ═══════════════════════════ ventanas modales ═════════════════════════════ */
.modal .velo { background: rgba(4,6,10,.78); backdrop-filter: blur(7px) saturate(.9); }
.ficha {
  border: 1px solid #2b3346; border-radius: 18px;
  background: linear-gradient(180deg, #151924, #10131b);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: entra .26s var(--curva);
}
@keyframes entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
}
.ficha .cabecera {
  position: relative;
  background:
    radial-gradient(520px 180px at 12% 0%, rgba(47,127,224,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
/* el sprite flota despacio, como en la pantalla de estado del juego */
@keyframes flota { 50% { transform: translateY(-5px); } }
.ficha .cabecera > img:first-child { animation: flota 3.4s ease-in-out infinite; }
.ficha h3 { color: #9fb0cc; }
.ficha .cerrar { transition: transform .18s var(--curva), background .18s; }
.ficha .cerrar:hover { transform: rotate(90deg); }

/* filas de "dónde conseguirlo" con más presencia */
.ubic .u {
  background: linear-gradient(180deg, #0f131b, #0c0f16);
  transition: border-color .18s, transform .18s var(--curva), box-shadow .18s;
}
.ubic .u:hover { transform: translateX(3px); border-color: #37507a; }
.u-fin { display: inline-flex; align-items: center; gap: 10px; }
.ver-mapa {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 99px;
  color: var(--txt-dim); padding: 5px 11px 5px 8px; font: inherit; font-size: .8em;
  transition: color .18s, border-color .18s, background .18s;
}
.ver-mapa svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ver-mapa:hover { color: #fff; border-color: var(--pk-azul); background: rgba(47,127,224,.15); }

/* botones de "mostrar más" */
.btn-mas { transition: border-color .18s, color .18s, background .18s; }
.btn-mas:hover { background: rgba(255,255,255,.03); }

/* ═════════════════════════ ficha de zona del mapa ═════════════════════════ */
.zona-cab .zona-prog { margin-top: 12px; max-width: 420px; }
.zona-prog .zp-txt { font: .8em/1 var(--mono); color: var(--txt-dim); font-synthesis: none; }
.zona-prog .barra { display: block; width: 100%; height: 9px; margin-top: 7px; }

.zona-lista { display: flex; flex-direction: column; gap: 5px; }
.ze {
  display: grid; grid-template-columns: 46px 1fr auto 128px; gap: 12px; align-items: center;
  padding: 7px 12px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #0f131b, #0c0f16); border: 1px solid var(--line);
  transition: border-color .16s, transform .16s var(--curva);
}
.ze:hover { border-color: var(--pk-azul); transform: translateX(3px); }
.ze img { width: 44px; height: 44px; }
.ze-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ze-n i { font: .74em/1 var(--mono); color: var(--txt-dim); font-style: normal; font-synthesis: none; }
.ze-tipos { display: flex; gap: 4px; }
.ze-tipos .tipo {
  font: .68em/1 var(--mono); font-style: normal; text-transform: uppercase;
  color: #fff; padding: .45em .6em; border-radius: 4px; font-synthesis: none;
}
.ze-prob { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.ze-prob b { font: .9em/1 var(--mono); color: var(--warn); min-width: 3.2em; text-align: right; font-synthesis: none; }
.zp-barra { width: 62px; height: 6px; border-radius: 99px; background: #05070c; overflow: hidden; border: 1px solid #000; }
/* color según lo probable que sea, no según dónde caiga en la barra */
.zp-barra > i { display: block; height: 100%; background: var(--accent); }
.ze[data-prob="alta"]  .zp-barra > i { background: var(--ok); }
.ze[data-prob="media"] .zp-barra > i { background: var(--warn); }
.ze[data-prob="alta"]  .ze-prob b { color: var(--ok); }
.ze[data-prob="baja"]  .ze-prob b { color: var(--accent); }
.ze.capturado { border-color: #2f6b45; background: linear-gradient(180deg, #121c15, #0d140f); }

.ficha h3 svg.ico-met { width: 1.15em; height: 1.15em; vertical-align: -.18em; margin-right: 5px; }

/* ══════════════════════════ menú lateral del mundo ════════════════════════ */
.mundo-menu { box-shadow: 6px 0 24px rgba(0,0,0,.45); }
.mm-item { transition: border-color .16s, transform .16s var(--curva), background .16s; }
.mm-item:hover { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════════════
   Quien haya pedido menos movimiento, que tenga menos movimiento.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════ marco de ventana estilo Blanco/Negro ══════════════════
   Las cajas de Gen 5 son tres capas: filo negro, marco de color con una línea
   clara por dentro, y el panel del contenido encajado dentro con su propio
   filo. Aquí es lo mismo pero en oscuro, que es lo que pide un directo.

   Busqué un asset ya hecho de ese borde y lo que hay son recortes de sprites
   de los juegos (con derechos de Nintendo y a resolución de DS). Sale mejor
   dibujarlo: escala a cualquier tamaño y no arrastra licencias. */
.ficha {
  padding: 8px;
  border: 2px solid #05070d;
  border-radius: 20px;
  background:
    repeating-linear-gradient(125deg, transparent 0 7px, rgba(255,255,255,.025) 7px 9px),
    linear-gradient(180deg, #3c5c98, #22345a 55%, #1a2846);
  box-shadow:
    0 0 0 1px rgba(185,215,255,.55) inset,     /* la línea clara del marco */
    0 0 0 5px rgba(0,0,0,.35),
    0 26px 74px rgba(0,0,0,.72);
  /* el scroll pasa al panel interior: si no, el marco se iría con el contenido */
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ficha > #ficha-cont, .ficha > #calc-cont {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-2); border-radius: 13px;
  box-shadow: 0 0 0 1px #05070d inset;
}
/* la X va sobre el marco, no sobre el panel */
.ficha .cerrar {
  top: 14px; right: 16px; color: #c9dcff;
  background: rgba(0,0,0,.28); border-radius: 8px; line-height: .8;
}
.ficha .cerrar:hover { background: rgba(0,0,0,.5); color: #fff; }

/* ═════════════════════ barra de desplazamiento ════════════════════════════
   La del navegador canta muchísimo sobre una interfaz así. Se deja fina, con
   el carril hundido y el tirador en rojo pokéball. */
* { scrollbar-width: thin; scrollbar-color: #b3323f #0b0e15; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: #0a0d14;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.05), inset 0 0 6px rgba(0,0,0,.8);
}
::-webkit-scrollbar-thumb {
  border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
  background-color: #8f2a35;
  transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover  { background-color: var(--pk-rojo); }
::-webkit-scrollbar-thumb:active { background-color: #ff5c69; }
::-webkit-scrollbar-corner { background: #0a0d14; }

/* dentro de una ficha el carril va a juego con el marco */
.ficha > #ficha-cont::-webkit-scrollbar-track,
.ficha > #calc-cont::-webkit-scrollbar-track { background: #0d1119; border-radius: 0 13px 13px 0; }

/* iconos de las pestañas: sprite del Mapa Pueblo y Pokédex dibujada */
.t-ico { width: 22px; height: 22px; image-rendering: pixelated; flex: none;
         filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
nav.tabs button { display: inline-flex; align-items: center; gap: 8px; padding-left: 25px; }
nav.tabs button::after { left: 9px; }
nav.tabs button:not([aria-selected="true"]) .t-ico { filter: grayscale(.7); opacity: .65; transition: filter .18s, opacity .18s; }
nav.tabs button:hover .t-ico { filter: none; opacity: 1; }

/* el porcentaje del ratio, más discreto que la cifra */
.ficha .datos b i { font-style: normal; font-size: .82em; color: var(--txt-dim); }

/* ═══════════════════ celebración de captura ═══════════════════════════════
   La tarjeta baja del borde de arriba, se queda unos segundos y se va sola.
   Toda la capa es pointer-events:none: nunca debe estorbar a quien esté
   usando la plataforma mientras cae el confeti. */
.celebra {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  display: flex; justify-content: center;
}
.cel-confeti { position: absolute; inset: 0; width: 100%; height: 100%; }
.cel-cards { position: absolute; top: 0; display: flex; flex-direction: column; gap: 8px; }

.cel-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 12px;
  background: linear-gradient(180deg, #1a2030, #10141d);
  border: 2px solid var(--pk-oro); border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 -2px 0 rgba(255,255,255,.05);
  /* arranca escondida POR ENCIMA del borde: la animación es "asomarse" */
  transform: translateY(-130%);
  transition: transform .52s cubic-bezier(.18,.9,.28,1.25), opacity .3s;
}
.cel-card.entra { transform: translateY(0); }
.cel-card.sale  { transform: translateY(-130%); opacity: 0; }

.cel-mon {
  width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
  animation: cel-brinco .62s ease-out 2;
}
@keyframes cel-brinco {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-9px) scale(1.06); }
}
.cel-txt { display: flex; flex-direction: column; gap: 3px; }
.cel-txt b { font: 17px/1 var(--mono); font-synthesis: none; letter-spacing: .04em; }
.cel-txt span { font: 10px/1 var(--mono); font-synthesis: none; color: var(--pk-oro); letter-spacing: .06em; }
.cel-num { font: 11px/1 var(--mono); font-synthesis: none; color: var(--txt-dim); align-self: flex-start; margin-top: 4px; }

/* Medalla y Liga: la misma tarjeta, teñida con --cel-tinte (el color de la
   medalla, o el oro de la Liga) para reconocer el hito de un vistazo. */
.cel-card.es-medalla, .cel-card.es-liga {
  border-color: var(--cel-tinte, var(--pk-oro));
  box-shadow: 0 10px 30px rgba(0,0,0,.6),
              0 0 26px -6px var(--cel-tinte, var(--pk-oro)),
              inset 0 -2px 0 rgba(255,255,255,.05);
}
.cel-card.es-medalla .cel-txt span,
.cel-card.es-liga    .cel-txt span { color: var(--cel-tinte, var(--pk-oro)); }

.cel-icono {
  width: 58px; height: 58px; object-fit: contain;
  filter: drop-shadow(0 0 8px var(--cel-tinte, var(--pk-oro)));
  animation: cel-brinco .62s ease-out 2;
}
.cel-copa { font-size: 44px; line-height: 1; animation: cel-brinco .62s ease-out 3; }

/* El equipo que ganó la Liga, en pequeño y a un lado. */
.cel-equipo { display: flex; gap: 2px; align-self: center; margin-left: 4px; }
.cel-equipo img {
  width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated;
}

/* Los hitos de la Pokédex y del reto: la misma tarjeta, el doble de grande,
   con su cifra en dorado y un brillo que la cruza. */
.cel-card.es-hito {
  position: relative; overflow: hidden;
  gap: 22px; padding: 18px 34px 20px 24px;
  border: 3px solid var(--cel-tinte); border-top: none; border-radius: 0 0 22px 22px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--cel-tinte) 28%, transparent), transparent 60%),
    linear-gradient(180deg, #1e2536, #10141d);
  box-shadow: 0 14px 40px rgba(0,0,0,.65), 0 0 46px -8px var(--cel-tinte),
              inset 0 -2px 0 rgba(255,255,255,.05);
}
.cel-card.es-hito::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%,
    color-mix(in srgb, var(--cel-tinte) 35%, rgba(255,255,255,.45)) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: cel-barrido 1.4s ease-in-out .6s 2 both;
}
@keyframes cel-barrido { to { transform: translateX(120%); } }
.cel-hito-cifra {
  display: flex; flex-direction: column; align-items: center; line-height: .9;
  min-width: 96px;
  animation: cel-late 1.1s ease-in-out .7s 3;
}
.cel-hito-cifra b {
  font: 56px/1 var(--mono); font-synthesis: none;
  background: linear-gradient(180deg, #fff6c2, #ffd84d 45%, #e08b14);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #05070b) drop-shadow(0 0 14px color-mix(in srgb, var(--cel-tinte) 70%, transparent));
}
.cel-card.hito-region .cel-hito-cifra b, .cel-card.hito-inicio .cel-hito-cifra b {
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--cel-tinte) 55%, #fff) 50%, var(--cel-tinte));
  -webkit-background-clip: text; background-clip: text;
}
.cel-hito-cifra small {
  margin-top: 6px; font: 10px/1 var(--mono); font-synthesis: none;
  letter-spacing: .14em; text-transform: uppercase; color: #e9eef8;
}
@keyframes cel-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.cel-card.es-hito .cel-txt { gap: 6px; }
.cel-card.es-hito .cel-txt em {
  font: 12px/1 var(--mono); font-style: normal; font-synthesis: none;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cel-tinte);
}
.cel-card.es-hito .cel-txt b { font-size: 26px; }
.cel-card.es-hito .cel-txt span { font-size: 11px; color: var(--txt-dim); }

/* ── lo épico: legendarios, míticos y hitos gordos ──────────────────────────
   Destello en toda la página, una cinta colgando de la tarjeta y confeti de
   su color. Lo mismo que en OBS (overlay.css), a la medida de la web. */
.cel-flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 12%, #fff 0 10%,
    color-mix(in srgb, var(--cel-tinte, #fff) 50%, transparent) 34%, transparent 70%);
  opacity: 0; animation: cel-flash 1.1s ease-out both;
}
.cel-flash.nivel-3 { animation: cel-flash-doble 1.5s ease-out both; }
@keyframes cel-flash { 0% { opacity: 0; } 12% { opacity: .8; } 100% { opacity: 0; } }
@keyframes cel-flash-doble { 0% { opacity: 0; } 9% { opacity: .85; } 40% { opacity: .1; } 52% { opacity: .75; } 100% { opacity: 0; } }

.cel-card.cel-epico { position: relative; margin-bottom: 18px; }
/* En los hitos la tarjeta recorta (es lo que contiene el brillo que la
   cruza), así que la cinta va DENTRO, abajo, y se le hace sitio. En la
   captura de un legendario cuelga por fuera. */
.cel-card.cel-epico.es-hito { margin-bottom: 0; padding-bottom: 44px; }
.cel-card.es-hito .cel-cinta { bottom: 10px; }
.cel-cinta {
  position: absolute; left: 50%; bottom: -15px; translate: -50% 0; z-index: 2;
  pointer-events: none;
}
.cel-cinta span {
  display: block; white-space: nowrap;
  padding: 4px 14px 5px; border-radius: 6px;
  font: 12px/1 var(--mono); font-synthesis: none; letter-spacing: .16em; text-transform: uppercase;
  color: #1c1305;
  background: linear-gradient(180deg, #fff7cf, var(--cel-tinte, var(--pk-oro)) 60%,
    color-mix(in srgb, var(--cel-tinte, var(--pk-oro)) 65%, #3a2604));
  border: 2px solid #05070b;
  box-shadow: 0 3px 0 #05070b, 0 0 18px color-mix(in srgb, var(--cel-tinte, var(--pk-oro)) 70%, transparent);
  animation: cel-cinta .5s cubic-bezier(.18,.9,.28,1.25) .25s both, cel-late 1.5s ease-in-out 1s 4;
}
@keyframes cel-cinta { from { transform: scale(.2) rotate(-7deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Las estrellas de la cinta van dibujadas: la fuente de títulos no tiene «★»
   y salía un puntito. */
.cinta-epica span::before, .cinta-epica span::after,
.cel-cinta span::before, .cel-cinta span::after {
  content: ''; display: inline-block; width: .7em; height: .7em; margin: 0 .55em;
  vertical-align: -.02em; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.cel-card.es-mitico .cel-cinta span, .cel-card.hito-pokedex .cel-cinta span {
  color: #fff; text-shadow: 0 2px 0 #05070b;
  background: linear-gradient(90deg, #ff5a6e, #ffb347, #ffe066, #7ee081, #5ec8ff, #b48bff);
}
.cel-card.es-legendario, .cel-card.es-mitico {
  border-color: transparent;
  background:
    linear-gradient(180deg, #241d10, #10141d) padding-box,
    linear-gradient(135deg, #fff3a8, #ffd84d 35%, #e08b14 70%, #fff3a8) border-box;
  border-width: 3px; border-top: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 34px -6px var(--cel-tinte);
}
.cel-card.es-mitico {
  background:
    linear-gradient(180deg, #1d1730, #10141d) padding-box,
    linear-gradient(135deg, #ff5a6e, #ffb347, #ffe066, #7ee081, #5ec8ff, #b48bff, #ff5a6e) border-box;
}
.cel-card.es-legendario .cel-mon, .cel-card.es-mitico .cel-mon {
  width: 76px; height: 76px;
  filter: drop-shadow(0 0 10px var(--cel-tinte)) drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
.cel-card.es-legendario .cel-txt em, .cel-card.es-mitico .cel-txt em {
  font: 11px/1 var(--mono); font-style: normal; font-synthesis: none;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cel-tinte);
}
.cel-card.es-legendario .cel-txt b, .cel-card.es-mitico .cel-txt b { font-size: 20px; }
.cel-card.hito-grande { padding: 22px 40px 24px 28px; }
.cel-card.hito-grande .cel-hito-cifra b { font-size: 68px; }
.cel-card.cel-epico-3 { padding: 24px 44px 26px 30px; }

/* ── evolución: la silueta parpadea entre las dos formas ─────────────────── */
.cel-evo, .cel-eclo { position: relative; width: 64px; height: 64px; flex: none; }
.cel-evo img { position: absolute; inset: 0; width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.cel-evo-color { animation: cel-fuera .2s linear 1s both; }
.cel-evo-sil { filter: brightness(0) invert(1) drop-shadow(0 0 6px #bfefff); opacity: 0; }
.cel-evo-sil.de { animation: cel-evo-de 2.4s step-end 1s both; }
.cel-evo-sil.a  { animation: cel-evo-a 2.4s step-end 1s both; }
.cel-evo-nuevo { opacity: 0; animation: cel-sale .5s cubic-bezier(.18,.9,.28,1.25) 3.45s both, cel-brinco .62s ease-out 4.1s 2 !important; }
.cel-eclo-nuevo { position: absolute; inset: 0; opacity: 0; animation: cel-sale .5s cubic-bezier(.18,.9,.28,1.25) 3s both, cel-brinco .62s ease-out 3.6s 2 !important; }
.cel-evo-destello {
  position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, color-mix(in srgb, var(--cel-tinte) 70%, #fff) 55%, transparent 72%);
  opacity: 0; animation: cel-destello .6s ease-out 3.4s both;
}
.cel-eclo .cel-evo-destello { animation-delay: 2.95s; }
@keyframes cel-fuera { to { opacity: 0; } }
@keyframes cel-sale { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes cel-destello { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(3); } 100% { opacity: 0; transform: scale(4.4); } }
@keyframes cel-evo-de {
  0% { opacity: 1; } 16% { opacity: 0; } 28% { opacity: 1; } 38% { opacity: 0; } 46% { opacity: 1; }
  53% { opacity: 0; } 59% { opacity: 1; } 64% { opacity: 0; } 68.5% { opacity: 1; } 72.5% { opacity: 0; }
  76% { opacity: 1; } 79% { opacity: 0; } 82% { opacity: 1; } 84.5% { opacity: 0; } 87% { opacity: 1; }
  89% { opacity: 0; } 91% { opacity: 1; } 92.8% { opacity: 0; } 94.4% { opacity: 1; } 95.8% { opacity: 0; }
  97% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes cel-evo-a {
  0% { opacity: 0; } 16% { opacity: 1; } 28% { opacity: 0; } 38% { opacity: 1; } 46% { opacity: 0; }
  53% { opacity: 1; } 59% { opacity: 0; } 64% { opacity: 1; } 68.5% { opacity: 0; } 72.5% { opacity: 1; }
  76% { opacity: 0; } 79% { opacity: 1; } 82% { opacity: 0; } 84.5% { opacity: 1; } 87% { opacity: 0; }
  89% { opacity: 1; } 91% { opacity: 0; } 92.8% { opacity: 1; } 94.4% { opacity: 0; } 95.8% { opacity: 1; }
  97% { opacity: 0; } 98% { opacity: 1; } 99.4% { opacity: 1; } 100% { opacity: 0; }
}
/* El texto cambia en el destello: primero el «¿Qué?», luego lo que salió. */
.cel-fase.dos { display: none; }
.cel-card.es-evolucion .cel-fase.uno { animation: cel-fuera .01s linear 3.45s both; }
.cel-card.es-evolucion .cel-fase.dos { display: block; height: 0; overflow: hidden; animation: cel-fase-dos .35s ease-out 3.5s both; }
.cel-card.es-eclosion .cel-fase.uno { animation: cel-fuera .01s linear 3s both; }
.cel-card.es-eclosion .cel-fase.dos { display: block; height: 0; overflow: hidden; animation: cel-fase-dos .35s ease-out 3.05s both; }
@keyframes cel-fase-dos { from { height: 0; opacity: 0; } to { height: 1.1em; opacity: 1; } }
.cel-card.es-evolucion .cel-fase.uno, .cel-card.es-eclosion .cel-fase.uno { font-size: 13px; }

/* ── eclosión: el huevo (el dibujo del reto) se mueve, se agrieta y se parte ─ */
.cel-eclo .huevo-eclosion {
  position: absolute; left: 50%; top: 50%; width: 48px; aspect-ratio: 215 / 256;
  translate: -50% -50%; transform-origin: 50% 92%;
  animation: cel-hv-mece 2.2s ease-in-out .6s both;
}
.cel-eclo .huevo-eclosion img, .cel-eclo .huevo-eclosion svg {
  position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto;
}
@keyframes cel-hv-mece {
  0%, 15%, 32%, 48%, 62%, 84%, 100% { rotate: 0deg; }
  5% { rotate: -7deg; } 10% { rotate: 7deg; }
  36% { rotate: -11deg; } 40% { rotate: 11deg; } 44% { rotate: -8deg; }
  65% { rotate: -15deg; } 68% { rotate: 15deg; } 71% { rotate: -15deg; }
  74% { rotate: 14deg; } 77% { rotate: -11deg; } 80% { rotate: 9deg; }
}
.cel-eclo .hv-grieta { opacity: 0; }
.cel-eclo .hv-grieta.g1 { animation: cel-luz .01s linear 1.3s both; }
.cel-eclo .hv-grieta.g2 { animation: cel-luz .01s linear 2s both; }
.cel-eclo .hv-grieta.g3 { animation: cel-luz .01s linear 2.55s both; }
@keyframes cel-luz { to { opacity: 1; } }
.cel-eclo .hv-arriba { transform-origin: 50% 55%; animation: cel-hv-vuela .6s cubic-bezier(.2,.7,.3,1) 2.95s both; }
.cel-eclo .hv-abajo { animation: cel-hv-cae .55s ease-in 2.95s both; }
.cel-eclo .hv-grietas { animation: cel-fuera .01s linear 2.95s both; }
@keyframes cel-hv-vuela { to { transform: translate(-8px, -30px) rotate(-38deg); opacity: 0; } }
@keyframes cel-hv-cae { to { transform: translateY(14px) scale(.92); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cel-card { transition: opacity .3s; transform: none; }
  .cel-mon, .cel-icono, .cel-copa, .cel-hito-cifra, .cel-card.es-hito::after { animation: none; }
  .cel-flash, .cel-evo-color, .cel-evo-sil, .cel-eclo .huevo-eclosion, .cel-evo-destello,
  .cel-fase.uno { display: none; }
  .cel-evo-nuevo, .cel-eclo-nuevo { opacity: 1; animation: none !important; }
  .cel-fase.dos { display: block; height: auto; animation: none !important; }
  .cel-cinta span { animation: none; }
}

/* ═══════════════════ corregir a mano (solo en el equipo del reto) ═══════════
   Ver web/js/corregir.js. Discreto a propósito: es una herramienta para
   arreglar el marcador, no algo que se use a cada rato. */
.sr-editar {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 7px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--txt-dim); cursor: pointer; font-size: 13px; line-height: 1;
  transition: color .15s, border-color .15s;
}
.sr-editar:hover { color: var(--txt); border-color: var(--reg, var(--accent-2)); }
.sr-editar[hidden] { display: none; }

.cm-seccion h3 small, .cm-med h3 small {
  font: 400 .72em/1 var(--font); letter-spacing: 0; text-transform: none;
  color: var(--txt-dim); margin-left: 6px;
}
.cm-estado { margin: 0 0 12px; color: var(--txt-dim); }
.cm-estado b { color: var(--txt); font-weight: 600; }
.cm-fijada {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px;
  font-size: .8em; color: var(--pk-oro); border: 1px solid color-mix(in srgb, var(--pk-oro) 45%, transparent);
}
.cm-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cm-sep { flex: 0 0 1px; align-self: stretch; background: var(--line); }
.cm-campo { display: inline-flex; align-items: center; gap: 7px; color: var(--txt-dim); font-size: .9em; }
.cm-campo select {
  background: var(--bg); color: var(--txt); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 9px; font: inherit;
}
.cm-check { display: inline-flex; align-items: center; gap: 7px; color: var(--txt-dim); font-size: .9em; cursor: pointer; }
.cm-btn {
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--txt); font: inherit; font-size: .9em; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cm-btn:hover { border-color: var(--accent-2); }
.cm-btn:disabled { opacity: .5; cursor: progress; }
.cm-btn.primario { background: #2a4a86; border-color: #3f6bb8; }
.cm-btn.primario:hover { background: #3f6bb8; }
.cm-btn.peligro { color: #ffd7db; border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(238,43,59,.12); }
.cm-btn.peligro:hover { background: rgba(238,43,59,.25); border-color: var(--accent); }
.cm-nota { margin: 12px 0 0; font-size: .82em; color: var(--txt-dim); }
.cm-error { margin: 10px 0 0; color: #ff8d97; font-size: .88em; }

/* el editor de medallas: un diálogo nativo, encima de todo */
.cm-dialogo {
  width: min(520px, 94vw); padding: 0; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--txt);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.cm-dialogo::backdrop { background: rgba(4,6,10,.7); }
.cm-med { padding: 20px 22px; }
.cm-med h3 { margin: 0 0 4px; font-size: 1.1em; }
.cm-med-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 16px; }
@media (max-width: 420px) { .cm-med-rejilla { grid-template-columns: repeat(2, 1fr); } }
.cm-med-una {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer;
  font-size: .78em; color: var(--txt-dim); text-align: center;
  transition: border-color .15s, background .15s;
}
.cm-med-una input { position: absolute; opacity: 0; pointer-events: none; }
.cm-med-una img {
  width: 36px; height: 36px; object-fit: contain;
  filter: grayscale(1) brightness(.45); opacity: .55; transition: filter .2s, opacity .2s;
}
.cm-med-una:has(input:checked) { border-color: var(--pk-oro); background: rgba(245,197,49,.08); color: var(--txt); }
.cm-med-una:has(input:checked) img { filter: none; opacity: 1; }
.cm-med-una:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cm-fin { justify-content: flex-end; margin-top: 16px; }

/* Cada medalla de la Lista, pulsable en el equipo del reto (ajuste manual) */
.sr-med {
  display: grid; place-items: center; padding: 2px; margin: -2px;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.sr-med:hover img { opacity: .9; transform: translateY(-1px) scale(1.18); }
.sr-med:hover img.on { transform: translateY(-2px) scale(1.18); }
.sr-med:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

/* el estado de la cabecera de la ficha, que abre el ajuste manual */
.cm-enlace {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--txt-dim) 70%, transparent);
}
.cm-enlace:hover { color: var(--accent-2); border-bottom-color: currentColor; }

/* el diálogo pequeño: una medalla o un Pokémon */
.cm-pequeno { width: min(440px, 94vw); }
.cm-uno { padding: 18px 20px; }
.cm-uno-cab { display: flex; gap: 14px; align-items: center; }
.cm-uno-cab > img {
  flex: none; width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated;
  border-radius: 12px; background: var(--bg); border: 1px solid var(--line); padding: 6px;
}
.cm-uno-cab > img.apagada { filter: grayscale(1) brightness(.55); }
.cm-uno-cab small { color: var(--txt-dim); font-size: .78em; }
.cm-uno-cab h3 { margin: 2px 0 4px; font-size: 1.12em; }
.cm-uno-estado { margin: 0; font-size: .9em; }
.cm-uno-estado.si { color: var(--ok); }
.cm-uno-estado.no { color: var(--txt-dim); }
.cm-uno-estado b { color: var(--txt); }
.cm-uno-campos { margin-top: 12px; }
.cm-aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer;
}
.cm-aviso:has(input:checked) { border-color: color-mix(in srgb, var(--pk-oro) 55%, transparent); }
.cm-aviso input { margin-top: 3px; accent-color: var(--pk-oro); }
.cm-aviso b { display: block; font-size: .92em; }
.cm-aviso small { display: block; margin-top: 2px; color: var(--txt-dim); font-size: .8em; line-height: 1.35; }

/* «Minuto del directo» en el recuerdo: enlaces a ese punto del vídeo */
.r-vods { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; vertical-align: middle; }
.r-vod {
  padding: 2px 9px; border-radius: 99px; font: 600 .78em/1.6 var(--font); text-decoration: none;
  color: #fff; border: 1px solid transparent; transition: filter .15s;
}
.r-vod.twitch  { background: #6441a5; }
.r-vod.youtube { background: #c4302b; }
.r-vod:hover { filter: brightness(1.15); }
.r-ensayo {
  margin-left: 8px; padding: 1px 7px; border-radius: 99px; vertical-align: middle;
  font: 600 .7em/1.6 var(--font); color: var(--pk-oro);
  border: 1px dashed color-mix(in srgb, var(--pk-oro) 60%, transparent);
}

/* Cuándo saltó una medalla y su minuto del directo (diálogo de la medalla) */
.cm-momento { margin: 14px 0 0; font-size: .9em; color: var(--txt-dim); line-height: 1.9; }
.cm-momento b { color: var(--txt); }
.cm-momento-dir { display: block; }
.ra-med.on { cursor: pointer; }
.hof-directo { margin-top: 4px; }
.hof-directo b { color: var(--txt); }