/* ==========================================================================
   PRIME CHAMPIONS · MENÚ PRINCIPAL
   --------------------------------------------------------------------------
   Estructura nueva: se retira la barra lateral (robaba ancho y separaba la
   marca del resto) y se pasa a una columna única con barra superior fija,
   tarjeta de manager y secciones de tarjetas grandes con arte propio.
   ========================================================================== */

#menu {
    padding: 0;
    display: block;
    min-height: 100dvh;
}

.appShell {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 26px);
    padding: clamp(12px, 2vw, 22px) clamp(12px, 4vw, 56px) clamp(28px, 4vw, 56px);
    max-width: 1560px;
    margin-inline: auto;
}

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */
.appBar {
    position: sticky;
    top: clamp(8px, 1.5vw, 16px);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    padding: 10px clamp(12px, 1.6vw, 20px);
    border-radius: var(--pc-radio-lg);
    border: 1px solid var(--pc-borde);
    background: color-mix(in srgb, var(--pc-superficie) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: var(--pc-sombra-2);
}

.appBrand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    min-height: 48px;
    background: none;
    border: none;
    flex-shrink: 0;
}

.appLogo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px var(--pc-glow));
}

.appBrandText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.appBrandTitle {
    font-family: var(--pc-fuente-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.appBrandSub {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.26em;
}

.appNav {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.appNav::-webkit-scrollbar { display: none; }

.appNav .eaNavItem {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: var(--pc-t-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pc-texto-suave);
    background: transparent;
    border: none;
    white-space: nowrap;
}

.appNav .eaNavItem.activo { color: var(--pc-texto) !important; }

.appBarUtiles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.eaControlBtn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--pc-t-xs);
    font-weight: 700;
    gap: 7px;
}

.eaControlBtn--tema { padding-right: 8px; }

.eaSwitchTrack {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-primario) 30%, transparent);
    border: 1px solid var(--pc-borde-fuerte);
    flex-shrink: 0;
}

.eaSwitchThumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pc-primario-alt);
    transition: transform var(--pc-normal) var(--pc-salida);
}

html.modo-claro .eaSwitchThumb { transform: translateX(16px); }

/* ==========================================================================
   TARJETA DEL MANAGER
   Antes estaba todo apretado en una fila; ahora identidad a la izquierda y
   métricas en tiles independientes que respiran.
   ========================================================================== */
.managerBar {
    display: grid;
    grid-template-columns: minmax(240px, auto) minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 24px);
    border-radius: var(--pc-radio-lg);
    border: 1px solid var(--pc-borde);
    background:
        radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, var(--pc-primario) 16%, transparent), transparent 62%),
        linear-gradient(150deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%);
    box-shadow: var(--pc-sombra-2);
}

html.modo-claro .managerBar {
    background:
        radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, var(--pc-primario) 9%, transparent), transparent 62%),
        linear-gradient(150deg, #ffffff 0%, #f7f2ff 100%);
}

.managerIdentidad {
    display: flex;
    align-items: center;
    gap: var(--pc-e4);
    padding: 4px;
    min-height: auto;
    background: none;
    border: none;
    text-align: left;
    min-width: 0;
}

.managerIdentidad:hover .managerNombre { color: var(--pc-primario-alt); }
html.modo-claro .managerIdentidad:hover .managerNombre { color: var(--pc-primario); }

.managerEscudo {
    position: relative;
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    padding: 6px;
    background: color-mix(in srgb, var(--pc-fondo) 60%, transparent);
    border: 1px solid var(--pc-borde-fuerte);
    box-shadow: 0 6px 20px var(--pc-glow-suave);
}

.managerEscudo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.managerDatos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.managerNombreFila {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.managerNombre {
    font-family: var(--pc-fuente-display);
    font-size: var(--pc-t-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pc-texto);
    transition: color var(--pc-normal);
    overflow-wrap: anywhere;
}

.managerClub {
    font-size: var(--pc-t-sm);
    color: var(--pc-texto-suave);
    overflow-wrap: anywhere;
}

.eaBadgeVerified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--pc-t-2xs);
    padding: 3px 9px;
}

.managerMetricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: var(--pc-e2);
    min-width: 0;
}

.metricaTile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 62px;
    padding: 10px 14px;
    border-radius: var(--pc-radio-sm);
    border: 1px solid var(--pc-borde);
    background: color-mix(in srgb, var(--pc-fondo) 45%, transparent);
    text-align: left;
    min-width: 0;
}

html.modo-claro .metricaTile { background: color-mix(in srgb, var(--pc-primario) 5%, #ffffff); }

.metricaEtiqueta {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
    white-space: nowrap;
}

.metricaValor {
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-lg);
    font-weight: 700;
    color: var(--pc-texto);
    line-height: 1.1;
    white-space: nowrap;
}

.metricaValor--oro { color: var(--pc-oro); }

.metricaPie {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--pc-texto-suave);
    white-space: nowrap;
}

/* Multiplicador activo: el tile se enciende solo cuando hay boost. */
.metricaTile--mult.activo {
    border-color: color-mix(in srgb, var(--pc-oro) 55%, transparent);
    background: color-mix(in srgb, var(--pc-oro) 12%, transparent);
    animation: pcLatidoMult 2.4s ease-in-out infinite;
}

.metricaTile--mult.activo .metricaValor { color: var(--pc-oro); }

@keyframes pcLatidoMult {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-oro) 30%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc-oro) 0%, transparent); }
}

.metricaTile--patch {
    position: relative;
    cursor: pointer;
    transition: border-color var(--pc-normal), transform var(--pc-normal) var(--pc-salida);
}

.metricaTile--patch:hover {
    border-color: var(--pc-primario);
    transform: translateY(-2px);
}

.metricaTile--patch .metricaValor { font-family: var(--pc-fuente-ui); font-size: var(--pc-t-sm); }

.patchVersionPill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-primario) 22%, transparent);
    color: var(--pc-primario-alt);
    font-family: var(--pc-fuente-datos);
    font-weight: 700;
}

html.modo-claro .patchVersionPill { color: var(--pc-primario); }

.btnPatchPulseDot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc-exito);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-exito) 60%, transparent);
    animation: pcPulsoPatch 2s ease-out infinite;
}

@keyframes pcPulsoPatch {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-exito) 60%, transparent); }
    100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pc-exito) 0%, transparent); }
}

/* ==========================================================================
   CONTENIDO Y SECCIONES
   ========================================================================== */
.appContenido {
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 3.6vw, 52px);
    min-width: 0;
}

.eaSection {
    scroll-margin-top: 100px;
    min-width: 0;
}

.eaSectionTitle {
    display: flex;
    align-items: center;
    gap: var(--pc-e4);
    margin: 0 0 var(--pc-e4);
    font-size: var(--pc-t-sm);
    color: var(--pc-texto-suave);
}

.eaSectionTitle::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--pc-borde-fuerte), transparent);
}

/* ==========================================================================
   TARJETAS DE ACCIÓN CON ARTE
   ========================================================================== */
.rejillaTarjetas {
    display: grid;
    gap: clamp(10px, 1.2vw, 18px);
}

.rejillaTarjetas--principal {
    grid-template-columns: repeat(auto-fit, minmax(min(224px, 100%), 1fr));
}

.rejillaTarjetas--secundaria {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.tarjetaAccion {
    --tono: var(--pc-300);
    position: relative;
    display: block;
    isolation: isolate;
    overflow: hidden;
    min-height: 158px;
    padding: 0;
    border-radius: var(--pc-radio-lg);
    border: 1px solid var(--pc-borde);
    background: var(--pc-superficie);
    box-shadow: var(--pc-sombra-2);
    text-align: left;
    transition:
        transform var(--pc-normal) var(--pc-salida),
        border-color var(--pc-normal),
        box-shadow var(--pc-normal);
}

.tarjetaAccion--compacta { min-height: 124px; }

/* El arte va desenfocado y con poco contraste: es fondo, no protagonista. */
.tarjetaArte {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--arte);
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    opacity: 0.85;
    transition: transform var(--pc-lento) var(--pc-salida), opacity var(--pc-normal);
}

.tarjetaVelo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg, rgba(10, 8, 19, 0.94) 0%, rgba(10, 8, 19, 0.72) 46%, rgba(10, 8, 19, 0.22) 100%),
        linear-gradient(0deg, rgba(10, 8, 19, 0.8) 0%, transparent 62%);
    transition: opacity var(--pc-normal);
}

html.modo-claro .tarjetaVelo {
    background:
        linear-gradient(105deg, rgba(252, 250, 255, 0.95) 0%, rgba(252, 250, 255, 0.74) 48%, rgba(252, 250, 255, 0.24) 100%),
        linear-gradient(0deg, rgba(252, 250, 255, 0.82) 0%, transparent 60%);
}

html.modo-claro .tarjetaArte { opacity: 0.72; }

.tarjetaCuerpo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--pc-e3);
    height: 100%;
    min-height: inherit;
    padding: clamp(14px, 1.6vw, 20px);
}

.tarjetaTexto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tarjetaTexto strong {
    font-family: var(--pc-fuente-display);
    font-size: var(--pc-t-lg);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--pc-texto);
    overflow-wrap: anywhere;
}

.tarjetaTexto small {
    font-size: var(--pc-t-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pc-texto-suave);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tarjetaFlecha {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--pc-texto-suave);
    background: color-mix(in srgb, var(--pc-fondo) 55%, transparent);
    border: 1px solid var(--pc-borde);
    transition: transform var(--pc-normal) var(--pc-salida), color var(--pc-normal), background var(--pc-normal);
}

html.modo-claro .tarjetaFlecha { background: rgba(255, 255, 255, 0.72); }

/* Estados */
.tarjetaAccion:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--tono) 58%, transparent);
    box-shadow: var(--pc-sombra-3), 0 0 0 1px color-mix(in srgb, var(--tono) 40%, transparent);
}

.tarjetaAccion:hover .tarjetaArte { transform: scale(1.14); opacity: 1; }
.tarjetaAccion:hover .tarjetaFlecha {
    transform: translateX(3px);
    color: var(--pc-texto);
    background: color-mix(in srgb, var(--tono) 32%, transparent);
}

.tarjetaAccion:active { transform: translateY(-1px); }

.tarjetaAccion--peligro:hover {
    border-color: color-mix(in srgb, var(--pc-peligro) 62%, transparent);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--pc-peligro) 22%, transparent);
}

/* La pastilla del PillNav sobre la barra horizontal. */
.appNav .pc-pill { border-radius: 12px; }

/* ==========================================================================
   PIE
   ========================================================================== */
.eaFooter {
    margin-top: auto;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .appBar {
        flex-wrap: wrap;
        gap: 10px;
        row-gap: 8px;
    }
    .appNav {
        order: 3;
        flex-basis: 100%;
        padding-top: 4px;
        border-top: 1px solid var(--pc-borde-suave);
    }
    .appBarUtiles { margin-left: auto; }
    .managerBar { grid-template-columns: 1fr; }
    .managerMetricas { grid-template-columns: repeat(auto-fit, minmax(min(140px, 45%), 1fr)); }
}

@media (max-width: 600px) {
    .appShell { gap: 14px; padding-inline: 10px; }
    .appBar { top: 6px; padding: 8px 10px; }
    .appLogo { width: 32px; height: 32px; }
    .appBrandTitle { font-size: 0.92rem; }
    .appBrandSub { font-size: 0.52rem; letter-spacing: 0.2em; }
    .appNav .eaNavItem { padding: 8px 12px; font-size: var(--pc-t-xs); }
    .eaControlBtn { padding: 8px 10px; }
    .eaControlBtn--tema .eaSwitchTrack { display: none; }

    .managerEscudo { width: 52px; height: 52px; border-radius: 15px; }
    .managerNombre { font-size: var(--pc-t-lg); }
    .managerMetricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metricaTile { min-height: 56px; padding: 8px 11px; }
    .metricaValor { font-size: var(--pc-t-md); }

    .tarjetaAccion { min-height: 132px; }
    .tarjetaAccion--compacta { min-height: 108px; }
    .tarjetaTexto strong { font-size: var(--pc-t-md); }
    .tarjetaFlecha { right: 12px; bottom: 12px; width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .tarjetaArte,
    .tarjetaAccion,
    .tarjetaFlecha { transition: none !important; }
    .tarjetaAccion:hover .tarjetaArte { transform: scale(1.06); }
    .metricaTile--mult.activo,
    .btnPatchPulseDot { animation: none !important; }
}

/* La flecha vive en la esquina: el texto necesita margen para no pisarla. */
.tarjetaTexto {
    padding-right: 40px;
}

.tarjetaAccion--compacta .tarjetaTexto {
    padding-right: 36px;
}

/* ==========================================================================
   PESTAÑAS DEL MENÚ
   --------------------------------------------------------------------------
   Las cuatro secciones del menú ya no conviven en una página de 3200px: se
   muestra una por vez y los botones de arriba son pestañas de verdad. El
   contenido no cambió, sólo dejó de estar todo apilado.
   ========================================================================== */
.eaSection--oculta {
    display: none;
}

/* La pestaña activa se marca con una barra abajo, no sólo con color: alguien
   que no distingue bien los tonos igual ve cuál está abierta. */
.eaNavItem {
    position: relative;
}

.eaNavItem.activo::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--pc-primario-alt);
    box-shadow: 0 0 10px var(--pc-glow);
}

/* La sección que entra se funde en lugar de aparecer de golpe. Sólo opacidad:
   moverla obligaría a recalcular el alto de la página en cada fotograma. */
.eaSection:not(.eaSection--oculta) {
    animation: pcSeccionEntra 220ms var(--pc-salida, ease-out) both;
}

@keyframes pcSeccionEntra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .eaSection:not(.eaSection--oculta) { animation: none; }
}