/* =========================================================
   PeruWC — hoja de estilos del portal
   Basada en la maqueta webtest/index.html, con correcciones:
   - .btn-auth y variantes fuera del media query (el botón del
     modal se veía plano en escritorio)
   - CSS muerto eliminado (banner-text sin uso, reglas vacías)
   - estilos nuevos: formularios, tablas, paginación, alertas
   ========================================================= */

@keyframes drive-in {
    from {
        transform: translateX(100px) translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

@keyframes bob-up-down {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Tahoma, Arial, sans-serif;
}

body {
    /* Fondo panorámico del juego; el color de respaldo evita el flash
       mientras carga la imagen. Fijo para que no se desplace con el scroll. */
    background-color: #0d1b3a;
    /* HALLOWEEN 2026 — para volver al fondo de siempre, cambia esta línea por
       url('../../images/head_bg_2.jpg') y el color de arriba por #7ec8e8. */
    /* El nombre lleva el ano a proposito: Cloudflare cachea las imagenes y una
       url() dentro del CSS no puede llevar `?v=`, asi que sustituir el archivo
       en su sitio deja a los jugadores con el anterior durante dias. Cambiando
       el nombre, la URL es nueva y no hay cache que valga. */
    background-image: url('../../images/fondo-peruwc.jpg');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff;
    display: flex;
    justify-content: center;
    padding: 0;
    min-height: 100vh;
}

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

.wrapper {
    width: 100%;
    max-width: 1124px;
    background-color: #0c1a27;
    margin: 0 auto;
    border-top: 1px solid #2d4c66;
    border-left: 1px solid #2d4c66;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    /* Separa el marco del fondo panorámico */
    box-shadow: 0 0 45px rgba(0, 20, 40, 0.55);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ---------- Topbar ---------- */

.topbar {
    height: 24px;
    background: linear-gradient(to bottom, #0e1e2d 0%, #050d14 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-size: 11px;
    font-weight: bold;
    border-bottom: 1px solid #1a2f42;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
}

.dualsoft-logo {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    margin-right: 150px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

/* La tabla del ranking lleva diez columnas y el marco de la web mide 1124 px:
   con el relleno de una tabla normal no cabe. Se aprieta solo aquí, en las
   columnas de cifras, que son cortas y no necesitan aire a los lados. */
.ranking-table th,
.ranking-table td {
    padding-left: 6px;
    padding-right: 6px;
}

.ranking-table .col-num {
    white-space: nowrap;
}

/* Columna del avatar en el ranking. La celda reserva siempre el mismo alto
   aunque el jugador no lleve nada puesto: si no, las filas con muñeco y las
   vacías tendrían distinta altura y la tabla parecería un acordeón. */
.col-ava-mu {
    width: 130px;
    min-width: 130px;
    height: 78px;
    padding: 2px 4px !important;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.ranking-table .col-ava-mu .ms-muneco {
    display: inline-block;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   El ranking en pantallas estrechas.

   La tabla tiene diez columnas y en un móvil no caben ni de lejos. En vez de
   dejarla desbordada —que es lo que hacía: se veía media tabla cortada y había
   que arrastrar a ciegas— se van quitando columnas por orden de importancia.

   Lo que NUNCA se quita es el puesto, el jugador y sus GP: es a lo que se
   entra al ranking. Todo lo escondido sigue estando en el escritorio.
   --------------------------------------------------------------------------- */

/* 1. Por debajo de 900 se van DE GOLPE las siete columnas de cifras —GP, los
      de hoy, los tres bonus, el clan y el movimiento— y la fila se convierte en
      una ficha: puesto, avatar y jugador.

      LOS DATOS NO SE PIERDEN. Reaparecen en `.cp-meta`, la línea que va debajo
      del nick y que en escritorio está oculta. Esconder las columnas a secas
      era lo de antes, y dejaba al jugador en el móvil sin ver ni sus GP.

      EL CORTE ES 900 Y NO MENOS POR UNA RAZÓN DE ESPACIO REAL: el menú lateral
      mide 255 px y NO se apila hasta los 768, así que entre 768 y 900 la tabla
      se queda con unos 600 px útiles y diez columnas no caben ni de lejos. */
@media (max-width: 900px) {
    .ranking-table .col-clan,
    .ranking-table .col-num,
    .ranking-table .col-mov {
        display: none;
    }

    /* `.cell-player .cp-meta` y no `.cp-meta` a secas: su regla de apagado
       —`display:none`— vive MUCHO más abajo en esta hoja, y a igual
       especificidad gana la última. Con dos clases esta pesa más y manda. */
    .cell-player .cp-meta {
        display: flex;
    }

    /* El nick ya no compite con siete columnas: se le quita el suelo de 168 px
       para que la celda ocupe todo lo que ha quedado libre. Va con las dos
       clases por lo mismo de arriba: el `min-width: 168px` está más abajo. */
    .ranking-table .cell-player {
        min-width: 0;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    /* DOS COSAS, Y LAS DOS HACEN FALTA.
       El sitio convierte TODAS las tablas en `display:block` con scroll en
       pantalla pequeña (regla `.gb-table` más abajo en esta hoja). Con
       `display:block` el navegador IGNORA `table-layout`, así que la tabla se
       reparte por el contenido: el nick, que no parte, se salía por la derecha.
       Aquí se le devuelve el modo tabla —tres columnas caben sin arrastrar— y
       con el reparto fijo cada una ocupa lo que se le dice.

       `.gb-table.ranking-table` lleva las dos clases a propósito: la regla que
       pone `display:block` es `.gb-table` a secas y va después en el archivo;
       con una sola clase perdería por orden. */
    .gb-table.ranking-table {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .gb-table.ranking-table .col-pos {
        width: 42px;
    }
}

/* 3. Ya en pantalla de teléfono el muñeco encoge para dejarle sitio al nick,
      que es lo único que queda compitiendo con él. */
@media (max-width: 620px) {
    /* Encoge DE VERDAD: `--mu-f` reduce a la vez la caja y el `scale()`, así
       que ocupa menos sitio en lugar de dejar un hueco vacío alrededor.
       Lo define `partials/muneco.php`. */
    .col-ava-mu .ms-muneco {
        --mu-f: 0.8;
    }

    .col-ava-mu {
        width: 104px;
        min-width: 104px;
        height: 64px;
    }

    .gb-table.ranking-table .col-pos {
        width: 34px;
    }

    .ranking-table th,
    .ranking-table td {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Estadísticas del avatar en la tienda. Cada una es icono + cifra con signo,
   y solo se pintan las que no están a cero. Van en una rejilla flexible para
   que una pieza con 5 bonificaciones no descuadre la tarjeta. */
.sh-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px 6px;
    margin: 4px 0 2px;
    min-height: 18px;
}

.av-stat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px;
    border-radius: 4px;
    background: #eef4f9;
    border: 1px solid #d8e2ea;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

.av-stat img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;   /* son GIF de 40x40 a 16: sin esto salen borrosos */
}

.av-stat b {
    color: #14663a;
    font-weight: bold;
}

/* En la tarjeta del set van alineadas a la izquierda, bajo la descripción,
   y no centradas como en la prenda suelta: ahí la tarjeta es ancha y
   centrarlas las dejaba flotando lejos del texto al que acompañan. */
.sh-set-stats {
    justify-content: flex-start;
    margin: 2px 0 8px;
}

/* Un valor negativo no siempre es malo (un delay en negativo es un premio),
   pero conviene que se distinga de un vistazo. */
.av-stat.es-negativo {
    background: #fdf1f1;
    border-color: #f0cdcd;
}

.av-stat.es-negativo b {
    color: #a3242e;
}

/* Banner del evento en la portada. La imagen manda: el bloque solo la
   encuadra y le da el mismo redondeo y separación que el resto de franjas. */
.hm-evento {
    display: block;
    margin: 0 0 14px;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hm-evento img {
    width: 100%;
    height: auto;
    display: block;
}

.hm-evento:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .hm-evento { transition: none; }
    .hm-evento:hover { transform: none; }
}

/* Conectados en la barra de arriba (antes vivía en el pie). El punto verde
   late para que se lea como un dato vivo y no como una cifra cualquiera. */
.tb-online {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffff00;
    font-weight: bold;
    white-space: nowrap;
}

.tb-online b {
    color: #ffff00;
}

.tb-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 5px #4ade80;
    animation: tb-online-late 2s ease-in-out infinite;
}

@keyframes tb-online-late {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Quien pide menos animación en su sistema no ve el parpadeo. */
@media (prefers-reduced-motion: reduce) {
    .tb-online-dot { animation: none; }
}

.topbar a {
    margin: 0 8px;
    color: #ffffff;
}

.topbar a:hover {
    text-decoration: underline;
}

.sep {
    color: #364f66;
    margin: 0 2px;
    font-weight: normal;
}

/* Formularios "invisibles" (logout) y botones con aspecto de enlace */
.inline-form {
    display: inline;
    margin: 0 8px;
}

.linklike {
    background: none;
    border: none;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    font-family: Tahoma, Arial, sans-serif;
    cursor: pointer;
    padding: 0;
}

.linklike:hover {
    text-decoration: underline;
}

/* ---------- Banner ---------- */

.banner {
    height: 170px;
    background: url('../../images/banner4.png') center right no-repeat;
    background-color: #123554;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 30px;
    overflow: hidden;
}

.gb-logo {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 10;
}

.gb-logo img {
    max-height: 160px;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.7));
}

/* ---------- Estructura principal ---------- */

.main {
    display: flex;
    flex-grow: 1;
}

.sidebar {
    width: 255px;
    padding-top: 0;
    padding-bottom: 15px;
    background-color: #0c1a27;
    position: relative;
    flex-shrink: 0;
}

/* ==================== Botón de descarga (barra lateral) ====================
   Dos capas: `dl-base` es el arte completo (cable + botón) y `dl-effect` es
   SOLO el botón redondo sobre transparencia, que se enciende encima.

   El botón redondo no está centrado en la imagen: su centro cae en el 62 %
   del ancho y el 48 % del alto, con un radio de ~19 % del ancho (medido sobre
   la caja de alfa de `game_download.png`). Todos los efectos se colocan ahí,
   que si no el brillo saldría en medio del cable.

   OJO: `game_downloadx1.png` es OPACA (no tiene transparencia), así que un
   halo por DETRÁS no se vería. Va por encima con `mix-blend-mode: screen`,
   que suma luz sin tapar el dibujo.

   Todo esto se mueve SOLO, sin pasar el ratón: el botón tiene que llamar la
   atención por su cuenta. Al pasar por encima, sube de intensidad.        */

.dl-wrap {
    position: relative;
    display: block;
    margin-bottom: 0;
    /* Encierra el blend: que la luz no se mezcle con el resto de la barra. */
    isolation: isolate;
    transition: transform 0.18s ease;
}

.dl-wrap img {
    width: 100%;
    display: block;
    cursor: pointer;
}

.dl-base {
    position: relative;
    z-index: 1;
}

/* ---- El botón encendido, latiendo solo ---- */
.dl-effect {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    animation: dl-latido 2.6s ease-in-out infinite;
}

@keyframes dl-latido {
    0%, 100% { opacity: 0;    filter: brightness(1); }
    50%      { opacity: 0.75; filter: drop-shadow(0 0 10px rgba(0, 205, 255, 0.7)) brightness(1.12); }
}

/* ---- Halo de luz sobre el botón ---- */
.dl-wrap::before {
    content: "";
    position: absolute;
    left: 62%;
    top: 48%;
    width: 48%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(150, 245, 255, 0.75) 0%,
        rgba(0, 190, 255, 0.35) 45%,
        transparent 72%);
    /* Suma luz en vez de tapar: la imagen de abajo es opaca. */
    mix-blend-mode: screen;
    filter: blur(6px);
    z-index: 3;
    pointer-events: none;
    animation: dl-respira 2.6s ease-in-out infinite;
}

@keyframes dl-respira {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.9); }
    50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.1); }
}

/* ---- Ondas que salen del botón, siempre ---- */
.dl-onda {
    position: absolute;
    left: 62%;
    top: 48%;
    width: 38%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(140, 240, 255, 0.9);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    animation: dl-expande 2.6s ease-out infinite;
}

@keyframes dl-expande {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.8); }
    15%  { opacity: 0.75; }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.55); }
}

/* ---- Destello que barre el botón cada pocos segundos ---- */
.dl-shine {
    position: absolute;
    left: 62%;
    top: 48%;
    width: 38%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Recorta el destello a la forma redonda del botón. */
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.dl-shine::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -140%;
    width: 55%;
    height: 180%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent);
    transform: rotate(18deg);
    /* Ciclo largo: el barrido dura poco y luego descansa, para que no maree. */
    animation: dl-destello 4.5s ease-in-out infinite;
}

@keyframes dl-destello {
    0%        { left: -140%; }
    22%, 100% { left: 200%; }
}

/* ---------------------------- Al pasar por encima ------------------------- */
.dl-wrap:hover,
.dl-wrap:focus-visible {
    transform: scale(1.04);
}

/* Se queda encendido del todo, sin latir. */
.dl-wrap:hover .dl-effect,
.dl-wrap:focus-visible .dl-effect {
    animation: none;
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(0, 205, 255, 0.9)) brightness(1.25);
}

.dl-wrap:hover::before,
.dl-wrap:focus-visible::before {
    animation: none;
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.2);
    filter: blur(9px);
}

/* Las ondas y el destello se aceleran. */
.dl-wrap:hover .dl-onda,
.dl-wrap:focus-visible .dl-onda {
    animation-duration: 1.3s;
}

.dl-wrap:hover .dl-shine::before {
    animation-duration: 1.6s;
}

/* Al pulsar, se hunde. */
.dl-wrap:active {
    transform: scale(0.96);
    transition-duration: 0.06s;
}

.dl-wrap:focus-visible {
    outline: 2px solid #4eb5f1;
    outline-offset: 4px;
    border-radius: 8px;
}

/* Quien pida menos movimiento se queda con el botón quieto: sigue
   encendiéndose al pasar, pero sin latido, ondas ni destello. */
@media (prefers-reduced-motion: reduce) {
    .dl-wrap,
    .dl-wrap::before,
    .dl-effect,
    .dl-onda,
    .dl-shine::before {
        animation: none !important;
    }

    .dl-effect { transition: opacity 0.2s ease; }
    .dl-wrap::before { opacity: 0.35; }
    .dl-onda { display: none; }

    .dl-wrap:hover,
    .dl-wrap:active {
        transform: none;
    }
}

.mobile-menu-toggle {
    display: none;
}

.show-mobile-only {
    display: none;
}

/* ---------- Botones de acción (login/registro/descarga) ----------
   Fuera del media query: también los usan el modal y las páginas. */

.btn-auth {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    min-width: 45%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
}

.btn-login {
    background: linear-gradient(to bottom, #307eb8, #185c8e);
    border: 1px solid #114266;
}

.btn-register {
    background: linear-gradient(to bottom, #329f5f, #1c713f);
    border: 1px solid #104d28;
}

.btn-recover {
    background: linear-gradient(to bottom, #869294, #616e70);
    border: 1px solid #444f51;
    flex-basis: 100%;
}

.btn-download {
    background: linear-gradient(to bottom, #d65905, #a34000);
    border: 1px solid #7a2f00;
    flex-basis: 100%;
    font-size: 15px;
    padding: 12px;
    text-transform: uppercase;
    margin-top: 5px;
}

.btn-auth:hover {
    filter: brightness(1.15);
}

.btn-small {
    flex: none;
    min-width: 0;
    padding: 8px 18px;
    font-size: 12px;
}

.btn-auth-form {
    display: flex;
    flex: 1;
    min-width: 45%;
}

.btn-auth-form .btn-auth {
    width: 100%;
}

/* ---------- Modal ---------- */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, #1a324b, #0c1a27);
    border: 2px solid #0c1a27;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    position: relative;
    color: #fff;
    animation: slideUp 0.3s ease;
    z-index: 1;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #a4b4c2;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #fff;
}

.modal-header {
    padding: 20px 20px 15px;
    border-bottom: 1px solid #10354b;
    background: rgba(0, 0, 0, 0.1);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.modal-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.modal-body {
    padding: 20px;
}

.modal-submit {
    width: 100%;
    font-size: 16px;
    padding: 12px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
}

.modal-footer {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 13px;
    border-top: 1px solid #1f3d5a;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.options-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 20px;
}

.options-group a,
.modal-footer a {
    color: #3498db;
    text-decoration: none;
}

.options-group a:hover,
.modal-footer a:hover {
    text-decoration: underline;
}

/* ---------- Campos de formulario ---------- */

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: #d0dce8;
    font-weight: bold;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="password"],
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #1a324b;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    resize: vertical;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: #4eb5f1;
    box-shadow: 0 0 5px rgba(78, 181, 241, 0.5);
}

/* Variante oscura para las páginas de formulario (registro, recover, guild) */
.form-page .input-group input[type="text"],
.form-page .input-group input[type="email"],
.form-page .input-group input[type="password"],
.form-page .input-group select,
.form-page .input-group textarea {
    background: #16283c;
    border: 1px solid #3a5674;
    color: #eaf3fb;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.form-page .input-group input::placeholder,
.form-page .input-group textarea::placeholder {
    color: #7d94ab;
}

.form-page .input-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237d94ab' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    cursor: pointer;
}

.form-page .input-group select option {
    background: #16283c;
    color: #eaf3fb;
}

.form-page .input-group input:focus,
.form-page .input-group select:focus,
.form-page .input-group textarea:focus {
    border-color: #4eb5f1;
    box-shadow: 0 0 6px rgba(78, 181, 241, 0.45);
}

.field-error {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #ff9d9d;
    font-weight: bold;
}

.radio-row {
    display: flex;
    gap: 25px;
    padding: 6px 2px;
}

.radio-opt,
.check-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d0dce8;
    cursor: pointer;
    font-weight: normal;
}

.radio-opt img {
    max-height: 28px;
}

/* Páginas con formulario dentro de una caja blanca: fondo oscuro propio */
.form-page {
    background: linear-gradient(135deg, #1a324b, #10233a);
    color: #fff;
    padding: 20px;
}

.form-page .form-intro {
    font-size: 13px;
    color: #d0dce8;
    margin-bottom: 18px;
}

.page-heading {
    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid #3a5674;
}

/* Regalo de bienvenida del registro */
.welcome-gift {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.14), rgba(6, 16, 26, 0.5));
    border: 1px solid #b89530;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.wg-icon {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
}

.wg-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wg-text b {
    font-size: 13px;
    color: #ffd700;
}

.wg-text span {
    font-size: 12px;
    color: #d0dce8;
    line-height: 1.6;
}

.wg-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.wg-gold,
.wg-cash,
.wg-pu {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(6, 16, 26, 0.55);
    border: 1px solid #2a496b;
}

.wg-gold {
    color: #ffd700;
    border-color: #b89530;
}

.wg-cash {
    color: #7de0ff;
    border-color: #3a7f9e;
}

.wg-pu {
    color: #ff9d5c;
    border-color: #a35c2a;
}

.wg-pu img {
    max-height: 16px;
}

/* Tarjeta checklist del registro */
.checklist {
    background: rgba(6, 16, 26, 0.55);
    border: 1px solid #2a496b;
    border-radius: 6px;
    padding: 15px 18px;
    margin-bottom: 20px;
}

.checklist h3 {
    font-size: 14px;
    color: #fff;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #2a496b;
}

.checklist ul {
    list-style: none;
}

.checklist li {
    font-size: 12px;
    color: #c6d6e4;
    padding: 3px 0 3px 18px;
    position: relative;
    line-height: 1.5;
}

.checklist li::before {
    content: '\2023';
    /* ‣ */
    position: absolute;
    left: 2px;
    color: #7d94ab;
}

.label-note {
    font-weight: normal;
    color: #8fa8bf;
}

/* Botón grande de envío con icono */
.btn-big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
}

.btn-big svg {
    flex-shrink: 0;
}

/* Botón "metálico": cápsula plateada brillante dentro de un encaje oscuro */
.btn-metal {
    width: 100%;
    padding: 5px 16px;
    margin-top: 12px;
    font-size: 15px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #0d1b2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #e3edf6 10%,
            #bfd1e1 48%,
            #a7bdd1 52%,
            #b3c8da 85%,
            #d3e2ef 100%);
    border: 1px solid #6c8299;
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 2px rgba(20, 40, 60, 0.35),
        0 0 0 3px #0a1420,
        0 0 0 4px #55708c,
        0 4px 9px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-metal:hover {
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #eef6fc 10%,
            #cfe1f0 48%,
            #b6cee3 52%,
            #c2d8ea 85%,
            #e0eef9 100%);
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 2px rgba(20, 40, 60, 0.3),
        0 0 0 3px #0a1420,
        0 0 0 4px #6c8ba9,
        0 0 14px rgba(140, 190, 235, 0.5);
    transform: translateY(-1px);
}

.btn-metal:active {
    transform: translateY(1px);
    background: linear-gradient(to bottom, #a9bfd3 0%, #98b0c7 50%, #b0c6da 100%);
    box-shadow:
        inset 0 2px 6px rgba(20, 40, 60, 0.5),
        0 0 0 3px #0a1420,
        0 0 0 4px #55708c;
}

.btn-metal svg {
    fill: currentColor;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

/* ---------- Alertas / flash ---------- */

.alert {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 15px;
}

.alert-success {
    background: #1d4d2b;
    border: 1px solid #2f7a45;
    color: #b6f0c6;
}

.alert-error {
    background: #55201c;
    border: 1px solid #8c332c;
    color: #ffc4bd;
}

.alert-info {
    background: #14384f;
    border: 1px solid #276b93;
    color: #bfe3f7;
}

.alert-info a {
    color: #fff;
    text-decoration: underline;
}

/* ---------- Menú acordeón ---------- */

.gunbound-menu {
    padding: 0 10px;
}

.gunbound-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.desktop-nav__item {
    background: #970605;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 33px;
    transition: background 0.2s ease-in-out, height 0.1s ease-out;
}

.desktop-nav__item.active {
    height: 150px;
    transition: background 0.2s ease-in-out, height 0.4s cubic-bezier(0.5, 0, 0.5, 1);
}

.desktop-nav__item>a {
    display: block;
    padding: 7px 15px;
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    position: relative;
    z-index: 3;
    pointer-events: none;
    -webkit-font-smoothing: none;
    transition: transform 0.2s ease-out;
}

.desktop-nav__item:hover>a {
    transform: translateX(5px);
}

.desktop-nav__submenu {
    position: relative;
    overflow: hidden;
    transition: padding 0.1s ease-out;
}

.desktop-nav__item.active .desktop-nav__submenu {
    padding-top: 5px;
    padding-bottom: 15px;
    transition-delay: 0.1s;
}

.desktop-nav__bg-img {
    position: absolute;
    bottom: 0;
    right: -20px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.desktop-nav__item.active .desktop-nav__bg-img {
    opacity: 1;
    right: 0;
}

/*
 * El hueco de la derecha aparta el texto del dibujo del fondo
 * (`desktop-nav__bg-img`, unos 100 px pegados a la esquina de abajo). El texto
 * ya iba por encima -- z-index 2 contra el 1 de la imagen -- pero se leia
 * ENCIMA del dibujo, que es lo que apretaba el menu de «Tienda».
 *
 * El margen es MODERADO y va con `nowrap` a proposito: el ancho del menu lo
 * decide la columna que lo contiene, no este fichero, asi que no se puede
 * saber de aqui cuanto sitio queda. Con `nowrap` una etiqueta larga nunca se
 * partira en dos lineas aunque el menu se quede estrecho; como mucho se
 * acercara al dibujo, y ahi sigue siendo legible porque va delante.
 */
.desktop-nav__submenu li {
    padding: 3px 15px;
    margin-right: 56px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s ease-out;
    position: relative;
    z-index: 2;
}

.desktop-nav__item.active .desktop-nav__submenu li {
    opacity: 1;
    transform: translateX(0);
}

.desktop-nav__submenu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    display: block;
    -webkit-font-smoothing: none;
    transition: all 0.2s ease;
}

.desktop-nav__submenu a:hover {
    color: #ffd700;
    text-decoration: none;
    transform: translateX(3px);
}

.desktop-nav__item.active .desktop-nav__submenu li:nth-child(1) {
    transition-delay: 0.10s;
}

.desktop-nav__item.active .desktop-nav__submenu li:nth-child(2) {
    transition-delay: 0.15s;
}

.desktop-nav__item.active .desktop-nav__submenu li:nth-child(3) {
    transition-delay: 0.20s;
}

.desktop-nav__item.active .desktop-nav__submenu li:nth-child(4) {
    transition-delay: 0.25s;
}

/*
 * El escalonado llegaba hasta el cuarto enlace. Del quinto en adelante no
 * había regla, así que aparecían de golpe mientras los cuatro primeros aún
 * entraban en cascada: se notaba justo en «Tienda», que tiene seis.
 */
.desktop-nav__item.active .desktop-nav__submenu li:nth-child(5) {
    transition-delay: 0.30s;
}

.desktop-nav__item.active .desktop-nav__submenu li:nth-child(6) {
    transition-delay: 0.35s;
}

.desktop-nav__item.active .desktop-nav__submenu li:nth-child(7) {
    transition-delay: 0.40s;
}

.desktop-nav__item.active .desktop-nav__submenu li:nth-child(8) {
    transition-delay: 0.45s;
}

.desktop-nav__item.no-submenu:hover {
    background: #a8d39a;
}

.desktop-nav__item.no-submenu>a {
    pointer-events: auto;
}

.desktop-nav__item#about-gunbound:hover,
.desktop-nav__item#about-gunbound.active {
    background: #ef9300;
}

.desktop-nav__item#how-to-play:hover,
.desktop-nav__item#how-to-play.active {
    background: #a870e7;
}

.desktop-nav__item#community:hover,
.desktop-nav__item#community.active {
    background: #c0bf00;
}

.desktop-nav__item#ranking:hover,
.desktop-nav__item#ranking.active {
    background: #cc8409;
}

/* Eventos: verde, el único hueco de color que quedaba libre entre los
   naranjas, morados y azules de las demás secciones. */
.desktop-nav__item#events:hover,
.desktop-nav__item#events.active {
    background: #3fa26a;
}

.desktop-nav__item#guild:hover,
.desktop-nav__item#guild.active {
    background: #60a6e6;
}

.desktop-nav__item#avatar-shop:hover,
.desktop-nav__item#avatar-shop.active {
    background: #5ac2c8;
}

.desktop-nav__item#help:hover,
.desktop-nav__item#help.active {
    background: #889ae5;
}

/* ---------- Redes sociales ---------- */

.social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 10px;
    margin-top: 5px;
    border-top: 1px solid #1a324b;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(to bottom, #112d46, #091a29);
    border: 1px solid #1a3a58;
    border-radius: 6px;
    color: #dff3ff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.social-btn:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: #4eb5f1;
    background: linear-gradient(to bottom, #1c4569, #112d46);
    box-shadow: 0 5px 10px rgba(78, 181, 241, 0.4);
}

.social-btn:active {
    transform: translateY(0);
}

/* ---------- Contenido ---------- */

.content {
    flex-grow: 1;
    background-color: #1b324d;
    padding: 20px 20px 25px 20px;
    border-left: 1px solid #061018;
    box-shadow: inset 1px 0 0 #2a496b;
    position: relative;
    min-width: 0;
}

.box {
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 16px;
    box-shadow: inset 0 0 0 1px #a4b4c2, 0 4px 6px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.box:last-child {
    margin-bottom: 0;
}

.box-title {
    background: linear-gradient(to bottom, #1d3e5e 0%, #112a42 100%);
    color: #fff;
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 11px;
    font-weight: bold;
}

.icon-chat {
    display: inline-block;
    width: 14px;
    height: 10px;
    background-color: #fff;
    border-radius: 2px;
    position: relative;
    margin-right: 8px;
    flex-shrink: 0;
}

.icon-chat::after {
    content: '...';
    color: #193652;
    position: absolute;
    top: -6px;
    left: 1px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -1px;
}

.icon-chat::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 3px;
    border-width: 4px 4px 0 0;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.box-content {
    padding: 8px 15px;
}

/* ---------- Listas de la portada ---------- */

.list {
    list-style: none;
}

.list li {
    border-bottom: 1px dotted #b5b5b5;
    padding: 5px 5px;
    margin: 0 -5px;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #111;
    transition: background-color 0.2s, padding-left 0.2s;
    border-radius: 4px;
}

.list li:hover {
    background-color: #f0f7fb;
    padding-left: 10px;
}

.list li:last-child {
    border-bottom: none;
}

.date {
    color: #57809C;
    width: 85px;
    font-family: Tahoma, sans-serif;
    font-size: 10px;
    flex-shrink: 0;
}

.pill {
    border-radius: 5px;
    padding: 3px 0;
    width: 60px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-right: 12px;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
}

.p-orange {
    background-color: #f08b1d;
}

.p-green {
    background-color: #369a3d;
}

.p-red {
    background-color: #c0392b;
}

.p-done {
    background-color: #9e2a1f;
}

.p-blue {
    background-color: #4993ed;
}

.title {
    flex-grow: 1;
}

/* ---------- Tablas (ranking, guilds, perfil) ---------- */

.gb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #222;
    margin: 8px 0;
}

.gb-table thead th {
    background: linear-gradient(to bottom, #e8eef4, #d4dfe9);
    color: #1d3e5e;
    font-size: 11px;
    text-transform: uppercase;
    padding: 7px 10px;
    text-align: left;
    border-bottom: 2px solid #a4b4c2;
    white-space: nowrap;
}

.gb-table tbody td,
.gb-table tr>td {
    padding: 7px 10px;
    border-bottom: 1px dotted #b5b5b5;
}

.gb-table tbody tr:hover {
    background-color: #f0f7fb;
}

.gb-table .col-pos {
    width: 45px;
    text-align: center;
    color: #57809C;
    font-weight: bold;
}

.gb-table .col-num {
    text-align: right;
    font-family: Tahoma, sans-serif;
    white-space: nowrap;
}

.gb-table .empty-row {
    text-align: center;
    color: #888;
    padding: 18px;
}

.gb-table .row-me {
    background-color: #fff8dc;
}

.gb-table .row-me:hover {
    background-color: #fdf2c0;
}

.detail-table th {
    width: 140px;
    text-align: left;
    color: #1d3e5e;
    font-size: 11px;
    text-transform: uppercase;
    vertical-align: top;
    padding: 7px 10px;
    border-bottom: 1px dotted #b5b5b5;
}

.tbl-link {
    color: #2980b9;
    font-weight: bold;
}

.tbl-link:hover {
    text-decoration: underline;
}

.prewrap {
    white-space: pre-wrap;
}

.table-footnote {
    font-size: 12px;
    color: #555;
    padding: 6px 0;
}

.form-page .table-footnote {
    color: #d0dce8;
}

.ok-text {
    color: #7CFC90;
}

.bad-text {
    color: #ff9d9d;
}

/* ---------- Ranking ---------- */

.podium {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 10px;
    align-items: end;
    margin-bottom: 22px;
    padding-top: 14px;
}

/* Cada puesto: corona de laurel + número + listón + país + GP */
.pd {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Gráfico del puesto: recortes centrados de ranking_top3_BG.png
   (ranking_top_N.png, 260x217: corona + número + misil + listón en blanco). */
.pd-img {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 260 / 217;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.22));
}

.pd-first .pd-img {
    max-width: 220px;
}

.pd-img-1 {
    background-image: url('../../images/ranking_top_1.png');
}

.pd-img-2 {
    background-image: url('../../images/ranking_top_2.png');
}

.pd-img-3 {
    background-image: url('../../images/ranking_top_3.png');
}

/* Nick superpuesto sobre la banda del listón del sprite */
.pd-ribbon-label {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 78%;
    bottom: 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    overflow: hidden;
}

.pd-country {
    margin-top: 0px;
    font-size: 11px;
    font-weight: bold;
    color: #57809C;
    display: flex;
    align-items: center;
    gap: 5px;
}

.flag-icon {
    vertical-align: -2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.pd-gp {
    margin-top: 3px;
    font-size: 13px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Ranking sobre caja blanca: cebra suave y nick en azul oscuro */
.ranking-page {
    padding: 15px;
}

.ranking-page .gb-table tbody tr:nth-child(even) {
    background: #f4f8fb;
}

.cell-player b {
    color: #1d3e5e;
}

.cell-flag {
    margin-left: 6px;
}

/* Rango + nick + bandera, los tres en una sola línea.
   El flex va en este `span` y no en el `<td>`: con `display:flex` en la celda,
   la fila pierde la alineación vertical que comparte con las demás columnas. */
.cp-linea {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

/* Sitio para el nick más largo que permite el juego (16 caracteres; hay 19
   jugadores así) más el icono de rango y la bandera. Sin esto la tabla podía
   estrujar la columna y recortar TODOS los nicks, que sería peor que el
   problema original. Con este suelo, los puntos suspensivos casi no aparecen. */
.cell-player {
    min-width: 168px;
}

/* El nick es lo único elástico: cede y se corta antes que dejar a la bandera
   colgando en la línea siguiente. El `min-width:0` es imprescindible, porque
   por defecto un hijo flex no baja de su contenido y el recorte no ocurriría. */
.cp-linea b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-linea .cell-flag {
    margin-left: 4px;
    flex-shrink: 0;
    line-height: 0;
}

/* La línea de datos de debajo del nick: GP, los de hoy, los bonus, el clan y el
   movimiento, todo seguido y partiéndose solo. SOLO SALE EN EL MÓVIL —la enciende
   la media query de arriba—, porque en escritorio eso mismo son siete columnas.
   Los colores son los de esas columnas (verde los de hoy, naranja el VIP...) para
   que quien mire la web en los dos sitios lea lo mismo. */
.cp-meta {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 8px;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.35;
}

.cpm-gp {
    font-weight: bold;
    color: #1d3e5e;
}

.cpm-clan {
    color: #7a8794;
}

/* Las flechas de puesto van en negrita en su columna, que es estrecha; aquí
   compiten con cinco cifras más y conviene que no griten. */
.cp-meta .mov-up,
.cp-meta .mov-down {
    font-weight: bold;
}

.rank-icon {
    vertical-align: -3px;
    margin-right: 5px;
}

.pos-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #10202f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.pos-1 {
    background: linear-gradient(to bottom, #ffe58a, #d4af37);
}

.pos-2 {
    background: linear-gradient(to bottom, #e8edf2, #aab6c2);
}

.pos-3 {
    background: linear-gradient(to bottom, #e0a86b, #b0722f);
}

.col-mov {
    text-align: center;
    width: 70px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: bold;
}

/* GP ganados el último día cerrado: en verde para que se lea como una
   ganancia y no se confunda con el GP total, que va al lado. */
.col-dia {
    width: 88px;
}

.gp-dia {
    color: #2e9e44;
    font-weight: bold;
}

.gp-dia-cero {
    color: #b9c4cf;
}

.mov-up {
    color: #2e9e44;
}

.mov-down {
    color: #c0392b;
}

.mov-same,
.mov-none {
    color: #9aa7b4;
}

.ranking-table-wrap {
    overflow-x: auto;
}

/* Paginación sobre fondo oscuro */
.form-page .pagination a {
    border-color: #3a5674;
    color: #d0dce8;
}

.form-page .pagination a:hover {
    background: rgba(78, 181, 241, 0.15);
    border-color: #4eb5f1;
}

/* ---------- Búsqueda y paginación ---------- */

.search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
    justify-content: flex-end;
}

.search-row input[type="text"] {
    flex: 1;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid #a4b4c2;
    border-radius: 4px;
    font-size: 13px;
}

.search-row input[type="text"]:focus {
    outline: none;
    border-color: #4eb5f1;
}

/* Selector de pais del ranking nacional. Mismo aspecto que el buscador que
   tiene al lado; se envia solo al cambiarlo, por eso no lleva boton propio. */
.ranking-pais {
    padding: 8px 10px;
    border: 1px solid #a4b4c2;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    max-width: 230px;
    cursor: pointer;
}

.ranking-pais:focus {
    outline: none;
    border-color: #4eb5f1;
}

@media (max-width: 560px) {
    /* En movil el buscador y el selector no caben en una linea. */
    .search-row { flex-wrap: wrap; justify-content: flex-start; }
    .ranking-pais { max-width: 100%; flex: 1 1 100%; }
}

.clear-search {
    font-size: 11px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 12px 0 6px;
    font-size: 12px;
}

.pagination a,
.pagination .current {
    display: inline-block;
    min-width: 28px;
    padding: 5px 8px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #a4b4c2;
    color: #1d3e5e;
    font-weight: bold;
}

.pagination a:hover {
    background: #e8f2fa;
    border-color: #4eb5f1;
}

.pagination .current {
    background: linear-gradient(to bottom, #307eb8, #185c8e);
    border-color: #114266;
    color: #fff;
}

/* ---------- Perfil (My Gunbound) ---------- */

/* Cabecera con el mobile favorito y los datos del jugador */
.profile-head {
    display: flex;
    align-items: center;
    gap: 22px;
    background: linear-gradient(135deg, #1a324b, #10233a);
    padding: 20px;
}

.ph-art {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 130px;
    position: relative;
}

/* Resplandor suave detrás del mobile favorito */
.ph-art::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 110px;
    background: radial-gradient(circle, rgba(78, 181, 241, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.ph-art img {
    max-width: 110px;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.6));
    position: relative;
}

.ph-art-label {
    font-size: 10px;
    color: #8fa8bf;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.ph-nick {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #fff;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
    margin-bottom: 6px;
}

.ph-sub {
    font-size: 13px;
    color: #c6d6e4;
    margin-bottom: 12px;
}

.ph-dot {
    color: #4a607c;
    margin: 0 6px;
}

.ph-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    background: rgba(6, 16, 26, 0.55);
    border: 1px solid #2a496b;
    color: #c6d6e4;
}

.badge-on {
    background: rgba(46, 158, 68, 0.2);
    border-color: #2e9e44;
    color: #7CFC90;
}

/* Punto verde pulsante en el badge de conectado */
.badge-on::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4bbf68;
    margin-right: 6px;
    vertical-align: 1px;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(75, 191, 104, 0.6);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(75, 191, 104, 0);
    }
}

.badge-off {
    border-color: #44556b;
    color: #8fa8bf;
}

.badge-rank {
    background: rgba(255, 215, 0, 0.12);
    border-color: #b89530;
    color: #ffd700;
}

/* Progreso hacia el siguiente grado */
.ph-progress {
    margin-top: 14px;
    max-width: 420px;
}

.ph-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #c6d6e4;
    margin-bottom: 5px;
}

.ph-progress-info b {
    color: #ffd700;
}

.ph-progress-missing {
    color: #8fa8bf;
}

.ph-progress-bar {
    height: 12px;
    background: rgba(6, 16, 26, 0.6);
    border: 1px solid #2a496b;
    border-radius: 8px;
    overflow: hidden;
}

.ph-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(to bottom, #ffe58a, #d4a017);
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

/* Récord de combate */
.empty-note {
    font-size: 13px;
    color: #666;
    padding: 12px 4px;
}

.combat-summary {
    padding: 10px 4px 4px;
}

.cs-nums {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.cs-win {
    color: #2e9e44;
    font-weight: bold;
}

.cs-lose {
    color: #c0392b;
    font-weight: bold;
}

.cs-sep {
    color: #999;
    margin: 0 6px;
}

.cs-total {
    color: #888;
    font-size: 12px;
    margin-left: 6px;
}

.wr-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wr-bar {
    flex: 1;
    height: 14px;
    background: #e3e9ee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.wr-fill {
    display: block;
    height: 100%;
    background: linear-gradient(to bottom, #4bbf68, #2e9e44);
    border-radius: 8px;
}

.wr-pct {
    font-size: 12px;
    font-weight: bold;
    color: #2e9e44;
    white-space: nowrap;
}

.wr-mini {
    height: 8px;
    width: 100%;
}

.mobile-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px 4px 8px;
}

.mobile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px 10px;
}

.mobile-card img {
    max-height: 80px;
}

.mc-name {
    font-size: 13px;
    font-weight: bold;
    color: #1d3e5e;
}

.mc-record {
    font-size: 12px;
    color: #555;
}

/* GP por día */
.gp-days .gpd-date {
    width: 90px;
    color: #57809C;
    font-size: 11px;
    white-space: nowrap;
}

.gp-days .gpd-bar-cell {
    width: 60%;
}

.gpd-bar {
    height: 10px;
    background: #e3e9ee;
    border-radius: 6px;
    overflow: hidden;
}

.gpd-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(to bottom, #5db9f0, #2980b9);
    border-radius: 6px;
}

.gp-days .gpd-value {
    text-align: right;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.gpd-total-row td {
    border-top: 2px solid #d8e2ea;
    border-bottom: none;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 8px 0;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1a324b, #10233a);
    border: 1px solid #2a496b;
    border-left: 3px solid var(--acc, #4eb5f1);
    border-radius: 6px;
    padding: 12px 14px;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.sc-gp {
    --acc: #4eb5f1;
}

.sc-season {
    --acc: #a870e7;
}

.sc-pos {
    --acc: #f0a13c;
}

.sc-pais {
    --acc: #45b06a;
}

.sc-oro {
    --acc: #ffd700;
}

.sc-cash {
    --acc: #7de0ff;
}

.sc-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(78, 181, 241, 0.14);
    background: color-mix(in srgb, var(--acc, #4eb5f1) 16%, transparent);
    color: var(--acc, #4eb5f1);
}

.sc-icon-flag img {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.sc-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #8fb0cc;
    font-weight: bold;
    order: 2;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    font-family: Arial, sans-serif;
    order: 1;
    line-height: 1.2;
}

.sc-sub {
    order: 3;
    font-size: 10px;
    color: #8fa8bf;
    margin-top: 3px;
    font-weight: bold;
}

.sc-up {
    color: #7CFC90;
}

.sc-down {
    color: #ff9d9d;
}

.stat-value.gold {
    color: #ffd700;
}

.stat-value.cash {
    color: #7de0ff;
}

/* ---------- Guías / descargas ---------- */

.guide-list {
    list-style: square inside;
    font-size: 13px;
    line-height: 1.9;
    color: #d0dce8;
}

.guide-list a {
    color: #4eb5f1;
}

/* ---------- Página de descargas ---------- */

.dl-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(6, 16, 26, 0.55);
    border: 1px solid #2a496b;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.dl-card-art {
    flex-shrink: 0;
    width: 130px;
    text-align: center;
}

.dl-card-art img {
    max-width: 100%;
    max-height: 110px;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.6));
}

.dl-card-info h3 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.dl-meta {
    list-style: none;
    font-size: 12px;
    color: #c6d6e4;
    line-height: 1.9;
}

.dl-meta-label {
    display: inline-block;
    width: 90px;
    color: #8fa8bf;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.mirror-title {
    font-size: 13px;
    font-weight: bold;
    color: #d0dce8;
    margin-bottom: 4px;
}

.mirror-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 6px;
}

.mirror-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    margin-top: 6px;
}

/* Pasos de instalación */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.step {
    background: rgba(6, 16, 26, 0.55);
    border: 1px solid #2a496b;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #307eb8, #185c8e);
    border: 1px solid #114266;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.step h4 {
    font-size: 14px;
    color: #fff;
    margin-bottom: 6px;
}

.step p {
    font-size: 12px;
    color: #c6d6e4;
    line-height: 1.6;
}

/* Descargas adicionales */
.extra-dl {
    display: flex;
    align-items: center;
    gap: 20px;
}

.extra-dl-item img {
    max-height: 58px;
    border-radius: 8px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.extra-dl-item:hover img {
    transform: translateY(-2px);
    filter: brightness(1.08) drop-shadow(0 0 8px rgba(140, 190, 235, 0.4));
}

.extra-dl-note {
    font-size: 12px;
    color: #c6d6e4;
    line-height: 1.7;
}

/* ---------- Páginas About (Feature / Art Work / Mobile / Game Item) ---------- */

/* Pestañas de la sección */
.about-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.about-tab {
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #d0dce8;
    background: rgba(6, 16, 26, 0.45);
    border: 1px solid #2a496b;
    transition: all 0.15s ease;
}

.about-tab:hover {
    border-color: #4eb5f1;
    color: #fff;
}

.about-tab.active {
    background: linear-gradient(to bottom, #307eb8, #185c8e);
    border-color: #114266;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.page-pad {
    padding: 15px;
}

/* Chips genéricos (tipo de disparo, dificultad, espacios de item) */
.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    font-style: normal;
    line-height: 1.5;
}

.chip-tipo {
    background: #e3f0fa;
    color: #185c8e;
    border: 1px solid #b5d5ec;
}

.chip-facil {
    background: #e4f5e8;
    color: #1f7a33;
    border: 1px solid #b8e0c2;
}

.chip-media {
    background: #fdf3dd;
    color: #9a6b12;
    border: 1px solid #ecd9a8;
}

.chip-dificil {
    background: #fbe4e1;
    color: #a02618;
    border: 1px solid #eec0ba;
}

.chip-slots {
    background: #eef2f6;
    color: #556;
    border: 1px solid #d4dde5;
    margin-left: 6px;
    vertical-align: 1px;
}

.mob-tags {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.page-intro {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 16px;
}

.center-note {
    text-align: center;
    padding-top: 12px;
}

/* Feature: tarjetas con icono clásico */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px;
}

.feature-card img {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-top: 2px;
}

/* El icono de rango es apaisado: que no se estire */
.feature-card img.fc-rank {
    height: auto;
    align-self: center;
}

/* Caja "El mundo de Lond" con el dragón al costado */
.lond-flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lond-flex > div {
    flex: 1;
}

.lond-art {
    flex-shrink: 0;
    max-width: 130px;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
}

.feature-card h4 {
    font-size: 13px;
    color: #1d3e5e;
    margin-bottom: 4px;
}

.feature-card p {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

/* Art Work: galería con miniaturas */
.art-section-title {
    font-size: 14px;
    color: #1d3e5e;
    border-bottom: 2px solid #d8e2ea;
    padding-bottom: 6px;
    margin: 18px 0 12px;
}

.art-count {
    font-size: 11px;
    color: #888;
    font-weight: normal;
}

.art-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.art-thumb {
    display: block;
    border: 1px solid #d8e2ea;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.art-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.art-thumb img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}

/* Visor de imagen a pantalla completa */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
}

.lightbox img {
    max-width: 88%;
    max-height: 90%;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 64px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.lb-nav:hover {
    background: rgba(255, 255, 255, 0.28);
}

.lb-prev {
    left: 14px;
}

.lb-next {
    right: 14px;
}

.lb-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.55);
    padding: 4px 14px;
    border-radius: 14px;
}

/* Mobile: rejilla de fichas */
.mob-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.mob-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mob-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.mob-card img {
    max-height: 70px;
}

.mob-card h4 {
    font-size: 13px;
    color: #1d3e5e;
}

.mob-card p {
    font-size: 11px;
    color: #666;
    line-height: 1.5;
}

/* Game Item: tarjetas con sigla */
.item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.item-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px;
}

.item-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #307eb8, #185c8e);
    border: 1px solid #114266;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Iconos de imagen dentro de las tarjetas de item */
.item-card .ic-img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.item-card .ic-shot {
    flex-shrink: 0;
    width: 92px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #c6d3de;
}

.item-card h4 {
    font-size: 13px;
    color: #1d3e5e;
    margin-bottom: 4px;
}

.item-card p {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

/* Tabla de mezclas de items (iconos oficiales) */
.mixture-wrap {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.mixture-grid {
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: 0px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 10px;
}

.mix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 3px;
    padding: 0px;
}

/* Ficha de item oficial (icono + stats + captura) */
.item-entry {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
}

.ie-icon {
    flex-shrink: 0;
    width: 52px;
}

.ie-details {
    flex-grow: 1;
}

.ie-details h4 {
    font-size: 14px;
    color: #1d3e5e;
    margin-bottom: 6px;
}

.ie-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.ie-details p {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

.ie-shot {
    flex-shrink: 0;
    width: 120px;
    border-radius: 4px;
    border: 1px solid #d8e2ea;
}

/* Clasificación oficial de mobiles */
.type-section {
    margin-bottom: 20px;
}

.type-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
}

.type-line {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}

.type-sprites {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin-top: 10px;
}

.type-sprites img {
    width: 62px;
}

/* Guías How to Install / How to Play */

/* Variante clara de los pasos cuando van sobre caja blanca */
.page-pad .steps .step {
    background: #f4f8fb;
    border-color: #d8e2ea;
}

.page-pad .step h4 {
    color: #1d3e5e;
}

.page-pad .step p {
    color: #555;
}

.guide-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dotted #d8e2ea;
}

.guide-step:last-child {
    border-bottom: none;
}

.gs-body h4 {
    font-size: 14px;
    color: #1d3e5e;
    margin-bottom: 6px;
    padding-top: 7px;
}

.gs-body p {
    font-size: 12px;
    color: #555;
    line-height: 1.7;
}

.gs-img {
    display: block;
    max-width: 100%;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid #d8e2ea;
}

.gs-img-s {
    max-width: 320px;
}

.lobby-shot {
    max-width: 560px;
    margin: 14px auto 0;
}

.keyboard-img {
    margin: 0 auto 14px;
    border: none;
}

.keys-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.key-table .key-cell {
    width: 110px;
    white-space: nowrap;
    color: #57809C;
}

.key-table .key-cell img {
    vertical-align: middle;
}

.guide-list-light {
    color: #555;
}

.guide-list-light a {
    color: #2980b9;
}

/* ---------- Foro (Free Board) ---------- */

/* Pestañas tipo carpeta: la activa comparte el degradado de la barra de
   título, así "abre" la caja como una carpeta clásica. */
.cm-tabs {
    display: flex;
    gap: 4px;
    padding: 0 10px;
    flex-wrap: wrap;
}

.cm-tab {
    padding: 8px 18px 7px;
    border-radius: 6px 6px 0 0;
    background: #0d2033;
    border: 1px solid #1a2f42;
    border-bottom: none;
    color: #7f97ab;
    font-size: 11px;
    font-weight: bold;
    transition: color 0.15s ease, background 0.15s ease;
}

.cm-tab:hover {
    color: #fff;
}

.cm-tab.active {
    background: linear-gradient(to bottom, #1d3e5e 0%, #112a42 100%);
    border-color: #2a496b;
    color: #fff;
}

.cm-box {
    border-top-left-radius: 0;
}

/* Hero de la sección: icono + título + arte del juego, con tinte por sección */
.cm-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid #e3e9ee;
    background: linear-gradient(105deg, #fff 55%, #e8f3fc);
    overflow: hidden;
}

.cm-hero.cm-news {
    background: linear-gradient(105deg, #fff 55%, #fdf3dd);
}

.cm-hero.cm-event {
    background: linear-gradient(105deg, #fff 55%, #e4f5e8);
}

.cm-hero.cm-guild {
    background: linear-gradient(105deg, #fff 55%, #e8f2fc);
    border-left: 3px solid #60a6e6;
}

.cm-guild .cm-ico {
    background: #e8f2fc;
    border-color: #b9d5f0;
    color: #2c6c9e;
}

.cm-hero-main {
    flex-grow: 1;
    min-width: 0;
}

.cm-hero-main h2 {
    font-family: Arial, sans-serif;
    font-size: 19px;
    color: #1d3e5e;
    margin-bottom: 3px;
}

.cm-hero-main p {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.cm-hero-art {
    flex-shrink: 0;
    max-height: 82px;
    border: 1px solid #e3e9ee;
    border-radius: 6px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

/* Dos columnas: lista + widgets laterales */
.cm-layout {
    display: flex;
    align-items: stretch;
}

.cm-list {
    flex-grow: 1;
    min-width: 0;
    padding: 15px;
}

.cm-side {
    flex-shrink: 0;
    width: 250px;
    border-left: 1px solid #e3e9ee;
    background: #fbfcfe;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.w-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #57809C;
    border-bottom: 1px solid #e3e9ee;
    padding-bottom: 5px;
    margin-bottom: 8px;
}

.w-stats {
    list-style: none;
}

.w-stats li {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666;
    padding: 3px 0;
}

.w-stats b {
    color: #185c8e;
    font-family: Arial, sans-serif;
}

.tp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.tp-ava {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

.tp-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tp-info b {
    font-size: 11px;
    color: #1d3e5e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-info i {
    flex-shrink: 0;
    line-height: 0;
}

.tp-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    color: #57809C;
}

.w-last-title {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #2980b9;
    line-height: 1.4;
    margin-bottom: 3px;
}

.w-last-title:hover {
    text-decoration: underline;
}

.w-last-meta {
    font-size: 10px;
    color: #999;
}

.w-rules {
    list-style: none;
}

.w-rules li {
    font-size: 11px;
    color: #666;
    padding: 2px 0 2px 14px;
    position: relative;
    line-height: 1.5;
}

.w-rules li::before {
    content: '\2023';
    position: absolute;
    left: 2px;
    color: #57809C;
}

/* ---------- Módulo Guild ---------- */

.gl-pos {
    flex-shrink: 0;
}

.gl-pos-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    font-size: 11px;
    font-weight: bold;
    color: #8a97a5;
    font-family: Arial, sans-serif;
}

.tl-replies.gl-score {
    background: #fdf3dd;
    border-color: #ecd9a8;
}

.tl-replies.gl-score b {
    color: #9a6b12;
}

.gl-hero-stats {
    flex-shrink: 0;
}

.w-cta-text {
    font-size: 11px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 8px;
}

.w-cta-text b {
    color: #9a6b12;
}

.w-cta-btn {
    display: block;
    text-align: center;
    flex: none;
    min-width: 0;
}

.w-guild-link {
    color: #1d3e5e;
}

.w-guild-link:hover {
    color: #2980b9;
}

.gm-row {
    cursor: default;
}

.gm-row:hover {
    transform: none;
    border-color: #d8e2ea;
    box-shadow: none;
}

.check-opt-light {
    color: #555;
}

.cm-note {
    font-size: 12px;
    color: #666;
    padding: 4px 6px;
}

.cm-note b {
    color: #1d3e5e;
}

.ga-actions {
    gap: 6px;
}

.ga-accept {
    color: #1f7a33;
    border-color: #b8e0c2;
    background: #e4f5e8;
}

.ga-accept:hover {
    border-color: #1f7a33;
    background: #d2eeda;
}

/* ---------- Crear clan ---------- */

.gcr-warn {
    margin: 0 15px 0;
    margin-top: 14px;
    background: #fdf3dd;
    border: 1px solid #ecd9a8;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 12px;
    color: #7a5a12;
    line-height: 1.6;
}

.gcr-warn b {
    color: #9a6b12;
}

.gcr-field {
    background: #f8fafc;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 14px;
}

.gcr-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.gcr-num {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    font-size: 14px;
}

.gcr-head h4 {
    font-size: 13px;
    color: #1d3e5e;
    margin-bottom: 2px;
}

.gcr-head p {
    font-size: 11px;
    color: #777;
    line-height: 1.5;
}

.gcr-form .input-group {
    margin-bottom: 0;
}

/* Labels sobre fondo claro (el color base es para el tema oscuro) */
.gcr-form .input-group label {
    color: #1d3e5e;
}

.gcr-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.gcr-rules {
    font-size: 10px;
    color: #999;
}

.gcr-count {
    font-size: 10px;
    color: #999;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.gcr-count-full {
    color: #c0392b;
    font-weight: bold;
}

.gcr-confirm {
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gcr-confirm .check-opt {
    align-items: flex-start;
    line-height: 1.5;
}

.gcr-submit {
    flex: none;
    min-width: 0;
    align-self: flex-start;
    font-size: 14px;
    padding: 11px 22px;
}

.gcr-submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* Vista previa de la fila del clan */
.gcr-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 10px;
}

.gcr-pv-ava {
    background: linear-gradient(to bottom, #7f93a8, #5b6d80);
    flex-shrink: 0;
}

.gcr-pv-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gcr-pv-main b {
    font-size: 12px;
    color: #1d3e5e;
    word-break: break-word;
}

.gcr-pv-main i {
    font-style: normal;
    font-size: 10px;
    color: #777;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gcr-pv-meta {
    font-size: 9px;
    color: #999;
}

.gcr-total {
    border-top: 1px solid #e3e9ee;
    margin-top: 3px;
    padding-top: 6px !important;
}

/* ---------- Guild Guide ---------- */

/* Pasos conectados: timeline horizontal con línea de unión */
.gg-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    position: relative;
}

.gg-step {
    background: #f8fafc;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 16px 14px 14px;
    text-align: center;
    position: relative;
}

/* Flecha entre pasos: ocupa el centro del hueco de la rejilla */
.gg-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -16px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: #a9bccd;
    transform: translateY(-50%);
    z-index: 1;
}

.gg-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #307eb8, #185c8e);
    border: 1px solid #114266;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.gg-step h4 {
    font-size: 13px;
    color: #1d3e5e;
    margin-bottom: 5px;
}

.gg-step p {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

.gg-intro {
    font-size: 12px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 10px;
}

.gg-intro b {
    color: #1d3e5e;
}

/* Tabla de permisos por rol */
.gg-perms td {
    font-size: 12px;
}

.gg-perms .gg-col {
    text-align: center;
    width: 128px;
}

.gg-yes {
    color: #2e9e44;
    font-weight: bold;
    font-size: 14px;
}

.gg-no {
    color: #bbb;
}

/* Acordeón de preguntas frecuentes */
.gg-faq {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.gg-faq-item {
    background: #f8fafc;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    overflow: hidden;
}

.gg-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px 10px 30px;
    font-size: 12px;
    font-weight: bold;
    color: #1d3e5e;
    position: relative;
    user-select: none;
}

.gg-faq-item summary::-webkit-details-marker {
    display: none;
}

.gg-faq-item summary::before {
    content: '+';
    position: absolute;
    left: 12px;
    color: #4eb5f1;
    font-size: 14px;
    font-weight: bold;
}

.gg-faq-item[open] summary::before {
    content: '\2212';
}

.gg-faq-item[open] summary {
    border-bottom: 1px solid #e3e9ee;
}

.gg-faq-item p {
    padding: 10px 14px 12px;
    font-size: 12px;
    color: #666;
    line-height: 1.7;
}

.gg-rules {
    background: #fdf3dd;
    border: 1px solid #ecd9a8;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 12px;
    color: #7a5a12;
    line-height: 1.6;
}

.gg-rules b {
    color: #9a6b12;
}

/* Sidebar de la guía */
.gg-gold {
    color: #9a6b12 !important;
}

.gg-cta .w-cta-text b {
    color: #1d3e5e;
}

.ok-text-dark {
    color: #2e9e44 !important;
}

.bad-text-dark {
    color: #c0392b !important;
}

.w-links {
    list-style: none;
}

.w-links li {
    padding: 4px 0 4px 12px;
    position: relative;
    border-bottom: 1px dotted #e3e9ee;
}

.w-links li:last-child {
    border-bottom: none;
}

.w-links li::before {
    content: '\203A';
    position: absolute;
    left: 2px;
    color: #4eb5f1;
    font-weight: bold;
}

.w-links a {
    font-size: 11px;
    color: #2980b9;
}

.w-links a:hover {
    text-decoration: underline;
}

/* Stats grandes del clan (como la referencia: RANKING / GP) */
.gstat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0 16px;
}

.gstat {
    background: #f8fafc;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px 16px;
}

.gstat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #57809C;
    font-weight: bold;
    margin-bottom: 4px;
}

.gstat-value {
    display: block;
    font-size: 26px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #1d3e5e;
}

.gstat-gold {
    color: #9a6b12;
}

/* Filas compactas del sidebar (aplicantes y miembros) */
.gs-mrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 6px;
    padding: 6px 0;
    border-bottom: 1px dotted #e3e9ee;
}

/* El nick ocupa su línea; las acciones bajan a la derecha si no caben */
.gs-mrow .gs-minfo {
    flex: 1 1 auto;
}

.gs-mrow .gs-macts {
    margin-left: auto;
}

.gs-mrow:last-child {
    border-bottom: none;
}

.gs-minfo {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* Solicitud de ingreso: el master decide con el nivel y los GP a la vista,
   así que van en una segunda línea en vez de solo el iconito de rango. */
.gs-apply {
    padding: 8px 0;
    /* Sin salto: los botones de aceptar/rechazar se quedan a la derecha,
       centrados, aunque el nivel y los GP ocupen dos líneas. */
    flex-wrap: nowrap;
    align-items: center;
}

.gs-apply .gs-macts {
    flex-shrink: 0;
}

.gs-apply-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.gs-apply-top {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.gs-apply-sub {
    font-size: 10px;
    color: #6b7b89;
    line-height: 1.5;
}

.gs-apply-sub em {
    font-style: normal;
    font-weight: bold;
    color: #185c8e;
}

.gs-minfo b {
    font-size: 11px;
    color: #1d3e5e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-minfo i {
    font-style: normal;
    font-size: 10px;
    color: #999;
    white-space: nowrap;
}

.gs-macts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid #a4b4c2;
    background: #f4f8fb;
    color: #1d3e5e;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    font-family: Tahoma, Arial, sans-serif;
}

.btn-ico:hover {
    border-color: #4eb5f1;
    background: #e8f2fa;
}

.bi-ok {
    color: #1f7a33;
    border-color: #b8e0c2;
    background: #e4f5e8;
}

.bi-ok:hover {
    border-color: #1f7a33;
    background: #d2eeda;
}

.bi-no {
    color: #a02618;
    border-color: #eec0ba;
    background: #fbe4e1;
}

.bi-no:hover {
    border-color: #a02618;
    background: #f7d0ca;
}

.gs-role {
    font-size: 13px;
    color: #b8860b;
}

.gs-role-sub {
    color: #57809C;
}

/* Permisos del Sub-Master */
.w-perms {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.w-perms label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: #555;
    line-height: 1.4;
    cursor: pointer;
}

.w-perms input[type="checkbox"] {
    margin-top: 1px;
}

.w-perms-save {
    margin-top: 4px;
    align-self: stretch;
    text-align: center;
}

/* Botón borrar del chat */
.gc-del {
    border: none;
    background: none;
    color: #bbb;
    font-size: 14px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.gc-del:hover {
    color: #a02618;
}

.cm-tool-back {
    margin-left: auto;
}

/* Administración del clan */
.ga-admin-form {
    margin-bottom: 16px;
}

.ga-admin-form .form-grid {
    gap: 0 16px;
}

/* Ceder el liderazgo: acción irreversible, por eso va aparte y en tono de aviso */
.ga-transfer {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #fff8f1;
    border: 1px solid #f0d3b4;
    border-left: 3px solid #d98324;
    border-radius: 6px;
}

.ga-transfer h4 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #8a4b12;
}

.ga-transfer p {
    margin: 0 0 10px;
    font-size: 11px;
    color: #7a6a5c;
    line-height: 1.5;
}

.ga-transfer-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ga-transfer-form select {
    flex: 1;
    min-width: 190px;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #d8c3ab;
    border-radius: 4px;
    background: #fff;
}

/* Chat del clan */
.gc-chat {
    max-height: 340px;
    overflow-y: auto;
    background: #f8fafc;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.gc-empty {
    text-align: center;
    color: #888;
    font-size: 12px;
    padding: 20px 0;
}

.gc-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 85%;
}

.gc-mine {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.gc-ava {
    width: 28px;
    height: 28px;
    font-size: 12px;
    flex-shrink: 0;
}

.gc-bubble {
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 10px;
    padding: 7px 11px;
    display: block;
    min-width: 0;
}

.gc-mine .gc-bubble {
    background: #e3f0fa;
    border-color: #b5d5ec;
}

.gc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.gc-head b {
    font-size: 11px;
    color: #1d3e5e;
}

.gc-time {
    font-size: 9px;
    color: #999;
}

.gc-text {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
    word-break: break-word;
}

.gc-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.gc-form input[type="text"] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #a4b4c2;
    border-radius: 18px;
    font-size: 13px;
}

.gc-form input[type="text"]:focus {
    outline: none;
    border-color: #4eb5f1;
}

/* Cabecera de la comunidad: icono + descripción + contadores */
.cm-head {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 14px 16px;
    border-bottom: 1px solid #e3e9ee;
}

/* Franja de herramientas pegada a la cabecera, dentro de la misma caja */
.cm-toolbar-strip {
    background: #f8fafc;
    padding: 10px 15px;
    border-bottom: 1px solid #e3e9ee;
}

.cm-toolbar-strip .cm-toolbar {
    margin-bottom: 0;
}

.cm-head-main p {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

.cm-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #e3f0fa;
    border: 1px solid #b5d5ec;
    color: #185c8e;
}

/* Acento por sección del hub */
.cm-news {
    border-left: 3px solid #f0a13c;
}

.cm-news .cm-ico {
    background: #fdf3dd;
    border-color: #ecd9a8;
    color: #9a6b12;
}

.cm-event {
    border-left: 3px solid #45b06a;
}

.cm-event .cm-ico {
    background: #e4f5e8;
    border-color: #b8e0c2;
    color: #1f7a33;
}

.cm-free {
    border-left: 3px solid #4eb5f1;
}

.cm-head-main {
    flex-grow: 1;
}

.cm-stats {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cm-stat {
    background: #e3f0fa;
    border: 1px solid #b5d5ec;
    border-radius: 8px;
    padding: 8px 16px;
    text-align: center;
}

.cm-stat b {
    display: block;
    font-size: 18px;
    color: #185c8e;
    font-family: Arial, sans-serif;
}

.cm-stat span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #57809C;
    font-weight: bold;
}

/* Barra de herramientas del foro */
.cm-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cm-tool {
    text-decoration: none;
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
}

.cm-tool.active {
    background: linear-gradient(to bottom, #307eb8, #185c8e);
    border-color: #114266;
    color: #fff;
}

/* Contador dentro de las pestañas del hub */
.tab-count {
    display: inline-block;
    font-style: normal;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 4px;
    vertical-align: 1px;
}

/* Likes en los posts */
.fp-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.btn-like {
    border: 1px solid #eec0ba;
    background: #fff;
    color: #c0392b;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
}

.btn-like:hover {
    background: #fbe4e1;
}

.btn-like.liked {
    background: #c0392b;
    border-color: #a02618;
    color: #fff;
}

span.btn-like {
    cursor: default;
}

.locked-note {
    margin-bottom: 14px;
}

/* Cabecera del hilo */
.th-head .cm-head-main h2 {
    font-size: 17px;
    line-height: 1.4;
}

.th-ava {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.th-meta-line {
    font-size: 12px;
    color: #666;
}

.th-meta-line b {
    color: #1d3e5e;
}

.th-back {
    color: #2980b9;
    font-weight: bold;
}

.th-back:hover {
    text-decoration: underline;
}

.mod-bar-dark {
    flex-shrink: 0;
}

/* Post original destacado + avatar y numeración en los posts */
.forum-post.is-op {
    border-left: 3px solid #4eb5f1;
}

.fp-ava {
    width: 40px;
    height: 40px;
    font-size: 17px;
    margin-bottom: 4px;
}

.fp-grade {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fp-num {
    color: #57809C;
    font-weight: bold;
}

.fp-num:hover {
    text-decoration: underline;
}

/* Formulario de respuesta */
.reply-as {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #1d3e5e;
    margin-bottom: 10px;
}

.reply-ava {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.cm-tool-new {
    background: linear-gradient(to bottom, #329f5f, #1c713f);
    border-color: #104d28;
    color: #fff;
}

.cm-tool-new:hover {
    border-color: #104d28;
    background: linear-gradient(to bottom, #3cb56e, #218049);
}

.cm-search {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.cm-search input[type="text"] {
    width: 170px;
    padding: 6px 10px;
    border: 1px solid #a4b4c2;
    border-radius: 12px;
    font-size: 12px;
}

.cm-search input[type="text"]:focus {
    outline: none;
    border-color: #4eb5f1;
}

/* Estado vacío */
.empty-state {
    border: 2px dashed #c6d3de;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
}

.empty-state p {
    font-size: 13px;
    color: #666;
    margin-bottom: 14px;
}

.empty-state .btn-auth {
    flex: none;
    min-width: 0;
    display: inline-block;
}

.new-thread {
    margin-bottom: 14px;
}

.new-thread summary {
    list-style: none;
    user-select: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #1d3e5e;
    padding: 4px 0;
}

.new-thread summary::-webkit-details-marker {
    display: none;
}

.nt-form {
    margin-top: 12px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 14px;
}

.nt-form .input-group label {
    color: #1d3e5e;
}

/* Lista de temas tipo tarjeta */
.thread-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    padding: 10px 14px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.tl-row:hover {
    transform: translateY(-1px);
    border-color: #4eb5f1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Fila que no lleva a ningún sitio: un aviso del staff publicado sin cuerpo.
   Se pinta igual que las demás pero sin el efecto de "clicable", para que
   nadie se quede esperando a que abra algo. */
.tl-row-plano {
    cursor: default;
}

.tl-row-plano:hover {
    transform: none;
    border-color: #d8e2ea;
    box-shadow: none;
}

.tl-pinned {
    background: #fdf8e7;
    border-color: #ecd9a8;
}

.tl-ava {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tl-ava-0 { background: linear-gradient(to bottom, #4a9fd8, #2c6c9e); }
.tl-ava-1 { background: linear-gradient(to bottom, #58b370, #35804b); }
.tl-ava-2 { background: linear-gradient(to bottom, #b37fd8, #7e4ba3); }
.tl-ava-3 { background: linear-gradient(to bottom, #e08e4e, #a95f24); }
.tl-ava-4 { background: linear-gradient(to bottom, #d86a6a, #a03c3c); }
.tl-ava-5 { background: linear-gradient(to bottom, #4fb8ad, #2e7f77); }

.tl-main {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tl-title b {
    color: #1d3e5e;
    font-size: 13px;
}

.tl-row:hover .tl-title b {
    color: #2980b9;
}

.tl-excerpt {
    font-size: 11px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Emblema del clan: lista, ficha y panel del master ---- */
/*
 * TODO emblema se pinta en una caja de lado FIJO con `object-fit: contain`.
 * Sin esto cada imagen salía a su tamaño natural: los PNG subidos (256x256)
 * aplastaban la fila entera mientras el `default.svg` (64 px) se veía diminuto.
 * `contain` y no `cover` porque el clan ya eligió su encuadre al subirla: aquí
 * no se le recorta nada, se enmarca. Así también quedan bien los emblemas de
 * la primera versión, que se guardaron sin recortar y no son cuadrados.
 */
.gl-emblema,
.gv-emblema,
.ga-emblema-img {
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
}

/* Lista de clanes: al alto de la fila. */
.gl-emblema {
    width: 52px;
    height: 52px;
    padding: 2px;
}

.tl-row:hover .gl-emblema {
    border-color: #4eb5f1;
}

/* Ficha del clan: la cabecera aguanta algo más de tamaño. */
.gv-emblema {
    width: 84px;
    height: 84px;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(29, 62, 94, 0.12);
}

/* ---- Panel del master: cambiar el emblema ---- */
.ga-emblema {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e3e9ee;
    border-radius: 6px;
    background: #f8fafc;
}

.ga-emblema-img {
    width: 72px;
    height: 72px;
    padding: 3px;
}

.ga-emblema-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ga-emblema-txt b {
    font-size: 13px;
    color: #1d3e5e;
}

.ga-emblema-txt > span {
    font-size: 11px;
    color: #777;
    line-height: 1.5;
}

.ga-emblema-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 2px;
}

.ga-emblema-form input[type="file"] {
    max-width: 100%;
    font-size: 11px;
    color: #55708a;
}

/* Quitar el emblema no es la acción principal: enlace, no botón rojo. */
.ga-emblema-quitar {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: #8a97a5;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

.ga-emblema-quitar:hover { color: #970605; }

/* ---- Recortador (aparece al elegir archivo) ---- */
.ga-crop {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ga-crop[hidden] { display: none; }

/*
 * El visor mide 200 px de lado porque es la constante VISOR de
 * `clan-emblema.js`: si se cambia aquí hay que cambiarla allí, o las
 * coordenadas que se mandan al servidor dejan de cuadrar.
 * Es CUADRADO a propósito: lo que el servidor guarda es un cuadrado, así que
 * un visor redondo prometería un encuadre que luego no se cumple.
 */
.ga-crop-visor {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #c3d3e0;
    border-radius: 6px;
    background: #eef3f7;
    cursor: grab;
    touch-action: none; /* el arrastre lo lleva el JS con pointer events */
}

.ga-crop-visor:active { cursor: grabbing; }

/* El JS le pone left/top/width/height en píxeles. */
.ga-crop-visor img {
    position: absolute;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Rejilla de tercios: ayuda a encuadrar y no tapa la imagen. */
.ga-crop-mascara {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent 33.33%, rgba(255, 255, 255, .45) 33.33%, rgba(255, 255, 255, .45) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
        linear-gradient(to right, transparent 66.66%, rgba(255, 255, 255, .45) 66.66%, rgba(255, 255, 255, .45) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
        linear-gradient(to bottom, transparent 33.33%, rgba(255, 255, 255, .45) 33.33%, rgba(255, 255, 255, .45) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
        linear-gradient(to bottom, transparent 66.66%, rgba(255, 255, 255, .45) 66.66%, rgba(255, 255, 255, .45) calc(66.66% + 1px), transparent calc(66.66% + 1px));
    box-shadow: inset 0 0 0 1px rgba(29, 62, 94, .18);
    border-radius: 5px;
}

.ga-crop-ctrl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 150px;
}

.ga-crop-ctrl label {
    font-size: 11px;
    font-weight: bold;
    color: #1d3e5e;
}

.ga-crop-ctrl input[type="range"] {
    width: 150px;
    accent-color: #970605;
}

.ga-crop-centrar {
    padding: 4px 12px;
    border: 1px solid #c3d3e0;
    border-radius: 8px;
    background: #fff;
    color: #1d3e5e;
    font-size: 11px;
    cursor: pointer;
}

.ga-crop-centrar:hover {
    border-color: #4eb5f1;
    color: #2980b9;
}

.ga-crop-ayuda {
    font-size: 10px;
    color: #8a97a5;
    line-height: 1.4;
}

@media (max-width: 560px) {
    .ga-emblema {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ga-emblema-txt,
    .ga-emblema-form,
    .ga-crop-ctrl { align-items: center; }

    .ga-crop { justify-content: center; }

    /* El visor NO se encoge: su lado va atado a VISOR en el JS. */
    .ga-crop-visor { max-width: 100%; }

    .gv-emblema {
        width: 64px;
        height: 64px;
    }
}

.tl-meta {
    font-size: 10px;
    color: #999;
}

.tl-meta b {
    color: #57809C;
}

.tl-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.tl-replies {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #e3f0fa;
    border: 1px solid #b5d5ec;
}

.tl-replies b {
    font-size: 14px;
    color: #185c8e;
    font-family: Arial, sans-serif;
}

.tl-replies i {
    font-style: normal;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #57809C;
    font-weight: bold;
}

/* Visitas: mismo cajón que las respuestas pero en tono neutro, para que el
   dato que importa (las respuestas) siga siendo el que resalta. */
.tl-views {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #f4f7fa;
    border: 1px solid #dde5ec;
}

.tl-views b {
    font-size: 13px;
    color: #6b7b89;
    font-family: Arial, sans-serif;
}

.tl-views i {
    font-style: normal;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a97a5;
    font-weight: bold;
}

/* Edición de un mensaje del foro */
.fp-edit-form {
    margin: 0 0 6px;
}

.fp-edit-form textarea {
    width: 100%;
}

.fp-edited {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    font-style: italic;
    color: #97a3ae;
}

.tl-replies-zero {
    background: #eef2f6;
    border-color: #d4dde5;
}

.tl-replies-zero b {
    color: #8a97a5;
}

.tl-last {
    display: inline-flex;
    flex-direction: column;
    font-size: 11px;
    color: #57809C;
    min-width: 86px;
}

.tl-last i {
    font-style: normal;
    font-size: 10px;
    color: #999;
}

.thread-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 14px;
}

/* Post del foro: ficha del autor a la izquierda, contenido a la derecha */
.forum-post {
    display: flex;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

.fp-author {
    flex-shrink: 0;
    width: 150px;
    background: #f4f8fb;
    border-right: 1px solid #d8e2ea;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 12px;
    color: #1d3e5e;
}

.fp-author .rank-icon {
    margin: 0 0 2px;
}

.fp-grade {
    font-size: 10px;
    color: #57809C;
}

.fp-gp {
    font-size: 10px;
    color: #999;
}

.fp-body {
    flex-grow: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}

.fp-content {
    font-size: 13px;
    color: #333;
    line-height: 1.7;
    flex-grow: 1;
    word-break: break-word;
}

.fp-date {
    font-size: 10px;
    color: #999;
    text-align: right;
}

/* Fan page: tarjetas de redes clicables con icono de marca */
.social-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.social-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.social-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.si-facebook {
    background: #1877f2;
}

.si-whatsapp {
    background: #25d366;
}

.si-discord {
    background: #5865f2;
}

.si-tiktok {
    background: #111;
}

/* Moderación del foro (staff) */
.thread-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mod-bar {
    display: inline-flex;
    gap: 6px;
}

.btn-mod {
    border: 1px solid #a4b4c2;
    background: #f4f8fb;
    color: #1d3e5e;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
}

.btn-mod:hover {
    border-color: #4eb5f1;
    background: #e8f2fa;
}

.btn-mod-danger {
    color: #a02618;
    border-color: #eec0ba;
    background: #fbe4e1;
}

.btn-mod-danger:hover {
    border-color: #a02618;
    background: #f7d0ca;
}

.pill-pin {
    background-color: #b8860b;
    width: auto;
    padding: 3px 8px;
    margin-right: 8px;
}

.row-pinned {
    background: #fdf8e7;
}

.fp-chips {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 4px;
}

/* Level Tree */
.level-icon {
    width: 25px;
    vertical-align: middle;
}

.level-table .col-pos {
    width: 60px;
    text-align: center;
}

.level-crit {
    color: #666;
    font-size: 11px;
}

/* Muestra de avatares */
.avatar-sample {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.avatar-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 84px;
    padding: 8px 4px 6px;
    background: #f4f8fb;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
}

.avatar-chip img {
    max-width: 60px;
    max-height: 60px;
}

.avatar-slot {
    font-size: 9px;
    font-style: normal;
    font-weight: bold;
    color: #57809C;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ---------- Footer ---------- */

.footer {
    background-color: #0c1a27;
    height: 40px;
    border-top: 1px solid #1a2f42;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 12px;
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
    box-shadow: inset 0 1px 0 #000;
}

.footer-left span {
    margin-right: 15px;
}

.f-version {
    color: #7db4db;
    font-weight: bold;
}

.f-policy {
    color: #ffffff;
}

.users {
    color: #ffff00 !important;
    font-weight: bold;
}

.footer-right {
    color: #90acc1;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.footer-right b {
    color: #90acc1;
}

.tank {
    position: relative;
    height: 80px;
    margin-top: 4px;
    text-align: right;
    padding-right: 20px;
    z-index: 10;
    animation: drive-in 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards, bob-up-down 3s ease-in-out 1.5s infinite;
}

/* ---------- Móvil ---------- */

@media (max-width: 768px) {
    /* `fixed` da problemas de render en iOS: en móvil el fondo acompaña al scroll. */
    body {
        background-attachment: scroll;
    }

    .wrapper {
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .main {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        padding-bottom: 0;
        position: static;
    }

    .dl-wrap {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        border-radius: 6px;
        border: 2px solid #111f2d;
        padding: 4px 10px;
    }

    /* En el móvil la barra lleva tres cosas: logo, conectados y el menú.
       Los 150px fijos del logo eran para separarlo de los enlaces del
       escritorio, que aquí ni se pintan, y empujaban el contador fuera. */
    .dualsoft-logo {
        margin-right: auto;
    }

    .tb-online {
        margin-right: 10px;
        font-size: 10px;
    }

    .show-mobile-only {
        display: block;
    }

    .mobile-auth-buttons.show-mobile-only {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #1a324b;
    }

    .gunbound-menu {
        display: none;
    }

    .gunbound-menu.open {
        display: block;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: rgba(12, 26, 39, 0.95);
        z-index: 1000;
        padding: 15px 10px;
        border-bottom: 2px solid #2d4c66;
        box-sizing: border-box;
    }

    .content {
        border-left: none;
        border-top: 1px solid #061018;
        padding: 15px 10px;
    }

    .banner {
        height: 120px;
        padding-right: 15px;
    }

    .gb-logo {
        left: 5px;
        top: 5px;
    }

    .gb-logo img {
        max-height: 110px;
    }

    .topbar {
        flex-direction: row;
        height: 50px;
        padding: 0 15px;
        align-items: center;
        justify-content: space-between;
    }

    .hide-mobile {
        display: none !important;
    }

    .footer {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 10px;
        text-align: center;
    }

    .footer-left span {
        margin-right: 5px;
        display: block;
        margin-bottom: 5px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mirror-grid,
    .steps,
    .feature-grid,
    .item-grid {
        grid-template-columns: 1fr;
    }

    .art-grid,
    .mob-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .keys-grid {
        grid-template-columns: 1fr;
    }

    .tl-right {
        flex-direction: column;
        gap: 4px;
    }

    .tl-last {
        display: none;
    }

    .tl-excerpt {
        white-space: normal;
    }

    .cm-layout {
        flex-direction: column;
    }

    .cm-side {
        width: auto;
        border-left: none;
        border-top: 1px solid #e3e9ee;
    }

    .cm-hero-art {
        display: none;
    }

    .gg-steps {
        grid-template-columns: 1fr;
    }

    /* En columna, la flecha entre pasos apunta hacia abajo */
    .gg-step:not(:last-child)::after {
        top: auto;
        bottom: -12px;
        right: 50%;
        transform: translateX(50%);
        border-left-color: transparent;
        border-top-color: #c6d3de;
    }

    .podium {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .pd {
        margin-bottom: 18px;
    }

    .pd-first {
        order: -1;
    }

    .dl-card {
        flex-direction: column;
        text-align: center;
    }

    .dl-meta-label {
        width: auto;
        margin-right: 6px;
    }

    .extra-dl {
        flex-direction: column;
        text-align: center;
    }

    .gb-table {
        display: block;
        overflow-x: auto;
    }
}

/* =====================================================================
   TIENDA DE AVATARES
   ===================================================================== */
.cm-shop {
    border-left: 3px solid #9a6b12;
}

.sh-saldos {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.sh-saldo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 76px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fdf3dd;
    border: 1px solid #ecd9a8;
}

.sh-saldo i {
    font-style: normal;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9a6b12;
}

.sh-saldo b {
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #7a5310;
}

.sh-saldo-cash {
    background: #e8f2fb;
    border-color: #bcd8ee;
}

.sh-saldo-cash i { color: #185c8e; }
.sh-saldo-cash b { color: #14476b; }

.sh-aviso {
    margin-bottom: 14px;
    font-size: 12px;
}

.sh-total {
    margin-bottom: 10px;
    font-size: 11px;
    color: #6b7b89;
}

/* Rejilla de avatares: se adapta sola al ancho disponible. */
.sh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.sh-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #d8e2ea;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff, #f6f9fc);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sh-card:hover {
    transform: translateY(-2px);
    border-color: #b5d5ec;
    box-shadow: 0 6px 18px rgba(29, 62, 94, 0.12);
}

.sh-card.is-new {
    border-color: #ecd9a8;
}

/* ---- Tienda: sets (paquetes de prendas) ---- */
/*
 * La tarjeta de un set es más ancha que la de una prenda suelta porque tiene
 * que enseñar TODAS sus piezas: lo que se compra es el conjunto, y sin verlo
 * entero no se sabe qué te llevas.
 */
.sh-sets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.sh-set {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 13px;
    border: 1px solid #d8e2ea;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff, #f6f9fc);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sh-set:hover {
    transform: translateY(-2px);
    border-color: #b5d5ec;
    box-shadow: 0 6px 18px rgba(29, 62, 94, 0.12);
}

.sh-set.is-new { border-color: #ecd9a8; }

.sh-set-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.sh-set-nombre {
    color: #1d3e5e;
    font-size: 14px;
    line-height: 1.3;
}

.sh-set-piezas {
    flex-shrink: 0;
    padding: 1px 8px;
    border: 1px solid #cfe0ee;
    border-radius: 10px;
    background: #f2f8fc;
    color: #55708a;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.sh-set-desc {
    margin: 0 0 8px;
    color: #777;
    font-size: 11.5px;
    line-height: 1.5;
}

/* Las piezas del conjunto, en fila y con scroll propio si son muchas: la
   página nunca debe desplazarse en horizontal por culpa de un set grande. */
.sh-set-piezas-tira {
    display: flex;
    gap: 8px;
    margin: 6px 0 10px;
    padding-bottom: 4px;
    overflow-x: auto;
}

.sh-set-pieza {
    flex: 0 0 auto;
    width: 78px;
    text-align: center;
}

.sh-set-pieza-img {
    position: relative;
    display: grid;
    place-items: center;
    height: 66px;
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, #eef3f8 0 8px, #e7eef5 8px 16px);
    overflow: hidden;
}

.sh-set-pieza-t {
    display: block;
    margin-top: 3px;
    color: #8a97a5;
    font-size: 10px;
    line-height: 1.3;
}

/* ---- Tienda: el muñeco vestido con el set ---- */
/*
 * El set se enseña como el personaje YA VESTIDO, que es como lo hace el portal
 * anterior (allí con un iframe; aquí las capas van directas). A la derecha, las
 * piezas sueltas: el muñeco dice cómo queda, la tira dice qué te llevas.
 */
.sh-set-cuerpo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 10px;
}

.sh-set-muneco {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 138px;
    height: 152px;
    border-radius: 6px;
    background: repeating-linear-gradient(45deg, #eef3f8 0 8px, #e7eef5 8px 16px);
    overflow: hidden;
}

/*
 * Las capas se apilan UNA ENCIMA DE OTRA, así que todas arrancan en el mismo
 * origen: la primera manda en el flujo y el resto se superpone en absoluto.
 * Todas comparten caja y ancla desde PHP, por eso encajan.
 */
.sh-muneco {
    position: relative;
    display: block;
    transform-origin: center center;
}

.sh-muneco .sh-capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Con el muñeco al lado, la tira de piezas ocupa lo que queda y se desplaza
   sola si el set trae muchas. */
.sh-set-cuerpo .sh-set-piezas-tira {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

@media (max-width: 420px) {
    .sh-set-cuerpo {
        flex-direction: column;
        align-items: center;
    }

    .sh-set-cuerpo .sh-set-piezas-tira {
        width: 100%;
        justify-content: center;
    }
}

/* Aviso de piezas repetidas: se entrega el set entero, así que conviene
   decirlo ANTES de cobrar. */
.sh-set-aviso {
    margin: 0 0 9px;
    padding: 6px 9px;
    border: 1px solid #ecd9a8;
    border-left: 3px solid #e0a72e;
    border-radius: 5px;
    background: #fdf8e7;
    color: #6b5320;
    font-size: 11px;
    line-height: 1.5;
}

.sh-set-aviso b { color: #8a6d1b; }

/* Los botones de compra son los mismos que los de una prenda suelta. */
.sh-set .sh-precios { margin-top: auto; }

@media (max-width: 560px) {
    .sh-sets { grid-template-columns: 1fr; }
}

.sh-nuevo {
    position: absolute;
    top: -7px;
    right: 8px;
    padding: 1px 7px;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #e0a72e, #9a6b12);
    border-radius: 9px;
}

/*
 * Distintivo del set cuando va mezclado con las prendas en la pestaña "Todo".
 * Sin él, un set y una prenda suelta se ven igual y el jugador no sabría que
 * está pagando por un paquete entero.
 *
 * Va a la IZQUIERDA a propósito: "Nuevo" ocupa la derecha y un set nuevo lleva
 * las dos etiquetas a la vez.
 */
.sh-etiqueta-set {
    position: absolute;
    top: -7px;
    left: 8px;
    padding: 1px 7px;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #4d90c9, #245b8b);
    border-radius: 9px;
}

/* El borde azul repite el color de la etiqueta: se distingue de un vistazo. */
.sh-card-set {
    border-color: #b5d5ec;
    background: linear-gradient(180deg, #ffffff, #f2f7fb);
}

.sh-img {
    position: relative;
    display: grid;
    place-items: center;
    height: 104px;
    margin-bottom: 8px;
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, #eef3f8 0 8px, #e7eef5 8px 16px);
    overflow: hidden;
}

/*
   Avatar animado. El <span> es el hueco que ocupan todos los fotogramas juntos
   (así nada se recorta ni se sale) y el <i> de dentro es el fotograma que toca:
   cambia de tamaño y de sitio en cada paso, porque los fotogramas no son
   iguales entre sí. De moverlo se encarga assets/js/avatares.js; sin JS se
   queda el primero, bien pintado.
*/
.sh-sprite {
    position: relative;
    display: block;
    transform-origin: center center;
}

.sh-sprite > i {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* La inicial solo se ve si la imagen del avatar no existe todavía. */
.sh-img-fallback {
    display: none;
    font-size: 30px;
    font-weight: bold;
    color: #b3c4d3;
}

.sh-img.sin-img .sh-img-fallback {
    display: block;
}

.sh-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 8px;
    min-width: 0;
}

.sh-nombre {
    font-size: 11px;
    color: #1d3e5e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-tipo {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a97a5;
}

.sh-precios {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}

.sh-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #c6a75a;
    background: linear-gradient(180deg, #fdf0d0, #f3e0ae);
    color: #7a5310;
    transition: filter 0.15s ease;
}

.sh-btn:hover { filter: brightness(1.05); }
.sh-btn:active { transform: translateY(1px); }

.sh-btn i {
    font-style: normal;
    font-weight: bold;
}

.sh-btn b {
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.sh-btn-cash {
    border-color: #8fbde0;
    background: linear-gradient(180deg, #e9f4fd, #cfe6f7);
    color: #14476b;
}

.sh-sin-precio {
    margin-top: auto;
    font-size: 9px;
    font-style: italic;
    color: #a4b4c2;
}

/* Edición limitada: cuántas unidades quedan del avatar. */
.sh-stock {
    display: block;
    margin-bottom: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    border-radius: 9px;
    color: #7a5310;
    background: #fdf3dd;
    border: 1px solid #ecd9a8;
}

.sh-stock.agotado {
    color: #8c332c;
    background: #f9e4e2;
    border-color: #e6bdb8;
}

/* Noticias escritas con el editor del panel: que el formato se vea. */
.fp-rico h2 { margin: 14px 0 6px; font-size: 16px; color: #1d3e5e; }
.fp-rico h3 { margin: 12px 0 5px; font-size: 14px; color: #1d3e5e; }
.fp-rico p { margin: 0 0 10px; }
.fp-rico ul,
.fp-rico ol { margin: 0 0 10px 22px; }
.fp-rico li { margin-bottom: 3px; }
.fp-rico a { color: #1d6fa5; text-decoration: underline; }
.fp-rico img { max-width: 100%; height: auto; border-radius: 4px; }
.fp-rico blockquote {
    margin: 10px 0;
    padding: 8px 12px;
    border-left: 3px solid #c8d8e6;
    background: #f4f8fb;
    color: #4a5c6b;
}
.fp-rico table { border-collapse: collapse; margin: 10px 0; }
.fp-rico th,
.fp-rico td { padding: 5px 9px; border: 1px solid #d8e2ea; }
.fp-rico hr { margin: 12px 0; border: none; border-top: 1px solid #d8e2ea; }

/* Elementos nuevos que el editor del panel puede insertar. */
.fp-rico h4 { margin: 10px 0 4px; font-size: 13px; color: #1d3e5e; }
.fp-rico sub,
.fp-rico sup { font-size: 10px; }
.fp-rico mark { background: #fff3bf; padding: 0 3px; }
.fp-rico pre {
    margin: 10px 0;
    padding: 10px 12px;
    overflow-x: auto;
    background: #eef3f8;
    border: 1px solid #d8e2ea;
    border-radius: 5px;
}
.fp-rico code { font-family: Consolas, monospace; font-size: 12px; }
.fp-rico dl { margin: 0 0 10px; }
.fp-rico dt { font-weight: bold; }
.fp-rico dd { margin: 0 0 6px 16px; }
.fp-rico caption { padding-bottom: 4px; font-weight: bold; color: #4a5c6b; }
.fp-rico figure { margin: 10px 0; }
.fp-rico figcaption { font-size: 11px; color: #6b7b89; text-align: center; }

/* Los vídeos incrustados se adaptan al ancho de la caja. */
.fp-rico iframe {
    display: block;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 12px auto;
    border: 0;
    border-radius: 5px;
}

/* ---------- Noticias: me gusta y comentarios ---------- */
.nw-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 4px;
    padding: 10px 12px;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    background: #f6f9fc;
}

.nw-ir {
    font-size: 12px;
    color: #4a5c6b;
    text-decoration: none;
}

.nw-ir:hover { color: #1d6fa5; }

.nw-comentarios { margin-top: 16px; }

.nw-titulo {
    margin: 0 0 10px;
    padding-bottom: 6px;
    font-size: 13px;
    color: #1d3e5e;
    border-bottom: 1px solid #e2e9ef;
}

.nw-vacio {
    padding: 14px 0;
    font-size: 12px;
    color: #6b7b89;
}

.nw-com {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dotted #e2e9ef;
}

.nw-com:last-of-type { border-bottom: none; }

.nw-ava {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

.nw-com-cuerpo { flex: 1; min-width: 0; }

.nw-com-cab {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 0 0 3px;
    font-size: 12px;
    color: #4a5c6b;
}

.nw-fecha { color: #8a97a5; }

.nw-borrar {
    display: flex;
    margin-left: auto;
}

.nw-borrar-btn {
    padding: 0 5px;
    font-size: 15px;
    line-height: 1;
    color: #b9c4cf;
    background: none;
    border: none;
    cursor: pointer;
}

.nw-borrar-btn:hover { color: #8c332c; }

.nw-com-texto {
    font-size: 13px;
    line-height: 1.55;
    color: #33424f;
    word-wrap: break-word;
}

.nw-form { margin-top: 14px; }

/* El textarea del comentario no va dentro de un .input-group como el del foro,
   así que necesita su propio estilo o sale con el aspecto crudo del navegador. */
.nw-form textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 78px;
    resize: vertical;
    padding: 9px 11px;
    border: 1px solid #cddae6;
    border-radius: 6px;
    background: #fff;
    color: #1d3e5e;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.55;
}

.nw-form textarea::placeholder { color: #93a5b6; }

.nw-form textarea:focus {
    outline: none;
    border-color: #4eb5f1;
    box-shadow: 0 0 0 3px rgba(78, 181, 241, 0.16);
}

.nw-form-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
}

.nw-cuenta {
    font-size: 11px;
    color: #8a97a5;
}

.nw-cuenta.gcr-count-full { color: #c0392b; }

@media (max-width: 560px) {
    .nw-form-pie { flex-direction: column-reverse; align-items: stretch; }
    .nw-form-pie .nw-cuenta { text-align: right; }
}

/* Contadores de me gusta / comentarios en las listas de la portada. */
.list .ls-cont {
    margin-left: 6px;
    color: #8a99ad;
    font-size: 11px;
    white-space: nowrap;
}

/* ===================== Ajustes de la cuenta (?op=cuenta) ==================== */

/* Medallas nuevas de la cabecera del perfil. */
.badge-vip {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.22), rgba(184, 149, 48, 0.14));
    border-color: #b89530;
    color: #ffe27a;
}

.badge-pu {
    background: rgba(78, 181, 241, 0.16);
    border-color: #3f8fc4;
    color: #9fd8ff;
}

.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.ac-card {
    display: flex;
    flex-direction: column;
    background: #f8fbfd;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    padding: 16px;
}

.ac-card-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e3ebf2;
}

.ac-card-head h3 {
    margin: 0;
    font-size: 14px;
    color: #1d3e5e;
}

.ac-card-head p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #6b7f92;
}

.ac-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2f7fb5, #1d5b87);
    color: #fff;
    font-size: 16px;
}

.ac-now {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: #eef4f9;
    border: 1px solid #dbe6ee;
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 12px;
}

.ac-now-label { font-size: 11px; color: #7b8ea1; }
.ac-now-value { font-size: 14px; font-weight: bold; color: #1d3e5e; }

/* Los campos NO heredan de .form-page (tema oscuro): aquí el fondo es claro. */
.ac-campo { margin-bottom: 11px; }

.ac-campo label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #1d3e5e;
}

.ac-campo input {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cddae6;
    border-radius: 6px;
    background: #fff;
    color: #1d3e5e;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
}

.ac-campo input::placeholder { color: #9db0c1; }

.ac-campo input:focus {
    outline: none;
    border-color: #4eb5f1;
    box-shadow: 0 0 0 3px rgba(78, 181, 241, 0.16);
}

.ac-campo input:disabled {
    background: #eef1f4;
    color: #93a3b2;
    cursor: not-allowed;
}

.ac-ayuda {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: #8a97a5;
}

.ac-cuenta { white-space: nowrap; }
.ac-cuenta.gcr-count-full { color: #c0392b; }

.ac-precio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f2f9fe;
    border: 1px solid #cfe4f3;
    border-radius: 6px;
    padding: 9px 12px;
    margin: 4px 0 12px;
}

.ac-precio-cifra { font-size: 14px; font-weight: bold; }
.ac-precio-sub { font-size: 11px; color: #5f7d95; }

/* El .cash del tema es un celeste para fondo oscuro y aquí se perdería sobre
   la caja clara: dentro del precio se usa un azul oscuro. */
.ac-precio .cash { color: #1a6f9e; }
.ac-gratis { color: #2e9e44; }
.ac-falta { color: #c0392b; }

.ac-form .btn-auth {
    width: 100%;
    padding: 9px;
    font-size: 13px;
}

.ac-form .btn-auth:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ac-nota {
    margin: 11px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: #7b8ea1;
}

.ac-nota-espera {
    background: #fff6e5;
    border: 1px solid #ecdcb8;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0 0 11px;
    color: #8a6d3b;
}

.ac-alert { margin-bottom: 12px; }

.ac-datos { margin-top: 16px; }

.ac-fijo {
    margin-left: 6px;
    font-size: 11px;
    color: #93a3b2;
}

/* Accesos rápidos de la cabecera de Mi GunBound. */
.ph-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.ph-accion {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    background: rgba(6, 16, 26, 0.45);
    border: 1px solid #2a496b;
    color: #cfe0ef;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.ph-accion:hover {
    background: rgba(78, 181, 241, 0.18);
    border-color: #4eb5f1;
    color: #fff;
    transform: translateY(-1px);
}


/* ============================ Portada rediseñada =========================== */

/* Enlace "Ver más" a la derecha de la barra de título (que ya es flex). */
.box-title .bt-more {
    margin-left: auto;
    color: #9fd0ef;
    font-size: 10px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}

.box-title .bt-more:hover { color: #fff; }

/* ------------------------- Noticias y Eventos ---------------------------- */
.hm-dual {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* Las dos cajas igual de altas aunque una tenga menos filas: sin esto la más
   corta deja un escalón feo. El contenido blanco es el que se estira. */
.hm-col {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.hm-col > .box-content { flex: 1 1 auto; }

.hm-pad { padding: 9px 12px 11px; }

.hm-vacio {
    margin: 6px 0;
    font-size: 12px;
    color: #7b8ea1;
}

/* Color por etiqueta: es lo que da vida a las filas. */
.hm-t-p-orange { --hm-color: #e8a13a; }
.hm-t-p-green  { --hm-color: #46b25e; }
.hm-t-p-red    { --hm-color: #d3574f; }
.hm-t-p-blue   { --hm-color: #4a9fd5; }
.hm-t-p-done   { --hm-color: #8b96a3; }

.hm-lista {
    display: flex;
    flex-direction: column;
}

.hm-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 10px;
    margin: 0 -8px;
    position: relative;
    border-radius: 5px;
    border-bottom: 1px solid #eef2f6;
    color: #1d3e5e;
    font-size: 12px;
    text-decoration: none;
    transition: background-color 0.14s ease;
}

/* Marca de color a la izquierda, que aparece al pasar por encima. */
.hm-fila::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--hm-color, #4a9fd5);
    opacity: 0;
    transition: opacity 0.14s ease;
}

a.hm-fila:hover { background: #f2f8fc; }
a.hm-fila:hover::before { opacity: 1; }

.hm-lista > :last-child { border-bottom: none; }

.hm-fila-plana { cursor: default; }

.hm-fecha {
    flex: 0 0 auto;
    color: #8296a8;
    font-size: 10px;
    white-space: nowrap;
}

.hm-titulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.hm-fila:hover .hm-titulo { color: #0b6fae; }

.hm-cont {
    flex: 0 0 auto;
    color: #8a99ad;
    font-size: 11px;
    white-space: nowrap;
}

/* ------------------- Filas de las tres tarjetas -------------------------- */
.hm-top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px;
    margin: 0 -6px;
    border-bottom: 1px solid #eef2f6;
    border-radius: 5px;
    color: #1d3e5e;
    font-size: 12px;
    text-decoration: none;
}

.hm-top:last-child { border-bottom: none; }

a.hm-top-link:hover { background: #f2f8fc; }
a.hm-top-link:hover .hm-top-main b { color: #0b6fae; }

/* Medalla de posición: oro, plata y bronce; del cuarto en adelante, sobria. */
.hm-pos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8eef4;
    border: 1px solid #d3dfe9;
    color: #6b8095;
    font-size: 11px;
    font-weight: bold;
}

.hm-pos-1 {
    background: linear-gradient(180deg, #ffd970, #e0a92c);
    border-color: #c9962a;
    color: #5a3d05;
}

.hm-pos-2 {
    background: linear-gradient(180deg, #e6ecf1, #b9c6d1);
    border-color: #a7b6c3;
    color: #47525c;
}

.hm-pos-3 {
    background: linear-gradient(180deg, #e6b98e, #c58a51);
    border-color: #b07c47;
    color: #4d2f11;
}


.hm-top-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.hm-top-main b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-top-main i {
    color: #8a97a5;
    font-size: 10px;
    font-style: normal;
}

.hm-top-dato {
    flex: 0 0 auto;
    color: #7f93a6;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

/* El .gold del tema es para fondo oscuro; aquí hace falta un ámbar legible. */
.hm-top-dato.gold { color: #a3781b; }

/* ------------------------------- Estrecho -------------------------------- */
@media (max-width: 780px) {
    .hm-dual { grid-template-columns: 1fr; }

    .hm-col { margin-bottom: 12px; }
}


/* ------------------- Cabecera: evento + franja de comunidad ---------------
   El evento va en una caja normal del sitio. La franja de abajo mantiene la
   estructura clásica (icono | texto | botón) pero en NUESTRO navy, el mismo
   de las barras de título: el verde se queda solo en el icono de WhatsApp. */

/* ---- Franja de la comunidad ---- */
.hm-fr {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid #2b4c6d;
    border-radius: 8px;
    background: linear-gradient(180deg, #1d3e5e 0%, #112a42 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* El único toque verde: el icono, para que se reconozca de un vistazo. */
.hm-fr-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2fd06f 0%, #17a94f 100%);
    border: 1px solid #24b85e;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 5px rgba(0, 0, 0, 0.3);
}

.hm-fr-txt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.45;
}

.hm-fr-txt b { color: #fff; font-size: 14px; }
.hm-fr-txt i { color: #a3c0d8; font-size: 11.5px; font-style: normal; }

/* ---- Portada: reclamo del Grand Prix ---- */
/*
 * Tercera hermana de `.hb-fr` (comunidad y recargas son las otras): mismo
 * alto y mismo ritmo, acento DORADO y corona. Lo que la hace distinta es que
 * no promete nada: ensena el podio de ahora mismo, con nombres.
 */
.hm-prix {
    position: relative;
    overflow: hidden;
    /* En DOS filas a proposito: el titulo y el boton arriba, el podio entero
       debajo. Apretados en una sola fila los tres nombres se partian y la
       franja se veia desordenada; con su propia linea el podio se lee de
       izquierda a derecha como lo que es. */
    flex-wrap: wrap;
    row-gap: 10px;
    border-color: #6a5320;
    text-decoration: none;
    background:
        radial-gradient(420px 120px at 8% 0%, rgba(246, 195, 67, .18), transparent 70%),
        linear-gradient(180deg, #1d3e5e 0%, #112a42 100%);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hm-prix:hover {
    border-color: #e0bb4e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 12px rgba(0, 0, 0, .3);
    transform: translateY(-1px);
}

/* Un destello que cruza cada pocos segundos: es lo que hace que el ojo vaya
   aqui al cargar la portada. Se apaga con `prefers-reduced-motion`. */
.hm-prix::after {
    content: "";
    position: absolute;
    top: 0;
    left: -55%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .10), transparent);
    animation: hm-prix-brillo 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hm-prix-brillo {
    0%, 70% { left: -55%; }
    100%    { left: 115%; }
}

.hm-prix-ico {
    background: linear-gradient(180deg, #f6c343 0%, #b8862a 100%);
    border-color: #d4a63a;
    color: #3a2a06;
    font-size: 21px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.hm-prix .hm-fr-txt i b { color: #f2d38a; font-weight: bold; }

/* El podio, en tres chapas. */
.hm-prix-podio {
    order: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    /* Alineado con el texto, no con el icono redondo. */
    flex: 1 1 100%;
    margin-left: 55px;
}

/*
 * Cada puesto es una FICHA, no una chapita: medalla, quien es (nivel,
 * bandera y nick), su record debajo y los puntos a la derecha. Antes eran
 * tres pildoras pequenas y el top 3 pasaba desapercibido justo en el sitio
 * donde mas tenia que lucir.
 */
.hm-prix-p {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px 11px 7px 7px;
    border: 1px solid #33506d;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #d6e4f0;
}

.hm-prix-quien {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

.hm-prix-nick {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 12.5px;
    color: #fff;
    font-weight: bold;
}

.hm-prix-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-prix-bandera { flex: 0 0 auto; display: flex; }
.hm-prix-nick .nivel-ico { flex: 0 0 auto; }

.hm-prix-rec { font-size: 10.5px; color: #8fb0cb; white-space: nowrap; }
.hm-prix-rec b { color: #b9d3e8; font-weight: bold; }

.hm-prix-pts { color: #ffd472; font-weight: bold; font-size: 11.5px; }

/* El numero, en su medalla. */
.hm-prix-pos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    font-weight: bold;
    color: #14273a;
    background: linear-gradient(180deg, #e8eef5, #b9c4ce);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* El campeon, en dorado y un poco mas grande. */
.hm-prix-p1 {
    border-color: #a07b22;
    background: linear-gradient(180deg, rgba(246, 195, 67, .18), rgba(246, 195, 67, .07));
    box-shadow: 0 0 16px -5px rgba(246, 195, 67, .6);
}
.hm-prix-p1 .hm-prix-pos { background: linear-gradient(180deg, #ffe9a8, #e0a92c); }
.hm-prix-p1 .hm-prix-nick { font-size: 13.5px; }
.hm-prix-p1 .hm-prix-pts { font-size: 12.5px; color: #ffdf8e; }

.hm-prix-p3 .hm-prix-pos { background: linear-gradient(180deg, #e6a66b, #b4702c); }

.hm-prix-btn { order: 2; flex-shrink: 0; position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .hm-prix::after { display: none; }
}

/* En estrecho: el texto arriba, el podio debajo a lo ancho y el boton al
   final, igual que hace el reclamo de recargas. */
/* Pantallas medianas: la bandera es lo primero que sobra. Sin ella caben los
   nicks de 12 caracteres (medido con «AmigoYapeame», que es el que cortaba);
   el nivel se queda, que dice mas del jugador. */
@media (max-width: 1150px) {
    .hm-prix-bandera { display: none; }
}

@media (max-width: 760px) {
    .hm-prix .hm-fr-txt { flex: 1 1 60%; }
    /* Una ficha por linea: apretadas en tres columnas no cabe ni el nick. */
    .hm-prix-podio { grid-template-columns: 1fr; margin-left: 0; }
    .hm-prix-btn { order: 4; flex: 1 1 100%; text-align: center; }
}

/* ---- Portada: reclamo de recargas ---- */
/*
 * Hermana de `.hm-fr` (de ahí que comparta clase): mismo alto, mismo ritmo y
 * el mismo azul de las barras de título, que es lo que hace que algo parezca
 * de esta web. Lo que cambia es el acento DORADO, para que se distinga de la
 * franja de la comunidad de un vistazo sin salirse de la casa.
 */
.hm-rc {
    border-color: #6a5320;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hm-rc:hover {
    border-color: #c8a23c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 10px rgba(0, 0, 0, .25);
    transform: translateY(-1px);
}

/* Las dos monedas superpuestas, en el hueco redondo de `.hm-fr-ico`. */
.hm-rc-ico {
    position: relative;
    background: linear-gradient(180deg, #f0c14b 0%, #b8862a 100%);
    border-color: #d4a63a;
}

.hm-rc-ico img {
    position: absolute;
    width: 20px;
    height: 20px;
    image-rendering: pixelated; /* son de 21 px: nada de suavizarlas */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}

/* El cash detrás y el coin delante: se ve que son DOS monedas distintas. */
.hm-rc-ico img:first-child { left: 6px;  top: 7px; }
.hm-rc-ico img:last-child  { right: 6px; bottom: 7px; }

.hm-rc .hm-fr-txt i b { color: #f2d38a; font-weight: bold; }

/* Las cifras: lo que de verdad invita a entrar. */
.hm-rc-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 1 auto;
}

.hm-rc-chip {
    padding: 3px 9px;
    border: 1px solid #33506d;
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    color: #a3c0d8;
    font-size: 11px;
    white-space: nowrap;
}

.hm-rc-chip b { color: #ffd472; font-weight: bold; }

/* El regalo es el gancho: se marca en verde, como los ahorros del resto. */
.hm-rc-chip-regalo {
    border-color: #2e6b42;
    background: rgba(47, 158, 68, .16);
    color: #bfe6c9;
}

.hm-rc-chip-regalo b { color: #7fe39a; }

.hm-rc-btn { flex-shrink: 0; }

@media (max-width: 780px) {
    .hm-rc {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* El texto ocupa la primera línea entera; cifras y botón, la segunda. */
    .hm-rc .hm-fr-txt { flex: 1 1 60%; }

    .hm-rc-chips {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .hm-rc-btn { order: 4; }
}

.hm-fr-redes {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.hm-fr-red {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #cfe0ef;
    text-decoration: none;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.hm-fr-red:hover {
    background: rgba(78, 181, 241, 0.25);
    border-color: #4eb5f1;
    color: #fff;
}

/* Red aún sin enlace: se ve, pero apagada. */
.hm-fr-red-off {
    opacity: 0.38;
    cursor: default;
}

.hm-fr-red-off:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cfe0ef;
}

/* ---- Botón de la casa: el mismo rojo de los botones del menú ---- */
.btn-gb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #970605;
    border: 1px solid #c11a17;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background 0.16s ease, transform 0.16s ease;
}

.btn-gb:hover {
    background: #b50a08;
    color: #fff;
    transform: translateX(3px);
}

@media (max-width: 780px) {
    .hm-ev {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hm-ev-btn { width: 100%; }

    .hm-fr { flex-wrap: wrap; }

    .hm-fr-txt { flex: 1 1 60%; }

    .hm-fr .btn-gb {
        width: 100%;
        margin-top: 2px;
    }
}

/* ------------------- Novedades de la tienda (tira animada) ----------------
   Reutiliza el reproductor de sprites de la tienda (`.sh-sprite`); aquí solo
   cambia el tamaño del hueco y el marco de la tarjeta.

   Va en FLEX con tarjetas de ancho fijo y centrado, no en rejilla de 6
   columnas: con dos o tres avatares a la venta, la rejilla dejaba media caja
   en blanco.                                                              */
.hm-tira {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.hm-av {
    display: flex;
    position: relative;
    flex-direction: column;
    /* Elásticas: con 5 avatares llenan la fila y con 2 no se estiran de más. */
    flex: 1 1 124px;
    max-width: 168px;
    overflow: hidden;
    border: 1px solid #dde7ef;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.hm-av:hover {
    border-color: #4eb5f1;
    box-shadow: 0 4px 11px rgba(23, 62, 96, 0.18);
    transform: translateY(-2px);
}

.hm-av-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    overflow: hidden;
    /* Suelo claro con viñeta, para que el sprite no flote sobre el blanco. */
    background:
        radial-gradient(ellipse at 50% 118%, rgba(78, 181, 241, 0.28), transparent 62%),
        linear-gradient(180deg, #f7fbfe 0%, #e6f0f8 100%);
    border-bottom: 1px solid #e4edf4;
}

.hm-av-pie {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 9px 8px;
}

.hm-av-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1d3e5e;
    font-size: 11.5px;
}

.hm-av:hover .hm-av-nombre { color: #0b6fae; }

.hm-av-tipo {
    color: #93a5b6;
    font-size: 10px;
}

.hm-av-precio {
    margin-top: 3px;
    font-size: 12px;
    font-weight: bold;
}

.hm-av-dur {
    color: #93a5b6;
    font-size: 9.5px;
}

/* Los .gold/.cash del tema son para fondo oscuro; aquí hacen falta legibles. */
.hm-av-precio.gold { color: #a3781b; }
.hm-av-precio.cash { color: #1a6f9e; }

.hm-av-nuevo {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 1px 6px;
    border-radius: 3px;
    background: #970605;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* El recuento va en una línea bajo las tarjetas: una tarjeta oscura de
   relleno cantaba demasiado cuando solo había un avatar a la venta. */
.hm-tira-pie {
    margin: 11px 0 0;
    padding-top: 9px;
    border-top: 1px solid #eef2f6;
    text-align: center;
    color: #7b8ea1;
    font-size: 11.5px;
}

.hm-tira-pie b { color: #1d3e5e; }

.hm-tira-pie a {
    color: #0b6fae;
    font-weight: bold;
    text-decoration: none;
}

.hm-tira-pie a:hover { text-decoration: underline; }

@media (max-width: 520px) {
    .hm-av {
        flex: 1 1 calc(50% - 5px);
        max-width: none;
    }
}

/* ========================= Tienda de ítems (VIP Oro) ====================== */

.it-estado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 13px;
    margin-bottom: 12px;
    border: 1px solid #d5e4f0;
    border-radius: 7px;
    background: linear-gradient(180deg, #f6fbfe 0%, #eef6fc 100%);
}

.it-dato {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.it-dato i {
    color: #7b8ea1;
    font-size: 11px;
    font-style: normal;
}

.it-dato b { font-size: 14px; }

/* El .cash del tema es un celeste para fondo oscuro: aquí, uno legible. */
.it-estado .cash { color: #1a6f9e; }

.it-sep {
    width: 1px;
    height: 22px;
    background: #d5e4f0;
}

.it-vip-on { color: #a3781b; }
.it-vip-off { color: #93a5b6; }

/* ---- Ficha explicativa ---- */
.it-ficha {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 13px;
    margin-bottom: 12px;
    border: 1px solid #ecdcb8;
    border-radius: 7px;
    background: #fffaf0;
}

.it-ficha-img {
    flex: 0 0 auto;
    width: 96px;
    height: auto;
}

.it-ficha-txt { min-width: 0; }

.it-ficha-txt h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    color: #14395c;
    font-size: 16px;
}

.it-chip {
    padding: 2px 9px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffd970, #e0a92c);
    border: 1px solid #c9962a;
    color: #5a3d05;
    font-size: 11px;
    font-weight: bold;
}

.it-ficha-txt ul {
    margin: 0;
    padding-left: 18px;
    color: #55708a;
    font-size: 12px;
    line-height: 1.7;
}

.it-ficha-txt ul b { color: #1d3e5e; }

/* ---- Contactos ---- */
.rc-titulo {
    margin: 18px 0 9px;
    color: #14395c;
    font-size: 14px;
}

.rc-contactos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Mismo navy de las barras de título; el verde solo en el icono. */
.rc-contacto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid #2b4c6d;
    border-radius: 8px;
    background: linear-gradient(180deg, #1d3e5e 0%, #112a42 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: filter 0.14s ease, transform 0.14s ease;
}

.rc-contacto:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.rc-contacto-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2fd06f 0%, #17a94f 100%);
    border: 1px solid #24b85e;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.rc-contacto-txt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.rc-contacto-txt i {
    color: #a3c0d8;
    font-size: 10.5px;
    font-style: normal;
}

.rc-contacto-txt b {
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.rc-contacto-btn { flex: 0 0 auto; }

/* El botón va dentro del enlace: que no capture el clic por su cuenta. */
.rc-contacto .rc-contacto-btn { pointer-events: none; }

.rc-aviso {
    margin: 9px 0 0;
    color: #7b8ea1;
    font-size: 11.5px;
}

.rc-aviso b { color: #1d3e5e; }

/* ---- Pasos ---- */
.rc-pasos ol {
    margin: 0;
    padding-left: 20px;
    color: #55708a;
    font-size: 12px;
    line-height: 1.8;
}

.rc-nota {
    margin: 10px 0 0;
    color: #7b8ea1;
    font-size: 11.5px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .rc-packs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .rc-packs,
    .rc-contactos { grid-template-columns: 1fr; }

    .rc-intro { flex-direction: column; }
}

/* ---- Coin: la moneda de las recargas ---- */
.coin { color: #a3781b; }

.it-recargar {
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #970605;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}

.it-recargar:hover { background: #b50a08; color: #fff; }

/* Precio en soles del paquete de recarga */
.rc-pack-precio {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #e8eef4;
    width: 100%;
    color: #1d3e5e;
    font-size: 17px;
    font-weight: bold;
}

.rc-pack-regalo {
    color: #2e9e44;
    font-size: 11px;
    font-weight: bold;
}

.rc-pack-regalo-off { visibility: hidden; }

/* Franja de equivalencias: cuántos coins cuesta cada cosa */
.rc-equiv {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid #d5e4f0;
    border-radius: 7px;
    background: #f2f8fc;
    font-size: 12px;
    color: #55708a;
}

.rc-equiv b { color: #1d3e5e; }
.rc-equiv i { color: #a3781b; font-style: normal; font-weight: bold; }

/* ---- Recargas: paquetes seleccionables ---- */
.rc-ayuda {
    margin: 0 0 9px;
    color: #7b8ea1;
    font-size: 11.5px;
}

.rc-packs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Cada paquete es un <label> con su radio dentro: se puede elegir sin JS
   y con teclado, y el estado marcado lo pinta el propio CSS. */
.rc-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 15px 10px 11px;
    border: 1px solid #dde7ef;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8fc 100%);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.rc-pack:hover {
    border-color: #4eb5f1;
    box-shadow: 0 4px 11px rgba(23, 62, 96, 0.16);
    transform: translateY(-2px);
}

.rc-pack-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Elegido: se marca con el azul del sitio y una palomita. */
.rc-pack:has(.rc-pack-radio:checked) {
    border-color: #2f7fb5;
    box-shadow: 0 0 0 2px rgba(47, 127, 181, 0.35);
    background: linear-gradient(180deg, #ffffff 0%, #e8f3fb 100%);
}

.rc-pack:has(.rc-pack-radio:checked)::after {
    content: "\2713";
    position: absolute;
    top: 6px;
    right: 8px;
    color: #2f7fb5;
    font-size: 13px;
    font-weight: bold;
}

/* Foco por teclado. */
.rc-pack:has(.rc-pack-radio:focus-visible) {
    outline: 2px solid #4eb5f1;
    outline-offset: 2px;
}

.rc-pack-top {
    border-color: #c11a17;
    box-shadow: 0 0 0 1px rgba(193, 26, 23, 0.25);
}

.rc-cinta {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 11px;
    border-radius: 0 0 6px 6px;
    background: #970605;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.rc-cinta-verde { background: #17a94f; }

.rc-pack-coins {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.rc-pack-coins b {
    color: #a3781b;
    font-size: 24px;
    line-height: 1;
}

/* La moneda del juego es pixel art de 21 px: nada de suavizarla. */
.rc-moneda {
    width: 21px;
    height: 21px;
    image-rendering: pixelated;
    vertical-align: -4px;
}

/* ---- Recargas: pestaña de CASH ---- */
/*
 * CASH y COIN son DOS MONEDAS DISTINTAS, así que se distinguen por color:
 * el coin va en dorado (#a3781b, la clase `.coin`) y el cash en azul, que es
 * el color de su ficha en el juego. Nunca compartir color entre las dos.
 */
.rc-cash { color: #1f6ea8; }

/* Cifra del paquete: azul en cash, dorado en coins (lo pone .rc-pack-coins b). */
.rc-packs-cash .rc-pack-coins b { color: #1f6ea8; }

/* Nombre de la moneda pegado a la cifra: sin esto "2,625" solo no dice qué es. */
.rc-pack-moneda {
    align-self: flex-end;
    padding-bottom: 2px;
    color: #7b8ea1;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
}

/* La ficha de introducción: azul en cash frente al crema del coin. */
.rc-intro-cash {
    border-color: #cfe0ee;
    background: #f4f9fd;
}

/* Aviso de "el cash NO compra el VIP": tiene que verse, no ser un pie de página. */
.rc-equiv-ojo {
    border-color: #ecd9a8;
    background: #fdf8e7;
}

.rc-equiv-ojo b { color: #8a6d1b; }

.rc-pack-regalo {
    color: #2e9e44;
    font-size: 11px;
    font-weight: bold;
}

.rc-pack-regalo-off { visibility: hidden; }

.rc-pack-precio {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid #e8eef4;
    width: 100%;
    color: #1d3e5e;
    font-size: 17px;
    font-weight: bold;
}

/* Aviso del paquete elegido, encima de los botones de WhatsApp. */
.rc-elegido {
    margin: 9px 0 0;
    padding: 8px 12px;
    border: 1px solid #cfe4f3;
    border-radius: 7px;
    background: #f2f9fe;
    color: #1a6f9e;
    font-size: 12px;
    font-weight: bold;
}

@media (max-width: 900px) {
    .rc-packs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .rc-packs { grid-template-columns: 1fr; }
}

/* ---- Recargas: bloque de introducción (se perdió al reordenar el CSS) ---- */
.rc-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 13px;
    margin-bottom: 14px;
    border: 1px solid #ecdcb8;
    border-radius: 7px;
    background: #fffaf0;
}

.rc-intro-img {
    flex: 0 0 auto;
    width: 88px;
    height: auto;
}

.rc-intro > div { min-width: 0; }

.rc-intro h2 {
    margin: 0 0 5px;
    color: #14395c;
    font-size: 16px;
}

.rc-intro p {
    margin: 0;
    color: #55708a;
    font-size: 12px;
    line-height: 1.6;
}

.rc-intro b { color: #1d3e5e; }

/* Franja de equivalencias: cuántos coins cuesta cada VIP. */
.rc-equiv {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid #d5e4f0;
    border-radius: 7px;
    background: #f2f8fc;
    color: #55708a;
    font-size: 12px;
}

.rc-equiv b { color: #1d3e5e; }
.rc-equiv i { color: #a3781b; font-style: normal; font-weight: bold; }

.rc-aviso {
    margin: 9px 0 0;
    color: #7b8ea1;
    font-size: 11.5px;
}

.rc-aviso b { color: #1d3e5e; }

.rc-nota {
    margin: 10px 0 0;
    color: #7b8ea1;
    font-size: 11.5px;
    line-height: 1.6;
}

/* ---- Tienda de ítems: paquetes de VIP ----
   (se perdieron al recortar el CSS: el comentario "Paquetes" existía en dos
   bloques distintos y el corte se llevó el que no era) */
/* Elástica: llena la fila haya 4 paquetes o 5, sin dejar huecos. */
.it-packs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.it-pack {
    display: flex;
    flex: 1 1 170px;
    max-width: 240px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dde7ef;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.it-pack:hover {
    border-color: #4eb5f1;
    box-shadow: 0 4px 11px rgba(23, 62, 96, 0.16);
    transform: translateY(-2px);
}

.it-pack-cab {
    padding: 7px 8px;
    background: linear-gradient(180deg, #1d3e5e 0%, #112a42 100%);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.it-pack-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    background: linear-gradient(180deg, #ffffff 0%, #e9f1f8 100%);
    border-bottom: 1px solid #e4edf4;
}

.it-pack-img img {
    max-width: 78%;
    max-height: 78%;
}

.it-pack-pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 9px 11px;
    text-align: center;
}

.it-pack-nota {
    color: #7b8ea1;
    font-size: 10px;
    line-height: 1.35;
}

.it-pack-precio {
    font-size: 15px;
    font-weight: bold;
}

.it-pack form { width: 100%; }

.it-pack .btn-gb {
    margin-top: 2px;
    width: 100%;
    padding: 8px 10px;
    font-size: 11.5px;
}

.it-pack .btn-gb:hover { transform: none; }

.it-pack .btn-gb:disabled {
    background: #b6c3cf;
    border-color: #a4b3c1;
    cursor: not-allowed;
}

@media (max-width: 420px) {
    .it-pack {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* ---- Ranking: nivel de 25x15 con el distintivo VIP encima ---- */
.nivel-ico {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 15px;
    margin-right: 5px;
    margin-top: 3px;
    vertical-align: middle;
    flex-shrink: 0;
    /* El VIP se sale por arriba: no hay que recortarlo. */
    overflow: visible;
}

.nivel-ico img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    /* Los iconos del juego son pixel art: nada de suavizado al escalar. */
    image-rendering: pixelated;
}

/* El VIP no sustituye al nivel: se apoya ENCIMA, asomando por el borde de
   arriba, para que el icono de nivel se siga viendo entero. */
.nivel-vip {
    top: -5px;
    left: -1px;
    z-index: 2;
    /* Tamaño fijo: `oro.png` mide 13x7, pero `diamante.png` mide 169x116 y sin
       esto el VIP Diamante tapaba media tabla del ranking. */
    width: 13px;
    height: 7px;
    object-fit: contain;
}

/* En la cinta del podio el nivel va más pequeño y el VIP con él. */
.pd-ribbon-label .nivel-ico {
    width: 21px;
    height: 13px;
    margin-right: 4px;
}

.pd-ribbon-label .nivel-ico img:not(.nivel-vip) {
    width: 21px;
    height: 13px;
}

.pd-ribbon-label .nivel-vip {
    top: -4px;
    width: 11px;
    height: auto;
}

/* Columna del bonus VIP */
.col-vip { white-space: nowrap; }

.gp-vip {
    color: #a3781b;
    font-weight: bold;
}

/* Columna del bonus de membresía. Morado, para que no se confunda con el
   dorado del VIP: son dos bonus distintos y se cobran los dos. */
.col-memb { white-space: nowrap; }

.gp-memb {
    color: #7a4fc4;
    font-weight: bold;
}

/* Miembro que hoy aún no ha jugado: se enseña su porcentaje, apagado. */
.gp-memb-espera {
    color: #a996cf;
    font-size: 11px;
}

/* ========================= Lista de sancionados =========================== */

/* Mismo patrón que los demás encabezados: fondo claro con tinte de la
   sección (aquí rojo) y el texto oscuro de siempre. */
.cm-hero.cm-ban {
    background: linear-gradient(105deg, #fff 55%, #fbeceb);
    border-left: 3px solid #c0392b;
}

.bn-hero-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fdeceb;
    border: 1px solid #e8b3ae;
    color: #c0392b;
    font-size: 26px;
}

/* ---- Tarjetas de recuento ---- */
.bn-resumen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.bn-dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 8px;
    border: 1px solid #dde7ef;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8fc 100%);
    text-align: center;
}

.bn-dato b {
    color: #1d3e5e;
    font-size: 22px;
    line-height: 1.1;
}

.bn-dato i {
    color: #7b8ea1;
    font-size: 10.5px;
    font-style: normal;
}

.bn-dato-perma b { color: #c0392b; }
.bn-dato-temp b  { color: #d98518; }
.bn-dato-free b  { color: #a3781b; }

/* ---- Filtros y buscador ---- */
.bn-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.bn-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bn-buscar {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bn-buscar input[type="text"] {
    width: 190px;
    padding: 7px 10px;
    border: 1px solid #cddae6;
    border-radius: 6px;
    background: #fff;
    color: #1d3e5e;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
}

.bn-buscar input[type="text"]:focus {
    outline: none;
    border-color: #4eb5f1;
    box-shadow: 0 0 0 3px rgba(78, 181, 241, 0.16);
}

/* ---- Filas ---- */
.bn-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bn-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid #dde7ef;
    /* Franja del color de la sanción, a la izquierda. */
    border-left: 4px solid #c0392b;
    border-radius: 7px;
    background: #fff;
}

/* Las cumplidas se apagan: ya no son un aviso, son historial. */
.bn-fila-vieja {
    border-left-color: #b6c3cf;
    background: #fafbfc;
}

.bn-fila-vieja .bn-nick b,
.bn-fila-vieja .bn-motivo { color: #8a97a5; }

.bn-ava {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 15px;
}

.bn-main {
    flex: 1 1 auto;
    min-width: 0;
}

.bn-nick {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.bn-nick b {
    color: #1d3e5e;
    font-size: 13px;
}

.bn-motivo {
    color: #55708a;
    font-size: 12px;
    line-height: 1.45;
}

.bn-fechas {
    margin-top: 3px;
    color: #93a5b6;
    font-size: 10.5px;
}

.bn-fechas b { color: #7b8ea1; }

.bn-estado {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.bn-chip {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.bn-perma {
    background: #fdeceb;
    border: 1px solid #e8b3ae;
    color: #c0392b;
}

.bn-temp {
    background: #fdf3e3;
    border: 1px solid #ecd0a0;
    color: #a86a10;
}

.bn-free {
    background: #fffaf0;
    border: 1px solid #ecdcb8;
    color: #a3781b;
}

.bn-fin {
    background: #eef1f4;
    border: 1px solid #d3dbe2;
    color: #7b8ea1;
}

.bn-nota {
    color: #93a5b6;
    font-size: 10px;
    font-style: normal;
}

.bn-nota-on { color: #c0392b; }

.bn-pie {
    margin: 14px 0 0;
    padding-top: 11px;
    border-top: 1px solid #eef2f6;
    color: #7b8ea1;
    font-size: 11.5px;
    line-height: 1.65;
}

.bn-pie b { color: #55708a; }

@media (max-width: 700px) {
    .bn-resumen { grid-template-columns: repeat(2, 1fr); }

    .bn-fila {
        flex-wrap: wrap;
        gap: 8px;
    }

    .bn-estado {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .bn-buscar { width: 100%; }
    .bn-buscar input[type="text"] { flex: 1 1 auto; width: auto; }
}

/* ---- Portada: vista previa de sancionados ---- */
.hm-bans {
    display: flex;
    flex-direction: column;
}

.hm-ban {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid #eef2f6;
    border-radius: 5px;
    font-size: 12px;
}

.hm-bans > :last-child { border-bottom: none; }

/* Aquí NO se atenúan las cumplidas: en una vista previa de cinco filas,
   si todas están vencidas se apagaría el bloque entero y parece roto. El
   chip ya dice de qué tipo es cada una. En la lista completa sí se marcan. */

/* Chip primero y de ancho fijo: así los nicks quedan alineados en columna. */
.hm-ban-chip {
    flex: 0 0 84px;
    padding: 2px 0;
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}


/* En la vista previa los chips van con algo más de cuerpo: a 10 px y sobre
   blanco, los tonos de la lista completa se quedaban lavados. */
.hm-ban .bn-free {
    background: #fdf1d8;
    border-color: #dcbe7e;
    color: #8a6410;
}

.hm-ban .bn-temp {
    background: #fbe6c8;
    border-color: #dcae66;
    color: #8f570c;
}

.hm-ban .bn-perma {
    background: #fadedb;
    border-color: #dd9c95;
    color: #a32c1e;
}

.hm-ban .bn-fin {
    background: #e6ebf0;
    border-color: #c3ccd6;
    color: #66788a;
}

.hm-ban-chip { border: 1px solid transparent; }

.hm-ban-nick {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    max-width: 170px;
    overflow: hidden;
}

.hm-ban-nick b {
    color: #1d3e5e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-ban-motivo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #55708a;
    font-size: 11.5px;
}

@media (max-width: 700px) {
    .hm-ban {
        flex-wrap: wrap;
        gap: 6px;
    }

    .hm-ban-motivo { flex: 1 1 100%; }
}

/* ---- Tienda de ítems: saldos y fichas de cada pestaña ---- */
.it-corn { color: #1d3e5e; }

/* Ficha de las cornetas: azul en vez del crema del VIP. */
.it-ficha-corn {
    border-color: #cfe4f3;
    background: #f2f9fe;
}

.it-chip-azul {
    background: linear-gradient(180deg, #6fc4f0, #2f8fc4);
    border-color: #2b7ba9;
    color: #fff;
}

/* La imagen de la corneta es pequeña (87x75): se deja a su tamaño. */
.it-pack-img-corn img {
    max-width: 62%;
    max-height: 72%;
}

/* Paquete recomendado, con el rojo de la casa. */
.it-pack-top {
    border-color: #c11a17;
    box-shadow: 0 0 0 1px rgba(193, 26, 23, 0.25);
}

/* ---- Tienda de ítems: pestaña Reset GP ---- */
/* Ficha del Reset GP: verde, para distinguirla del VIP y de las cornetas. */
.it-ficha-gp {
    border-color: #cfe8d4;
    background: #f3fbf5;
}

.it-chip-verde {
    background: linear-gradient(180deg, #63c07e, #2f8b4e);
    border-color: #2a7a45;
    color: #fff;
}

/* GP del día en la barra de saldos: rojo si se pasó, verde si va bien. */
.it-gp-mal { color: #c11a17; }
.it-gp-bien { color: #2f8b4e; }

/*
 * El aviso de "te pasaste por N GP" es lo primero que busca el jugador al
 * entrar, así que va antes que los precios y con el número en grande.
 */
.it-gp-aviso {
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid #d9e6f2;
    border-left-width: 4px;
    border-radius: 6px;
    background: #f6fafd;
    color: #1d3e5e;
    font-size: 13px;
    line-height: 1.55;
}

.it-gp-aviso b { font-size: 14px; }

.it-gp-aviso-mal {
    border-color: #f0cdcc;
    border-left-color: #c11a17;
    background: #fdf4f4;
}

.it-gp-aviso-mal b { color: #970605; }

.it-gp-aviso-bien {
    border-color: #cfe8d4;
    border-left-color: #2f8b4e;
    background: #f3fbf5;
}

.it-gp-aviso-bien b { color: #2f8b4e; }

/* Etiqueta del ítem que le deja justo bajo el límite. */
.it-reco {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* Las imágenes del Reset GP son apaisadas (300x172): se dejan a lo ancho. */
.it-pack-img-gp img {
    max-width: 100%;
    max-height: 100%;
}


/* =========================================================================
   MISIONES
   =========================================================================
   Tarjetas con barra de progreso. Tres estados que se leen de un vistazo por
   el borde y el color de la barra: en curso (azul), lista para reclamar
   (verde, con cinta) y ya reclamada (apagada, sin ruido).

   La regla de fondo: en una rejilla de seis, la unica que tiene que llamar la
   atencion es la que se puede cobrar. Todo lo demas se mantiene tranquilo. */

/* Va flotado a la derecha, pero sin separacion se leia «Misiones0 de 6»
   cuando el titulo y el contador quedaban pegados en pantallas anchas. */
.ms-cuenta {
    float: right;
    margin-left: 12px;
    font-size: 11px;
    font-weight: 400;
    color: #e8f2fa;
    opacity: .85;
}

/* ---- Cabecera: nota + aro de avance global ---- */
.ms-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7eff6;
}

.ms-cabecera__texto { flex: 1; min-width: 0; }
.ms-cabecera__texto > :last-child { margin-bottom: 0; }

.ms-intro {
    margin: 0 0 10px;
    color: #4a5f73;
    font-size: 13.5px;
    line-height: 1.6;
}

/* El aro: un conic-gradient con un circulo blanco encima. Un solo elemento y
   ninguna imagen; el porcentaje entra por la variable --pct. */
.ms-total {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.ms-total__aro {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: conic-gradient(#2f8b4e calc(var(--pct) * 1%), #e7eff6 0);
}

.ms-total__aro::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff;
}

.ms-total__aro span {
    position: relative;
    z-index: 1;
    color: #1d3e5e;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ms-total__aro i { font-style: normal; font-size: 10px; color: #7d8fa1; }

.ms-total p {
    margin: 0;
    max-width: 96px;
    color: #6b7f92;
    font-size: 11.5px;
    line-height: 1.45;
}

.ms-total p b { color: #1d3e5e; font-size: 14px; }

.ms-aviso {
    margin: 0 0 12px;
    padding: 9px 13px;
    border: 1px solid #d5e4f0;
    border-left: 3px solid #2f6ea5;
    border-radius: 6px;
    background: #f6fafd;
    color: #1d3e5e;
    font-size: 13px;
    line-height: 1.55;
}

.ms-aviso-listo {
    border-color: #cfe8d4;
    border-left-color: #2f8b4e;
    background: #f3fbf5;
}

.ms-aviso-listo b { color: #2f8b4e; }

.ms-aviso-staff {
    border-color: #f0e2c4;
    border-left-color: #a3781b;
    background: #fdf9f0;
}

.ms-aviso-staff b { color: #8a6413; }
.ms-vacio { margin: 6px 0; }

/* ---- Rejilla ---- */
/* TRES POR FILA, y fijas. Antes era `auto-fill` con un minimo de 290px, que
   en el ancho real de la columna de contenido solo daba para dos.

   `minmax(0, 1fr)` y no `1fr` a secas: en una rejilla, `1fr` no baja del
   tamano de su contenido, asi que un titulo largo ensancharia su columna y
   descuadraria las tres. Con minimo 0 se reparten a partes iguales siempre. */
.ms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

@media (max-width: 1080px) {
    .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .ms-grid { grid-template-columns: 1fr; }
}

.ms-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid #dbe6f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(29, 62, 94, .06);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}

.ms-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(29, 62, 94, .1);
}

/* La lista para reclamar tiene que cantar: es la unica que pide una accion. */
.ms-lista {
    border-color: #8fd0aa;
    background: linear-gradient(180deg, #f6fdf9 0%, #fff 62%);
    box-shadow: 0 0 0 1px rgba(47, 139, 78, .16), 0 4px 14px rgba(47, 139, 78, .14);
}

.ms-reclamada { background: #fbfcfe; border-color: #e6edf4; }
.ms-reclamada .ms-card__texto h3 { color: #8397a9; }
.ms-reclamada .ms-icono { opacity: .55; }

/* Cinta en diagonal, solo en las cobrables. */
.ms-cinta {
    position: absolute;
    top: 11px;
    right: -30px;
    width: 108px;
    padding: 3px 0;
    transform: rotate(38deg);
    background: linear-gradient(180deg, #4fb173 0%, #2f8b4e 100%);
    color: #fff;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    box-shadow: 0 2px 6px rgba(47, 139, 78, .35);
}

/* ---- Cabecera de la tarjeta ---- */
.ms-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

/* La cinta diagonal de «¡Listo!» ocupa la esquina superior derecha, asi que
   en esas tarjetas el titulo se aparta para no quedar debajo. Solo pasa a
   tres columnas, donde la tarjeta es mas estrecha. */
.ms-lista .ms-card__head { padding-right: 34px; }

/* El texto de la cabecera tiene que poder encogerse, o un titulo largo
   ensancha la tarjeta y rompe la fila de tres. */
.ms-card__texto { min-width: 0; }

.ms-icono {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #dce8f2;
    border-radius: 9px;
    background: linear-gradient(180deg, #f7fbfe 0%, #eef5fb 100%);
    color: #5b8fbe;
    overflow: hidden;
}

.ms-icono svg { width: 24px; height: 24px; }

.ms-icono img {
    max-width: 40px;
    max-height: 40px;
    image-rendering: pixelated;
}

/* Cada tipo con su tinte, para distinguirlos sin leer la chapa. */
.ms-icono-modo   { color: #2f6ea5; }
.ms-icono-gps    { color: #2f8b4e; border-color: #cfe8d4; background: linear-gradient(180deg, #f6fdf8, #eef8f1); }
.ms-icono-tiempo { color: #6b3d87; border-color: #e0cdea; background: linear-gradient(180deg, #fbf7fd, #f4ecf9); }
.ms-icono-mapa   { color: #a3781b; border-color: #ecd9a8; background: linear-gradient(180deg, #fdfaf2, #f9f2e3); }
.ms-icono-mobil  { color: #1a6f9e; }

.ms-card__texto { flex: 1; min-width: 0; }

.ms-card__texto h3 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    color: #1d3e5e;
    line-height: 1.3;
}

.ms-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7f92;
}

/* Chapa del tipo. */
.ms-tipo {
    padding: 1px 7px;
    border-radius: 9px;
    background: #eef4f9;
    color: #55738f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.ms-tipo-gps    { background: #eaf6ee; color: #2f8b4e; }
.ms-tipo-tiempo { background: #f4ecf9; color: #6b3d87; }
.ms-tipo-mapa   { background: #f9f2e3; color: #8a6413; }
.ms-tipo-mobil  { background: #e9f4fb; color: #1a6f9e; }

.ms-desc {
    margin: 0 0 12px;
    color: #55697c;
    font-size: 12.5px;
    line-height: 1.55;
}

/* ---- Progreso ---- */
.ms-progreso { margin-bottom: 12px; }

.ms-barra {
    height: 9px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: #e7eff6;
    overflow: hidden;
}

.ms-barra__fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #3f8dc9 0%, #2f6ea5 100%);
    transition: width .35s ease;
}

.ms-lista .ms-barra__fill { background: linear-gradient(90deg, #4fb173 0%, #2f8b4e 100%); }
.ms-reclamada .ms-barra__fill { background: #c3d2de; }

.ms-cifras {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    color: #6b7f92;
    font-variant-numeric: tabular-nums;
}

.ms-cifras b { color: #1d3e5e; font-size: 14px; font-weight: 700; }
.ms-cifras i { margin-left: auto; font-style: normal; font-weight: 600; }

/* ---- Premios ---- */
/* Los premios se empujan al fondo para que, en una fila de tres, la linea de
   separacion y el boton queden a la misma altura en las tres tarjetas aunque
   las descripciones midan distinto. */
.ms-premios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    margin-bottom: 11px;
    padding-top: 11px;
    border-top: 1px dashed #e2ebf3;
}

.ms-premios__et {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #93a5b6;
}

.ms-premio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 6px;
    border: 1px solid #d5e4f0;
    border-radius: 11px;
    background: #f6fafd;
    color: #1d3e5e;
    font-size: 11.5px;
    font-weight: 600;
}

/* Alto fijo y ancho libre: `vip.png` y `pu.png` son logotipos apaisados y
   forzarlos a un cuadrado los dejaba ilegibles. */
.ms-premio img { height: 15px; width: auto; max-width: 34px; object-fit: contain; }
.ms-premio svg { width: 13px; height: 13px; }

/* Cada moneda con su color, igual que en la tienda. */
.ms-premio-money     { border-color: #ecd9a8; background: #fdf8ec; color: #8a6413; }
.ms-premio-cash      { border-color: #b9dcf0; background: #f0f8fd; color: #1a6f9e; }
.ms-premio-vip,
.ms-premio-poweruser { border-color: #e0cdea; background: #f9f4fc; color: #6b3d87; }
.ms-premio-gps,
.ms-premio-puntos    { border-color: #cfe8d4; background: #f3fbf5; color: #2f8b4e; }
.ms-premio-cornetas  { border-color: #f0d5c0; background: #fdf6f0; color: #97551d; }
.ms-premio-ruleta    { border-color: #d8cdea; background: #f7f5fc; color: #55458a; }
.ms-premio-sin       { border-style: dashed; color: #93a5b6; font-weight: 400; padding-left: 9px; }

/* ---- Accion ---- */
.ms-accion form { margin: 0; }

.ms-btn-reclamar {
    background: linear-gradient(180deg, #4fb173 0%, #2f8b4e 100%);
    border-color: #2a7a45;
}

.ms-btn-reclamar:hover { background: linear-gradient(180deg, #58bd7d 0%, #349457 100%); }

.ms-hecho {
    display: block;
    padding: 8px 0;
    text-align: center;
    color: #2f8b4e;
    font-size: 12.5px;
    font-weight: 600;
}

/* Lo que falta es INFORMACION, no una accion fallida: antes era un boton rojo
   deshabilitado y parecia un error de la pagina. */
.ms-falta {
    display: block;
    padding: 8px 0;
    text-align: center;
    color: #6b7f92;
    font-size: 12.5px;
}

.ms-falta b { color: #1d3e5e; font-weight: 700; }

.ms-pie {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e7eff6;
    color: #7d8fa1;
    font-size: 11.5px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .ms-cabecera { flex-direction: column; align-items: flex-start; }
    .ms-grid { grid-template-columns: minmax(0, 1fr); }
}



/* =========================================================================
   CANJEAR CODIGO
   =========================================================================
   Cinco bloques en el orden en que se usan: cuanto tengo, como va esto,
   escribir el codigo, que puede tocarme y que me toco ya.

   El campo del codigo es el centro de la pagina: va en su propia caja
   destacada, porque es lo unico que se viene a hacer aqui. */

/* ---- Barra de saldos ---- */
.cd-saldos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 18px;
    border: 1px solid #d5e4f0;
    border-radius: 9px;
    background: linear-gradient(180deg, #f8fcff 0%, #f1f7fc 100%);
    overflow: hidden;
}

.cd-saldo {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border-right: 1px solid #e2ebf3;
    font-size: 13px;
}

.cd-saldo-fin { border-right: none; }

.cd-saldo img { width: 18px; height: 18px; object-fit: contain; }

.cd-saldo i {
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #7d8fa1;
}

.cd-saldo b {
    color: #1d3e5e;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.cd-saldo .cd-oro { color: #8a6413; }
.cd-saldo .cd-cash { color: #1a6f9e; }

/* ---- Titulos de seccion ---- */
.cd-titulo {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #1d3e5e;
}

.cd-sub {
    margin: 0 0 12px;
    color: #6b7f92;
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 74ch;
}

/* ---- Como funciona ---- */
.cd-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 10px 0 20px;
}

.cd-paso {
    position: relative;
    padding: 13px 14px 13px 44px;
    border: 1px solid #dbe6f0;
    border-radius: 9px;
    background: #fff;
}

.cd-paso__n {
    position: absolute;
    left: 13px;
    top: 13px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eaf3fa;
    color: #2f6ea5;
    font-size: 12px;
    font-weight: 700;
}

.cd-paso b {
    display: block;
    margin-bottom: 3px;
    color: #1d3e5e;
    font-size: 13.5px;
}

.cd-paso p {
    margin: 0;
    color: #6b7f92;
    font-size: 12px;
    line-height: 1.5;
}

/* ---- El canje: la caja protagonista ---- */
.cd-canje {
    padding: 18px 20px 16px;
    margin-bottom: 22px;
    border: 1px solid #b9d2e6;
    border-radius: 11px;
    background:
        radial-gradient(620px 180px at 50% -70px, rgba(63, 141, 201, .12), transparent 72%),
        linear-gradient(180deg, #f6fbff 0%, #fff 65%);
    text-align: center;
}

.cd-canje__et {
    display: block;
    margin-bottom: 9px;
    color: #6b7f92;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cd-campo {
    display: flex;
    gap: 8px;
    margin: 0 auto 9px;
    max-width: 470px;
}

/* Monoespaciado, grande y en mayusculas: se lee igual que en el carton del
   que se copia, y asi se detecta antes una letra mal puesta. */
.cd-campo input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #b9d2e6;
    border-radius: 8px;
    background: #fff;
    color: #1d3e5e;
    font-family: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
}

.cd-campo input:focus {
    outline: none;
    border-color: #3f8dc9;
    box-shadow: 0 0 0 3px rgba(63, 141, 201, .16);
}

.cd-campo input::placeholder {
    color: #bcd0e0;
    font-weight: 400;
}

.cd-btn { padding-left: 20px; padding-right: 20px; }

.cd-nota {
    margin: 0;
    color: #7d8fa1;
    font-size: 11.5px;
    line-height: 1.5;
}

.cd-espera {
    margin: 0;
    padding: 12px 15px;
    border: 1px solid #f0e2c4;
    border-left: 3px solid #a3781b;
    border-radius: 7px;
    background: #fdf9f0;
    color: #6b5010;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

.cd-espera b { color: #8a6413; }

/* ---- Vitrina de premios ---- */
.cd-vitrina {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.cd-premio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 13px 13px;
    border: 1px solid #dbe6f0;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    transition: transform .16s, box-shadow .16s;
}

.cd-premio:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(29, 62, 94, .09);
}

.cd-premio__img {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 9px;
    border-radius: 12px;
    background: #f2f8fc;
    color: #3f8dc9;
}

.cd-premio__img img { max-height: 34px; max-width: 46px; object-fit: contain; }
.cd-premio__img svg { width: 28px; height: 28px; }

.cd-premio__t {
    color: #1d3e5e;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}

.cd-premio__d {
    margin: 5px 0 0;
    color: #7d8fa1;
    font-size: 11.5px;
    line-height: 1.45;
}

/* El primero es el mas raro: se destaca, que es lo que la gente viene a ver. */
.cd-premio-top {
    border-color: #e0cdea;
    background: linear-gradient(180deg, #fbf7fd 0%, #fff 62%);
}

.cd-premio-top .cd-premio__img { background: #f4ecf9; color: #6b3d87; }

.cd-premio__raro {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 9px;
    border-radius: 9px;
    background: linear-gradient(180deg, #8a5aa8 0%, #6b3d87 100%);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(107, 61, 135, .3);
}

/* Color por tipo de premio, igual que en las misiones. */
.cd-premio-money    .cd-premio__img { background: #fdf8ec; color: #8a6413; }
.cd-premio-cash     .cd-premio__img { background: #f0f8fd; color: #1a6f9e; }
.cd-premio-gps      .cd-premio__img,
.cd-premio-puntos   .cd-premio__img { background: #f3fbf5; color: #2f8b4e; }
.cd-premio-cornetas .cd-premio__img { background: #fdf6f0; color: #97551d; }
.cd-premio-ruleta   .cd-premio__img { background: #f7f5fc; color: #55458a; }

.cd-sinvitrina {
    margin: 0 0 22px;
    padding: 15px 17px;
    border: 1px dashed #d5e4f0;
    border-radius: 9px;
    background: #f8fbfd;
    color: #55697c;
    font-size: 13px;
    line-height: 1.6;
    max-width: 74ch;
}

.cd-sinvitrina b { color: #1d3e5e; }

/* ---- Historial ---- */
.cd-historial {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.cd-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 13px;
    border: 1px solid #e2ebf3;
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
}

.cd-fila__premio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 165px;
}

.cd-fila__img {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #f2f8fc;
    color: #3f8dc9;
}

.cd-fila__img img { max-height: 17px; max-width: 24px; object-fit: contain; }
.cd-fila__img svg { width: 15px; height: 15px; }
.cd-fila__premio b { color: #1d3e5e; }

.cd-fila__lote { color: #55697c; flex: 1; min-width: 100px; }

.cd-fila__codigo {
    font-family: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
    font-size: 11.5px;
    color: #8fa2b4;
    letter-spacing: .05em;
}

.cd-fila__fecha { color: #93a5b6; font-size: 11.5px; }

/* Estado 3: el codigo se gasto pero la entrega fallo. Tiene que verse, porque
   es el jugador quien va a reclamar. */
.cd-pendiente {
    border-color: #f0cdcc;
    background: #fdf6f5;
}

.cd-fila__aviso {
    padding: 2px 9px;
    border-radius: 9px;
    background: #f7dedd;
    color: #970605;
    font-size: 11px;
    font-weight: 600;
}

.cd-vacio {
    margin: 10px 0 0;
    padding: 16px;
    border: 1px dashed #d5e4f0;
    border-radius: 8px;
    color: #7d8fa1;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 620px) {
    .cd-campo { max-width: none; }
    .cd-saldo { flex: 1 1 45%; border-right: none; }
    .cd-vitrina { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* =========================================================================
   EVENTO TEMATICO
   =========================================================================
   Portado del evento Winter Season 2026 del portal Oficial y adaptado a
   Halloween. Cinco bloques en la misma pagina -- asistencia, misiones,
   ruleta, coleccion y tienda -- y un indice arriba para saltar entre ellos.

   TODO EL COLOR SALE DE UNA VARIABLE, `--ev-acento`, que la pagina recibe del
   propio evento (columna `acento`). Cambiar el naranja de Halloween por el
   azul del proximo evento es cambiar ese campo en el panel, sin tocar CSS. */

.ev-wrap {
    --ev-tinta: #1d1630;
    --ev-borde: #e0d7ea;
    --ev-suave: #f7f3fb;
}

/* ---- Portada ----
   La unica parte del evento que va de noche cerrada, y a proposito: es la
   carátula, la que tiene que decir «Halloween» antes de leer nada. De aqui
   para abajo la pagina vuelve a ser clara, que es como se lee mejor una lista
   de premios y una tienda.

   No depende de las variables del bloque claro: se apana con `--ev-acento`
   y sus mezclas, para que siga funcionando si el evento cambia de color. */
.ev-hero {
    position: relative;
    padding: 42px 30px 38px;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--ev-acento) 26%, #3a2f52);
    border-radius: 14px;
    overflow: hidden;
    background:
        /* La luna, arriba a la derecha, con su halo. */
        radial-gradient(circle 68px at calc(100% - 120px) 66px, #ffe9c4 0%, #ffd79a 62%, transparent 64%),
        radial-gradient(circle 190px at calc(100% - 120px) 66px, color-mix(in srgb, var(--ev-acento) 26%, transparent), transparent 70%),
        radial-gradient(760px 300px at 12% 120%, color-mix(in srgb, var(--ev-acento) 30%, transparent), transparent 68%),
        linear-gradient(168deg, #2a1c47 0%, #150e24 55%, #0d0817 100%);
    color: #fff;
}

/* La imagen del evento, si la hay, va de fondo y atenuada: el texto tiene que
   leerse encima sin depender de como sea la ilustracion. */
.ev-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ev-portada, none);
    background-size: cover;
    background-position: center;
    opacity: .22;
    mix-blend-mode: luminosity;
}

/* Niebla baja: una banda difuminada que cierra la portada. */
.ev-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to top, color-mix(in srgb, var(--ev-acento) 16%, transparent), transparent);
    pointer-events: none;
}

.ev-hero__texto { position: relative; z-index: 2; max-width: 62ch; }

/* Los adornos (telarana, murcielagos, rama, lapidas) los pone la vista en SVG
   y viven aqui detras, sin estorbar al texto ni al raton. */
.ev-hero__deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ev-hero__deco svg { width: 100%; height: 100%; }

.ev-hero__reloj {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--ev-acento) 55%, transparent);
    border-radius: 20px;
    background: rgba(10, 6, 18, .55);
    color: #ffd0a8;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 0 18px color-mix(in srgb, var(--ev-acento) 22%, transparent);
}

.ev-hero__titulo {
    margin: 0;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: #fff;
    /* El resplandor naranja es lo que le da el aire de calabaza encendida. */
    text-shadow:
        0 0 26px color-mix(in srgb, var(--ev-acento) 55%, transparent),
        0 4px 18px rgba(0, 0, 0, .6);
}

.ev-hero__sub {
    margin: 9px 0 0;
    color: var(--ev-acento);
    font-size: 16px;
    font-weight: 700;
}

.ev-hero__desc {
    margin: 12px 0 0;
    color: #cbbce2;
    font-size: 13.5px;
    line-height: 1.7;
}

/* La luna late muy despacio, como una vela. Si el sistema pide menos
   movimiento, se queda quieta. */
@media (prefers-reduced-motion: no-preference) {
    .ev-hero { animation: ev-vela 7s ease-in-out infinite; }
}

@keyframes ev-vela {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.06); }
}

.ev-staff {
    margin: 0 0 16px;
    padding: 11px 15px;
    border: 1px solid #f0e2c4;
    border-left: 3px solid #a3781b;
    border-radius: 7px;
    background: #fdf9f0;
    color: #6b5010;
    font-size: 12.5px;
    line-height: 1.55;
}

/* ---- Saldos e indice ---- */
.ev-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.ev-saldos {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--ev-borde);
    border-radius: 9px;
    background: linear-gradient(180deg, #fff 0%, var(--ev-suave) 100%);
    overflow: hidden;
}

.ev-saldo {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border-right: 1px solid var(--ev-borde);
    font-size: 13px;
}

.ev-saldo:last-child { border-right: none; }
.ev-saldo img { width: 18px; height: 18px; object-fit: contain; }
.ev-saldo svg { width: 17px; height: 17px; color: var(--ev-acento); }

.ev-saldo i {
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #7d7290;
}

.ev-saldo b {
    color: var(--ev-tinta);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.ev-saldo-puntos b { color: var(--ev-acento); }

.ev-indice { display: flex; flex-wrap: wrap; gap: 6px; }

.ev-indice a {
    padding: 7px 14px;
    border: 1px solid var(--ev-borde);
    border-radius: 20px;
    background: #fff;
    color: #5b4d72;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s, color .16s, border-color .16s;
}

.ev-indice a:hover {
    border-color: var(--ev-acento);
    background: var(--ev-acento);
    color: #fff;
}

.ev-invita {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px dashed var(--ev-borde);
    border-radius: 9px;
    background: var(--ev-suave);
    color: #5b4d72;
    font-size: 13px;
}

.ev-invita a { color: #7b2d8e; font-weight: 600; }

/* ---- Bloques ----
   OJO CON EL COLOR DEL TEXTO DE AQUI. Las tarjetas son claras, pero los
   titulos de seccion y su explicacion NO van dentro de ninguna tarjeta: caen
   directamente sobre el fondo del portal, que es azul marino casi negro. Con
   el morado oscuro del resto del modulo no se leian; por eso van en claro. */
.ev-bloque {
    padding: 22px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 8px;
    /* Los anclajes caen pegados al borde si no se les da aire. */
    scroll-margin-top: 20px;
}

.ev-bloque__cab { margin-bottom: 16px; }

.ev-bloque__cab h2 {
    position: relative;
    margin: 0 0 7px;
    padding-left: 14px;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.ev-bloque__cab h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 3px;
    background: var(--ev-acento);
    box-shadow: 0 0 10px color-mix(in srgb, var(--ev-acento) 60%, transparent);
}

.ev-bloque__cab p {
    margin: 0;
    max-width: 82ch;
    color: #c3d2e2;
    font-size: 13px;
    line-height: 1.65;
}

.ev-bloque__cab p b { color: #fff; }

/* `.ev-nota` sale en los dos sitios: dentro de tarjetas claras y suelta sobre
   el fondo oscuro. El gris medio funciona en ambos. */
.ev-nota { margin: 0; color: #7d7290; font-size: 12.5px; line-height: 1.55; }
.ev-ok { color: #2f8b4e; }

/* Tambien va sobre el fondo oscuro: sin fondo propio no se leia. */
.ev-vacio {
    margin: 0;
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    color: #b9c8d8;
    font-size: 13px;
    text-align: center;
}

/* Boton del evento: hereda el acento en vez del rojo del portal. */
.ev-btn {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ev-acento) 88%, #fff) 0%, var(--ev-acento) 100%);
    border-color: color-mix(in srgb, var(--ev-acento) 70%, #000);
}

.ev-btn-sm { padding: 6px 13px; font-size: 12px; }
.ev-btn-corto { opacity: .45; cursor: not-allowed; }

.ev-barra-prog {
    height: 7px;
    margin: 8px 0 6px;
    border-radius: 20px;
    background: #ece5f3;
    overflow: hidden;
}

.ev-barra-prog i {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ev-acento) 60%, #fff), var(--ev-acento));
}

/* ---- Asistencia ---- */
.ev-asist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--ev-borde);
    border-radius: 10px;
    background: var(--ev-suave);
}

.ev-asist__contador {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--ev-borde);
}

.ev-asist__num {
    color: var(--ev-acento);
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.ev-asist__et {
    margin-top: 3px;
    color: #7d7290;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ev-asist__accion { flex: 1; min-width: 240px; }

.ev-escalera {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
}

.ev-premio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 14px 14px;
    border: 1px solid var(--ev-borde);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

/* La cinta de dias es lo primero que se busca en una escalera de premios. */
.ev-premio__dias {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 13px;
    border-radius: 0 0 8px 8px;
    background: #ece5f3;
    color: #5b4d72;
    font-size: 12px;
    font-weight: 800;
}

.ev-premio__dias span { font-weight: 500; }

/* El hueco es APAISADO a proposito: el personaje compuesto mide 188x105 px
   (la union de todos los fotogramas de todas las capas), asi que en una caja
   cuadrada se quedaba diminuto en el centro. */
.ev-premio__img {
    display: grid;
    place-items: center;
    width: 100%;
    height: 102px;
    margin: 8px 0 9px;
    border-radius: 12px;
    background: var(--ev-suave);
    color: var(--ev-acento);
    overflow: hidden;
}

.ev-premio__img img { max-width: 100%; max-height: 96px; object-fit: contain; }
.ev-premio__img svg { width: 32px; height: 32px; }

.ev-premio__t { color: var(--ev-tinta); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.ev-premio__d { margin: 5px 0 0; color: #7d7290; font-size: 11.5px; line-height: 1.45; }

.ev-premio__estado {
    margin-top: 8px;
    color: #7d7290;
    font-size: 11.5px;
    font-weight: 600;
}

.ev-premio .ev-barra-prog { width: 100%; }

/* Ya reclamado: se apaga, que ya no hay nada que hacer con el. */
.ev-premio.ev-mio { border-color: #c9e3d3; background: #f6fbf8; }
.ev-premio.ev-mio .ev-premio__img { background: #eaf6ef; color: #2f8b4e; }

/* Listo para reclamar: se le da luz, es el que hay que pulsar. */
.ev-premio.ev-listo {
    border-color: var(--ev-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-acento) 18%, transparent);
}

.ev-premio.ev-listo .ev-premio__dias { background: var(--ev-acento); color: #fff; }
.ev-premio.ev-bloqueado .ev-premio__img { filter: grayscale(1); opacity: .5; }

/* ---- Misiones del evento ----
   TRES POR FILA, y fijas. Antes era `auto-fill` con un minimo de 290px, que
   en el ancho real de la columna de contenido solo daba para dos y dejaba las
   tarjetas larguisimas. Con `repeat(3, ...)` se manda el numero de columnas y
   es el ancho de la tarjeta el que se adapta.

   `minmax(0, 1fr)` y no `1fr` a secas: en una rejilla, `1fr` no baja del
   tamano de su contenido, asi que un titulo largo ensancharia su columna y
   descuadraria las tres. Con minimo 0 se reparten a partes iguales siempre. */
.ev-misiones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1080px) {
    .ev-misiones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .ev-misiones { grid-template-columns: 1fr; }
}

.ev-mision {
    display: flex;
    flex-direction: column;
    padding: 14px 15px 13px;
    border: 1px solid var(--ev-borde);
    border-radius: 11px;
    background: #fff;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}

.ev-mision:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(29, 22, 48, .1);
}

/* Lista para reclamar: se enciende con el color del evento, que es lo que
   hace que el ojo vaya directo a la unica tarjeta accionable de la rejilla. */
.ev-mision.ev-lista {
    border-color: var(--ev-acento);
    background: linear-gradient(180deg, #fff8f2 0%, #fff 62%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-acento) 14%, transparent);
}

.ev-mision.ev-reclamada { border-color: #c9e3d3; background: #f7fbf9; }

/* ---- Cabecera: icono + titulo ---- */
.ev-mision__cab {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

/* El icono del tipo, en su pastilla. Dice de un vistazo si la mision es de
   partidas, de mapa o de mobile sin tener que leer el titulo. */
.ev-mision__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ev-suave);
    color: var(--ev-acento);
}

.ev-mision__ico svg { width: 20px; height: 20px; }

.ev-mision__ico img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
    image-rendering: pixelated;
}

.ev-mision.ev-lista .ev-mision__ico {
    background: color-mix(in srgb, var(--ev-acento) 16%, #fff);
}

.ev-mision.ev-reclamada .ev-mision__ico { background: #eaf6ef; color: #2f8b4e; }

/* `min-width: 0` es lo que permite que un titulo largo se parta en vez de
   ensanchar la tarjeta y descuadrar las tres columnas. */
.ev-mision__tit { flex: 1; min-width: 0; }

.ev-mision__tit b {
    display: block;
    color: var(--ev-tinta);
    font-size: 13.5px;
    line-height: 1.3;
}

.ev-mision__tit i {
    display: block;
    margin-top: 2px;
    color: #9a8fb0;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ev-mision__check {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2f8b4e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.ev-mision__d {
    margin: 0 0 10px;
    color: #7d7290;
    font-size: 12px;
    line-height: 1.5;
}

/* ---- Progreso: la barra y la cifra en la misma linea ---- */
.ev-mision__prog {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.ev-mision__prog .ev-barra-prog { flex: 1; margin: 0; }

.ev-mision__cifra {
    flex: none;
    color: #7d7290;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ev-mision__cifra b { color: var(--ev-tinta); font-size: 12.5px; }
.ev-mision.ev-lista .ev-mision__cifra b { color: var(--ev-acento); }

.ev-mision__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--ev-borde);
}

.ev-mision__premios { display: flex; flex-wrap: wrap; gap: 5px; }

.ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--ev-suave);
    color: #5b4d72;
    font-size: 11.5px;
    font-weight: 600;
}

.ev-chip img { width: 14px; height: 14px; object-fit: contain; }
.ev-chip svg { width: 13px; height: 13px; color: var(--ev-acento); }

/* ---- Ruleta ---- */
.ev-ruleta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    padding: 18px;
    border: 1px solid var(--ev-borde);
    border-radius: 10px;
    background: var(--ev-suave);
}

.ev-ruleta__rueda { position: relative; flex: none; }

.ev-ruleta__rueda canvas {
    display: block;
    border-radius: 50%;
    background: #1d1630;
    box-shadow: 0 10px 30px rgba(29, 22, 48, .25);
}

/* La aguja marca arriba, y ahi es donde el JS frena la casilla ganadora. */
.ev-ruleta__aguja {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 22px solid var(--ev-acento);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

.ev-ruleta__lado { flex: 1; min-width: 230px; }

.ev-ruleta__giros {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.ev-ruleta__giros b { color: var(--ev-acento); font-size: 30px; font-weight: 900; line-height: 1; }
.ev-ruleta__giros span { color: #6b5f80; font-size: 13px; }

.ev-ruleta__lista {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
}

.ev-ruleta__lista .ev-nada .ev-chip { opacity: .55; }

/* ---- Packs / coleccion ---- */
.ev-pack {
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid var(--ev-borde);
    border-radius: 10px;
    background: #fff;
}

.ev-pack-mio { border-color: #c9e3d3; background: #f6fbf8; }

.ev-pack__info { display: flex; gap: 16px; flex-wrap: wrap; }

.ev-pack__portada {
    width: 150px;
    border-radius: 9px;
    object-fit: cover;
}

.ev-pack__info h3 { margin: 0 0 5px; color: var(--ev-tinta); font-size: 16px; font-weight: 800; }
.ev-pack__info p { margin: 0; max-width: 74ch; color: #6b5f80; font-size: 12.5px; line-height: 1.6; }
.ev-pack__bonus { margin-top: 6px !important; color: #8a6413 !important; }

.ev-pack__piezas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 9px;
    margin: 15px 0;
}

.ev-pieza { margin: 0; text-align: center; }

.ev-pieza img,
.ev-pieza__sin {
    display: grid;
    place-items: center;
    width: 100%;
    height: 94px;
    overflow: hidden;
    border: 1px solid var(--ev-borde);
    border-radius: 8px;
    background: var(--ev-suave);
    color: var(--ev-acento);
    object-fit: contain;
}

.ev-pieza__sin svg { width: 26px; height: 26px; }

.ev-pieza figcaption {
    margin-top: 5px;
    color: #6b5f80;
    font-size: 11px;
    line-height: 1.35;
}

.ev-pack__pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 13px;
    border-top: 1px solid var(--ev-borde);
}

.ev-comprar { margin: 0; }

/* ---- Tienda ---- */
.ev-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.ev-tabs a {
    padding: 7px 15px;
    border: 1px solid var(--ev-borde);
    border-radius: 20px;
    background: #fff;
    color: #5b4d72;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.ev-tabs a.is-on {
    border-color: var(--ev-acento);
    background: var(--ev-acento);
    color: #fff;
}

.ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 12px;
}

.ev-item {
    display: flex;
    flex-direction: column;
    padding: 13px;
    border: 1px solid var(--ev-borde);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.ev-item-agotado { opacity: .6; }

.ev-item__img {
    position: relative;
    display: grid;
    place-items: center;
    height: 110px;
    margin-bottom: 9px;
    border-radius: 9px;
    background: var(--ev-suave);
    color: var(--ev-acento);
    overflow: hidden;
}

.ev-item__img img { max-width: 100%; max-height: 100px; object-fit: contain; }
.ev-item__img svg { width: 32px; height: 32px; }

.ev-item__stock {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 8px;
    border-radius: 9px;
    background: #97551d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.ev-item__t { color: var(--ev-tinta); font-size: 13px; font-weight: 700; line-height: 1.3; }

.ev-item__tipo {
    margin: 3px 0 9px;
    color: #7d7290;
    font-size: 11px;
}

.ev-item__pie {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    align-items: center;
}

@media (max-width: 620px) {
    .ev-hero__titulo { font-size: 23px; }
    .ev-saldo { flex: 1 1 45%; border-right: none; }
    .ev-ruleta { justify-content: center; }
    .ev-ruleta__rueda canvas { width: 280px; height: 280px; }
    .ev-escalera { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* La marca «(oculto)» del evento en el menu: solo la ve el staff, y esta para
   que no se le olvide que el jugador todavia no ve esa entrada. Se pone
   atenuada para que no compita con el nombre del evento. */
.desktop-nav__submenu a small {
    margin-left: 5px;
    opacity: .65;
    font-size: 10.5px;
    font-weight: 400;
}

/* ---- Premio de avatar en una misión ----
   Se sale de la chapa de los demas premios a proposito: es una prenda, y lo
   que el jugador quiere ver es como queda puesta, no un icono generico. */
.ms-premio-avatar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 7px;
    border: 1px solid #dbe6f0;
    border-radius: 9px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fc 100%);
}

.ms-premio-avatar b {
    max-width: 116px;
    color: #1d3e5e;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* La caja del muneco es APAISADA porque el propio muneco lo es: unos 188x105
   px al unir todos los fotogramas de todas las capas. Cuadrada lo dejaba
   diminuto en el centro. */
.ms-muneco {
    display: block;
    position: relative;
    overflow: hidden;
}

/* Lleva tambien la clase `sh-muneco` para que `avatares.js` y el CSS de la
   tienda traten sus capas igual. Pero `.sh-muneco` trae `position: relative` y
   `transform-origin: center center`, y aqui hace falta justo lo contrario: la
   escala se calcula desde la esquina. Por eso el selector va con las dos
   clases, para ganar por especificidad y no por orden en el archivo. */
.ms-muneco .ms-muneco__capas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

/* Las capas y sus fotogramas los coloca `.sh-sprite`, que es la estructura
   que comparte con la tienda y la que `avatares.js` sabe animar. */

/* ---- Vitrina del premio de avatar ----
   La ropa es lo que el jugador viene a mirar, asi que se lleva su propio
   escaparate en vez de ir apretada entre las chapas de texto. Antes el muneco
   compartia fila con ellas y ni se apreciaba la prenda ni cuadraba la tarjeta. */
.ms-vitrina {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 14px 10px 12px;
    border: 1px solid #e2ebf3;
    border-radius: 10px;
    background:
        radial-gradient(180px 95px at 50% 14%, rgba(63, 141, 201, .12), transparent 70%),
        linear-gradient(180deg, #fbfdff 0%, #eef5fb 100%);
}

.ms-vitrina__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

/* Con dos o mas conjuntos se encogen para que quepan sin romper la fila. */
.ms-vitrina-varios .ms-muneco { transform: scale(.78); transform-origin: top center; }
.ms-vitrina-varios .ms-vitrina__item { margin-bottom: -18px; }

.ms-vitrina__item figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}

.ms-vitrina__item b {
    color: #1d3e5e;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.ms-vitrina__item i {
    color: #8fa2b4;
    font-style: normal;
    font-size: 10.5px;
}

/* En una mision ya reclamada la vitrina se calma: el premio ya es suyo. */
.ms-reclamada .ms-vitrina {
    border-color: #cfe6da;
    background: linear-gradient(180deg, #fafdfb 0%, #eef7f2 100%);
}

/* Y en la que esta lista para cobrar, se enciende. */
.ms-lista .ms-vitrina {
    border-color: #a9dcc0;
    box-shadow: inset 0 0 0 1px rgba(79, 177, 115, .25);
}

/* ---- Las cifras, debajo ---- */
/* Cuando ya hay vitrina, la fila de premios pasa a ser el «ademas»: se
   adelgaza para que no compita con la ropa. */
.ms-premios-extra {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed #e2ebf3;
}

.ms-premios-extra .ms-premios__et { opacity: .75; }

/* Una mision con vitrina y sin cifras deja un guion, no un hueco: asi todas
   las tarjetas de la fila tienen los mismos bloques y quedan alineadas. */
.ms-premios-extra .ms-premio-sin {
    border: none;
    background: none;
    color: #c3cedb;
}

/* ==========================================================================
   Membresías (?op=membresia)
   ==========================================================================
   Misma paleta clara que el resto del portal, pero con más peso visual que las
   recargas: aquí no se está eligiendo un paquete de monedas, se está decidiendo
   una compra más cara, así que el escaparate tiene que sostener la mirada.

   TODOS LOS EFECTOS SON CSS. La página no carga nada de JavaScript, así que sin
   JS se ve igual, solo que quieta. Y al final del bloque hay un
   `prefers-reduced-motion` que apaga las animaciones a quien las tenga
   desactivadas en su sistema.

   El color de acento de cada plan viene de la base en `--mb-color` y tiñe el
   borde, el precio, la cinta y el halo del icono. Así se añaden planes desde el
   panel sin tocar una línea de CSS.
   ========================================================================== */

/* ---- Animaciones ---- */

/* El brillo que cruza la portada y las bandas al pasar por encima. */
@keyframes mb-brillo {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(320%) skewX(-18deg); }
}

/* El icono de rango flota, muy poco: lo justo para que el ojo lo encuentre. */
@keyframes mb-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* El halo de detrás gira y respira. */
@keyframes mb-halo {
    0%   { transform: rotate(0deg) scale(1);    opacity: .55; }
    50%  { transform: rotate(180deg) scale(1.12); opacity: .9; }
    100% { transform: rotate(360deg) scale(1);  opacity: .55; }
}

/* Entrada en cascada de las bandas y de los beneficios. */
@keyframes mb-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* El punto verde del botón de WhatsApp. */
@keyframes mb-latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47, 208, 111, .55); }
    70%      { box-shadow: 0 0 0 7px rgba(47, 208, 111, 0); }
}

/* ---- Portada ---- */

.mb-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 17px;
    margin-bottom: 14px;
    border: 1px solid #2b4c6d;
    border-radius: 10px;
    background:
        radial-gradient(circle at 88% 12%, rgba(247, 207, 95, .22), transparent 42%),
        radial-gradient(circle at 8% 92%, rgba(78, 181, 241, .2), transparent 46%),
        linear-gradient(180deg, #1d3e5e 0%, #102841 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 6px 18px rgba(16, 40, 65, .28);
}

/* El brillo. Va en un pseudoelemento para no meter un div vacío en el HTML. */
.mb-hero::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 0;
    width: 32%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
    animation: mb-brillo 5.5s ease-in-out infinite;
    pointer-events: none;
}

.mb-hero-img {
    flex: 0 0 auto;
    width: 92px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
    animation: mb-flota 4s ease-in-out infinite;
}

.mb-hero-txt { min-width: 0; position: relative; }

.mb-hero-txt h2 {
    margin: 0 0 5px;
    color: #ffe9a8;
    font-size: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.mb-hero-txt p {
    margin: 0;
    color: #c2d6e7;
    font-size: 12.5px;
    line-height: 1.6;
}

.mb-hero-txt b { color: #fff; }

/* Los tres pasos, para que se vea que comprar es corto. */
.mb-hero-puntos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.mb-hero-puntos li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a3c0d8;
    font-size: 11.5px;
}

.mb-hero-puntos span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f7cf5f 0%, #e0a91f 100%);
    color: #4a3507;
    font-size: 11px;
    font-weight: bold;
}

/* ---- Cómo va la membresía del jugador ---- */

.mb-estado {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    margin-bottom: 12px;
    border: 1px solid #d5e4f0;
    border-radius: 7px;
    background: linear-gradient(180deg, #f6fbfe 0%, #eef6fc 100%);
}

.mb-estado-on {
    border-color: #ecd9a8;
    background: linear-gradient(180deg, #fffaec 0%, #fdf4dd 100%);
}

.mb-estado-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #f7cf5f 0%, #e0a91f 100%);
    border: 1px solid #d8a318;
    color: #5b420a;
    font-size: 17px;
}

.mb-estado b { color: #14395c; }

.mb-estado span {
    display: block;
    margin-top: 2px;
    color: #55708a;
    font-size: 12px;
    line-height: 1.6;
}

.mb-estado span b { color: #8a6d1b; }

/* ---- Las bandas de plan ----
   Uno debajo de otro, cada uno a todo el ancho. En columna, un solo plan
   dejaba media pantalla vacía a los lados. */

.mb-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tres columnas: quién es, qué da y cómo se compra. La del medio se lleva el
   hueco que sobre, que es la que más contenido tiene. */
.mb-plan {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 244px;
    align-items: center;
    gap: 16px;
    padding: 15px;
    border: 1px solid #dde7ef;
    border-left: 3px solid var(--mb-color, #38bdf8);
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
    box-shadow: 0 2px 9px rgba(23, 62, 96, .08);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    animation: mb-entra .42s ease both;
    animation-delay: calc(var(--mb-i, 0) * 90ms);
}

.mb-plan:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mb-color, #38bdf8) 55%, #dde7ef);
    box-shadow: 0 12px 26px rgba(23, 62, 96, .17);
}

/* El brillo de la banda solo aparece al pasar por encima: animarlo siempre en
   cada plan sería ruido, no un reclamo. */
.mb-plan::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 0;
    width: 28%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    opacity: 0;
    pointer-events: none;
}

.mb-plan:hover::after {
    opacity: 1;
    animation: mb-brillo 1.1s ease-out;
}

/* El plan recomendado: fondo templado y un aro del color del plan. */
.mb-plan.is-top {
    border-color: color-mix(in srgb, var(--mb-color, #38bdf8) 45%, #dde7ef);
    background:
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--mb-color, #38bdf8) 13%, transparent), transparent 46%),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 3px 14px rgba(23, 62, 96, .13);
}

/* El que el jugador ya tiene: se marca, y deja de invitar al clic. */
.mb-plan.is-activo {
    border-color: #e0a91f;
    background: linear-gradient(180deg, #fffdf6 0%, #fdf6e4 100%);
}

.mb-cinta {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 2;
    padding: 3px 11px;
    border-radius: 0 8px 0 10px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mb-color, #38bdf8) 82%, #ffffff) 0%,
        var(--mb-color, #38bdf8) 100%);
    color: #2b2000;
    font-size: 10.5px;
    font-weight: bold;
    letter-spacing: .3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    box-shadow: 0 2px 7px rgba(23, 62, 96, .22);
}

.mb-cinta-tuya {
    background: linear-gradient(135deg, #f7cf5f 0%, #e0a91f 100%);
    color: #4a3507;
}

/* ---- 1. Quién es y cuánto cuesta ---- */

.mb-plan-id {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    padding-right: 16px;
    border-right: 1px solid #e8eef4;
}

/* El icono de rango, con halo giratorio detrás. Es sprite del juego, así que
   se pinta sin suavizar o el navegador lo emborrona al escalarlo. */
.mb-plan-rango {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
}

.mb-plan-rango::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--mb-color, #38bdf8) 60%, transparent) 90deg,
        transparent 200deg,
        color-mix(in srgb, var(--mb-color, #38bdf8) 35%, transparent) 300deg,
        transparent 360deg);
    filter: blur(7px);
    animation: mb-halo 7s linear infinite;
}

.mb-plan-rango img {
    position: relative;
    width: 78px;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 5px 10px rgba(23, 62, 96, .3));
    animation: mb-flota 4.4s ease-in-out infinite;
    transition: transform .18s ease;
}

.mb-plan:hover .mb-plan-rango img { transform: scale(1.1); }

.mb-plan-id h3 {
    margin: 4px 0 0;
    color: #14395c;
    font-size: 15px;
    line-height: 1.25;
}

.mb-plan-dias {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eaf2f9;
    color: #4a6b88;
    font-size: 11px;
    font-weight: bold;
}

.mb-plan-precio {
    margin-top: 4px;
    color: var(--mb-color, #1d3e5e);
    font-size: 25px;
    font-weight: bold;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

/* El precio por día: 49,90 suena a mucho, 2,50 al día no. */
.mb-plan-aldia {
    color: #8ba0b4;
    font-size: 11px;
}

/* ---- 2. Qué da ---- */

.mb-plan-que { min-width: 0; }

/* Dos columnas cuando hay sitio: cinco beneficios en una sola columna
   estiraban la banda y dejaban los lados vacíos otra vez. */
.mb-plan-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 7px;
}

.mb-plan-lista li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #e3ecf4;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%);
    color: #55708a;
    font-size: 12px;
    line-height: 1.25;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    animation: mb-entra .38s ease both;
    animation-delay: calc(var(--mb-i, 0) * 90ms + var(--mb-n, 0) * 55ms + 120ms);
}

.mb-plan-lista li:hover {
    transform: translateY(-2px);
    border-color: #c9dcec;
    box-shadow: 0 4px 10px rgba(23, 62, 96, .1);
}

.mb-plan-ico {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}

.mb-plan-lista li b {
    color: #1d3e5e;
    font-size: 13px;
    white-space: nowrap;
}

.mb-plan-lista li i {
    color: #7b8ea1;
    font-size: 11px;
    font-style: normal;
    line-height: 1.2;
}

/* Un borde de color por tipo de beneficio: el ojo distingue las filas sin
   tener que leerlas. */
.mb-plan-lista .es-gp    { border-left: 3px solid #2e9e44; }
.mb-plan-lista .es-cash  { border-left: 3px solid #1a6f9e; }
.mb-plan-lista .es-oro   { border-left: 3px solid #d8a318; }
.mb-plan-lista .es-corn  { border-left: 3px solid #b5561f; }
.mb-plan-lista .es-rango { border-left: 3px solid #7a5cc4; }

.mb-plan-lista .es-gp b { color: #1f7a33; }

.mb-plan-desc {
    margin: 8px 0 0;
    color: #7b8ea1;
    font-size: 11.5px;
    line-height: 1.55;
}

/* ---- 3. Cómo se compra ---- */

.mb-plan-pie {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 16px;
    border-left: 1px solid #e8eef4;
}

.mb-plan-pie-tit {
    color: #7b8ea1;
    font-size: 11px;
    text-align: center;
}

.mb-plan-sincontacto {
    margin: 0;
    color: #7b8ea1;
    font-size: 11.5px;
}

/* Mismo navy que los contactos de recargas, con el verde solo en el icono: se
   reconoce como "esto abre WhatsApp" sin leer nada. */
.mb-wa {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid #2b4c6d;
    border-radius: 8px;
    background: linear-gradient(180deg, #1d3e5e 0%, #112a42 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    text-decoration: none;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.mb-wa:hover {
    filter: brightness(1.16);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 40, 65, .3);
}

.mb-wa-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2fd06f 0%, #17a94f 100%);
    border: 1px solid #24b85e;
    color: #fff;
    animation: mb-latido 2.6s ease-out infinite;
}

.mb-wa-txt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.mb-wa-txt i {
    color: #a3c0d8;
    font-size: 10.5px;
    font-style: normal;
}

.mb-wa-txt b {
    color: #fff;
    font-size: 13.5px;
    letter-spacing: .4px;
}

/* La flecha sale al pasar por encima: indica que el enlace va a otro sitio. */
.mb-wa-flecha {
    flex: 0 0 auto;
    color: #7fa6c6;
    font-size: 19px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.mb-wa:hover .mb-wa-flecha {
    opacity: 1;
    transform: none;
}

/* ---- Letra pequeña ---- */

.mb-aviso {
    margin: 11px 0 0;
    color: #7b8ea1;
    font-size: 11.5px;
}

.mb-aviso b { color: #1d3e5e; }

.mb-titulo {
    margin: 18px 0 9px;
    color: #14395c;
    font-size: 14px;
}

.mb-notas {
    margin: 0;
    padding-left: 20px;
    color: #55708a;
    font-size: 12px;
    line-height: 1.75;
}

.mb-notas b { color: #1d3e5e; }

.mb-vacio {
    margin: 0;
    padding: 22px 13px;
    border: 1px dashed #d5e4f0;
    border-radius: 7px;
    background: #f8fbfe;
    color: #7b8ea1;
    font-size: 12.5px;
    text-align: center;
}

/* ---- Anchos pequeños ----
   Por debajo de esto las tres columnas no caben: se apilan, y las separaciones
   verticales pasan a ser horizontales. */

@media (max-width: 860px) {
    .mb-plan {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mb-plan-id {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 4px 10px;
        padding: 0 0 11px;
        border-right: 0;
        border-bottom: 1px solid #e8eef4;
        text-align: left;
    }

    .mb-plan-id h3 { margin: 0; }
    .mb-plan-precio { margin: 0 0 0 auto; }
    .mb-plan-aldia { width: 100%; text-align: right; }

    .mb-plan-pie {
        padding: 11px 0 0;
        border-left: 0;
        border-top: 1px solid #e8eef4;
    }
}

@media (max-width: 560px) {
    .mb-hero { flex-direction: column; text-align: center; }
    .mb-hero-img { width: 70px; }
    .mb-hero-puntos { justify-content: center; }
    .mb-plan-rango { width: 64px; height: 64px; }
    .mb-plan-rango img { width: 58px; }
}

/* ---- Movimiento reducido ----
   Quien lo tenga desactivado en su sistema ve la misma página, quieta. No se
   esconde nada: solo se paran las animaciones. */
@media (prefers-reduced-motion: reduce) {
    .mb-hero::after,
    .mb-hero-img,
    .mb-plan,
    .mb-plan::after,
    .mb-plan-rango::before,
    .mb-plan-rango img,
    .mb-plan-lista li,
    .mb-wa-ico {
        animation: none !important;
    }

    .mb-plan,
    .mb-plan-lista li,
    .mb-wa {
        transition: none;
    }
}


/* ==========================================================================
   Portada: anuncio de la membresía
   ==========================================================================
   OJO CON LOS NOMBRES DE CLASE. Esto se llamó `hm-ad` y los bloqueadores de
   anuncios lo ocultaban: EasyList y AdGuard tienen literalmente la regla
   `##.hm-ad`, así que el navegador pintaba el anuncio y lo quitaba en cuanto
   cargaba el filtro ("aparece por ratos y desaparece"). Nada que contenga
   `ad`, `ads`, `banner`, `promo` o `sponsor` como palabra suelta en una clase:
   antes de nombrar algo así, comprobarlo contra esas listas.
   Un anuncio de verdad, no una franja más: fondo navy de la casa con el
   color del plan (`--hm-socios-color`) como resplandor, y el icono de rango
   como protagonista. Reutiliza las animaciones de la página de membresías
   (mb-brillo, mb-flota, mb-halo), que están definidas en este mismo fichero.
   ========================================================================== */

@keyframes hm-socios-latido {
    0%, 100% { transform: scale(1);    box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 0 color-mix(in srgb, var(--hm-socios-color, #fbbf24) 60%, transparent); }
    50%      { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 0 9px color-mix(in srgb, var(--hm-socios-color, #fbbf24) 0%, transparent); }
}

@keyframes hm-socios-cinta {
    0%, 100% { transform: rotate(-8deg) scale(1); }
    50%      { transform: rotate(-8deg) scale(1.08); }
}

.hm-socios {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
    padding: 16px 22px 16px 14px;
    border: 1px solid color-mix(in srgb, var(--hm-socios-color, #fbbf24) 55%, #2b4c6d);
    border-radius: 12px;
    background:
        radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--hm-socios-color, #fbbf24) 32%, transparent), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(78, 181, 241, .22), transparent 40%),
        linear-gradient(120deg, #173552 0%, #0e2238 55%, #13304d 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 22px rgba(10, 28, 46, .35);
    color: #fff;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.hm-socios:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 30px rgba(10, 28, 46, .45);
}

/* El brillo que cruza el anuncio. */
.hm-socios::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 22%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    animation: mb-brillo 4.8s ease-in-out infinite;
    pointer-events: none;
}

/* La etiqueta de «¡Nuevo!», girada como un sello. */
.hm-socios-cinta {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff6b5a 0%, #d8342a 100%);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    animation: hm-socios-cinta 1.8s ease-in-out infinite;
}

/* ---- El icono, con halo ---- */
.hm-socios-rango {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 104px;
}

.hm-socios-rango::before {
    content: '';
    position: absolute;
    inset: 6px 12px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--hm-socios-color, #fbbf24) 75%, transparent) 90deg,
        transparent 190deg,
        color-mix(in srgb, var(--hm-socios-color, #fbbf24) 45%, transparent) 290deg,
        transparent 360deg);
    filter: blur(10px);
    animation: mb-halo 6s linear infinite;
}

.hm-socios-rango img {
    position: relative;
    width: 96px;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
    animation: mb-flota 3.6s ease-in-out infinite;
}

/* ---- El texto ---- */
.hm-socios-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hm-socios-antetitulo {
    color: color-mix(in srgb, var(--hm-socios-color, #fbbf24) 80%, #fff);
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.hm-socios-titulo {
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.hm-socios-pct {
    color: var(--hm-socios-color, #fbbf24);
    font-size: 27px;
}

.hm-socios-sub {
    color: #b8cde0;
    font-size: 12.5px;
}

.hm-socios-regalos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.hm-socios-regalo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 6px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #c9dbea;
    font-size: 12px;
}

.hm-socios-regalo img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    image-rendering: pixelated;
}

.hm-socios-regalo b { color: #fff; }

/* ---- Precio y botón ---- */
.hm-socios-compra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
}

.hm-socios-precio {
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.hm-socios-dias {
    color: #9fb8cd;
    font-size: 11px;
    white-space: nowrap;
}

.hm-socios-btn {
    margin-top: 7px;
    padding: 8px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--hm-socios-color, #fbbf24) 70%, #fff) 0%,
        var(--hm-socios-color, #fbbf24) 100%);
    color: #2b1d00;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    animation: hm-socios-latido 2.2s ease-in-out infinite;
}

.hm-socios:hover .hm-socios-btn { animation-play-state: paused; filter: brightness(1.08); }

@media (max-width: 760px) {
    .hm-socios {
        grid-template-columns: 84px minmax(0, 1fr);
        padding: 14px;
    }

    .hm-socios-rango { width: 84px; height: 80px; }
    .hm-socios-rango img { width: 70px; }
    .hm-socios-titulo { font-size: 17px; }
    .hm-socios-pct { font-size: 21px; }

    .hm-socios-compra {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .hm-socios-btn { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-socios::after,
    .hm-socios-cinta,
    .hm-socios-rango::before,
    .hm-socios-rango img,
    .hm-socios-btn {
        animation: none !important;
    }
}


/* ---- Códigos: premios de avatar en la vitrina ----
   El muñeco es más ancho que los iconos de monedas: se le da su sitio en vez
   de meterlo en el cuadrado de 48 px, donde un set completo no se leía. */
.cd-premio__img--muneco {
    width: auto;
    min-width: 170px;
    height: 112px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.cd-premio__piezas {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #efe7fb;
    color: #6a45b0;
    font-size: 11px;
    font-weight: bold;
}


/* ==========================================================================
   Avatares con bonus de GP (?op=avatares-bonus)
   ==========================================================================
   Hermana de la página de membresías: misma casa (navy + blanco), pero aquí
   lo que se vende es ROPA, así que cada tarjeta abre con un "escenario" oscuro
   donde el muñeco vestido sale grande, con rayos y un pedestal del color del
   pack, y el % de GP encima como una chapa.

   PREFIJO `ab-`. OJO con los nombres: nada que lleve `ad`, `ads`, `banner`,
   `promo`, `sponsor` ni `advert` como palabra suelta. Los bloqueadores de
   anuncios (EasyList, AdGuard) esconden esos elementos; ya pasó con `.hm-ad`,
   que se veía un segundo y desaparecía.

   El color de cada pack llega en `--ab-color` desde la base y tiñe rayos,
   pedestal, chapa, cinta y chips: se añaden packs desde el panel sin tocar CSS.

   EL CONMUTADOR HOMBRE/MUJER ES CSS PURO: dos radios escondidos antes del
   escenario y `:checked ~` para enseñar la versión marcada. Funciona sin JS.

   El tamaño del muñeco lo manda `--ab-k` (factor de ampliación). Se cambia por
   anchos de pantalla aquí abajo, sin tocar el PHP.
   ========================================================================== */

/* ---- Animaciones ---- */

@keyframes ab-gira {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ab-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* El pedestal respira al ritmo del muñeco: cuando sube, la luz se abre. */
@keyframes ab-pedestal {
    0%, 100% { transform: translateX(-50%) scale(1);  opacity: .95; }
    50%      { transform: translateX(-50%) scale(.9); opacity: .7; }
}

@keyframes ab-chispa {
    0%, 100% { transform: scale(0) rotate(0deg);    opacity: 0; }
    45%      { transform: scale(1) rotate(90deg);   opacity: 1; }
    70%      { transform: scale(.4) rotate(140deg); opacity: .6; }
}

@keyframes ab-chapa {
    0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 0 color-mix(in srgb, var(--ab-color, #a855f7) 55%, transparent); }
    50%      { box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 8px color-mix(in srgb, var(--ab-color, #a855f7) 0%, transparent); }
}

@keyframes ab-brillo {
    0%   { transform: translateX(-130%) skewX(-18deg); }
    100% { transform: translateX(420%) skewX(-18deg); }
}

@keyframes ab-degradado {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Entrada SOLO con desplazamiento, sin `opacity: 0`. Con la opacidad, una
   tarjeta cuya animación no llega a correr (pestaña en segundo plano, modo de
   ahorro, capturas) se quedaba invisible: lo que se vende no puede depender
   de que un efecto termine. */
@keyframes ab-entra {
    from { transform: translateY(14px); }
    to   { transform: none; }
}

@keyframes ab-latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47, 208, 111, .55); }
    70%      { box-shadow: 0 0 0 7px rgba(47, 208, 111, 0); }
}

/* ---- El muñeco ampliado ----
   Se pinta a tamaño real y se escala desde la esquina; la caja de fuera
   reserva el tamaño ya ampliado para que el resto del diseño lo respete. */

.ab-zoom {
    --ab-k: 2;
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: calc(var(--ab-w, 188) * var(--ab-k) * 1px);
    height: calc(var(--ab-h, 105) * var(--ab-k) * 1px);
}

.ab-zoom > .ms-muneco {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(var(--ab-k));
    transform-origin: top left;
}

/* ---- Los rayos y el pedestal (compartidos por portada y tarjetas) ---- */

.ab-rayos {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--ab-color, #a855f7) 30%, transparent) 0deg 7deg,
        transparent 7deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%);
    transform: translate(-50%, -50%);
    animation: ab-gira 40s linear infinite;
    pointer-events: none;
}

.ab-pedestal {
    position: absolute;
    left: 50%;
    width: 210px;
    height: 38px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center,
            color-mix(in srgb, var(--ab-color, #a855f7) 75%, #fff) 0%,
            color-mix(in srgb, var(--ab-color, #a855f7) 45%, transparent) 38%,
            transparent 70%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ab-color, #a855f7) 35%, transparent) inset;
    transform: translateX(-50%);
    animation: ab-pedestal 4s ease-in-out infinite;
    pointer-events: none;
}

/* ---- Portada ---- */

.ab-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 18px 0 18px 20px;
    border: 1px solid #34406e;
    border-radius: 12px;
    background:
        radial-gradient(circle at 78% 55%, rgba(168, 85, 247, .38), transparent 38%),
        radial-gradient(circle at 96% 4%, rgba(247, 207, 95, .25), transparent 32%),
        radial-gradient(circle at 4% 100%, rgba(78, 181, 241, .22), transparent 42%),
        linear-gradient(125deg, #18244a 0%, #10213a 52%, #1b1d45 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 22px rgba(14, 22, 52, .32);
}

/* Sin escaparate (no hay packs): una sola columna, con aire a la derecha. */
.ab-hero.is-solo {
    grid-template-columns: 1fr;
    padding: 20px;
}

.ab-hero::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 0;
    width: 26%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
    animation: ab-brillo 6.5s ease-in-out infinite;
    pointer-events: none;
}

.ab-hero-txt {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ab-hero-ante {
    display: inline-block;
    margin-bottom: 7px;
    padding: 2px 10px;
    border: 1px solid rgba(247, 207, 95, .45);
    border-radius: 999px;
    background: rgba(247, 207, 95, .12);
    color: #ffd96b;
    font-size: 10.5px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ab-hero-txt h2 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 25px;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* La segunda mitad del título, con un degradado que corre muy despacio. */
.ab-hero-txt h2 span {
    display: inline-block;
    background: linear-gradient(90deg, #ffd76a 0%, #ff9ad5 33%, #c4a3ff 66%, #ffd76a 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: ab-degradado 9s linear infinite;
}

.ab-hero-txt p {
    margin: 0;
    max-width: 440px;
    color: #c3cfe6;
    font-size: 12.5px;
    line-height: 1.6;
}

.ab-hero-txt p b { color: #fff; }

.ab-hero-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ab-hero-cifras li {
    display: flex;
    flex-direction: column;
    min-width: 86px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
}

.ab-hero-cifras b {
    color: #fff;
    font-size: 18px;
    line-height: 1.15;
    white-space: nowrap;
}

.ab-hero-cifras li:first-child b { color: #ffd96b; }

.ab-hero-cifras i {
    color: #9fb0cc;
    font-size: 10.5px;
    font-style: normal;
}

.ab-hero-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ab-hero-pasos li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a9b8d4;
    font-size: 11.5px;
}

.ab-hero-pasos span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f7cf5f 0%, #e0a91f 100%);
    color: #4a3507;
    font-size: 11px;
    font-weight: bold;
}

/* El escaparate de la derecha: el pack estrella, en grande. */
.ab-hero-vitrina {
    position: relative;
    align-self: stretch;
    min-height: 250px;
}

.ab-hero-vitrina .ab-rayos { width: 440px; height: 440px; }
.ab-hero-vitrina .ab-pedestal { bottom: 26px; }

/* El muñeco va en una franja del ancho de la vitrina que RECORTA por los
   lados: los ex-item son el fondo del recuadro del avatar (casi opacos, 188 px
   de ancho) y, ampliados, se montaban encima del texto de la portada. Con
   `justify-content: center` lo que sobra se reparte a los dos lados. */
.ab-hero-muneco {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding-top: 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.ab-hero-muneco .ab-zoom {
    --ab-k: 2;
    animation: ab-flota 4s ease-in-out infinite;
}

.ab-hero-chapa {
    position: absolute;
    top: 6px;
    right: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        color-mix(in srgb, var(--ab-color, #a855f7) 35%, #fff) 0%,
        var(--ab-color, #a855f7) 75%);
    color: #10233a;
    transform: rotate(8deg);
    animation: ab-chapa 2.4s ease-in-out infinite;
}

.ab-hero-chapa b { font-size: 19px; line-height: 1; }

.ab-hero-chapa i {
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
}

.ab-hero-nombre {
    position: absolute;
    left: 50%;
    bottom: 6px;
    z-index: 1;
    padding: 2px 11px;
    border-radius: 999px;
    background: rgba(8, 16, 34, .55);
    color: #e6ecf8;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* Cinco chispas repartidas alrededor del muñeco, cada una a su ritmo. */
.ab-chispa {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #fff 0%, #ffe39a 100%);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    opacity: 0;
    animation: ab-chispa 2.8s ease-in-out infinite;
    pointer-events: none;
}

.ab-chispa:nth-of-type(2) { top: 22%; left: 16%; animation-delay: 0s; }
.ab-chispa:nth-of-type(3) { top: 12%; left: 62%; width: 10px; height: 10px; animation-delay: .9s; }
.ab-chispa:nth-of-type(4) { top: 55%; left: 84%; animation-delay: 1.6s; }
.ab-chispa:nth-of-type(5) { top: 64%; left: 8%;  width: 9px;  height: 9px;  animation-delay: 2.1s; }
.ab-chispa:nth-of-type(6) { top: 36%; left: 44%; width: 8px;  height: 8px;  animation-delay: 1.2s; }

/* ---- Los packs del jugador ---- */

.ab-tuyos {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e3d3f7;
    border-radius: 10px;
    background:
        radial-gradient(circle at 100% 0%, rgba(168, 85, 247, .1), transparent 40%),
        linear-gradient(180deg, #fdfaff 0%, #f6f0fd 100%);
}

.ab-tuyos-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 9px;
}

.ab-tuyos-cab h3 {
    margin: 0;
    color: #14395c;
    font-size: 14px;
}

.ab-tuyos-total {
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #eadfff;
    font-size: 12px;
    box-shadow: 0 3px 10px rgba(109, 40, 217, .25);
}

.ab-tuyos-total b { color: #fff; font-size: 14px; }

.ab-tuyos-lista {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-tuyos-lista li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid #ece3f8;
    border-left: 3px solid var(--ab-color, #a855f7);
    border-radius: 8px;
    background: #fff;
    animation: ab-entra .4s ease both;
    animation-delay: calc(var(--ab-n, 0) * 80ms);
}

.ab-tuyo-pct {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ab-color, #a855f7) 30%, #fff) 0%,
        color-mix(in srgb, var(--ab-color, #a855f7) 55%, #fff) 100%);
    color: #10233a;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
}

.ab-tuyo-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ab-tuyo-txt > b { color: #14395c; font-size: 13px; }

.ab-tuyo-txt i {
    color: #6f8398;
    font-size: 11.5px;
    font-style: normal;
}

.ab-tuyo-txt i b { color: #14395c; }

.ab-barra {
    position: relative;
    display: block;
    overflow: hidden;
    height: 6px;
    margin-top: 3px;
    border-radius: 999px;
    background: #ece6f5;
}

.ab-barra span {
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ab-color, #a855f7) 60%, #fff) 0%,
        var(--ab-color, #a855f7) 100%);
}

.ab-barra span::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: ab-brillo 2.8s ease-in-out infinite;
}

.ab-tuyo-tipo {
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef3f8;
    color: #587089;
    font-size: 10.5px;
    font-weight: bold;
    white-space: nowrap;
}

.ab-tuyo-tipo.es-perm {
    background: #fdf3d8;
    color: #8a6410;
}

.ab-tuyos-nota {
    margin: 9px 0 0;
    color: #7b6a96;
    font-size: 11.5px;
}

/* ---- Rejilla de packs ---- */

.ab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
}

.ab-pack {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #dbe5ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(23, 62, 96, .09);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: ab-entra .45s ease both;
    animation-delay: calc(var(--ab-i, 0) * 90ms);
}

.ab-pack:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ab-color, #a855f7) 55%, #dbe5ee);
    box-shadow: 0 16px 32px rgba(23, 62, 96, .18),
        0 0 0 1px color-mix(in srgb, var(--ab-color, #a855f7) 30%, transparent);
}

/* El destacado lleva un aro del color del pack, siempre encendido. */
.ab-pack.is-top {
    border-color: color-mix(in srgb, var(--ab-color, #a855f7) 60%, #dbe5ee);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ab-color, #a855f7) 22%, transparent),
        0 0 0 1px color-mix(in srgb, var(--ab-color, #a855f7) 40%, transparent);
}

.ab-pack.is-tuyo { border-color: #e0a91f; }

/* Los radios del conmutador: invisibles pero enfocables con el teclado. */
.ab-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ab-cinta {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 3;
    padding: 4px 13px 4px 10px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ab-color, #a855f7) 55%, #fff) 0%,
        color-mix(in srgb, var(--ab-color, #a855f7) 85%, #fff) 100%);
    color: #10233a;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .3px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .3);
}

.ab-cinta-tuya {
    background: linear-gradient(90deg, #ffe08a 0%, #e0a91f 100%);
    color: #4a3507;
}

/* ---- El escenario ---- */

.ab-escena {
    position: relative;
    overflow: hidden;
    height: 300px;
    background:
        radial-gradient(ellipse 60% 55% at 50% 72%, color-mix(in srgb, var(--ab-color, #a855f7) 34%, transparent), transparent 72%),
        linear-gradient(180deg, #16284a 0%, #0d1a30 100%);
}

/* Un suelo apenas insinuado, para que el pedestal no flote en la nada. */
.ab-escena::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(180deg, transparent, rgba(4, 10, 22, .45));
    pointer-events: none;
}

.ab-escena .ab-pedestal { bottom: 40px; }

.ab-pct {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px 5px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ab-color, #a855f7) 35%, #fff) 0%,
        color-mix(in srgb, var(--ab-color, #a855f7) 80%, #fff) 100%);
    color: #10233a;
    animation: ab-chapa 2.6s ease-in-out infinite;
}

.ab-pct b {
    font-size: 23px;
    line-height: 1;
    white-space: nowrap;
}

.ab-pct i {
    margin-top: 2px;
    font-size: 9.5px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .8;
}

/* Las dos versiones, apiladas en la misma celda: se cruzan al cambiar. */
.ab-munecos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 52px;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-items: end;
}

.ab-ver {
    grid-area: 1 / 1;
    display: flex;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.94);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.ab-ver .ab-zoom { animation: ab-flota 4.2s ease-in-out infinite; }

.ab-ver-sin {
    max-width: 220px;
    margin-bottom: 40px;
    padding: 10px 14px;
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 9px;
    color: #a9b8d4;
    font-size: 12px;
    text-align: center;
}

.ab-radio-0:checked ~ .ab-escena .ab-ver-0,
.ab-radio-1:checked ~ .ab-escena .ab-ver-1 {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* El conmutador, abajo del escenario. */
.ab-generos {
    position: absolute;
    left: 50%;
    bottom: 11px;
    z-index: 3;
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(6, 14, 28, .6);
    transform: translateX(-50%);
}

.ab-gen {
    padding: 4px 15px;
    border-radius: 999px;
    color: #a9bdd3;
    font-size: 11.5px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, color .2s ease;
}

.ab-gen:hover { color: #fff; }

.ab-gen.is-sin { opacity: .55; }

.ab-radio-0:checked ~ .ab-escena .ab-gen-0,
.ab-radio-1:checked ~ .ab-escena .ab-gen-1 {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ab-color, #a855f7) 40%, #fff) 0%,
        color-mix(in srgb, var(--ab-color, #a855f7) 80%, #fff) 100%);
    color: #10233a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.ab-radio-0:focus-visible ~ .ab-escena .ab-gen-0,
.ab-radio-1:focus-visible ~ .ab-escena .ab-gen-1 {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* ---- El cuerpo de la tarjeta ---- */

.ab-cuerpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 9px;
    padding: 13px 15px 15px;
}

.ab-cuerpo h3 {
    margin: 0;
    color: #14395c;
    font-size: 17px;
    line-height: 1.2;
}

.ab-desc {
    margin: -4px 0 0;
    color: #6f8398;
    font-size: 12px;
    line-height: 1.55;
}

/* Las piezas de la versión marcada; la otra se esconde. */
.ab-piezas {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.ab-radio-0:checked ~ .ab-cuerpo .ab-piezas-0,
.ab-radio-1:checked ~ .ab-cuerpo .ab-piezas-1 {
    display: flex;
}

.ab-piezas-num {
    padding: 2px 9px;
    border-radius: 999px;
    background: #14395c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

.ab-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 3px;
    border: 1px solid color-mix(in srgb, var(--ab-color, #a855f7) 30%, #e3ecf4);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ab-color, #a855f7) 7%, #fff);
    color: #2c4a66;
    font-size: 11.5px;
}

.ab-chip i {
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ab-color, #a855f7) 22%, #fff);
    color: #1d3450;
    font-size: 9.5px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

.ab-chip.is-sin {
    padding: 2px 10px;
    border-style: dashed;
    color: #8397ab;
}

.ab-datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-datos li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #6f8398;
    font-size: 12px;
}

.ab-datos b { color: #1d3e5e; }

.ab-datos svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #5b87ad;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ab-datos .es-perm svg { stroke: #d39a12; }
.ab-datos .es-perm b { color: #9a6f0c; }

/* Precio y botones, empujados al fondo para que todas las tarjetas de una
   fila acaben a la misma altura aunque la descripción sea más larga. */
.ab-compra {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px dashed #dfe8f0;
}

.ab-precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
}

.ab-precio b {
    color: #14395c;
    font-size: 27px;
    line-height: 1.05;
    white-space: nowrap;
}

.ab-precio i {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e9f6ee;
    color: #1f7a45;
    font-size: 11.5px;
    font-style: normal;
    font-weight: bold;
    white-space: nowrap;
}

.ab-botones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
}

.ab-sincontacto {
    margin: 0;
    color: #7b8ea1;
    font-size: 11.5px;
}

.ab-wa {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid #2b4c6d;
    border-radius: 9px;
    background: linear-gradient(180deg, #1d3e5e 0%, #112a42 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    text-decoration: none;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.ab-wa:hover {
    filter: brightness(1.16);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 40, 65, .3);
}

.ab-wa-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid #24b85e;
    border-radius: 50%;
    background: linear-gradient(180deg, #2fd06f 0%, #17a94f 100%);
    color: #fff;
    animation: ab-latido 2.6s ease-out infinite;
}

.ab-wa-txt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ab-wa-txt i {
    overflow: hidden;
    color: #a3c0d8;
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ab-wa-txt b {
    color: #fff;
    font-size: 13px;
    letter-spacing: .3px;
    white-space: nowrap;
}

.ab-wa-flecha {
    flex: 0 0 auto;
    color: #7fa6c6;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.ab-wa:hover .ab-wa-flecha {
    opacity: 1;
    transform: none;
}

/* ---- El pack ancho: escenario a un lado y datos al otro ---- */

.ab-pack.is-ancho {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.ab-pack.is-ancho .ab-escena {
    height: auto;
    min-height: 350px;
}

.ab-pack.is-ancho .ab-zoom { --ab-k: 2.4; }

.ab-pack.is-ancho .ab-cuerpo {
    justify-content: center;
    padding: 18px 20px;
}

.ab-pack.is-ancho .ab-cuerpo h3 { font-size: 21px; }

/* ---- Estado vacío ---- */

.ab-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px dashed #cfdceb;
    border-radius: 12px;
    background: linear-gradient(180deg, #f9fbfe 0%, #f1f6fb 100%);
    color: #6f8398;
    font-size: 12.5px;
}

/* El maniquí trae el hueco invisible del ex-item a los lados: se recorta
   para que no deje un vacío de medio palmo entre el muñeco y el texto. */
.ab-vacio-muneco {
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 110px;
}

.ab-vacio-muneco .ab-zoom {
    --ab-k: 1.3;
    opacity: .75;
    animation: ab-flota 4s ease-in-out infinite;
}

.ab-vacio b { color: #14395c; font-size: 14px; }

.ab-vacio p {
    max-width: 420px;
    margin: 4px 0 0;
    line-height: 1.6;
}

/* ---- Letra pequeña ---- */

.ab-aviso {
    margin: 11px 0 0;
    color: #7b8ea1;
    font-size: 11.5px;
}

.ab-aviso b { color: #1d3e5e; }

.ab-titulo {
    margin: 20px 0 10px;
    color: #14395c;
    font-size: 14px;
}

.ab-notas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e3ecf4;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fafd 100%);
    color: #5f768d;
    font-size: 12px;
    line-height: 1.55;
}

.ab-nota b { color: #14395c; }

.ab-nota-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #efe6fd 0%, #e2d3fb 100%);
}

.ab-nota-ico svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #6d28d9;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Anchos pequeños ---- */

@media (max-width: 760px) {
    .ab-hero {
        grid-template-columns: 1fr;
        padding: 0 14px 16px;
        text-align: center;
    }

    /* En móvil el muñeco va arriba: es lo que engancha. */
    .ab-hero-vitrina {
        order: -1;
        min-height: 232px;
    }

    .ab-hero.is-solo { padding: 16px 14px; }

    .ab-hero-muneco .ab-zoom { --ab-k: 2; }
    .ab-hero-txt h2 { font-size: 21px; }
    .ab-hero-txt p { margin: 0 auto; }

    .ab-hero-cifras,
    .ab-hero-pasos { justify-content: center; }

    .ab-grid { grid-template-columns: 1fr; }

    .ab-pack.is-ancho { display: flex; }
    .ab-pack.is-ancho .ab-escena { min-height: 0; height: 300px; }
    .ab-pack.is-ancho .ab-zoom { --ab-k: 2; }
    .ab-pack.is-ancho .ab-cuerpo { padding: 13px 15px 15px; }
    .ab-pack.is-ancho .ab-cuerpo h3 { font-size: 17px; }

    .ab-tuyos-lista li { grid-template-columns: 56px minmax(0, 1fr); }

    .ab-tuyo-tipo {
        grid-column: 2;
        justify-self: start;
    }

    .ab-vacio { flex-direction: column; text-align: center; }
}

@media (max-width: 420px) {
    .ab-zoom,
    .ab-pack.is-ancho .ab-zoom,
    .ab-hero-muneco .ab-zoom { --ab-k: 1.6; }

    .ab-escena,
    .ab-pack.is-ancho .ab-escena { height: 262px; }

    .ab-hero-vitrina { min-height: 214px; }
    .ab-hero-chapa { width: 64px; height: 64px; right: 4px; }
    .ab-hero-chapa b { font-size: 16px; }
    .ab-pct b { font-size: 19px; }
    .ab-precio b { font-size: 23px; }
    .ab-botones { grid-template-columns: 1fr; }
}

/* ---- Movimiento reducido ----
   Misma página, quieta: no se esconde nada, solo se paran las animaciones.
   `avatares.js` ya deja los muñecos en su primer fotograma en este caso. */
@media (prefers-reduced-motion: reduce) {
    .ab-rayos,
    .ab-pedestal,
    .ab-hero::after,
    .ab-hero-txt h2 span,
    .ab-hero-muneco .ab-zoom,
    .ab-hero-chapa,
    .ab-chispa,
    .ab-tuyos-lista li,
    .ab-barra span::after,
    .ab-pack,
    .ab-pct,
    .ab-ver .ab-zoom,
    .ab-vacio-muneco .ab-zoom,
    .ab-wa-ico {
        animation: none !important;
    }

    .ab-chispa { opacity: .6; }

    .ab-pack,
    .ab-ver,
    .ab-gen,
    .ab-wa,
    .ab-wa-flecha {
        transition: none;
    }

    .ab-pack:hover,
    .ab-wa:hover {
        transform: none;
    }
}

/* ---- Ranking: columna del bonus de avatares ----
   Verde azulado: ni el dorado del VIP ni el morado de la membresía, porque
   son tres bonus distintos y se cobran los tres. */
.col-ava { white-space: nowrap; }

.gp-ava {
    color: #0f8577;
    font-weight: bold;
}

/* Tiene pack pero hoy aún no ha jugado: su porcentaje, apagado. */
.gp-ava-espera {
    color: #7fb8b0;
    font-size: 11px;
}

/* ===========================================================================
   TRADE MARKET

   El mercado de avatares entre jugadores.

   TIENE LOOK PROPIO, Y ES A PROPÓSITO. El resto del portal es una tarjeta
   blanca sobre fondo azul noche; aquí eso se queda corto, porque una rejilla
   de avatares en venta necesita que cada pieza destaque y que el precio se lea
   desde lejos. Así que el módulo abre con una banda oscura que sangra hasta
   los bordes del recuadro, y a partir de ahí el contenido vuelve a lo claro.

   La paleta sale de la propia web: el azul marino de `.box-title` (#1d3e5e /
   #112a42) para la banda, el ámbar de los botones del juego para el mercado, y
   el azul cian del icono de cash. Las dos monedas tienen SIEMPRE su color
   —ámbar el oro, cian el cash— en toda la pantalla, para que no haya que leer
   la etiqueta.

   Prefijo `tm-` propio: no reaprovecha las clases de la tienda (`sh-`) porque
   una tarjeta de aquí lleva cosas que allí no existen —vendedor, cuenta atrás,
   estado, pujas— y mezclarlas haría que tocar una rompiera la otra. Lo único
   compartido es el motor de sprites (`.sh-sprite`, `.ms-muneco`).
   =========================================================================== */

.tm {
    /* Marca del módulo */
    --tm-oro: #f0a824;
    --tm-oro-alto: #ffd166;
    --tm-cash: #35b6ef;
    --tm-cash-alto: #7fd6ff;

    /* Superficies claras */
    --tm-borde: #dce6ef;
    --tm-borde-alto: #b9d4ea;
    --tm-suave: #f2f7fb;
    --tm-papel: #ffffff;

    /* Tinta */
    --tm-tinta: #22405c;
    --tm-tinta-baja: #7a8fa3;

    /* Noche (la banda de arriba) */
    --tm-noche: #14283e;
    --tm-noche-2: #0d1d2e;

    /*
     * El color se fija AQUÍ, en el contenedor, y no párrafo a párrafo: el
     * texto que hereda dentro de `.box-content` sale en blanco, que sobre la
     * tarjeta blanca es invisible.
     */
    color: var(--tm-tinta);
    font-size: 13px;
}

/* TAMANO POR DEFECTO DE TODOS LOS ICONOS DEL MODULO.
   Un `<svg>` sin ancho ni alto ocupa TODO el sitio que le den, y dentro de un
   titulo flexible eso es la pantalla entera: paso, y el icono del chat salio
   del tamano de media pagina. Con este suelo, un icono nuevo en cualquier
   sitio sale del tamano del texto aunque nadie se acuerde de medirlo; las
   reglas de mas abajo lo ajustan donde hace falta. */
.tm svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.tm-sub svg { width: 18px; height: 18px; color: var(--tm-tinta-baja); }
.tm-vacio svg { width: 38px; height: 38px; }

/* ---------------------------------------------------------------------------
   LA BANDA DE ARRIBA

   Los márgenes negativos compensan el `padding: 8px 15px` de `.box-content`
   para que la banda llegue hasta los bordes del recuadro. Si ese padding
   cambiara, hay que cambiarlos aquí.
   --------------------------------------------------------------------------- */

.tm-hero {
    position: relative;
    margin: -8px -15px 16px;
    padding: 18px 20px 0;
    background:
        radial-gradient(900px 300px at 15% -40%, rgba(240, 168, 36, 0.18), transparent 60%),
        radial-gradient(700px 260px at 95% -20%, rgba(53, 182, 239, 0.16), transparent 60%),
        linear-gradient(160deg, var(--tm-noche) 0%, var(--tm-noche-2) 100%);
    color: #eaf2f9;
    overflow: hidden;
}

/* Una rejilla muy tenue de fondo, como la de una sala de subastas. No se ve
   como tal: solo le quita el plano al degradado. */
.tm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}

.tm-hero > * { position: relative; }

.tm-hero__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.tm-hero__txt { flex: 1 1 280px; min-width: 0; }

.tm-hero__tit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.tm-hero__tit svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    color: var(--tm-oro-alto);
}

.tm-hero__sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #a8c0d4;
    max-width: 62ch;
}

/* ---- La cartera ---- */

.tm-cartera {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.tm-moneda {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
}

.tm-moneda img { width: 20px; height: 20px; flex: 0 0 auto; }

.tm-moneda__n {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.tm-moneda__n small {
    font-size: 9.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #8fa9c0;
}

.tm-moneda__n b { font-size: 15px; font-weight: 700; }
.tm-moneda--cash b { color: var(--tm-cash-alto); }
.tm-moneda--gold b { color: var(--tm-oro-alto); }

/* ---- Las cifras del mercado ---- */

.tm-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 0 0 14px;
}

.tm-cifra { line-height: 1.2; }

.tm-cifra b {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.tm-cifra span {
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #8fa9c0;
}

/* ---- Pestañas ----
   Van pegadas al borde inferior de la banda: la activa se funde con el fondo
   claro de abajo, como una carpeta. */

.tm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 -20px;
    padding: 0 20px;
}

.tm-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 10px 10px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #a8c0d4;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
}

.tm-tab:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.tm-tab.is-on {
    background: var(--tm-papel);
    color: var(--tm-tinta);
}

/* El filo dorado de la pestaña activa. */
.tm-tab.is-on::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg, var(--tm-oro), var(--tm-oro-alto));
}

.tm-tab svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------------
   AVISOS
   --------------------------------------------------------------------------- */

.tm-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid var(--tm-borde);
    background: var(--tm-suave);
    font-size: 12.5px;
    line-height: 1.55;
}

.tm-aviso svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.tm-aviso ul { margin: 6px 0 0 18px; padding: 0; }
.tm-aviso b { color: var(--tm-tinta); }

.tm-aviso--staff { border-color: #d9cbf5; background: #f6f2ff; color: #543a8f; }
.tm-aviso--staff svg { color: #7c5cd6; }

.tm-aviso--reglas { border-color: #f2ddb8; background: #fff9ee; color: #7a5a1e; }
.tm-aviso--reglas svg { color: var(--tm-oro); }

.tm-aviso--no { border-color: #f3cfcb; background: #fff5f4; color: #99342c; }
.tm-aviso--no svg { color: #d0544a; }

.tm-reglas-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* La franja fina de «negociar por fuera está prohibido». Va dentro de la banda
   oscura, así que se pinta al revés que los demás avisos. */
.tm-reglas-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    justify-content: space-between;
    margin: 0 -20px;
    padding: 9px 20px;
    background: rgba(0, 0, 0, 0.28);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11.5px;
    color: #c2d4e4;
}

.tm-reglas-barra > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tm-reglas-barra svg { width: 15px; height: 15px; color: var(--tm-oro); }

.tm-reglas-link {
    color: var(--tm-oro-alto);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.tm-reglas-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   FILTROS
   --------------------------------------------------------------------------- */

.tm-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    margin-bottom: 14px;
    border: 1px solid var(--tm-borde);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, var(--tm-suave));
    box-shadow: 0 1px 2px rgba(20, 50, 80, 0.04);
}

.tm-busca {
    position: relative;
    flex: 1 1 180px;
    min-width: 0;
}

.tm-busca svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--tm-tinta-baja);
    pointer-events: none;
}

.tm-busca input { padding-left: 33px !important; }

.tm-filtros input[type="text"],
.tm-filtros select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--tm-borde);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--tm-tinta);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-filtros select { width: auto; min-width: 140px; }

.tm-filtros input[type="text"]:focus,
.tm-filtros select:focus {
    outline: 0;
    border-color: var(--tm-borde-alto);
    box-shadow: 0 0 0 3px rgba(53, 182, 239, 0.14);
}

.tm-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--tm-borde);
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    color: var(--tm-tinta-baja);
    cursor: pointer;
    white-space: nowrap;
}

.tm-check:has(input:checked) {
    border-color: var(--tm-oro);
    background: #fff9ee;
    color: #8a6210;
    font-weight: 700;
}

.tm-cuenta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--tm-tinta-baja);
}

.tm-cuenta b { color: var(--tm-tinta); }

/* ---------------------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------------------- */

.tm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    color: #4a2d00;
    cursor: pointer;
    background: linear-gradient(180deg, var(--tm-oro-alto), var(--tm-oro));
    box-shadow: 0 2px 0 #c07f10, 0 4px 12px rgba(240, 168, 36, 0.3);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.tm-btn svg { width: 15px; height: 15px; }

.tm-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.tm-btn:active { transform: translateY(1px); box-shadow: 0 0 0 #c07f10; }

/* El brillo que cruza el botón al pasar por encima. */
.tm-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    transition: left 0.5s ease;
}

.tm-btn:hover::after { left: 130%; }

.tm-btn:disabled {
    background: #e4eaf0;
    color: #9fb0bf;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}

.tm-btn:disabled::after { display: none; }

/* Comprar en cash: en cian, para que el botón diga en qué se paga. */
.tm-btn--cash {
    color: #06283a;
    background: linear-gradient(180deg, var(--tm-cash-alto), var(--tm-cash));
    box-shadow: 0 2px 0 #1b86b8, 0 4px 12px rgba(53, 182, 239, 0.3);
}

.tm-btn--cash:active { box-shadow: 0 0 0 #1b86b8; }

.tm-btn--ya {
    color: #04301a;
    background: linear-gradient(180deg, #7ee2a8, #3fbf76);
    box-shadow: 0 2px 0 #2c9159, 0 4px 12px rgba(63, 191, 118, 0.28);
    font-size: 12px;
}

.tm-btn--ya:active { box-shadow: 0 0 0 #2c9159; }

.tm-btn--fantasma {
    background: #fff;
    border: 1px solid var(--tm-borde);
    color: var(--tm-tinta-baja);
    box-shadow: none;
    font-weight: 600;
}

.tm-btn--fantasma:hover { border-color: var(--tm-borde-alto); color: var(--tm-tinta); }

.tm-btn--retirar {
    background: #fff;
    border: 1px solid #edc9c5;
    color: #b4403a;
    box-shadow: none;
}

.tm-btn--retirar:hover { background: #fff5f4; }

.tm-btn--mini {
    width: auto;
    padding: 6px 13px;
    font-size: 11.5px;
    border-radius: 9px;
}

/* ---------------------------------------------------------------------------
   LA REJILLA DE ANUNCIOS
   --------------------------------------------------------------------------- */

.tm-rejilla {
    display: grid;
    /* 240 y no menos: el muneco vestido mide 188 px de ancho (el cuerpo es
       pequeno, lo ancho son los efectos), y en una tarjeta mas estrecha habia
       que encogerlo, que es justo lo contrario de lo que se quiere en un
       escaparate. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.tm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--tm-borde);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #f7fafd 100%);
    box-shadow: 0 1px 2px rgba(20, 50, 80, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tm-card:hover {
    transform: translateY(-3px);
    border-color: var(--tm-borde-alto);
    box-shadow: 0 10px 26px rgba(20, 50, 80, 0.14);
}

/* El propio: se distingue del resto para que nadie se líe buscando su anuncio. */
.tm-card.is-mio {
    border-color: #f0dcae;
    background: linear-gradient(180deg, #fffdf7 0%, #fff8e9 100%);
}

.tm-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}

/* La etiqueta de tipo. La de subasta va en morado para que se distinga de un
   vistazo en medio de la rejilla. */
.tm-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: linear-gradient(180deg, #2c5580, #1d3e5e);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.tm-etiqueta svg { width: 10px; height: 10px; }
.tm-etiqueta--subasta { background: linear-gradient(180deg, #9061e0, #6c3fc4); }

/* El vendedor, con su inicial en un círculo. */
.tm-vendedor {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    min-width: 0;
    font-size: 11px;
    color: var(--tm-tinta-baja);
    text-decoration: none;
}

.tm-vendedor__ini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #4d8ff7, #2c5580);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.tm-vendedor b {
    color: var(--tm-tinta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tm-card__tit {
    margin: 0 0 9px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tm-tinta);
    /* Dos líneas y corta: los lotes de cuatro prendas tienen títulos larguísimos
       y sin esto cada tarjeta de la fila mediría distinto. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 35px;
    transition: color 0.15s ease;
}

.tm-card__link:hover .tm-card__tit { color: #1b6fa8; }

/* ---- El escenario del muñeco ----
   Fondo con foco, suelo con sombra y viñeta: el avatar parece puesto sobre
   algo en vez de flotando en una caja. El alto es FIJO aunque el anuncio sea
   de una sola bandera; si no, las tarjetas de una fila bailarían. */

.tm-card__img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 168px;
    margin-bottom: 10px;
    border-radius: 12px;
    background:
        radial-gradient(70% 55% at 50% 38%, #ffffff 0%, #e8f2fb 55%, #d3e5f5 100%);
    box-shadow: inset 0 0 0 1px rgba(29, 62, 94, 0.07);
    overflow: hidden;
}

/* Rayos de luz desde arriba, muy tenues. */
.tm-card__img::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 200deg at 50% 0%,
            transparent 0deg, rgba(255, 255, 255, 0.85) 18deg,
            transparent 36deg, rgba(255, 255, 255, 0.6) 54deg, transparent 72deg);
    opacity: 0.5;
    pointer-events: none;
}

/* El suelo: una elipse difuminada bajo el muñeco. */
.tm-card__img::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 62%;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(29, 62, 94, 0.22), transparent);
    pointer-events: none;
}

.tm-card__img .ms-muneco,
.tm-card__img .sh-img-fallback {
    position: relative;
    z-index: 1;
    transition: transform 0.25s ease;
}

/* Los avatares se enseñan AMPLIADOS aquí (a tamaño real se pierden dentro de
   la tarjeta), y son pixel art: sin esto el navegador los suaviza y salen
   borrosos. Con `pixelated` cada píxel crece limpio, que es como se ven en el
   juego. Va solo en los huecos del mercado; el resto del portal los pinta a
   tamaño real y no lo necesita. */
.tm-card__img .sh-sprite i,
.tm-ficha__img .sh-sprite i,
.tm-inv__img .sh-sprite i {
    image-rendering: pixelated;
}

.tm-card:hover .tm-card__img .ms-muneco { transform: translateY(-3px) scale(1.04); }

.sh-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #dbe8f4;
    color: #8aa2b8;
    font-size: 22px;
    font-weight: 700;
}

/* ---- Las piezas del lote ---- */

.tm-card__piezas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    min-height: 26px;
}

.tm-card__piezas li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--tm-suave);
    border: 1px solid var(--tm-borde);
}

.tm-card__piezas img { width: 15px; height: 15px; }
.tm-pieza-txt { font-size: 9px; color: var(--tm-tinta-baja); font-weight: 700; }

/* ---- Cuenta atrás ----
   El color avisa: verde con tiempo de sobra, ámbar en la última hora y rojo
   en los últimos diez minutos. Las clases las pone la vista. */

.tm-reloj {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 4px 9px;
    margin-bottom: 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #edf4f9;
    color: #5b748a;
}

.tm-reloj svg { width: 12px; height: 12px; }
.tm-reloj--medio { background: #fff3e0; color: #a8620c; }

.tm-reloj--poco {
    background: #fdecea;
    color: #c0392b;
    animation: tm-latido 1.6s ease-in-out infinite;
}

@keyframes tm-latido {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ---- Precio ---- */

.tm-card__precio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Empuja el precio y el botón al fondo: todas las tarjetas de una fila
       tienen el botón a la misma altura aunque el título ocupe una línea o dos. */
    margin-top: auto;
    margin-bottom: 10px;
}

.tm-precio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.tm-precio img { width: 18px; height: 18px; }
.tm-precio b { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.tm-precio--cash b { color: #1b86c9; }
.tm-precio--gold b { color: #c98a10; }

.tm-genero {
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--tm-suave);
    border: 1px solid var(--tm-borde);
    color: var(--tm-tinta-baja);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.tm-card__nota {
    margin: 7px 0 0;
    font-size: 11px;
    color: var(--tm-tinta-baja);
    text-align: center;
}

/* ---- Subastas dentro de la tarjeta ---- */

.tm-puja-info {
    margin: 0 0 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: #f7f2ff;
    border: 1px solid #e3d6fa;
    font-size: 11.5px;
    line-height: 1.45;
    color: #5b4290;
}

.tm-puja-info b { color: #3f2a6e; }

.tm-pujar {
    display: flex;
    gap: 6px;
    margin-bottom: 7px;
}

.tm-pujar input {
    flex: 1 1 60px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--tm-borde);
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: var(--tm-tinta);
    background: #fff;
}

.tm-pujar input:focus {
    outline: 0;
    border-color: #b9a6ee;
    box-shadow: 0 0 0 3px rgba(144, 97, 224, 0.15);
}

.tm-pujar .tm-btn { width: auto; flex: 0 0 auto; padding: 9px 16px; }

/* ---------------------------------------------------------------------------
   ESTADOS VACÍOS
   --------------------------------------------------------------------------- */

.tm-vacio {
    padding: 34px 20px;
    text-align: center;
    color: var(--tm-tinta-baja);
    background:
        radial-gradient(60% 100% at 50% 0%, rgba(53, 182, 239, 0.07), transparent),
        var(--tm-suave);
    border: 1px dashed var(--tm-borde-alto);
    border-radius: 14px;
    font-size: 13px;
}

.tm-vacio svg {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto 10px;
    color: #b9cbdb;
}

.tm-vacio a { color: #1b86c9; font-weight: 700; }

.tm-nota {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--tm-tinta-baja);
}

/* ---------------------------------------------------------------------------
   PUBLICAR
   --------------------------------------------------------------------------- */

.tm-vender-cab { margin-bottom: 18px; }
.tm-vender-cab h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--tm-tinta); }
.tm-vender-cab p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }

/* Los títulos de sección, con su número en un círculo. El número lo pone la
   vista en un `data-paso`; sin él sale solo el texto. */
.tm-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--tm-tinta);
}

.tm-sub::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--tm-borde), transparent);
}

.tm-sub[data-paso]::before {
    content: attr(data-paso);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--tm-oro-alto), var(--tm-oro));
    color: #4a2d00;
    font-size: 12px;
    font-weight: 800;
}

.tm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--tm-suave);
    border: 1px solid var(--tm-borde);
    color: var(--tm-tinta-baja);
    font-size: 11px;
    font-weight: 700;
}

.tm-pill--nuevo {
    background: linear-gradient(180deg, #ff8a5c, #ef5f2c);
    border-color: #d94f1f;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(239, 95, 44, 0.18);
}

/* ---- El inventario ----
   Rejilla de tarjetas marcables, con scroll propio porque hay cuentas con más
   de cien prendas y si no la página se hace interminable. */

.tm-inv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 9px;
    max-height: 430px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--tm-borde);
    border-radius: 14px;
    background: var(--tm-suave);
}

.tm-inv__it { cursor: pointer; }
.tm-inv__it input { position: absolute; opacity: 0; pointer-events: none; }

.tm-inv__cuerpo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--tm-borde);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tm-inv__it:hover .tm-inv__cuerpo { border-color: var(--tm-borde-alto); transform: translateY(-1px); }

.tm-inv__it input:checked + .tm-inv__cuerpo {
    border-color: var(--tm-oro);
    background: #fffaf0;
    box-shadow: 0 0 0 2px rgba(240, 168, 36, 0.28);
}

/* La marca de seleccionado, arriba a la derecha. */
.tm-inv__it input:checked + .tm-inv__cuerpo::after {
    content: '\2713';
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--tm-oro-alto), var(--tm-oro));
    color: #4a2d00;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(240, 168, 36, 0.5);
}

/* Se ve al navegar con el teclado: la casilla real está escondida. */
.tm-inv__it input:focus-visible + .tm-inv__cuerpo {
    outline: 2px solid #1b86c9;
    outline-offset: 2px;
}

.tm-inv__img {
    flex: 0 0 54px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: radial-gradient(70% 70% at 50% 40%, #fff, #e9f2fa);
    overflow: hidden;
}

.tm-inv__txt { min-width: 0; }

.tm-inv__txt b {
    display: block;
    font-size: 12.5px;
    color: var(--tm-tinta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-inv__txt small { font-size: 11px; color: var(--tm-tinta-baja); }
.tm-puesto { color: #c98a10; font-weight: 700; }

/* ---- El formulario de precio ---- */

.tm-form__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--tm-borde);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, var(--tm-suave));
}

.tm-form__fila label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 150px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--tm-tinta-baja);
}

.tm-form__fila label small { text-transform: none; font-weight: 400; }

.tm-form__fila input,
.tm-form__fila select {
    padding: 10px 12px;
    border: 1px solid var(--tm-borde);
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tm-tinta);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-form__fila input:focus,
.tm-form__fila select:focus {
    outline: 0;
    border-color: var(--tm-borde-alto);
    box-shadow: 0 0 0 3px rgba(53, 182, 239, 0.14);
}

/* El resumen de lo que se va a cobrar. Lo rellena assets/js/trade.js; sin JS
   se queda con lo que puso PHP, que también es correcto. */
.tm-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    align-items: center;
    margin: 12px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #14283e, #1d3e5e);
    color: #d6e4f1;
    font-size: 12px;
}

.tm-resumen__d { line-height: 1.25; }
.tm-resumen__d span { display: block; font-size: 10px; letter-spacing: 0.7px; text-transform: uppercase; color: #8fa9c0; }
.tm-resumen__d b { font-size: 17px; font-weight: 800; color: #fff; }
.tm-resumen__d--neto b { color: var(--tm-oro-alto); }

.tm-form .tm-btn { max-width: 280px; }

/* ---------------------------------------------------------------------------
   MIS NEGOCIACIONES
   --------------------------------------------------------------------------- */

.tm-tabla-wrap {
    overflow-x: auto;
    border: 1px solid var(--tm-borde);
    border-radius: 14px;
}

.tm-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tm-tabla th {
    padding: 10px 12px;
    background: var(--tm-suave);
    border-bottom: 1px solid var(--tm-borde);
    font-size: 10.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--tm-tinta-baja);
    text-align: left;
}

.tm-tabla td {
    padding: 11px 12px;
    border-bottom: 1px solid #eef3f8;
    vertical-align: middle;
}

.tm-tabla tr:last-child td { border-bottom: 0; }
.tm-tabla tbody tr:hover { background: #fafcfe; }
.tm-tabla small { color: var(--tm-tinta-baja); }
.tm-tabla a { color: #1b86c9; text-decoration: none; }
.tm-tabla a:hover { text-decoration: underline; }
.tm-tabla .col-num { text-align: right; }

.tm-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tm-estado--ok   { background: #e6f1fc; color: #1b6fa8; }
.tm-estado--bien { background: #e4f7ec; color: #1f7a45; }
.tm-estado--gris { background: #eef2f6; color: #70808d; }
.tm-estado--mal  { background: #fdeceb; color: #b4403a; }

/* ---------------------------------------------------------------------------
   LA FICHA DE UN ANUNCIO
   --------------------------------------------------------------------------- */

.tm-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1b86c9;
    text-decoration: none;
}

.tm-volver:hover { text-decoration: underline; }
.tm-volver svg { width: 14px; height: 14px; }

.tm-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--tm-borde);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f7fafd);
    box-shadow: 0 2px 10px rgba(20, 50, 80, 0.06);
}

/* El mismo escenario que en la tarjeta, en grande. */
.tm-ficha__img {
    position: relative;
    flex: 0 0 250px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: radial-gradient(70% 55% at 50% 38%, #ffffff 0%, #e8f2fb 55%, #cfe2f4 100%);
    box-shadow: inset 0 0 0 1px rgba(29, 62, 94, 0.08);
    overflow: hidden;
}

.tm-ficha__img::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 58%;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(29, 62, 94, 0.22), transparent);
}

.tm-ficha__img .ms-muneco { position: relative; z-index: 1; }

.tm-ficha__datos { flex: 1 1 280px; min-width: 0; }

.tm-ficha__datos h2 {
    margin: 10px 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--tm-tinta);
}

.tm-ficha__vend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--tm-tinta-baja);
}

.tm-ficha__piezas {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--tm-borde);
    border-radius: 12px;
    overflow: hidden;
}

.tm-ficha__piezas li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px;
    background: #fff;
    border-bottom: 1px solid #eef3f8;
    font-size: 12.5px;
}

.tm-ficha__piezas li:last-child { border-bottom: 0; }
.tm-ficha__piezas li:nth-child(even) { background: #fbfdff; }
.tm-ficha__piezas b { color: var(--tm-tinta); }
.tm-ficha__piezas small { color: var(--tm-tinta-baja); }

.tm-ficha__precio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #14283e, #1d3e5e);
}

.tm-ficha__precio .tm-precio b { font-size: 28px; color: #fff; }
.tm-ficha__precio .tm-precio img { width: 24px; height: 24px; }
.tm-ficha__precio .tm-reloj { margin: 0; }

.tm-ficha .tm-btn { max-width: 280px; }

.tm-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.tm-mi-propuesta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #fff9ee;
    border: 1px solid #f2ddb8;
    font-size: 12.5px;
    color: #7a5a1e;
}

.tm-proponer { align-items: flex-end; }
.tm-proponer__msg { flex: 2 1 220px; }
.tm-proponer .tm-btn { width: auto; flex: 0 0 auto; padding: 10px 20px; }

/* ---------------------------------------------------------------------------
   EL CHAT
   --------------------------------------------------------------------------- */

.tm-hilos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.tm-hilo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--tm-borde);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: var(--tm-tinta);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tm-hilo:hover { border-color: var(--tm-borde-alto); }

.tm-hilo.is-on {
    border-color: var(--tm-oro);
    background: #fff9ee;
    font-weight: 700;
}

/* Alto máximo y scroll propio: una negociación larga no puede empujar el
   formulario de escribir fuera de la pantalla. */
.tm-chat {
    max-height: 360px;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--tm-borde);
    border-radius: 14px;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(53, 182, 239, 0.05), transparent),
        var(--tm-suave);
    margin-bottom: 10px;
}

.tm-chat__vacio {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: var(--tm-tinta-baja);
    font-size: 12.5px;
}

.tm-msg {
    position: relative;
    max-width: 76%;
    margin-bottom: 10px;
    padding: 9px 13px;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    border: 1px solid var(--tm-borde);
    box-shadow: 0 1px 2px rgba(20, 50, 80, 0.05);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Lo mío a la derecha, como en cualquier chat. */
.tm-msg--mio {
    margin-left: auto;
    border-radius: 14px 14px 4px 14px;
    background: linear-gradient(180deg, #eef7ff, #e3f1fd);
    border-color: #c3dff5;
}

.tm-msg__quien {
    display: block;
    margin-bottom: 1px;
    font-size: 10.5px;
    font-weight: 700;
    color: #1b86c9;
}

.tm-msg__txt { display: block; color: var(--tm-tinta); }

.tm-msg__hora {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #9aadbd;
}

.tm-escribir { display: flex; gap: 8px; }

.tm-escribir input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 16px;
    border: 1px solid var(--tm-borde);
    border-radius: 999px;
    font-size: 13px;
    color: var(--tm-tinta);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-escribir input:focus {
    outline: 0;
    border-color: var(--tm-borde-alto);
    box-shadow: 0 0 0 3px rgba(53, 182, 239, 0.14);
}

.tm-escribir .tm-btn { width: auto; flex: 0 0 auto; padding: 11px 24px; }

/* ---------------------------------------------------------------------------
   EL AVISO DE REGLAS

   `:target` y no JavaScript: se abre porque el navegador está en el ancla
   `#tm-reglas`, así que funciona sin scripts, se puede enlazar directamente y
   el botón de «atrás» lo cierra.
   --------------------------------------------------------------------------- */

.tm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    padding: 20px;
    background: rgba(8, 18, 30, 0.72);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}

.tm-modal:target { display: block; }

.tm-modal__caja {
    position: relative;
    max-width: 560px;
    margin: 40px auto;
    padding: 26px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    animation: tm-entra 0.22s ease-out;
}

@keyframes tm-entra {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.tm-modal__x {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2f6fa;
    color: #7a8fa3;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.tm-modal__x:hover { background: #ef5350; color: #fff; }

.tm-modal__tit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--tm-tinta);
}

.tm-modal__tit svg { width: 22px; height: 22px; color: var(--tm-oro); }

.tm-modal__intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #4a637c;
}

.tm-modal__lista {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: tmr;
}

.tm-modal__lista li {
    counter-increment: tmr;
    position: relative;
    padding: 11px 14px 11px 44px;
    margin-bottom: 8px;
    border: 1px solid var(--tm-borde);
    border-radius: 12px;
    background: var(--tm-suave);
    font-size: 12.5px;
    line-height: 1.55;
    color: #3c5771;
}

.tm-modal__lista li::before {
    content: counter(tmr);
    position: absolute;
    left: 12px;
    top: 11px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--tm-oro-alto), var(--tm-oro));
    color: #4a2d00;
    font-size: 11px;
    font-weight: 800;
}

.tm-modal__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tm-modal__mas { color: var(--tm-oro); font-weight: 700; font-size: 12.5px; }
.tm-modal__pie .tm-btn { width: auto; padding: 11px 26px; }

/* ---------------------------------------------------------------------------
   PÁGINA DE «ABRE PRONTO»
   --------------------------------------------------------------------------- */

.tm-proximamente {
    position: relative;
    margin: -8px -15px;
    padding: 60px 24px;
    text-align: center;
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(240, 168, 36, 0.18), transparent 65%),
        linear-gradient(160deg, var(--tm-noche), var(--tm-noche-2));
    color: #c2d4e4;
}

.tm-proximamente svg { width: 54px; height: 54px; margin-bottom: 14px; color: var(--tm-oro); }
.tm-proximamente h2 { margin: 0 0 12px; font-size: 26px; font-weight: 800; color: #fff; }
.tm-proximamente p { margin: 0 auto 10px; max-width: 54ch; line-height: 1.6; }
.tm-proximamente a { color: var(--tm-oro-alto); font-weight: 700; }

/* ---------------------------------------------------------------------------
   LA PESTAÑA DEL MERCADO EN LA TIENDA DE AVATARES

   Va en la misma barra que Todo / Sets / Cabeza / Cuerpo…, pero NO es un
   filtro más: lleva a otra página. Por eso se separa con un hueco y se pinta
   en ámbar, para que se lea como «esto es otra cosa» y no como una familia de
   prendas en la que nadie se ha fijado.
   --------------------------------------------------------------------------- */

/* Nada de `margin-left: auto` para empujarlo a la derecha: la barra se parte
   en varias filas y el botón se quedaba solo y descolgado en la segunda, como
   si se hubiera caído. Va pegado a las demás pestañas y lo que lo distingue es
   el color. */
.cm-tab--trade {
    background: linear-gradient(180deg, #ffd166, #f0a824) !important;
    border-color: #d99a24 !important;
    color: #4a2d00 !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(240, 168, 36, 0.35);
}

.cm-tab--trade:hover { filter: brightness(1.07); }

/* ---------------------------------------------------------------------------
   PAGINACIÓN
   --------------------------------------------------------------------------- */

.tm .pagination { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   PANTALLAS ESTRECHAS
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {
    .tm-hero { padding: 14px 14px 0; margin: -8px -15px 14px; }
    .tm-hero__tit { font-size: 20px; }
    .tm-hero__tit svg { width: 21px; height: 21px; }
    .tm-cartera { width: 100%; }
    .tm-moneda { flex: 1; }
    .tm-cifras { gap: 16px; }
    .tm-tabs { margin: 0 -14px; padding: 0 14px; }
    .tm-reglas-barra { margin: 0 -14px; padding: 9px 14px; }
    .tm-ficha__img { flex: 1 1 100%; height: 190px; }
}

@media (max-width: 620px) {
    .tm-rejilla { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 11px; }
    .tm-card { padding: 9px; border-radius: 13px; }

    /* En el móvil la tarjeta mide la mitad, así que el muñeco encoge de verdad
       —caja y sprite a la vez— con `--mu-f`, que es lo que entiende
       `partials/muneco.php`. */
    .tm-card__img { height: 132px; }
    .tm-card__img .ms-muneco { --mu-f: 0.82; }
    .tm-card__tit { font-size: 12.5px; min-height: 32px; }
    .tm-precio b { font-size: 16px; }
    .tm-precio img { width: 15px; height: 15px; }

    /* El nick del vendedor no cabe en media tarjeta y salía cortado en
       «Kazzu…», que no dice nada. Se queda solo su inicial, y el nombre
       completo sigue en el `title` y en la ficha. */
    .tm-vendedor b { display: none; }

    /* Los botones con texto largo («Retirar mi anuncio») se partían en dos
       líneas y descuadraban la fila. */
    .tm-btn { font-size: 12px; padding: 9px 10px; }
    .tm-etiqueta { font-size: 8.5px; padding: 3px 6px; }

    /* Las pestañas MANTIENEN su texto: con solo el icono no hay forma de saber
       cuál es cuál. Se parten en dos filas, que ocupa menos que equivocarse. */
    .tm-tab { padding: 8px 12px; font-size: 11.5px; }

    .tm-msg { max-width: 92%; }
    .tm-modal__caja { margin: 10px auto; padding: 18px; }
    .tm-filtros { padding: 8px; }
    .tm-filtros select { min-width: 0; flex: 1 1 130px; }
    .tm-cifras { gap: 12px 18px; }
    .tm-cifra b { font-size: 15px; }
    .tm-hero__sub { font-size: 12px; }

    /* Las tablas se ARRASTRAN, no se estrujan. Sin este ancho mínimo, en el
       móvil las celdas se comprimen hasta que el texto sale en una letra por
       línea y los botones se salen cortados por el borde. Con él, el envoltorio
       (`.tm-tabla-wrap`, que ya tiene `overflow-x`) deja deslizarla con el dedo
       y cada celda conserva su forma. */
    .tm-tabla { min-width: 520px; }
}

/* MÓVIL EN VERTICAL: UNA SOLA COLUMNA.

   Es una decisión medida, no falta de sitio. El muñeco vestido mide 188 px de
   ancho —el cuerpo es pequeño, lo que ocupa son los efectos—, así que en media
   pantalla de móvil hay que encogerlo a poco más de la mitad y el avatar deja
   de verse, que es justo lo que se viene a mirar. A una columna se ve entero y
   a tamaño real; se hace más scroll, pero en un escaparate eso no molesta. */
@media (max-width: 430px) {
    .tm-rejilla { grid-template-columns: 1fr; gap: 12px; }
    .tm-card__img { height: 152px; }
    .tm-card__img .ms-muneco { --mu-f: 1; }
    .tm-card__tit { min-height: 0; }
    .tm-vendedor b { display: inline; }
    .tm-btn { font-size: 13px; }
}

/* Quien haya pedido menos movimiento en su sistema, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
    .tm-card,
    .tm-btn,
    .tm-btn::after,
    .tm-inv__cuerpo,
    .tm-card__img .ms-muneco {
        transition: none;
    }

    .tm-card:hover { transform: none; }
    .tm-card:hover .tm-card__img .ms-muneco { transform: none; }
    .tm-reloj--poco { animation: none; }
    .tm-modal__caja { animation: none; }
}

/* ===========================================================================
   FORO: COMERCIO Y EDITOR CON FORMATO
   =========================================================================== */

/* ---- El aviso de las reglas, arriba del todo ---- */

.cm-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 12px 16px;
    margin: 0 0 14px;
    border: 1px solid #f3cfcb;
    border-radius: 12px;
    background: #fff5f4;
    color: #8a3b34;
    font-size: 12.5px;
    line-height: 1.6;
}

.cm-aviso__tit {
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #d0544a;
    flex: 0 0 auto;
}

.cm-aviso b { color: #7a2d27; }

/* El de Comercio va en ámbar: no es una regla, es una advertencia. */
.cm-aviso--comercio {
    border-color: #f2ddb8;
    background: #fff9ee;
    color: #7a5a1e;
}

.cm-aviso--comercio .cm-aviso__tit { color: #d08a12; }
.cm-aviso--comercio b { color: #6a4c14; }

/* ---- Pestañas de tipo (Todos / General / Comercio) ---- */

.cm-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.cm-tipo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border: 1px solid #d8e2ea;
    border-radius: 999px;
    background: #fff;
    color: #3c5771;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cm-tipo:hover { border-color: #b9d4ea; background: #f7fbfe; }

.cm-tipo__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef3f8;
    color: #7a8fa3;
    font-size: 10.5px;
}

/* La pestaña activa se pinta del color de su sección: general en azul y
   comercio en verde, los mismos que llevan las etiquetas de cada tema. Así se
   sabe qué se está mirando sin leer. */
.cm-tipo.is-on {
    background: linear-gradient(180deg, #4d8ff7, #2f6fd0);
    border-color: #2f6fd0;
    color: #fff;
}

.cm-tipo.is-on .cm-tipo__n { background: rgba(255, 255, 255, 0.24); color: #fff; }

.cm-tipo--comercio.is-on {
    background: linear-gradient(180deg, #4cc07a, #2f9e5c);
    border-color: #2f9e5c;
}

/* ---- La etiqueta de cada tema en la lista ---- */

.cm-chip {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 6px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.5px;
    color: #fff;
    vertical-align: 1px;
}

.cm-chip--comercio { background: linear-gradient(180deg, #4cc07a, #2f9e5c); }
.cm-chip--general  { background: linear-gradient(180deg, #5d8ec9, #3d6ea8); }

/* ---- El selector de tipo al publicar ---- */

.nt-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.nt-tipos .input-group { flex: 1 1 180px; }

/* ===========================================================================
   EL EDITOR

   Se monta sobre un <textarea> que ya funciona: `assets/js/editor.js` lo
   esconde y pone delante la barra y el lienzo. Mientras el JS no haya
   arrancado, `.ed` no lleva `is-listo` y se ve el textarea de siempre — por
   eso el textarea solo se esconde con esa clase, y no de entrada: si se
   ocultara siempre, un fallo del script dejaría el formulario sin nada donde
   escribir.
   =========================================================================== */

.ed {
    border: 1px solid #d8e2ea;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.ed.is-listo .ed__fuente {
    /* Ni `display:none` ni `hidden`: algunos navegadores se saltan la
       validación del formulario en campos ocultos del todo, y este campo sigue
       siendo el que se envía. Se saca de la vista sin desaparecer. */
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ed__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #fbfdff, #f2f7fb);
    border-bottom: 1px solid #e4ecf3;
}

.ed__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #4a637c;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.ed__btn:hover { background: #e4eef7; color: #1d3e5e; }
.ed__btn:active { background: #d4e6f5; }
.ed__btn svg { width: 16px; height: 16px; }

/* Cada botón se ve como lo que hace: la B en negrita, la I en cursiva... */
.ed__btn.ed-b { font-weight: 800; }
.ed__btn.ed-i { font-style: italic; font-family: Georgia, serif; }
.ed__btn.ed-u { text-decoration: underline; }
.ed__btn.ed-s { text-decoration: line-through; }

.ed__sep {
    width: 1px;
    height: 20px;
    margin: 0 5px;
    background: #dde7ef;
}

.ed__lienzo {
    min-height: 130px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #22405c;
    outline: 0;
}

.ed__lienzo:focus { box-shadow: inset 0 0 0 2px rgba(77, 143, 247, 0.18); }

/* El texto de ayuda cuando está vacío. `:empty` no basta: el navegador deja un
   `<br>` dentro en cuanto se pulsa una tecla y se vuelve a borrar. */
.ed__lienzo:empty::before {
    content: attr(data-vacio);
    color: #9aadbd;
}

/* El formato dentro del editor se ve YA como se va a publicar. */
.ed__lienzo h2,
.fp-rico h2 {
    margin: 10px 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #1d3e5e;
}

.ed__lienzo blockquote,
.fp-rico blockquote {
    margin: 8px 0;
    padding: 8px 14px;
    border-left: 3px solid #b9d4ea;
    background: #f5f9fc;
    color: #4a637c;
    font-style: italic;
}

.ed__lienzo ul, .ed__lienzo ol,
.fp-rico ul, .fp-rico ol { margin: 8px 0 8px 22px; }

.ed__lienzo li, .fp-rico li { margin-bottom: 3px; }

.ed__lienzo p, .fp-rico p { margin: 0 0 8px; }
.ed__lienzo p:last-child, .fp-rico p:last-child { margin-bottom: 0; }

.fp-rico a { color: #1b86c9; text-decoration: underline; }

/* Una palabra larguísima sin espacios (una URL pegada) no puede ensanchar el
   mensaje y sacar la página de cuadro. */
.ed__lienzo, .fp-rico { overflow-wrap: break-word; word-break: break-word; }

.ed__pie {
    display: flex;
    justify-content: flex-end;
    padding: 5px 12px;
    border-top: 1px solid #eef3f8;
    background: #fbfdff;
    font-size: 11px;
    color: #9aadbd;
}

/* Pasarse del tope no bloquea nada aquí: lo dice el servidor con un mensaje
   claro. Esto solo avisa antes de darle a publicar. */
.ed__pie.is-pasado { color: #c0392b; font-weight: 700; }

@media (max-width: 620px) {
    .ed__lienzo { min-height: 110px; font-size: 13px; }
    .ed__btn { min-width: 28px; height: 28px; }
    .cm-tipo { padding: 7px 13px; font-size: 12px; }
}


/* =========================================================================
   CONFIRMAR EL CORREO
   =========================================================================
   El aviso que ve quien no ha confirmado, y la pagina a la que lleva el
   enlace del correo.

   DOS TONOS A PROPOSITO, y es la diferencia que pidio el usuario:

     is-bloqueo  cuenta nueva: de verdad NO puede entrar al juego hasta
                 confirmar. Naranja de alerta.
     is-invita   cuenta de las 4.691 que ya existian: entra a jugar como
                 siempre. Azul tranquilo. Decirle "no puedes jugar" seria
                 mentira, y asustarle sin motivo es perder a un veterano
                 por nada.
   ========================================================================= */

.gb-correo-aviso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 18px;
    padding: 15px 17px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(13, 27, 58, .72);
    color: #dfe6f5;
    font-size: 14px;
    line-height: 1.55;
}

/* La barra de color de la izquierda es lo unico que distingue los dos casos:
   el mismo bloque, distinto peso. */
.gb-correo-aviso.is-bloqueo {
    border-left: 4px solid #ff7518;
    background: rgba(58, 31, 10, .55);
}

.gb-correo-aviso.is-invita {
    border-left: 4px solid #4a9fd8;
}

.gb-correo-aviso__ico {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    color: #ff7518;
}

.gb-correo-aviso.is-invita .gb-correo-aviso__ico { color: #4a9fd8; }
.gb-correo-aviso__ico svg { width: 100%; height: 100%; }

.gb-correo-aviso__texto { flex: 1 1 auto; min-width: 0; }
.gb-correo-aviso__texto b { color: #fff; }
.gb-correo-aviso__texto p { margin: 5px 0 0; color: #b9c2d8; }

.gb-correo-aviso__acciones {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    min-width: 170px;
}

.gb-correo-aviso__acciones button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* El "¿el correo esta mal?" va plegado para que no compita con el boton
   principal, que es lo que necesita la mayoria. */
.gb-correo-aviso__otro summary {
    cursor: pointer;
    font-size: 12.5px;
    color: #9fb0cc;
    text-align: center;
    list-style: none;
}

.gb-correo-aviso__otro summary::-webkit-details-marker { display: none; }
.gb-correo-aviso__otro summary:hover { color: #fff; }

.gb-correo-aviso__otro form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.ev-correo-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 13px;
}

.ev-correo-input:focus {
    outline: none;
    border-color: #ff7518;
}

@media (max-width: 760px) {
    .gb-correo-aviso { flex-wrap: wrap; }
    .gb-correo-aviso__acciones { min-width: 100%; }
}


/* ---- La pagina del enlace ---- */
.gb-verif {
    display: flex;
    justify-content: center;
    padding: 26px 12px 40px;
}

.gb-verif__caja {
    width: 100%;
    max-width: 470px;
    padding: 32px 30px 28px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(13, 27, 58, .8);
    text-align: center;
    color: #dfe6f5;
}

.gb-verif__caja.is-ok  { border-top: 4px solid #4fb173; }
.gb-verif__caja.is-mal { border-top: 4px solid #ff7518; }

.gb-verif__icono { width: 54px; height: 54px; margin: 0 auto 14px; }
.gb-verif__icono svg { width: 100%; height: 100%; }
.gb-verif__caja.is-ok  .gb-verif__icono { color: #4fb173; }
.gb-verif__caja.is-mal .gb-verif__icono { color: #ff7518; }

.gb-verif h1 { margin: 0 0 10px; font-size: 23px; color: #fff; }
.gb-verif__msg { margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.gb-verif__sub { margin: 0 0 20px; font-size: 13.5px; color: #b9c2d8; }

.gb-verif__botones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}


/* El portal solo tenia alert-success, alert-error y alert-info; los avisos
   de confirmacion usan tambien el de advertencia. */
.alert-warning {
    background: rgba(255, 117, 24, .14);
    border: 1px solid rgba(255, 117, 24, .45);
    color: #ffd2a8;
}