/* ---------------------------------------------------------------------------
   PUENTE AL SISTEMA DE DISEÑO (25-ago-2026)
   Este :root tenía su propia paleta y tipografía, paralela a la de
   sistema.css: cuatro naranjas distintos (#dd8421 aquí, #DD8421 allí, más los
   hardcodeados sueltos del modal y el footer), un gris roto sin definir
   (--cs-gray, --cs-light) y una fuente de titulares (Outfit) que nunca llegó
   a cargarse por <link>, así que cada título que la usaba caía en silencio al
   sans-serif del sistema operativo.

   En vez de reescribir los ~400 usos de estas variables por todo el fichero,
   cada una pasa a ser un ALIAS del token real de sistema.css. Un solo cambio
   aquí corrige toda la web a la vez — el día que se retire este puente del
   todo, sistema.css ya tiene el valor correcto esperando. */
:root {
    --cs-orange: var(--marca);
    --cs-orange-hover: var(--marca-claro);
    --cs-red: var(--mal);
    --cs-green: var(--bien);
    --cs-dark-1: var(--fondo);
    --cs-dark-2: var(--panel);
    --cs-border: var(--linea);
    --cs-gray: var(--texto-3);
    --cs-light: var(--texto);
    --text-primary: var(--texto);
    --text-secondary: var(--texto-2);
    --font-heading: var(--f-titulo);
    --font-body: var(--f-texto);

    /* Ritmo vertical: alias del mismo --seccion de sistema.css. */
    --sec-y: var(--seccion);
    --sec-y-corto: var(--seccion-corta);
    --bloque-y: 2rem;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
}



body {
    background-color: var(--cs-dark-1);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
}

.page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: url('https://cdn.akamai.steamstatic.com/steam/apps/730/page_bg_generated_v6b.jpg') no-repeat center center / cover;
}

.page-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(18, 20, 29, 0.7) 0%, var(--cs-dark-1) 80%);
}

.container {
    max-width: 1440px;
    /* margin-left/right por separado, no el atajo `margin: 0 auto`: cualquier
       regla posterior que fije `margin` (aunque sea para otra cosa) mata el
       `auto` y el bloque deja de centrarse — quedaba pegado a la izquierda
       con un hueco muerto a la derecha. */
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
    /* Sin esto, el padding se suma al max-width y el bloque puede desbordar. */
    box-sizing: border-box;
}

/* Con el menú móvil abierto (panel a pantalla completa), bloquea el scroll
   del fondo — si no, el contenido de la página se desplaza detrás del menú
   y se ve mezclado con sus opciones. */
body.nav-open-lock {
    overflow: hidden;
}

/* Navbar */
.premium-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
    background: rgba(9, 10, 15, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cs-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.nav-logo span {
    color: var(--cs-orange);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--cs-orange), var(--marca-claro, #f0952d));
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(221, 132, 33, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--cs-border);
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-danger {
    background: rgba(235, 75, 75, 0.1);
    color: var(--cs-red);
    border: 1px solid rgba(235, 75, 75, 0.3);
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-danger:hover {
    background: rgba(235, 75, 75, 0.2);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.w-100 {
    width: 100%;
}

/* Hero */
.hero {
    padding: 1.5rem 2rem var(--sec-y-corto);
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeUp 0.8s ease-out;
}

.badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: rgba(221, 132, 33, 0.1);
    color: var(--cs-orange);
    border: 1px solid rgba(221, 132, 33, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-title span {
    color: var(--cs-orange);
}

.hero-subtitle {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Features */
.features {
    /* El HTML usa class="features"; la regla existente era .features-section y
       nunca llegaba a aplicarse, así que este bloque salía sin separación. */
    padding: var(--sec-y) 0;
}

.features-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, transparent, rgba(9, 10, 15, 0.8));
}

.features-accordion {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: 800px;
    margin: 0 auto;
}

.feature-card-accordion {
    background: var(--cs-dark-2);
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    height: 80px;
}

.feature-card-accordion:hover {
    height: 180px;
    border-color: var(--cs-orange);
    background: rgba(221, 132, 33, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.feature-accordion-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem;
    height: 80px;
}

.feature-accordion-icon {
    width: 32px;
    height: 32px;
    color: var(--cs-orange);
    flex-shrink: 0;
}

.feature-accordion-header h3 {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    margin: 0;
    color: var(--cs-light);
    transition: color 0.3s;
}

.feature-card-accordion:hover .feature-accordion-header h3 {
    color: var(--cs-orange);
}

.feature-accordion-content {
    padding: 0 2rem 2rem 5rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1.05rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s;
}

.feature-card-accordion:hover .feature-accordion-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

@media (max-width: 768px) {
    .feature-card-accordion:hover {
        height: 220px;
    }
    .feature-accordion-content {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}

/* Ranking Section */
.ranking-section {
    padding: 4rem 0 8rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
}

.search-wrapper {
    position: relative;
    width: 300px;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.search-wrapper input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    background: var(--cs-dark-2);
    border: 1px solid var(--cs-border);
    color: white;
    border-radius: 4px;
    font-family: var(--font-body);
}

.search-wrapper input:focus {
    outline: none;
    border-color: var(--cs-orange);
}

/* Table */
.table-wrapper {
    background: var(--cs-dark-2);
    border-radius: 8px;
    border: 1px solid var(--cs-border);
    overflow-x: auto;
}

.esports-table {
    width: 100%;
    border-collapse: collapse;
}

.esports-table th {
    text-align: left;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cs-border);
    background: rgba(0, 0, 0, 0.2);
}

.esports-table td {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.esports-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.esports-table td:first-child {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--text-secondary);
}

.player-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid var(--cs-border);
}

.player-name {
    font-weight: 600;
    font-size: 1rem;
}

.steam-id {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.cs2-rating {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
}

/* Admin */
.admin-dashboard {
    background: rgba(235, 75, 75, 0.03);
    border: 1px solid rgba(235, 75, 75, 0.2);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.admin-header svg {
    width: 24px;
    height: 24px;
}

.admin-header h3 {
    color: var(--cs-red);
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.admin-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.rcon-console {
    display: flex;
    gap: 1rem;
}

.rcon-console input {
    flex: 1;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    color: white;
    padding: 0.8rem;
    border-radius: 4px;
}

.rcon-output {
    background: #000;
    color: #00ff00;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    font-size: 0.85rem;
    border: 1px solid #333;
    min-height: 40px;
}

/* Modal Cyber-Glass */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4000;
}

.modal-content {
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    padding: 2.5rem;
    border-radius: var(--radio-max, 10px);
    width: 100%;
    max-width: 400px;
    position: relative;
    box-shadow: var(--sombra-alta, 0 12px 32px rgba(0,0,0,.55)), 0 0 20px rgba(221, 132, 33, 0.1);
}

/* Modal de login/registro: más ancho que el genérico para que los campos
   respiren y el botón de Steam secundario no se vea apretado. */
.modal-content-auth {
    max-width: 460px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.modal-header h3 {
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: var(--cs-red);
}

.modal-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-group input {
    box-sizing: border-box;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.9rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: border 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--cs-orange);
    box-shadow: 0 0 10px rgba(221, 132, 33, 0.2);
}

.error-text {
    color: var(--cs-red);
    font-size: 0.85rem;
    margin-top: 1rem;
    text-align: center;
}

.success-text {
    color: #00ff00;
    font-size: 0.9rem;
    margin-top: 1rem;
    text-align: center;
}

.hidden {
    display: none !important;
}

/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cs-border);
    padding-bottom: 0.5rem;
}

.auth-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
}

.auth-tab:hover {
    color: white;
}

.auth-tab.active {
    color: var(--cs-orange);
    border-bottom: 2px solid var(--cs-orange);
}

/* User Dashboard */
.user-dashboard {
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-radius: var(--radio, 6px);
    padding: 2rem;
    margin-bottom: 2rem;
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--linea-suave, #1E222A);
    padding-bottom: 1rem;
}

.dashboard-header svg {
    width: 24px;
    height: 24px;
    color: var(--texto, #E8EAED);
}

.dashboard-header h3 {
    color: var(--texto, #E8EAED);
    font-family: var(--f-titulo);
    text-transform: uppercase;
    letter-spacing: var(--track-mayus, .08em);
    font-size: 1.2rem;
}

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.user-info-box p {
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}

.user-info-box strong {
    color: white;
}

.steam-status {
    color: var(--cs-orange);
    font-family: monospace;
}

.steam-link-box h4 {
    color: white;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}

.steam-link-box p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.flex-row {
    display: flex;
    gap: 0.5rem;
}

.flex-row input {
    flex: 1;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    color: white;
    padding: 0.8rem;
    border-radius: 4px;
}

/* Admin Panel */
.admin-dashboard {
    background: rgba(0, 0, 0, 0.5);
    /* Borde en el naranja de la marca, no rojo (2026-08-24): el rojo es el
       color de peligro/error del sitio y aquí no comunicaba nada — solo
       desentonaba con el resto de la web. */
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1rem;
}

.admin-header svg {
    width: 24px;
    height: 24px;
    color: var(--cs-orange);
}

.admin-header h3 {
    color: white;
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.admin-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cs-border);
    padding-bottom: 0.5rem;
    overflow-x: auto;
}

.admin-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
    white-space: nowrap;
}

.admin-tab:hover {
    color: white;
}

.admin-tab.active {
    color: var(--cs-orange);
    border-bottom: 2px solid var(--cs-orange);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.admin-table th {
    color: white;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.85rem;
}

.table-container {
    overflow-x: auto;
}

.btn-toggle-admin {
    background: none;
    border: 1px solid var(--cs-border);
    color: white;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-toggle-admin.is-admin {
    border-color: var(--cs-red);
    color: var(--cs-red);
}

.features-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.features-header svg {
    width: 24px;
    height: 24px;
    color: var(--cs-orange);
}

.features-header h2 {
    font-size: 1.2rem;
    color: var(--texto, #E8EAED);
    font-family: var(--font-heading);
}

.news-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.news-card {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-left: 3px solid var(--marca, #DD8421);
    padding: 1.5rem;
    border-radius: var(--radio, 6px);
    max-width: 900px;
    width: 100%;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.news-card:hover {
    border-color: var(--marca-borde, rgba(221,132,33,.35));
    box-shadow: 0 0 18px rgba(221,132,33,.1);
}

.news-image {
    flex: 0 0 30%;
}

.news-image img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--radio-min, 3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.news-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-title {
    color: var(--texto, #E8EAED);
    font-family: var(--f-titulo);
    text-transform: uppercase;
    letter-spacing: var(--track-mayus, .08em);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.news-date {
    color: var(--texto-3, #808690);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.news-content {
    color: var(--texto-2, #9AA1AC);
    line-height: 1.6;
}

/* Footer */
.site-footer {
    background: linear-gradient(to top, var(--fondo, #0B0D11) 0%, var(--panel, #13161C) 100%);
    border-top: 1px solid var(--marca-borde, rgba(221,132,33,.35));
    padding: 3rem 0 0 0;
    margin-top: 4rem;
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.fade-in {
    animation: fadeUp 0.8s ease-out;
}

/* ================= MAIN CENTERED HEADER ================= */
.header-fixed-group {
    position: sticky;
    top: 0;
    z-index: 2005;
    width: 100%;
}
.main-header {
    width: 100%;
    height: auto;
    padding-top: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* ================= SHOWCASE CAROUSEL ================= */
.carousel-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.05);
    display: flex;
    align-items: flex-end;
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

.carousel-content {
    background: linear-gradient(to top, rgba(13, 17, 23, 0.95) 0%, rgba(13, 17, 23, 0.7) 60%, transparent 100%);
    width: 100%;
    padding: 4rem 3rem 2rem;
    text-align: left;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.6;
    text-transform: none;
    letter-spacing: normal;
}

.carousel-content h3 {
    color: var(--cs-orange);
    font-size: clamp(1.25rem, 2.6vw, 1.55rem);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.carousel-content p {
    color: #e2e8f0;
    font-size: .98rem;
    max-width: 700px;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 20px;
    padding: 12px 18px;
    cursor: pointer;
    z-index: 10;
    border-radius: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.carousel-btn:hover {
    background: var(--cs-orange);
    border-color: var(--cs-orange);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev {
    left: 15px;
}

.carousel-btn.next {
    right: 15px;
}

.carousel-dots {
    position: absolute;
    /* Había un `bottom: 20px` seguido de un `bottom: 0` que lo anulaba: los
       puntos acababan pegados al filo inferior. Se deja un solo valor. */
    bottom: 18px;
    right: 30px;
    z-index: 10;
    display: flex;
    gap: 10px;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.carousel-dots .dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.carousel-dots .dot.active {
    background: var(--cs-orange);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--cs-orange);
}

.header-background {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: -70px;   /* se extiende por detrás del header-nav, sin hueco */
    z-index: 0;
    /* La imagen (826x398) tiene los ojos/gafas de los personajes sobre el
       20-35% vertical. `center top` (0%) cortaba justo por encima, dejando
       ver casco/capucha pero no las caras. 20% ancla ahí sin perder tanto
       margen superior como para desencuadrar del todo. */
    background: url('img/user_banner.webp') no-repeat center 20% / cover;
}

.header-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: -70px;   /* mismo alcance que .header-background: cubre también el nav */
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(15, 17, 26, 1) 100%);
}

.header-logo {
    position: relative;
    z-index: 10;
    bottom: 0;
    margin-bottom: 0;
    /* Pegado al menú, sin hueco entre el banner y la barra. */
}

.header-logo img {
    height: 160px;
    /* Antes 300px: el header consumía tanta altura que el carrusel de abajo
       quedaba cortado sin hacer scroll en la primera pantalla. */
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9));
    transition: transform 0.3s;
}

.header-logo img:hover {
    transform: scale(1.02);
}

.header-nav {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.7rem 1.5rem;
    background: transparent;
    border-bottom: 1px solid var(--cs-border);
    box-sizing: border-box;
}
.nav-auth { position: absolute; right: 1.5rem; }
.header-nav-link.active-tab {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.header-nav-link.active-tab::after {
    content: "";
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    bottom: 0.3rem;
    height: 2px;
    background: var(--cs-orange);
    border-radius: 2px;
}
.header-btn-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.75rem 1.6rem;
    border-radius: 8px;
    background: var(--cs-orange);
    color: #0e1117;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
}
.header-btn-auth:hover { background: var(--cs-orange-hover); }
.header-btn-auth:hover { background: var(--cs-orange-hover); }

.main-content {
    width: 100%;
    min-height: 100vh;
    margin-left: 260px;
    transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   MENÚ LATERAL FIJO — "Tactical Bento 2026" (26-ago-2026)
   Reutiliza main-nav-tab + data-target: el router de script.js ya sabe
   manejar estos enlaces sin ningún cambio de JS.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-lateral {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: var(--panel, #13161C);
    border-right: 1px solid var(--linea, #262B35);
    display: flex;
    flex-direction: column;
    padding: 1.6rem 0;
    z-index: 1500;
}

.nav-lateral-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 1.4rem 1.4rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid var(--linea, #262B35);
}
.nav-lateral-logo { width: 40px; height: 40px; flex-shrink: 0; }
.nav-lateral-texto { display: flex; flex-direction: column; line-height: 1.2; }
.nav-lateral-nombre {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--texto, #E8EAED);
}
.nav-lateral-slogan {
    font-family: var(--f-cifra, monospace);
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--texto-3, #808690);
    text-transform: uppercase;
}

.nav-lateral-links {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 0 .9rem;
    flex: 1;
}
.nav-lateral-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem .9rem;
    border-radius: 6px;
    border-left: 3px solid transparent;
    /* La regla base `a { border-bottom: ... }` de sistema.css (pensada para
       enlaces de texto en párrafos) se colaba bajo cada ítem del menú —
       corregido explícitamente aquí (26-ago-2026). */
    border-bottom: none;
    font-family: var(--f-titulo, sans-serif);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--texto-2, #9AA1AC);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-lateral-link svg { width: 19px; height: 19px; flex-shrink: 0; }
.nav-lateral-link:hover {
    background: var(--panel-hover, #1F242D);
    color: var(--texto, #E8EAED);
}
.nav-lateral-link.active-tab {
    background: var(--marca-tenue, rgba(221,132,33,.12));
    border-left-color: var(--marca, #DD8421);
    color: var(--marca, #DD8421);
}

.nav-lateral-pie { padding: 1rem .9rem 0; border-top: 1px solid var(--linea, #262B35); margin-top: .6rem; }
.nav-lateral-vip {
    border: 1px solid var(--oro-borde, rgba(201,162,39,.35));
    border-left: 3px solid var(--oro, #C9A227);
    color: var(--oro, #C9A227);
    justify-content: center;
}
.nav-lateral-vip:hover {
    background: var(--oro-tenue, rgba(201,162,39,.12));
    color: var(--oro-claro, #F3D052);
}

/* La web bloquea móvil por completo (mobile-blocker), así que el menú
   lateral no necesita colapsar: solo existe en el escritorio que ya asumen
   el resto de anchos fijos de la página (contenedor de 1180px, etc). */

/* Con el panel lateral (Mi Panel) abierto, el contenido se recoloca para
   quedar centrado en el espacio visible en vez de bajo el panel. */
body.panel-abierto .main-content {
    padding-right: 320px;
}
@media (max-width: 1100px) {
    /* En pantallas estrechas el panel se superpone: no recolocamos. */
    body.panel-abierto .main-content {
        padding-right: 0;
    }
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    background: transparent;
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    cursor: pointer;
}

.nav-hamburger span {
    display: block;
    height: 2px;
    width: 20px;
    margin: 0 auto;
    background: var(--text-secondary);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-nav.nav-open .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-nav.nav-open .nav-hamburger span:nth-child(2) {
    opacity: 0;
}

.header-nav.nav-open .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    .main-header {
        height: auto;
        min-height: 350px;
    }

        /* La imagen (826x398, muy panorámica) no cabe en un contenedor
           estrecho y alto sin recortar las caras de los personajes por
           arriba o por los lados. En vez de forzarla, degradado sólido. */
        .header-background {
            background: linear-gradient(180deg, #1a1408 0%, var(--cs-dark-1, #090a0f) 100%);
        }

        /* ================= NEW HERO STYLE ================= */
        .hero-title-styled {
            font-family: var(--font-heading);
            font-size: clamp(2.1rem, 5vw, 3rem);
            font-weight: 800;
            color: white;
            text-transform: none;
            /* No all-caps */
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(221, 132, 33, 0.4);
            letter-spacing: -1px;
            margin-bottom: 1rem;
        }

        .hero-title-styled span {
            color: var(--cs-orange);
            font-style: italic;
        }

        /* ================= FLOW MAP (CÓMO FUNCIONA) ================= */
        .flow-map {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 2rem;
            position: relative;
            padding: 2rem 0;
        }

        .flow-map::before {
            content: '';
            position: absolute;
            top: 50px;
            left: 5%;
            right: 5%;
            height: 4px;
            background: linear-gradient(90deg, rgba(221, 132, 33, 0.1) 0%, var(--cs-orange) 50%, rgba(221, 132, 33, 0.1) 100%);
            z-index: 0;
        }

        .flow-step {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .flow-icon {
            width: 80px;
            height: 80px;
            background: var(--bg-card);
            border: 3px solid var(--cs-orange);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            box-shadow: 0 0 20px rgba(221, 132, 33, 0.3);
            margin-bottom: 1.5rem;
            transition: transform 0.3s;
        }

        .flow-step:hover .flow-icon {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(221, 132, 33, 0.6);
        }

        .flow-step h3 {
            color: white;
            font-family: var(--font-heading);
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .flow-step p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        @media (max-width: 900px) {
            .flow-map {
                flex-direction: column;
                align-items: center;
            }

            .flow-map::before {
                display: none;
            }

            .flow-step {
                width: 100%;
                max-width: 400px;
                margin-bottom: 2rem;
            }
        }

        .header-logo img {
            height: 130px;
        }

        .header-nav {
            flex-direction: column;
            align-items: stretch;
            position: relative;
        }

        .nav-hamburger {
            display: flex;
        }

        .nav-links,
        .nav-auth {
            display: none;
            flex-direction: column;
            width: 100%;
        }

        /* El menú desplegado en móvil es un panel fijo a pantalla completa,
           no parte del flujo normal del header sticky: si no, al hacer
           scroll con el menú abierto, el contenido de la página se ve por
           debajo mezclado con las opciones del menú (ver bug 24-ago-2026). */
        .header-nav.nav-open {
            position: fixed;
            inset: 0;
            z-index: 2100;
            background: var(--cs-dark-1, #0e1117);
            overflow-y: auto;
            flex-direction: column;
            padding-bottom: 2rem;
        }
        .header-nav.nav-open .nav-links,
        .header-nav.nav-open .nav-auth {
            display: flex;
            position: static;
        }

        .header-nav-link {
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            text-align: center;
        }

        .nav-auth {
            position: relative;
        }

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

/* User Sidebar */
.sidebar-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    z-index: 3999;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.sidebar-overlay.active {
    opacity: 1; visibility: visible;
}
.sidebar {
    position: fixed;
    /* --header-h la fija script.js midiendo el header real; con fallback
       por si el JS aún no ha corrido. */
    top: var(--header-h, 65px);
    right: -350px;
    width: 320px;
    height: calc(100vh - var(--header-h, 65px));
    background: var(--cs-dark-1);
    border-left: 1px solid var(--cs-border);
    z-index: 4000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.8);
}
.sidebar.open {
    right: 0;
}

@media (max-width: 768px) {
    .sidebar {
        top: 0 !important;
        height: 100vh !important;
        width: 100%;
        max-width: 320px;
        z-index: 4000;
    }
}

.sidebar-header {
    padding: 2rem;
    border-bottom: 1px solid var(--cs-border);
    background: rgba(255,255,255,0.02);
}

.sidebar-user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar-frame {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cs-orange), var(--marca-claro, #f0952d));
    padding: 3px;
    box-shadow: 0 0 15px rgba(221, 132, 33, 0.4);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cs-dark-2);
}

.avatar-wrapper {
    position: relative;
    display: inline-block;
}

.level-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--cs-dark-1);
    color: var(--cs-orange);
    font-size: 0.75rem;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--cs-orange);
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    z-index: 10;
    bottom: 0;
    font-family: var(--font-heading);
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.role-tag {
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--panel-alto, #1A1E26);
    padding: 3px 8px;
    border-radius: var(--radio-min, 3px);
    display: inline-block;
    align-self: flex-start;
    border: 1px solid var(--linea, #262B35);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.special-username {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
    background: linear-gradient(90deg, #ffffff, var(--cs-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    text-shadow: 0px 4px 20px rgba(221, 132, 33, 0.4);
    letter-spacing: 0.5px;
}
.sidebar-nav {
    flex: 1; padding: 2rem 0; overflow-y: auto;
}
.nav-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 2.5rem;
    padding: 0 1.5rem;
}
.nav-section h5 {
    color: var(--cs-gray);
    font-size: 0.8rem; letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.sidebar-link {
    display: flex; align-items: center; gap: 15px;
    padding: 1.2rem;
    background: var(--cs-dark-2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: var(--cs-light);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.sidebar-link:hover {
    transform: translateY(-2px);
    background: rgba(221, 132, 33, 0.05);
    border-color: rgba(221, 132, 33, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: var(--cs-orange);
}
.sidebar-link svg {
    width: 22px; height: 22px;
    color: var(--cs-orange);
    opacity: 0.9;
}
.sidebar-link:hover svg {
    opacity: 1;
}
.sidebar-link.active { background: rgba(221,132,33,0.1); border-color: var(--cs-orange); color: var(--cs-orange); }

/* ==========================================================================
   PANEL DE GESTIÓN DEL SERVIDOR CS2
   Se apoya en los tokens ya existentes (--cs-orange, --cs-red, --cs-dark-*)
   para que el panel se lea como parte de la misma web, no como un añadido.
   ========================================================================== */

/* Caja base del panel. Se usaba en admin.html pero nunca llegó a existir. */
.panel-box {
    background: var(--panel-alto, #1A1E26);
    border: 1px solid var(--linea, #262B35);
    border-radius: var(--radio, 6px);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.panel-box > label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-orange);
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.rcon-input-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rcon-input-group input {
    flex: 1 1 16rem;
    min-width: 0;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.rcon-input-group input:focus {
    outline: none;
    border-color: var(--cs-orange);
}

.rcon-response {
    margin-top: 0.85rem;
    padding: 0.85rem;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 20rem;
    overflow-y: auto;
    min-height: 2.5rem;
}

/* --- Tarjetas de estado --- */

.srv-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.srv-tile {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.srv-tile-label {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}

.srv-tile-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* El estado se distingue por forma y color, no solo por color. */
.srv-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.srv-dot-on { background: #4fbf8b; box-shadow: 0 0 0 3px rgba(79, 191, 139, 0.18); }
.srv-dot-off { background: var(--cs-red); box-shadow: 0 0 0 3px rgba(235, 75, 75, 0.18); }
.srv-dot-unknown { background: var(--text-secondary); }
/* Degradado: el sistema responde pero algo no va bien (p. ej. el anti-cheat
   cargado pero sin su librería de trazado, o lanzando excepciones). */
.srv-dot-medio { background: var(--cs-orange); box-shadow: 0 0 0 3px rgba(221, 132, 33, 0.18); }

/* --- Botonera --- */

.srv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.srv-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.srv-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.srv-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.srv-field span {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}

.srv-field select {
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 0.65rem 0.8rem;
    font-family: inherit;
    font-size: 0.92rem;
    min-width: 11rem;
}

.srv-field select:focus {
    outline: none;
    border-color: var(--cs-orange);
}

/* --- Etiquetas y textos auxiliares --- */

.srv-badge {
    display: inline-block;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

.srv-badge-bot { background: rgba(221, 132, 33, 0.15); color: var(--cs-orange); border: 1px solid var(--cs-orange); }
.srv-badge-human { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); border: 1px solid var(--cs-border); }
.srv-badge-owner { background: rgba(255, 70, 85, 0.15); color: var(--cs-red); border: 1px solid var(--cs-red); }

/* Selector de rol dentro de la tabla de usuarios del panel admin. */
.rol-select {
    background: var(--cs-dark-1);
    color: #fff;
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.rol-select:hover { border-color: var(--cs-red); }
.rol-select:focus { outline: none; border-color: var(--cs-red); }

/* Fila de un usuario bloqueado: un tinte rojo tenue para localizarlo de un vistazo. */
.fila-bloqueada { background: rgba(255, 70, 85, 0.06); }
.fila-bloqueada td:first-child { border-left: 3px solid var(--cs-red); }

.srv-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

.srv-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: -0.35rem 0 0.9rem;
}

/* Aviso dentro de un bloque del panel: el reinicio arrastra consecuencias
   (echa a los jugadores y puede dejar el anti-cheat sin proteger) y eso tiene
   que leerse antes de pulsar, no en el diálogo de confirmación. Toma los
   colores de las variables del sistema, no valores sueltos. */
.srv-hint-aviso {
    color: var(--text-primary);
    background: var(--cs-dark-1);
    border-left: 3px solid var(--cs-orange);
    border-radius: 0 3px 3px 0;
    padding: 0.6rem 0.85rem;
    margin: 0 0 0.9rem;
}

.srv-hint code {
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-size: 0.9em;
    color: var(--cs-orange);
}

.srv-feedback {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.srv-feedback.is-ok {
    background: rgba(79, 191, 139, 0.12);
    border: 1px solid rgba(79, 191, 139, 0.5);
    color: #7fd8ae;
}

.srv-feedback.is-error {
    background: rgba(235, 75, 75, 0.12);
    border: 1px solid var(--cs-red);
    color: #ff8f8f;
}

@media (max-width: 640px) {
    .srv-field-row { align-items: stretch; }
    .srv-field select { min-width: 0; width: 100%; }
    .srv-actions button { flex: 1 1 auto; }
}

/* Niveles de riesgo del cribado anti-cheat.
   Se distinguen por relleno además de por color: alto va macizo, medio
   contorneado y bajo/limpio en gris, para que se lean sin depender del tono. */
.srv-badge-alto   { background: var(--cs-red); color: #fff; border: 1px solid var(--cs-red); }
.srv-badge-medio  { background: transparent; color: var(--cs-orange); border: 1px solid var(--cs-orange); }
.srv-badge-bajo   { background: rgba(255,255,255,0.06); color: var(--text-secondary); border: 1px solid var(--cs-border); }
.srv-badge-limpio { background: rgba(79,191,139,0.12); color: #7fd8ae; border: 1px solid rgba(79,191,139,0.5); }

.mono-cell {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   ORDEN DE CAPAS
   El modal de acceso salía POR DEBAJO de la barra de navegación: .header-nav
   estaba en 2005 y .modal en 2000, así que la barra tapaba las pestañas
   "Iniciar sesión / Registrarse" y la X de cerrar.

   Escala coherente, de abajo arriba:
     fondo -1 · navegación 100 · panel lateral 2000 · modales 3000
   ========================================================================== */

.header-nav {
    z-index: 100;
}

.modal {
    z-index: 3000;
}

/* ==========================================================================
   AMIGOS, MENSAJES Y ESTADÍSTICAS
   Reutiliza .panel-box y la paleta del panel para que se lea como una sola web.
   ========================================================================== */

.friends-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: start;
}

@media (max-width: 820px) {
    .friends-layout { grid-template-columns: 1fr; }
}

.friend-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 26rem;
    overflow-y: auto;
}

.friend-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--cs-border);
    border-radius: 5px;
    transition: border-color 0.15s, background 0.15s;
}

.friend-row.selectable { cursor: pointer; }
.friend-row.selectable:hover { border-color: var(--cs-orange); background: rgba(221, 132, 33, 0.07); }
.friend-row.active { border-color: var(--cs-orange); background: rgba(221, 132, 33, 0.12); }

.friend-avatar {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cs-orange), #a35a12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.friend-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

.friend-btn {
    background: transparent;
    border: 1px solid var(--cs-border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.friend-btn:hover { border-color: var(--cs-orange); color: var(--cs-orange); }
.friend-btn.accept:hover { border-color: #4fbf8b; color: #4fbf8b; }
.friend-btn.danger:hover { border-color: var(--cs-red); color: var(--cs-red); }

/* Aviso de mensajes sin leer: número, no solo un punto de color */
.unread-badge {
    background: var(--cs-orange);
    color: #fff;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.friend-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    padding: 1.5rem 0.5rem;
    line-height: 1.5;
}

.friend-msg {
    margin-top: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 600;
}

.friend-msg.is-ok { background: rgba(79,191,139,0.12); border: 1px solid rgba(79,191,139,0.5); color: #7fd8ae; }
.friend-msg.is-error { background: rgba(235,75,75,0.12); border: 1px solid var(--cs-red); color: #ff8f8f; }

.friend-suggestions {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.friend-suggestion {
    text-align: left;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--cs-border);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
}

.friend-suggestion:hover { border-color: var(--cs-orange); color: var(--cs-orange); }

/* --- Conversación --- */

.chat-panel { display: flex; flex-direction: column; }

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 18rem;
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.chat-bubble {
    max-width: 78%;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Los mensajes propios van a la derecha y en naranja; los recibidos a la
   izquierda y en gris. La posición distingue tanto como el color. */
.chat-bubble.mine {
    align-self: flex-end;
    background: rgba(221, 132, 33, 0.18);
    border: 1px solid rgba(221, 132, 33, 0.45);
    border-bottom-right-radius: 3px;
}

.chat-bubble.theirs {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cs-border);
    border-bottom-left-radius: 3px;
}

.chat-time {
    display: block;
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.chat-compose {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cs-border);
}

.chat-compose input {
    flex: 1;
    min-width: 0;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.chat-compose input:focus { outline: none; border-color: var(--cs-orange); }

/* --- Estadísticas --- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.stat-tile {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    padding: 1.1rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-tile-label {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}

.evolucion-caja {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    padding: 1.2rem;
}
.evolucion-titulo {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}
.evolucion-resumen {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.evolucion-actual {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cs-orange);
    font-variant-numeric: tabular-nums;
}
.evolucion-delta { font-size: 0.85rem; font-weight: 600; }
.evolucion-delta.mas { color: #4fbf8b; }
.evolucion-delta.menos { color: var(--cs-red); }
.evolucion-racha-max { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.evolucion-grafico-caja { width: 100%; height: 140px; }
.evolucion-svg { width: 100%; height: 100%; display: block; }

.stat-tile-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cs-orange);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Aviso en el enlace del menú lateral */
.sidebar-link .unread-badge { margin-left: auto; }

/* ==========================================================================
   PANEL DE CONEXIÓN A LA PARTIDA
   Dos caminos, no uno: el botón de Steam para quien quiere entrar y ya, y el
   comando de consola para quien lo prefiere o si el enlace no le funciona.
   ========================================================================== */

.conectar-box {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--cs-orange);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.conectar-directo {
    display: block;
    text-align: center;
    background: linear-gradient(180deg, var(--cs-orange-hover), var(--cs-orange));
    color: #0a0c12;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    padding: 1rem;
    border-radius: 6px;
    font-size: 1.05rem;
    transition: filter 0.15s, transform 0.1s;
}

.conectar-directo:hover { filter: brightness(1.1); }
.conectar-directo:active { transform: translateY(1px); }

.conectar-nota {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0.55rem 0 0;
}

.conectar-nota kbd {
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--text-primary);
}

/* Separador con texto centrado */
.conectar-sep {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.15rem 0 0.85rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.conectar-sep::before,
.conectar-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cs-border);
}

.conectar-cmd {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.conectar-cmd code {
    flex: 1;
    min-width: 0;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    padding: 0.7rem 0.8rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--cs-orange-hover);
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.conectar-copiar {
    background: transparent;
    border: 1px solid var(--cs-border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.conectar-copiar:hover { border-color: var(--cs-orange); color: var(--cs-orange); }

/* ==========================================================================
   PANEL DE JUGADOR
   Mantiene la paleta de la web: naranja #dd8421 sobre fondos oscuros.
   ========================================================================== */

/* --- Menú lateral: destacados --- */
.sidebar-link.sidebar-destacado {
    background: rgba(221, 132, 33, 0.12);
    border-color: rgba(221, 132, 33, 0.45);
    color: var(--cs-orange);
    font-weight: 700;
}
.sidebar-link.sidebar-vip { color: var(--oro); }
.sidebar-link.sidebar-vip svg { stroke: var(--oro); }

/* --- WAR: elegir modo --- */
.war-modos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.85rem;
}

.war-modo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    padding: 1.15rem 1.2rem 1.3rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.war-modo:hover { border-color: var(--cs-orange); background: rgba(221,132,33,0.07); }
.war-modo:active { transform: translateY(1px); }
.war-modo-rank { border-left: 3px solid var(--cs-orange); }

.war-modo-tag {
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cs-orange);
}
.war-modo-tag-libre { color: var(--text-secondary); }

.war-modo-titulo { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.war-modo-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }

.war-estado {
    text-align: center;
    margin: 1.25rem 0 0;
    font-weight: 600;
    min-height: 1.2rem;
}

/* --- Perfil --- */
.perfil-cabecera {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    padding: 1.5rem;
}

.perfil-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cs-orange), #8a4d10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #0a0c12;
    flex-shrink: 0;
}

.perfil-datos { flex: 1; min-width: 12rem; }
.perfil-datos h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }

.perfil-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.perfil-chip {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--cs-border);
    color: var(--text-secondary);
}
.perfil-chip-ok { background: rgba(79,191,139,0.14); border-color: rgba(79,191,139,0.5); color: #7fd8ae; }

.perfil-desde { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--text-secondary); }

.perfil-elo { text-align: center; padding-left: 1rem; }
.perfil-elo-num {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--cs-orange);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.perfil-elo-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
}

.panel-box textarea {
    width: 100%;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 0.8rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}
.panel-box textarea:focus { outline: none; border-color: var(--cs-orange); }

.vinculo-fila {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--cs-border);
}
.vinculo-fila:last-child { border-bottom: none; }
.vinculo-nombre { color: var(--text-secondary); font-size: 0.9rem; }
.vinculo-valor {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: right;
    word-break: break-all;
}

/* --- Historial de partidas --- */
.historial-lista { display: flex; flex-direction: column; gap: 0.5rem; }

.partida-fila {
    display: grid;
    grid-template-columns: 5.5rem 4.5rem 3.5rem 1fr 3.5rem 3rem;
    gap: 0.75rem;
    align-items: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--cs-border);
    border-radius: 5px;
    padding: 0.75rem 0.9rem;
    font-size: 0.87rem;
}

/* El resultado se distingue por posición del borde y por texto, no solo color */
.partida-fila.ganada { border-left-color: #4fbf8b; }
.partida-fila.perdida { border-left-color: var(--cs-red); }

.partida-fila.partida-clicable { cursor: pointer; transition: background 0.15s; }
.partida-fila.partida-clicable:hover { background: rgba(255,255,255,0.06); }

.partida-resultado { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; }
.ganada .partida-resultado { color: #7fd8ae; }
.perdida .partida-resultado { color: #ff8f8f; }

.partida-modo, .partida-fecha { color: var(--text-secondary); font-size: 0.78rem; }
.partida-marcador { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.partida-rival { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partida-puntos { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.partida-puntos.mas { color: #7fd8ae; }
.partida-puntos.menos { color: #ff8f8f; }

@media (max-width: 720px) {
    .partida-fila { grid-template-columns: 1fr auto; row-gap: 0.35rem; }
    .partida-modo, .partida-fecha { grid-column: 1 / -1; }
}

/* --- Zona VIP --- */
.vip-header svg { stroke: var(--oro) !important; }
.vip-header h3 { color: var(--oro) !important; }

.vip-bloqueo {
    background: linear-gradient(160deg, rgba(201,162,39,0.1), rgba(0,0,0,0.4));
    border: 1px solid rgba(201,162,39,0.4);
    border-radius: 8px;
    padding: 2rem;
}
.vip-bloqueo h4 { color: var(--oro); margin: 0 0 0.75rem; font-size: 1.3rem; }
.vip-bloqueo > p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 1.25rem; }

.vip-lista { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.vip-lista li {
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.5;
}
.vip-lista li::before {
    content: '★';
    position: absolute;
    left: 0;
    color: var(--oro);
}

.vip-nota {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(201,162,39,0.25);
}

/* ==========================================================================
   ANCHO DE LOS BLOQUES DEL PANEL
   .dashboard-content es una rejilla de dos columnas (viene del diseño
   original). Los bloques nuevos son de ancho completo, así que se les dice
   que ocupen las dos: si no, quedaban encajonados en la mitad izquierda con
   medio panel vacío al lado.
   ========================================================================== */
.dashboard-content > .panel-box,
.dashboard-content > .vip-bloqueo,
.dashboard-content > .perfil-cabecera,
.dashboard-content > .historial-lista,
.dashboard-content > .war-modos,
.dashboard-content > .friends-layout,
.dashboard-content > .stats-grid,
.dashboard-content > .war-estado,
.dashboard-content > .srv-hint,
.dashboard-content > #dynamicStatusContainer,
.dashboard-content > #vipContenido,
.dashboard-content > #vipBloqueado,
.dashboard-content > .friend-msg,
.dashboard-content > .estado-barra,
.dashboard-content > button {
    grid-column: 1 / -1;
}

/* ==========================================================================
   ZONA VIP - presentación
   ========================================================================== */

.vip-bloqueo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: start;
    padding: 2.25rem;
}

@media (max-width: 780px) {
    .vip-bloqueo { grid-template-columns: 1fr; gap: 1.5rem; }
}

.vip-intro h4 {
    color: var(--oro);
    margin: 0 0 0.75rem;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

.vip-intro > p {
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 1.5rem;
    font-size: 1rem;
}

/* Insignia grande, para que la sección no sea solo texto */
.vip-sello {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(201, 162, 39, 0.45);
    color: var(--oro);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Cada ventaja en su tarjeta, no en una lista con estrellas */
.vip-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vip-lista li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.vip-lista li:hover { border-color: rgba(201, 162, 39, 0.5); }

.vip-lista li strong {
    display: block;
    color: var(--oro);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}

.vip-lista li span { color: var(--text-secondary); font-size: 0.85rem; }

.vip-icono {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 162, 39, 0.15);
    border-radius: 5px;
    color: var(--oro);
    font-size: 0.85rem;
    font-weight: 700;
}

.vip-nota {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(201, 162, 39, 0.25);
}

/* ==========================================================================
   AMIGOS Y CHAT - rediseño
   La primera versión era funcional pero sosa: filas planas, sin jerarquía y
   sin sensación de "aquí hay gente". Esto le da presencia.
   ========================================================================== */

.friends-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 1.25rem;
}

.friends-panel, .chat-panel { min-height: 30rem; }

/* Cabecera de cada panel con contador */
.friends-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.friends-contador {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

/* --- Filas de amigo --- */
.friend-row {
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid transparent;
    position: relative;
}

.friend-row.selectable:hover {
    background: rgba(221, 132, 33, 0.08);
    border-color: rgba(221, 132, 33, 0.35);
}

.friend-row.active {
    background: rgba(221, 132, 33, 0.14);
    border-color: var(--cs-orange);
}

/* Barra naranja a la izquierda del amigo abierto */
.friend-row.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--cs-orange);
}

.friend-avatar {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    position: relative;
}

/* Punto de estado sobre el avatar */
.friend-avatar::after {
    content: '';
    position: absolute;
    right: -1px; bottom: -1px;
    width: 0.7rem; height: 0.7rem;
    border-radius: 50%;
    background: var(--text-secondary);
    border: 2px solid #0f1119;
}

.friend-row .friend-name { font-size: 0.95rem; }

/* Segunda línea con el rating, para que la fila diga algo */
.friend-sub {
    display: block;
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 0.1rem;
}

.friend-actions { opacity: 0; transition: opacity 0.15s; }
.friend-row:hover .friend-actions,
.friend-row.active .friend-actions { opacity: 1; }

/* En pantallas táctiles no hay hover: se dejan siempre visibles */
@media (hover: none) {
    .friend-actions { opacity: 1; }
}

.unread-badge {
    box-shadow: 0 0 0 3px rgba(221, 132, 33, 0.18);
    min-width: 1.35rem;
    text-align: center;
}

/* --- Solicitudes: que se noten --- */
#friendRequestsBox {
    border-color: var(--cs-orange);
    background: rgba(221, 132, 33, 0.06);
}

/* --- Chat --- */
.chat-panel .chat-messages {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--cs-border);
}

.chat-bubble {
    max-width: 82%;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.chat-bubble.mine {
    background: linear-gradient(135deg, rgba(221,132,33,0.28), rgba(221,132,33,0.16));
    border-color: rgba(221, 132, 33, 0.5);
}

.chat-bubble.theirs { background: rgba(255, 255, 255, 0.07); }

.chat-time { opacity: 0.65; font-size: 0.65rem; }

/* Estado vacío con algo más que una frase suelta */
.friend-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 12rem;
    padding: 2rem 1rem;
}

.friend-empty::before {
    content: '';
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px dashed var(--cs-border);
    opacity: 0.7;
}

.conectar-copiar, .friend-btn { transition: all 0.15s; }

/* La primera versión de la lista VIP ponía una estrella con ::before.
   Ahora cada punto lleva su propio icono en .vip-icono, así que la estrella
   sobra: salían las dos, una detrás de otra. */
.vip-lista li::before { content: none; }
.vip-lista li { padding-left: 1rem; }

/* --- Barra de nivel del menú lateral --- */
.nivel-caja {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cs-border);
}

.nivel-pista {
    height: 0.45rem;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

.nivel-relleno {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cs-orange), var(--cs-orange-hover));
    transition: width 0.6s ease-out;
}

.nivel-texto {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   AVATAR CON ANILLO DE NIVEL
   El progreso del nivel se dibuja como un anillo alrededor del avatar, en
   lugar de una barra aparte: ocupa menos, se lee de un vistazo y es lo que
   usan las plataformas competitivas. El color del anillo cambia por tramos,
   así que el nivel se reconoce sin leer el número.
   ========================================================================== */

.avatar-wrapper {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
}

/* El anillo: un cono de color que se rellena según el progreso */
.avatar-anillo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--nivel-color, #dd8421) calc(var(--nivel-pct, 0) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
    padding: 3px;
    transition: background 0.6s ease-out;
}

.avatar-frame {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--cs-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Inicial del nombre cuando no hay imagen: más personal que un icono genérico */
.avatar-inicial {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cs-orange);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    user-select: none;
}

.avatar-image { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Chapa del nivel, abajo a la derecha */
.level-indicator {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--nivel-color, #dd8421);
    color: #0a0c12;
    font-size: 0.82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cs-dark-2);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Tramos de color: bronce, plata, oro y el 10 en rojo */
.nivel-t1 { --nivel-color: #9aa1ad; }
.nivel-t2 { --nivel-color: #4fbf8b; }
.nivel-t3 { --nivel-color: #dd8421; }
.nivel-t4 { --nivel-color: var(--oro); }
.nivel-t5 { --nivel-color: #eb4b4b; }

/* Texto de progreso, ya sin barra */
.nivel-caja {
    margin-top: 0.75rem;
    padding-top: 0;
    border-top: none;
}
.nivel-pista { display: none; }

/* ==========================================================================
   ANCHO Y AIRE DEL PANEL
   Las secciones estaban a 860px dentro de un contenedor de 1200: quedaban
   estrechas y con medio panel vacío. Ahora aprovechan el ancho y respiran.
   ========================================================================== */

.page-section .user-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.25rem 2.5rem 2.5rem;
}

.page-section .dashboard-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.1rem;
}

.page-section .dashboard-content { gap: 1.25rem; }

/* En pantallas medianas la rejilla de dos columnas aprieta demasiado */
@media (max-width: 900px) {
    .page-section .dashboard-content { grid-template-columns: 1fr; }
    .page-section .user-dashboard { padding: 1.5rem 1.25rem 1.75rem; }
}

/* Cabecera del perfil: más aire y el rating separado de verdad */
.perfil-cabecera {
    padding: 1.75rem 2rem;
    gap: 1.75rem;
}

.perfil-elo {
    margin-left: auto;
    padding: 0.75rem 1.5rem;
    background: rgba(221, 132, 33, 0.08);
    border: 1px solid rgba(221, 132, 33, 0.3);
    border-radius: 8px;
}

.perfil-avatar { width: 5.5rem; height: 5.5rem; font-size: 2.4rem; }
.perfil-datos h2 { font-size: 1.8rem; }

/* Las cajas del panel, algo más generosas */
.page-section .panel-box { padding: 1.5rem 1.6rem; }

@media (max-width: 640px) {
    .perfil-cabecera { padding: 1.25rem; gap: 1rem; }
    .perfil-elo { margin-left: 0; width: 100%; text-align: center; }
}

/* Botón de Steam y aviso de vinculación */
.btn-steam {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #1b2838;
    border: 1px solid #2a475e;
    color: #c7d5e0;
    border-radius: 5px;
    padding: 0.4rem 0.85rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.btn-steam:hover { background: #2a475e; border-color: #66c0f4; color: #fff; }
.btn-steam.vinculado { background: rgba(79,191,139,0.12); border-color: rgba(79,191,139,0.5); color: #7fd8ae; cursor: default; }

.vinculo-aviso {
    margin: 0.85rem 0 0;
    padding: 0.85rem 1rem;
    background: rgba(235, 75, 75, 0.08);
    border: 1px solid rgba(235, 75, 75, 0.35);
    border-radius: 5px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.vinculo-aviso strong { color: #ff8f8f; display: block; margin-bottom: 0.25rem; }
.vinculo-aviso.oculto { display: none; }

/* Botón principal del modal (INICIAR SESIÓN/REGISTRARSE): centrado, no
   ocupa todo el ancho para que no domine sobre el resto del formulario. */
.auth-btn-centrado {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.auth-btn-principal {
    box-sizing: border-box;
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

/* Botón de Steam con la estética oficial de la marca (azul Steam), para
   que se reconozca al instante como "entrar con Steam" — pequeño y
   centrado, no compite en tamaño con el formulario usuario/contraseña. */
.btn-steam-chico {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, #2a475e, #1b2838);
    border: 1px solid #66c0f4;
    color: #fff;
    border-radius: 6px;
    padding: 0.55rem 1.25rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: filter 0.15s, transform 0.1s;
}
.btn-steam-chico:hover { filter: brightness(1.2); }
.btn-steam-chico:active { transform: translateY(1px); }

.auth-separador {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Checkbox de privacidad: en un marco propio para que no flote suelto en
   el modal, con el texto pegado a la caja en vez de separado por el gap
   por defecto del checkbox nativo. */
.auth-privacidad {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}
/* .form-group input está pensado para <input type="text/password"> (ancho
   100%, fondo oscuro, padding grande); hay que anular todo eso aquí o el
   checkbox nativo hereda ese estilo y se convierte en una caja enorme. */
.auth-privacidad input[type="checkbox"] {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0.15rem 0 0;
    background: none;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
}
.auth-privacidad label {
    display: inline;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.auth-separador::before, .auth-separador::after {
    content: ''; flex: 1; height: 1px; background: var(--cs-border);
}

/* ==========================================================================
   GRÁFICOS DE PUNTERÍA
   Un solo tono por gráfico: la magnitud se lee por LONGITUD, no por color.
   Usar varios naranjas como categorías falló la validación de contraste
   (ΔE 5,4 entre tonos contiguos: indistinguibles incluso con visión normal).
   ========================================================================== */

.gr { display: flex; flex-direction: column; gap: 0.6rem; }

.gr-fila {
    display: grid;
    grid-template-columns: 7.5rem 1fr 3.5rem;
    gap: 0.85rem;
    align-items: center;
}

.gr-etiqueta {
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La pista de fondo marca el 100%, así la barra se lee en contexto */
.gr-pista {
    height: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.gr-barra {
    height: 100%;
    background: var(--cs-orange);
    /* Extremo redondeado solo en el lado del dato, anclado a la base */
    border-radius: 0 4px 4px 0;
    width: 0;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 2px;
}

/* La zona destacada (cabeza) se distingue por tono Y por el texto,
   nunca solo por color */
.gr-barra.destacada { background: var(--cs-orange-hover); }
.gr-fila.destacada .gr-etiqueta { color: var(--cs-orange); font-weight: 700; }

.gr-valor {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gr-sub {
    grid-column: 2 / -1;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: -0.35rem;
}

@media (max-width: 560px) {
    .gr-fila { grid-template-columns: 5.5rem 1fr 3rem; gap: 0.5rem; }
    .gr-etiqueta { font-size: 0.78rem; }
}

/* Lectura de los datos, en texto */
.lectura { display: flex; flex-direction: column; gap: 0.7rem; }

.lectura-punto {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--cs-orange);
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.lectura-punto.bien { border-left-color: #4fbf8b; }
.lectura-punto.mal  { border-left-color: var(--cs-red); }
.lectura-punto strong { display: block; margin-bottom: 0.2rem; color: var(--text-primary); }
.lectura-punto span { color: var(--text-secondary); }

/* ==========================================================================
   BARRA DE ESTADO DEL SISTEMA
   Siempre visible antes de pedir partida: si el servidor está ocupado, el
   jugador tiene que saberlo ANTES de pulsar, no después de esperar sin
   respuesta preguntándose si se ha colgado.
   ========================================================================== */

.estado-barra {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--text-secondary);
    border-radius: 6px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    transition: border-color 0.3s;
}

.estado-punto {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--text-secondary);
    flex-shrink: 0;
}

.estado-texto { color: var(--text-primary); font-weight: 600; }

.estado-extra {
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* El estado se distingue por color Y por el texto, nunca solo por color */
.estado-barra.libre       { border-left-color: #4fbf8b; }
.estado-barra.libre       .estado-punto { background: #4fbf8b; box-shadow: 0 0 0 3px rgba(79,191,139,0.2); }
.estado-barra.preparando  { border-left-color: var(--cs-orange); }
.estado-barra.preparando  .estado-punto { background: var(--cs-orange); box-shadow: 0 0 0 3px rgba(221,132,33,0.2); }
.estado-barra.en_partida  { border-left-color: var(--cs-orange); }
.estado-barra.en_partida  .estado-punto { background: var(--cs-orange); }
.estado-barra.caido       { border-left-color: var(--cs-red); }
.estado-barra.caido       .estado-punto { background: var(--cs-red); box-shadow: 0 0 0 3px rgba(235,75,75,0.2); }

/* Los modos se atenúan cuando el servidor no está libre */
.war-modo:disabled { opacity: 0.45; cursor: not-allowed; }
.war-modo:disabled:hover { border-color: var(--cs-border); background: rgba(0,0,0,0.4); }

/* ==========================================================================
   FOOTER
   Antes era flex con space-between: la última columna se salía del marco de
   la página por la derecha, y la barra inferior estaba FUERA del contenedor,
   así que su texto no alineaba con el resto del contenido.
   Ahora es una rejilla que respeta el ancho del contenedor.
   ========================================================================== */

/* Flex, no grid con columnas fijas: la columna "Apoyar" la borra script.js
   cuando no hay URL de donaciones configurada, así que el número de columnas
   varía (3 o 4). Con `repeat(4, 1fr)` quedaba un hueco vacío a la derecha y
   todo el bloque tirado a la izquierda. Así se reparten y centran solas. */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 5rem;
    padding-bottom: 2.5rem;
    align-items: flex-start;
    /* `margin: 0 auto` y box-sizing repetidos a propósito: heredados de
       .container, pero el navegador acababa calculando margin:0 (sin auto)
       -> el bloque no se centraba y quedaba pegado a la izquierda con el
       hueco vacío a la derecha. */
    box-sizing: border-box;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }

.footer-col h4 {
    color: var(--text-primary);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.footer-col a,
.footer-col a:visited,
.footer-col a.footer-enlace:visited {
    color: var(--text-secondary) !important;
    text-decoration: none;
    border-bottom: none;
    font-size: 0.88rem;
    transition: color 0.15s;
    width: fit-content;
    cursor: pointer;
}

.footer-col a:hover { color: var(--cs-orange) !important; }

/* La barra inferior: fondo a todo lo ancho, contenido dentro del marco */
.footer-bottom { padding: 1.25rem 0; text-align: center; }

.footer-bottom-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    text-align: center;
}

.footer-bottom-inner span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .footer-container { gap: 2rem 3rem; }
}

@media (max-width: 560px) {
    /* En pantalla estrecha, una columna por fila y texto centrado. */
    .footer-container { flex-direction: column; align-items: center; }
    .footer-col { align-items: center; text-align: center; }
}

/* Enlaces de apoyo */
.footer-donar {
    color: var(--oro) !important;
    font-weight: 700;
}
.footer-donar:hover { color: var(--oro-claro) !important; }

.footer-nota {
    color: rgba(255,255,255,0.3);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 0.2rem;
}

.vip-enlace {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--oro);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(201,162,39,0.4);
}
.vip-enlace:hover { border-bottom-color: var(--oro); }

/* =========================================================================
   RANKING: podio, avatares, ficha del jugador (modal)
   ========================================================================= */

.sidebar-nota { color: var(--text-secondary); font-size: 0.8rem; padding: 0.4rem 0.5rem 0; line-height: 1.4; }

/* Avatar de inicial (respaldo cuando no hay foto de Steam) */
.rk-avatar-inicial {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; text-transform: uppercase;
    border: 1px solid var(--cs-border);
}
.player-avatar.rk-avatar-inicial { border-radius: 4px; font-size: 1.1rem; }

/* Filas clicables */
.rk-clicable { cursor: pointer; }
.leaderboard-table tbody tr.rk-clicable:hover { background: rgba(235, 75, 75, 0.07); }
.rk-rank { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.fila-top .rk-rank { font-size: 1.25rem; }
.rk-wl { color: var(--text-secondary); font-size: 0.78rem; margin-left: 6px; }
.rk-racha { margin-left: 8px; font-size: 0.8rem; color: var(--text-secondary); }
.rk-racha-on { color: var(--cs-orange); font-weight: 700; }
.rk-racha-cero { opacity: 0.5; }
.rk-pie { text-align: center; color: var(--text-secondary); font-size: 0.82rem; padding: 0.9rem 0 0; }

/* Podio */
.ranking-podium {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    align-items: end; max-width: 720px; margin: 0 auto 2.5rem;
}
.podium-card {
    background: linear-gradient(180deg, var(--cs-dark-2), var(--cs-dark-1));
    border: 1px solid var(--cs-border); border-radius: 14px;
    padding: 1.2rem 1rem 1.4rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.podium-card:hover { transform: translateY(-4px); border-color: rgba(235,75,75,0.5); }
.podium-1 { border-color: rgba(221,168,33,0.6); box-shadow: 0 0 24px rgba(221,168,33,0.15); transform: translateY(-14px); }
.podium-1:hover { transform: translateY(-18px); }
.podium-2 { border-color: rgba(170,170,180,0.4); }
.podium-3 { border-color: rgba(176,120,70,0.4); }
.podium-medal { font-size: 1.6rem; line-height: 1; }
.podium-avatar .podium-img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--cs-border); object-fit: cover; }
.podium-1 .podium-img { width: 78px; height: 78px; border-color: var(--cs-orange); }
.podium-img.rk-avatar-inicial { border-radius: 50%; font-size: 1.6rem; }
.podium-name { font-weight: 700; font-size: 1rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-elo { font-size: 1.15rem; font-weight: 800; color: #fff; }
.podium-elo span { font-size: 0.7rem; color: var(--text-secondary); font-weight: 600; margin-left: 3px; }
.podium-meta { font-size: 0.8rem; color: var(--text-secondary); }

/* Modal ficha */
.player-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.player-modal.hidden { display: none; }
.player-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
.player-modal-card {
    position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
    background: var(--cs-dark-2); border: 1px solid var(--cs-border); border-radius: 16px; padding: 1.6rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.player-modal-close {
    position: absolute; top: 12px; right: 14px; background: transparent; border: none;
    color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.player-modal-close:hover { color: #fff; }
.pf-cargando { text-align: center; color: var(--text-secondary); padding: 2rem; }

.pf-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.4rem; }
.pf-btn-comparar { margin-left: auto; white-space: nowrap; }

/* Comparativa cara a cara */
.cmp-header { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.cmp-jugador { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.cmp-jugador .pf-avatar-img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--cs-orange); object-fit: cover; }
.cmp-nombre { font-weight: 700; font-size: 0.9rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-vs { font-weight: 800; color: var(--cs-orange); font-size: 1.1rem; }
.cmp-tabla { display: flex; flex-direction: column; gap: 0.5rem; }
.cmp-fila {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--cs-border);
    border-radius: 5px;
}
.cmp-valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.cmp-valor.cmp-gana { color: #4fbf8b; }
.cmp-etiqueta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); text-align: center; }
.pf-avatar .pf-avatar-img { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--cs-orange); object-fit: cover; }
.pf-avatar-img.rk-avatar-inicial { border-radius: 50%; font-size: 1.8rem; }
.pf-name { margin: 0; font-size: 1.4rem; }
.pf-steam { color: var(--text-secondary); font-size: 0.8rem; font-family: monospace; }
.pf-elo { margin-top: 0.4rem; color: var(--text-secondary); font-size: 0.9rem; }

.pf-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1.4rem; }
.pf-stat { background: var(--cs-dark-1); border: 1px solid var(--cs-border); border-radius: 10px; padding: 0.8rem; text-align: center; }
.pf-stat-on { border-color: rgba(221,132,33,0.5); }
.pf-stat-val { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; }
.pf-stat-on .pf-stat-val { color: var(--cs-orange); }
.pf-stat-lbl { display: block; font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.pf-sub { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; color: #fff; }
.pf-table-wrap { overflow-x: auto; }
.pf-weapons { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.pf-weapons th { text-align: left; color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--cs-border); }
.pf-weapons td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--cs-border); }
.pf-empty { color: var(--text-secondary); font-size: 0.85rem; padding: 0.6rem; }

.pf-matches { display: flex; flex-direction: column; gap: 0.4rem; }
.pf-match { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 0.6rem; align-items: center; background: var(--cs-dark-1); border: 1px solid var(--cs-border); border-left-width: 3px; border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 0.85rem; }
.pf-win { border-left-color: #4fbf8b; }
.pf-loss { border-left-color: var(--cs-red); }
.pf-match-res { font-weight: 700; font-size: 0.75rem; }
.pf-win .pf-match-res { color: #4fbf8b; }
.pf-loss .pf-match-res { color: var(--cs-red); }
.pf-match-mode { color: var(--text-secondary); }
.pf-match-score { font-weight: 700; }
.pf-match-date { color: var(--text-secondary); font-size: 0.78rem; }
.pf-nota { color: var(--text-secondary); font-size: 0.78rem; margin-top: 1.2rem; line-height: 1.4; }

@media (max-width: 620px) {
    .pf-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .pf-match { grid-template-columns: 80px 1fr auto; }
    .pf-match-date { display: none; }
    .ranking-podium { gap: 0.5rem; }
    .podium-card { padding: 0.9rem 0.5rem; }
}

/* =========================================================================
   RANKING: tabla densa propia (antes heredaba nada -> filas enormes y vacías)
   ========================================================================= */
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th {
    text-align: left; padding: 0.8rem 1rem; color: var(--text-secondary);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--cs-border); background: rgba(0,0,0,0.25);
}
.leaderboard-table td { padding: 0.6rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.leaderboard-table tbody tr:last-child td { border-bottom: none; }
.leaderboard-table .player-profile { gap: 0.7rem; }
.leaderboard-table .player-avatar { width: 34px; height: 34px; }
.leaderboard-table .player-name { font-size: 0.92rem; font-weight: 600; }
.leaderboard-table .steam-id { font-size: 0.72rem; color: var(--text-secondary); font-family: monospace; }
.leaderboard-table .cs2-rating { font-weight: 800; }
.leaderboard-table .stat-value { font-weight: 600; }
.leaderboard-table .stat-highlight { color: var(--cs-orange); }

/* =========================================================================
   EDITOR DE NOTICIAS: barra de formato + vista previa
   ========================================================================= */
.news-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.news-tool {
    background: var(--cs-dark-1); border: 1px solid var(--cs-border); color: #d8dbe2;
    border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.85rem;
}
.news-tool:hover { border-color: var(--cs-red); color: #fff; }
.news-preview-wrap { position: relative; border: 1px dashed var(--cs-border); border-radius: 8px; padding: 1rem; margin-bottom: 0.6rem; background: rgba(0,0,0,0.15); }
.news-preview-label { position: absolute; top: -0.6rem; left: 0.8rem; background: var(--cs-dark-2); padding: 0 0.4rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.news-preview { color: #d8dbe2; line-height: 1.55; font-size: 0.92rem; }
.news-preview a { color: var(--cs-orange); }
.news-preview ul { margin: 0.5rem 0 0.5rem 1.2rem; }

/* Disuasión de copia: las imágenes no se pueden arrastrar al escritorio. */
img,
.carousel-slide,
.avatar-frame,
.avatar-anillo,
.player-avatar,
.pf-avatar {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none; /* iOS: sin menú "Guardar imagen" al mantener pulsado */
}

/* Foto de avatar (rellena cualquier marco: panel, perfil…). Usada por ponerAvatar(). */
.avatar-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Editor visual de noticias (contenteditable): se ve el resultado, no etiquetas. */
.news-editor {
    min-height: 130px;
    background: var(--cs-dark-1);
    border: 1px solid var(--cs-border);
    color: #fff;
    padding: 0.8rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.8rem;
    line-height: 1.6;
    outline: none;
}
.news-editor:focus { border-color: var(--cs-orange); }
.news-editor:empty::before { content: attr(data-vacio); color: var(--text-secondary); }
.news-editor a { color: var(--cs-orange); }
.news-editor ul { margin: 0.4rem 0 0.4rem 1.2rem; }

/* Iconos de armas (oficiales CS2, blancos) en la tabla de puntería. */
.weapon-icon {
    height: 22px;
    width: auto;
    max-width: 92px;
    vertical-align: middle;
    opacity: 0.92;
}
.weapon-nombre { color: var(--text-secondary); font-size: 0.85rem; }

/* ===== Rediseño "Guía de usuario / ¿Cómo jugar?" — tarjetas del tema CS2 ===== */
.flow-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}
.flow-step {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cs-border);
    border-top: 3px solid var(--cs-orange);
    border-radius: 8px;
    padding: 1.8rem 1.4rem;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.flow-step:hover { transform: translateY(-4px); border-color: var(--cs-orange); }
.flow-icon {
    width: 64px; height: 64px;
    background: var(--cs-dark-1);
    border: 2px solid var(--cs-orange);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--cs-orange);
    box-shadow: 0 0 18px rgba(221, 132, 33, 0.25);
    margin-bottom: 1.2rem;
}
.flow-icon svg { width: 30px; height: 30px; }
.flow-step h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.5rem; }
.flow-step p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.flow-step code { background: #000; color: var(--cs-orange); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }

/* ==========================================================================
   Lujoso Sistema VIP (Pro)
   ========================================================================== */
.vip-premium-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 2rem;
    margin-bottom: 2rem;
}
.vip-pricing-header {
    text-align: center;
}
.vip-badge {
    background: linear-gradient(135deg, var(--oro), var(--oro-claro));
    color: #000;
    font-weight: bold;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(201,162,39,0.4);
}
.vip-pricing-header h2 {
    font-size: 2.5rem;
    margin: 1.5rem 0 1rem;
    background: linear-gradient(135deg, #fff, var(--oro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vip-pricing-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}
.vip-pricing-cards {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 900px;
}
.pricing-card {
    flex: 1;
    min-width: 300px;
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-radius: var(--radio-max, 10px);
    padding: 2.5rem;
    text-align: left;
    position: relative;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.pricing-card:hover {
    border-color: var(--marca-borde, rgba(221,132,33,.35));
    box-shadow: 0 0 20px rgba(221,132,33,.12);
}
.pricing-card.premium {
    background: linear-gradient(160deg, var(--oro-tenue), var(--panel, #13161C));
    border: 1px solid var(--oro-borde);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px var(--oro-tenue);
    transform: scale(1.05);
}
.pricing-card.premium:hover {
    border-color: var(--oro, #C9A227);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 28px var(--oro-tenue);
}
.popular-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: var(--oro);
    color: #000;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radio-min, 3px);
    text-transform: uppercase;
}
.pricing-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}
.pricing-card.premium h3 {
    color: var(--oro);
}
.price {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}
.price span {
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.pricing-features li.disabled {
    color: rgba(255,255,255,0.3);
}
.pricing-features li.disabled svg {
    stroke: rgba(255,255,255,0.3);
}
.pricing-features li.highlight {
    color: var(--oro-claro);
}
.pricing-features svg {
    width: 20px;
    height: 20px;
    stroke: #4CAF50;
    fill: none;
    stroke-width: 2;
}
.pricing-features li.highlight svg {
    stroke: var(--oro);
}
.btn-glow {
    width: 100%;
    background: linear-gradient(135deg, var(--oro), var(--oro-oscuro));
    color: white;
    border: none;
    box-shadow: 0 0 15px rgba(201,162,39,0.3);
    padding: 1rem;
    font-size: 1.1rem;
}
.btn-glow:hover {
    box-shadow: 0 0 25px rgba(201,162,39,0.6);
    background: linear-gradient(135deg, var(--oro-claro), var(--oro));
    color: black;
}
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    width: 100%;
    background: rgba(255,255,255,0.05);
}

/* Active Dashboard */
.vip-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.vip-sello-pro {
    display: inline-block;
    background: var(--oro);
    color: black;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
.vip-title-area h2 {
    font-size: 2rem;
    margin: 0 0 0.2rem;
}
.vip-title-area p {
    color: var(--text-secondary);
    margin: 0;
}
.btn-outline-gold {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--oro);
    background: rgba(201,162,39,0.1);
    color: var(--oro);
    padding: 0.7rem 1.2rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-outline-gold:hover {
    background: var(--oro);
    color: black;
}
.btn-outline-gold:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(201,162,39,0.1);
    color: var(--oro);
}

.vip-telemetry-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

/* No data overlay */
.vip-no-data-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    z-index: 10;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5rem;
    border-radius: 12px;
}
.vip-no-data-overlay.hidden { display: none !important; }
.vip-glass-prompt {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(201,162,39,0.3);
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    max-width: 400px;
}
.vip-glass-prompt svg {
    width: 48px; height: 48px;
    stroke: var(--oro);
    margin-bottom: 1.5rem;
}
.vip-glass-prompt h3 {
    color: var(--oro);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Cards */
.vip-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}
.vip-card {
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-radius: var(--radio-max, 10px);
    overflow: hidden;
}
.vip-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--linea-suave, #1E222A);
    background: var(--panel-alto, #1A1E26);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vip-card-header h4 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--oro-claro);
}
.vip-info-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    cursor: help;
}
.vip-card-body {
    padding: 1.5rem;
    min-height: 250px;
}

/* Top Stats */
.vip-top-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.vip-top-stats .stat-tile {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
    border-top: 2px solid var(--oro);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}
.vip-top-stats .stat-tile-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.vip-top-stats .stat-tile-value {
    display: block;
    font-size: 2.2rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(201,162,39,0.3);
}

.vip-lectura-grid {
    display: grid;
    gap: 1rem;
}
.vip-lectura-grid .lectura-punto {
    background: rgba(0,0,0,0.3);
    border-left: 3px solid var(--oro);
    padding: 1.25rem;
    border-radius: 4px;
}
.vip-lectura-grid .lectura-punto.bien { border-color: #4CAF50; }
.vip-lectura-grid .lectura-punto.mal { border-color: #eb4b4b; }

/* ==========================================================================
   SIDEBAR COMPACTO (Ajustes de densidad)
   ========================================================================== */
.sidebar-header {
    padding: 0.5rem 1.5rem 0.5rem !important;
}
.sidebar-nav {
    padding: 1rem 1.5rem 1rem !important;
    gap: 1.2rem !important;
}
.nav-section {
    gap: 0.5rem !important;
}
.nav-section h5 {
    margin-bottom: 0.3rem !important;
    font-size: 0.75rem !important;
}
.sidebar-link {
    padding: 0.7rem 1rem !important;
    gap: 12px !important;
}
.sidebar-link svg {
    width: 18px !important; 
    height: 18px !important;
}
.sidebar-footer {
    padding: 1rem 1.5rem !important;
}
.avatar-anillo {
    width: 60px !important;
    height: 60px !important;
}
.sidebar-user-profile {
    gap: 1rem !important;
}

/* ============================================================================
   PORTADA — «Empieza en 3 pasos» y «Cómo funciona el anti-cheat»
   Añadido 2026-08-25. Usa las variables de :root, sin colores sueltos, para que
   un cambio de paleta arrastre también estas secciones.
   ========================================================================= */

.tv-rotulo {
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cs-orange);
    margin-bottom: .6rem;
}

.tv-titulo {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 3.2vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.tv-entrada {
    max-width: 68ch;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-size: 1rem;
}

.tv-entrada strong { color: var(--text-primary); }

/* ---- Empieza en 3 pasos ---- */
.tv-pasos { padding: var(--sec-y) 0; border-top: 1px solid var(--cs-border); }

.tv-pasos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.tv-paso {
    background: var(--cs-dark-2);
    border: 1px solid var(--cs-border);
    border-radius: 14px;
    padding: 1.8rem 1.6rem;
    position: relative;
    transition: border-color .25s ease, transform .25s ease;
}

.tv-paso:hover { border-color: rgba(221, 132, 33, .45); transform: translateY(-3px); }

/* El número va como marca de agua: guía el orden de lectura sin robar
   protagonismo al titular de cada paso. */
.tv-paso-num {
    position: absolute;
    top: .7rem;
    right: 1.1rem;
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(221, 132, 33, .16);
}

.tv-paso h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .6rem;
    position: relative;
    z-index: 1;
}

.tv-paso p { color: var(--text-secondary); line-height: 1.65; font-size: .95rem; }

.tv-paso code {
    background: rgba(221, 132, 33, .14);
    border: 1px solid rgba(221, 132, 33, .3);
    color: var(--cs-orange);
    padding: .1rem .45rem;
    border-radius: 5px;
    font-size: .95em;
}

.tv-pasos-cta { margin-top: 2.5rem; text-align: center; }

.tv-btn-discord {
    display: inline-block;
    background: #5865F2;
    color: #fff;
    font-weight: 700;
    padding: .85rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.tv-btn-discord:hover { background: #4752c4; transform: translateY(-2px); }

/* ---- Botones del hero ---- */
.btn-hero-primario,
.btn-hero-secundario {
    display: inline-block;
    padding: .85rem 1.9rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.btn-hero-primario {
    background: linear-gradient(135deg, var(--cs-orange), var(--marca-claro, #f0952d));
    color: #12141d;
}

.btn-hero-primario:hover { transform: translateY(-2px); }

.btn-hero-secundario {
    background: transparent;
    border: 1px solid var(--cs-border);
    color: var(--text-primary);
}

.btn-hero-secundario:hover { border-color: var(--cs-orange); color: var(--cs-orange); }

/* ---- Cómo funciona el anti-cheat ---- */
.tv-ac {
    padding: var(--sec-y) 0;
    border-top: 1px solid var(--cs-border);
    background: var(--cs-dark-1);
}

.tv-capas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tv-capa {
    background: var(--cs-dark-2);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--cs-orange);
    border-radius: 12px;
    padding: 1.8rem 1.6rem;
}

.tv-capa-et {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cs-orange);
    margin-bottom: .7rem;
}

.tv-capa h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .9rem;
    line-height: 1.3;
}

.tv-capa p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: .95rem;
    margin-bottom: .9rem;
}

.tv-capa p:last-child { margin-bottom: 0; }
.tv-capa strong { color: var(--text-primary); }

/* Los matices van en gris más apagado y con una barra a la izquierda: son
   aclaraciones, no el argumento principal. */
.tv-matiz {
    border-left: 2px solid var(--cs-border);
    padding-left: .9rem;
    font-size: .88rem !important;
    color: #6f7683 !important;
}

/* El bloque de límites. Deliberadamente sobrio y sin naranja: no es un reclamo,
   es una advertencia, y disfrazarla de reclamo sería justo lo contrario de lo
   que pretende. */
.tv-ac-honesto {
    margin: 2.5rem auto 0;
    background: rgba(255, 255, 255, .02);
    border: 1px dashed var(--cs-border);
    border-radius: 12px;
    padding: 1.8rem 1.6rem;
    max-width: 78ch;
}

.tv-ac-honesto h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .9rem;
}

.tv-ac-honesto p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: .95rem;
    margin-bottom: .8rem;
}

.tv-ac-honesto p:last-child { margin-bottom: 0; }
.tv-ac-honesto strong { color: var(--text-primary); }

@media (max-width: 768px) {
    .tv-pasos, .tv-ac { padding: 3.5rem 0; }
    .tv-paso-num { font-size: 2.6rem; }
}

/* El header es fijo: sin esto, al saltar a #anticheat el titular queda debajo
   de la barra. Reserva su altura al desplazarse. */
#anticheat { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }

/* ============================================================================
   ENLACES DE TEXTO
   No había ninguna regla base para <a>, así que cualquier enlace dentro de un
   párrafo salía con el estilo por defecto del navegador: azul, morado al
   visitarlo y subrayado grueso. Fuera de sitio en una paleta oscura y naranja.

   Esto NO afecta a los enlaces que ya son botones o pestañas (.btn, .main-nav-tab,
   .sidebar-link…): esos llevan su propio estilo y se excluyen expresamente, para
   que añadir esta regla no descoloque nada de lo que ya funcionaba.
   ========================================================================= */

a:not([class]),
.tv-capa a,
.tv-entrada a,
.feature-accordion-content a,
.tv-ac-honesto a,
.tv-paso a {
    color: var(--cs-orange);
    text-decoration: none;
    /* Subrayado fino y separado del texto: se ve que es un enlace sin que
       parezca tachado. Al pasar por encima se refuerza, que es la señal de
       que responde. */
    border-bottom: 1px solid rgba(221, 132, 33, .35);
    padding-bottom: 1px;
    transition: color .18s ease, border-color .18s ease;
}

a:not([class]):hover,
.tv-capa a:hover,
.tv-entrada a:hover,
.feature-accordion-content a:hover,
.tv-ac-honesto a:hover,
.tv-paso a:hover {
    color: var(--cs-orange-hover);
    border-bottom-color: var(--cs-orange-hover);
}

/* El navegador pinta de morado los enlaces ya visitados. Con una paleta propia
   eso no aporta nada y rompe la coherencia: se mantiene el color de la marca. */
a:not([class]):visited,
.tv-capa a:visited,
.feature-accordion-content a:visited { color: var(--cs-orange); }

/* Accesibilidad: quien navega con el teclado tiene que ver dónde está. */
a:focus-visible {
    outline: 2px solid var(--cs-orange);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   RITMO VERTICAL DE LAS SECCIONES
   Las 10 pestañas llevaban `style="padding: 4rem 0"` escrito a mano en el HTML.
   Con el espaciado repartido por diez atributos, cambiar el ritmo de la página
   obligaba a buscarlos uno a uno — y por eso unas secciones se pegaban y otras
   dejaban un vacío. Ahora sale de la escala del sistema: una variable.
   --------------------------------------------------------------------------- */
.page-section:not(#tab-home) {
    padding-block: var(--sec-y, 4.5rem);
}

/* ---------------------------------------------------------------------------
   ALINEACIÓN DE LA PORTADA
   El hero y el carrusel iban centrados, pero «Empezar» y «Anti-cheat» quedaban
   alineadas a la izquierda: en la misma página convivían dos criterios sin
   motivo, y se notaba aunque no se supiera por qué. Se unifica al centrado, que
   es lo que ya usa la mayor parte de la portada.

   Excepción a propósito: los párrafos largos del bloque de capas del anti-cheat
   se quedan a la izquierda. Un texto largo centrado obliga al ojo a buscar
   dónde empieza cada línea y cansa; centrar el titular y alinear el cuerpo es
   la combinación que se lee mejor.
   --------------------------------------------------------------------------- */
.tv-pasos > .container,
.tv-ac > .container {
    text-align: center;
}

/* Las entradillas centradas necesitan margen automático: sin él, el max-width
   las deja pegadas a la izquierda dentro de un contenedor centrado. */
.tv-pasos .tv-entrada,
.tv-ac .tv-entrada,
.tv-ac > .container > p {
    margin-inline: auto;
}

/* El contenido de las tarjetas y las capas vuelve a la izquierda: son bloques
   de lectura, no titulares. */
.tv-paso,
.tv-capa,
.tv-ac-honesto {
    text-align: left;
}

/* El carrusel abría con 3rem propios encima del padding de la sección, así que
   sumaba casi 7rem de hueco justo donde menos hace falta. */
.hero .carousel-container {
    margin-top: var(--bloque-y, 2rem) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA SUPERIOR  ·  rediseño 25-ago-2026
   ---------------------------------------------------------------------------
   Sustituye al banner ilustrado de 350 px con el logo flotando encima. Aquel
   consumía casi un tercio de la pantalla antes de que se viera nada, y hacía
   que la página pareciera un proyecto personal en vez de una plataforma.

   El patrón es el de Faceit, ESEA y GamersClub: barra de 64 px, fija, con la
   marca a la izquierda, la navegación en el centro y el estado más el acceso a
   la derecha. Una plataforma se reconoce porque la barra se aparta y deja el
   sitio al contenido.
   ═══════════════════════════════════════════════════════════════════════════ */

.barra-top {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
    /* Fondo translúcido con desenfoque: la página se ve pasar por detrás, que
       es lo que hace que la barra parezca una capa de la interfaz y no un
       bloque pegado encima. El color de respaldo va primero por si el navegador
       no soporta backdrop-filter. */
    background: rgba(11, 13, 17, .92);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    /* Una línea de 1px, no una sombra: separa sin añadir peso visual. */
    border-bottom: 1px solid var(--linea, #262B35);
}

/* --- Marca ---------------------------------------------------------------
   El logo ancla la esquina y no compite con nada. El texto al lado lo hace
   legible incluso cuando el icono es pequeño. */
.barra-marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    border: none;
    flex-shrink: 0;
}

/* --- Navegación ----------------------------------------------------------
   Empuja hacia el centro con margin-inline: auto en lugar de un contenedor
   extra. La pestaña activa se marca con una línea inferior, no con un fondo:
   el fondo compite con el botón de acceso. */
.barra-nav {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-inline: auto;
}
.barra-nav .header-nav-link.active-tab { color: var(--texto, #E8EAED); }
.barra-nav .header-nav-link.active-tab::after {
    content: "";
    position: absolute;
    left: .85rem; right: .85rem;
    bottom: -1.05rem;                 /* sobre la línea inferior de la barra */
    height: 2px;
    background: var(--marca, #DD8421);
    border-radius: 2px 2px 0 0;
}

/* --- Estado y acceso ----------------------------------------------------- */
.barra-fin {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-shrink: 0;
}

/* El estado del servidor vive aquí a propósito: es la prueba de que hay algo
   funcionando al otro lado, y se ve sin tener que bajar. */
.barra-estado {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-cifra, monospace);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-3, #808690);
    padding: .3rem .6rem;
    border: 1px solid var(--linea, #262B35);
    border-radius: var(--radio-min, 3px);
}
.barra-estado b { font-weight: 500; }
.punto-estado {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--texto-3, #808690);
    flex-shrink: 0;
}
.barra-estado.vivo { color: var(--bien, #4FB584); border-color: rgba(79,181,132,.35); }
.barra-estado.vivo .punto-estado {
    background: var(--bien, #4FB584);
    box-shadow: 0 0 0 3px rgba(79,181,132,.15);
}
.barra-estado.caido { color: var(--mal, #D9564C); border-color: rgba(217,86,76,.35); }
.barra-estado.caido .punto-estado { background: var(--mal, #D9564C); }

.barra-top .header-btn-auth {
    background: var(--marca, #DD8421);
    color: #14100A;
    border: none;
    border-radius: var(--radio, 6px);
    padding: .55rem 1.15rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.barra-top .header-btn-auth:hover {
    background: var(--marca-claro, #F0952D);
    transform: translateY(-1px);
}
.barra-top .header-btn-auth:active { transform: translateY(0); }

/* --- Móvil ---------------------------------------------------------------
   La web bloquea móviles con un aviso a propósito (el móvil será una app en Go),
   pero la barra tiene que aguantar una ventana estrecha en escritorio. */
@media (max-width: 900px) {
    .barra-nav { display: none; }
    .barra-estado { display: none; }
    .barra-in { gap: 1rem; }
}

/* La ilustración del banner no se pierde: pasa a ser el fondo del hero, que es
   donde luce sin robar espacio a la navegación. */
.hero {
    position: relative;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(11,13,17,.72) 0%,
            rgba(11,13,17,.90) 55%,
            var(--fondo, #0B0D11) 100%),
        url('img/user_banner.webp') center 28% / cover no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA  ·  rediseño completo 25-ago-2026
   ---------------------------------------------------------------------------
   Criterio: la portada tiene UNA promesa —aquí el wallhack no funciona— y todo
   lo demás la sostiene. Antes eran cinco bloques de peso parecido compitiendo
   entre sí; ahora hay una jerarquía clara.

   Decisiones que rompen el patrón genérico:
   · El hero es asimétrico y alineado a la izquierda, no un bloque centrado.
   · Las tres capas del anti-cheat van escalonadas, no en tres columnas iguales.
   · La numeración de los pasos es marca de agua, no un círculo con número.
   · Cero sombras negras: sobre fondo oscuro la profundidad se hace subiendo
     el fondo del panel, no oscureciendo debajo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- HERO ---------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(4rem, 11vw, 8rem) clamp(3.5rem, 9vw, 6.5rem);
    overflow: hidden;
}

/* La ilustración de fondo, atenuada y desplazada a la derecha: acompaña sin
   competir con el texto, que manda. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('img/user_banner.webp') 72% 30% / cover no-repeat;
    opacity: .5;
}
/* Degradado que empuja el foco a la izquierda, donde está el mensaje. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, #0B0D11 8%, rgba(11,13,17,.92) 42%, rgba(11,13,17,.55) 100%),
        linear-gradient(180deg, transparent 55%, #0B0D11 100%);
}

.hero-in { max-width: 1180px; }

.hero-kicker {
    font-family: var(--f-cifra, 'IBM Plex Mono', monospace);
    font-size: .74rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--marca, #DD8421);
    margin: 0 0 1.1rem;
}

.hero-titulo {
    font-family: var(--f-titulo, 'Barlow Condensed', sans-serif);
    font-size: clamp(2.6rem, 7.5vw, 5.4rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1.4rem;
    max-width: 16ch;
}
.hero-titulo em {
    font-style: normal;
    color: var(--marca, #DD8421);
}

.hero-lede {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.65;
    color: var(--texto-2, #9AA1AC);
    max-width: 56ch;
    margin: 0 0 2.2rem;
}
.hero-lede strong { color: #fff; font-weight: 600; }

.hero-acciones {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: 2.6rem;
}

/* Los sellos van como lista con iconos, no como pastillas de colores: tres
   pastillas de tres colores distintos era parte del ruido anterior. */
.hero-sellos {
    display: flex;
    gap: 1.9rem;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255,255,255,.09);
    max-width: 44rem;
}
.hero-sellos li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .87rem;
    color: var(--texto-3, #808690);
}
.hero-sellos svg { width: 17px; height: 17px; color: var(--marca, #DD8421); flex-shrink: 0; }

/* --- BLOQUES ------------------------------------------------------------- */
.bloque { padding-block: clamp(3.5rem, 8vw, 6rem); }
.bloque-borde { border-top: 1px solid var(--linea, #262B35); }
.bloque-oscuro {
    background: #090B0F;
    border-block: 1px solid var(--linea, #262B35);
}

.titulo-2 {
    font-family: var(--f-titulo, 'Barlow Condensed', sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

.entrada {
    font-size: 1.03rem;
    line-height: 1.7;
    color: var(--texto-2, #9AA1AC);
    max-width: 62ch;
    margin: 0 0 3rem;
}
.entrada strong { color: #fff; font-weight: 600; }

/* --- PASOS ---------------------------------------------------------------
   Numerados de verdad porque SÍ es una secuencia: el paso 2 no tiene sentido
   sin el 1. El número va como marca de agua para guiar sin gritar. */
.pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 1.1rem;
    list-style: none;
    padding: 0;
    margin: 2.4rem 0 0;
    counter-reset: paso;
}
.paso {
    position: relative;
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-radius: 8px;
    padding: 1.7rem 1.5rem 1.5rem;
    overflow: hidden;
    transition: border-color .22s ease, transform .22s ease;
}
.paso:hover { border-color: rgba(221,132,33,.4); transform: translateY(-2px); }
.paso-n {
    position: absolute;
    top: .5rem; right: 1rem;
    font-family: var(--f-cifra, monospace);
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(221,132,33,.13);
    pointer-events: none;
}
.paso h3 {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.14rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 .6rem;
    position: relative;
}
.paso p { font-size: .93rem; line-height: 1.62; color: var(--texto-2, #9AA1AC); margin: 0; }
.paso code {
    background: rgba(221,132,33,.14);
    border: 1px solid rgba(221,132,33,.3);
    color: var(--marca, #DD8421);
    padding: .08em .4em;
    border-radius: 4px;
    font-family: var(--f-cifra, monospace);
    font-size: .92em;
}

.pasos-pie {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-top: 2.2rem;
}
.btn-discord {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #5865F2;
    color: #fff;
    font-weight: 600;
    font-size: .93rem;
    padding: .8rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    transition: background .2s ease, transform .2s ease;
}
.btn-discord:hover { background: #4752c4; transform: translateY(-1px); color: #fff; }
.pasos-nota { font-size: .87rem; color: var(--texto-3, #808690); margin: 0; max-width: 40ch; }

/* --- CAPAS DEL ANTI-CHEAT ------------------------------------------------
   Escalonadas, no en tres columnas iguales: la capa 1 es la que de verdad
   importa (el fog-of-war) y ocupa más, porque no todas pesan lo mismo. */
.capas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 1.1rem;
    margin-bottom: 2.4rem;
    /* stretch, no start: las tres tarjetas comparten base y altura. Con `start`
       cada una acababa donde le tocaba y el bloque parecía desmontado. */
    align-items: stretch;
}

/* La capa 1 ocupa el ancho de dos: es la que sostiene toda la promesa del hero
   —el fog-of-war es lo único que ningún competidor tiene— y merece más sitio
   que las otras dos. Eso es jerarquía; desplazarlas verticalmente no lo era. */
@media (min-width: 900px) {
    .capas { grid-template-columns: 1.55fr 1fr 1fr; }
}
.capa {
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-top: 2px solid var(--marca, #DD8421);
    border-radius: 0 0 8px 8px;
    padding: 1.6rem 1.5rem;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.capa:hover {
    box-shadow: 0 0 20px rgba(221,132,33,.12);
    border-color: rgba(221,132,33,.35);
}

/* Registro técnico real (máscara de trazado, verificada en el propio motor
   del anti-cheat) — no una cifra inventada. Estilo terminal: monoespaciada,
   panel más oscuro que la tarjeta que lo envuelve. */
.capa-log {
    margin-top: 1.1rem;
    background: var(--fondo, #0B0D11);
    border: 1px solid var(--linea, #262B35);
    border-radius: 6px;
    padding: .85rem 1rem;
    font-family: var(--f-cifra, monospace);
    font-size: .78rem;
    line-height: 1.7;
    color: var(--bien, #4FB584);
    white-space: pre-wrap;
    word-break: break-word;
}
.capa-log span { color: var(--texto-3, #808690); }
/* La primera capa se destaca y arranca más arriba: jerarquía real, no tres
   tarjetas idénticas. */
.capa-1 {
    background: linear-gradient(180deg, rgba(221,132,33,.06), transparent 55%), var(--panel, #13161C);
}
/* El escalonado por margin-top se retiró el 25-ago-2026: dejaba las tres
   tarjetas a alturas distintas arriba Y abajo, y parecía un error en vez de
   una decisión. La jerarquía se hace ahora por peso visual —la capa 1 ocupa
   más ancho y tiene más presencia— manteniendo la base alineada. */
.capa header { margin-bottom: .9rem; }
.capa-n {
    display: block;
    font-family: var(--f-cifra, monospace);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--marca, #DD8421);
    margin-bottom: .5rem;
}
.capa h3 {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.16rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.22;
    color: #fff;
    margin: 0;
}
.capa p { font-size: .93rem; line-height: 1.68; color: var(--texto-2, #9AA1AC); margin: 0 0 .85rem; }
.capa p:last-child { margin-bottom: 0; }
.capa strong { color: #fff; font-weight: 600; }
.capa-matiz {
    border-left: 2px solid var(--linea, #262B35);
    padding-left: .9rem;
    font-size: .86rem !important;
    color: #6f757f !important;
}

/* El bloque de límites: sobrio y sin naranja a propósito. No es un reclamo,
   es una advertencia, y disfrazarla de reclamo sería lo contrario de lo que
   pretende. */
.limite {
    background: rgba(255,255,255,.02);
    border: 1px dashed var(--linea, #262B35);
    border-radius: 8px;
    padding: 1.7rem 1.6rem;
    max-width: 74ch;
}
.limite h3 {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 .8rem;
}
.limite p { font-size: .93rem; line-height: 1.68; color: var(--texto-2, #9AA1AC); margin: 0 0 .8rem; }
.limite p:last-child { margin-bottom: 0; }
.limite strong { color: #fff; font-weight: 600; }

/* --- FUNCIONALIDADES -----------------------------------------------------
   Dos columnas, no tres tarjetas con icono: el patrón de tres columnas
   iguales con iconito es la firma más reconocible del diseño automático. */
.rejilla-func {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0;
    margin-top: 2.4rem;
    border-top: 1px solid var(--linea, #262B35);
}
.func {
    padding: 1.8rem 1.6rem 1.8rem 0;
    border-bottom: 1px solid var(--linea, #262B35);
}
@media (min-width: 780px) {
    .func:nth-child(odd) { padding-right: 3rem; }
    .func:nth-child(even) { padding-left: 3rem; border-left: 1px solid var(--linea, #262B35); }
}
.func h3 {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.14rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 .55rem;
}
.func p { font-size: .93rem; line-height: 1.65; color: var(--texto-2, #9AA1AC); margin: 0; max-width: 46ch; }

/* --- CIERRE -------------------------------------------------------------- */
.cierre {
    padding-block: clamp(4rem, 9vw, 6.5rem);
    border-top: 1px solid var(--linea, #262B35);
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(221,132,33,.09), transparent 70%),
        #090B0F;
    text-align: center;
}
.cierre-in > p {
    color: var(--texto-2, #9AA1AC);
    max-width: 46ch;
    margin: 0 auto 2rem;
}
.cierre .hero-acciones { justify-content: center; margin-bottom: 2rem; }
.cierre-nota { font-size: .85rem; color: var(--texto-3, #808690); margin: 0; }

/* --- BOTONES DE LA PORTADA ----------------------------------------------- */
.hero .btn-1, .cierre .btn-1, .hero .btn-2, .cierre .btn-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-texto, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    padding: .95rem 1.9rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.hero .btn-1, .cierre .btn-1 {
    background: var(--marca, #DD8421);
    color: #14100A;
    border-color: var(--marca, #DD8421);
}
.hero .btn-1:hover, .cierre .btn-1:hover {
    background: var(--marca-claro, #F0952D);
    border-color: var(--marca-claro, #F0952D);
    transform: translateY(-2px);
}
.hero .btn-2, .cierre .btn-2 {
    background: rgba(255,255,255,.04);
    color: #fff;
    border-color: rgba(255,255,255,.15);
}
.hero .btn-2:hover, .cierre .btn-2:hover {
    border-color: var(--marca, #DD8421);
    color: var(--marca, #DD8421);
}
.hero .btn-1:active, .cierre .btn-1:active { transform: translateY(0); }

/* Contenedor de la portada, alineado con el de la barra superior. */
.contenedor {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

#anticheat { scroll-margin-top: 84px; }

/* --- CORRECCIONES tras la primera revisión visual (25-ago-2026) ----------- */

/* El hero: el titular iba a la izquierda pero el párrafo y los botones salían
   centrados, heredando un `text-align: center` de la regla antigua de .hero.
   Un bloque con dos alineaciones distintas se lee como un descuadre. */
.hero, .hero-in { text-align: left; }
.hero-lede, .hero-acciones, .hero-sellos { margin-left: 0; margin-right: 0; }

/* La entradilla del anti-cheat heredaba fondo y borde de una regla antigua
   (.entrada existía ya en el CSS viejo con otro propósito). Es texto de
   lectura, no una caja. */
.bloque-oscuro .entrada,
#anticheat .entrada {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* «Todo lo demás»: con auto-fit y 4 tarjetas quedaba 3+1, con la última suelta
   y el bloque descompensado. Se fija a 2 columnas para que salga 2+2. */
@media (min-width: 780px) {
    .rejilla-func { grid-template-columns: 1fr 1fr; }
}

/* La capa 1 es la que sostiene toda la promesa del hero (el fog-of-war): se
   destaca de verdad en vez de ser una de tres tarjetas iguales. */
@media (min-width: 900px) {
    .capa-1 {
        border-top-width: 3px;
        box-shadow: inset 0 1px 0 rgba(221,132,33,.25);
    }
    .capa-1 h3 { font-size: 1.28rem; }
}

/* Las secciones no deben heredar el centrado global que se aplicó antes a
   .tv-pasos y .tv-ac (bloques que ya no existen). */
#empezar, #anticheat, .cierre .contenedor > .titulo-2 { text-align: left; }
.cierre-in { text-align: center; }

/* --- BOTONES DE MARCAS DE TERCEROS --------------------------------------
   Regla, y es de confianza más que de estética: cuando un botón lleva a Steam
   o a Discord, usa los colores y el logo de ESA marca, nunca los nuestros.

   Un botón naranja que dice "Entrar con Steam" sin el logo se lee como una
   suplantación — y justo ahí es donde alguien decide si vincula su cuenta, con
   su tarjeta y su inventario detrás. La familiaridad del color y del icono ES
   la señal de que el sitio es legítimo.

   Steam: azules oficiales de su interfaz (#1b2838 fondo, #66c0f4 acento).
   Discord: su morado (#5865F2), el mismo de su botón "Add to Server".
   ------------------------------------------------------------------------ */
.btn-steam-grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: linear-gradient(180deg, #2a475e 0%, #1b2838 100%);
    border: 1px solid #66c0f4;
    color: #fff;
    font-family: var(--f-texto, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    padding: .9rem 1.8rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

/* Discord conserva su morado y su logo. Estaba bien: se documenta para que no
   se le aplique el naranja de la marca en el futuro. */
.btn-discord { background: #5865F2; color: #fff; }
.btn-discord:hover { background: #4752C4; color: #fff; }
.btn-discord:focus-visible { outline: 2px solid #5865F2; outline-offset: 3px; }

/* --- CABECERA DE PÁGINA INTERIOR ---------------------------------------- */
.pag-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding-block: clamp(2.5rem, 6vw, 4rem) 2.4rem;
    border-bottom: 1px solid var(--linea, #262B35);
    margin-bottom: 2.4rem;
}
.pag-lede {
    color: var(--texto-2, #9AA1AC);
    max-width: 56ch;
    margin: .6rem 0 0;
    font-size: .98rem;
}
.pag-cabecera .titulo-2 { margin-bottom: 0; }

/* --- GUÍA ----------------------------------------------------------------
   Lista numerada en columna, no cuatro tarjetas con icono en círculo: ese
   patrón no aporta información y es la firma más reconocible del diseño
   automático. Aquí el número SÍ importa porque es una secuencia. */
.guia {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    max-width: 62rem;
    counter-reset: g;
}
.guia-paso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--linea-suave, #1E222A);
}
.guia-paso:last-child { border-bottom: none; }
.guia-n {
    font-family: var(--f-cifra, monospace);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--marca, #DD8421);
    line-height: 1.2;
    opacity: .85;
}
.guia-paso h3 {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.16rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 .55rem;
}
.guia-paso p { font-size: .95rem; line-height: 1.68; color: var(--texto-2, #9AA1AC); margin: 0 0 .6rem; max-width: 62ch; }
.guia-paso p:last-child { margin-bottom: 0; }
.guia-paso code {
    background: rgba(221,132,33,.14);
    border: 1px solid rgba(221,132,33,.3);
    color: var(--marca, #DD8421);
    padding: .08em .4em;
    border-radius: 4px;
    font-family: var(--f-cifra, monospace);
    font-size: .92em;
}
.guia-una-vez {
    display: inline-block;
    font-family: var(--f-cifra, monospace);
    font-size: .68rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-3, #808690) !important;
    border: 1px solid var(--linea, #262B35);
    border-radius: 3px;
    padding: .18rem .5rem;
    margin-top: .3rem !important;
}

/* Tabla de comandos: definición, no tarjetas. Es una referencia que se consulta. */
.guia-extra {
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-radius: 8px;
    padding: 1.8rem 1.7rem;
    max-width: 62rem;
    margin-bottom: 3rem;
}
.guia-extra h3 {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 1.2rem;
}
.comandos { margin: 0; display: grid; gap: .85rem; }
.comandos > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--linea-suave, #1E222A);
}
.comandos > div:last-child { border-bottom: none; padding-bottom: 0; }
.comandos dt { margin: 0; }
.comandos dt code {
    background: rgba(221,132,33,.14);
    border: 1px solid rgba(221,132,33,.3);
    color: var(--marca, #DD8421);
    padding: .2em .55em;
    border-radius: 4px;
    font-family: var(--f-cifra, monospace);
    font-size: .88rem;
}
.comandos dd { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--texto-2, #9AA1AC); }
.comandos dd code { font-size: .9em; color: var(--texto-2, #9AA1AC); }

@media (max-width: 640px) {
    .guia-paso { grid-template-columns: 1fr; gap: .5rem; }
    .comandos > div { grid-template-columns: 1fr; gap: .3rem; }
}

.cierre-lede { color: var(--texto-2, #9AA1AC); max-width: 48ch; margin: 0 auto 1.6rem; }
.cierre-lede strong { color: var(--marca, #DD8421); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA SUPERIOR  ·  segunda vuelta (25-ago-2026)
   ---------------------------------------------------------------------------
   Correcciones pedidas por Luis:
   · El icono del logo no se leía a 34 px: va en una caja con fondo que lo
     separa del resto y le da un sitio propio.
   · El wordmark parte la marca: TV en blanco, WARS en naranja.
   · La navegación parecía genérica: pasa a mayúsculas condensadas, el registro
     de las plataformas competitivas, y «Buscar partida» se destaca porque es
     LA acción, no un enlace más.
   · Los botones salen de la landing y viven aquí: Steam con sus azules y
     Discord con su morado. Un botón que lleva a otra empresa usa los colores
     de esa empresa — es lo que hace que no se lea como una suplantación.
   ═══════════════════════════════════════════════════════════════════════════ */

.barra-top { height: 68px; }

/* --- Marca --------------------------------------------------------------- */
.barra-marca { gap: .7rem; }

/* --- Navegación ----------------------------------------------------------
   Mayúsculas condensadas: es el registro del sector y distingue de un menú
   corriente. El subrayado del activo va pegado al borde de la barra. */
.barra-nav { gap: .1rem; }
.barra-nav .header-nav-link.active-tab { color: #fff; }
.barra-nav .header-nav-link.active-tab::after { bottom: -1.2rem; height: 2px; }

/* «Buscar partida» es la acción que da sentido a la plataforma: se marca en
   naranja y con un punto, no como un enlace más de la lista. */
.barra-nav .nav-jugar {
    color: var(--marca, #DD8421);
    position: relative;
    padding-left: 1.35rem;
}
.barra-nav .nav-jugar::before {
    content: "";
    position: absolute;
    left: .55rem; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--marca, #DD8421);
}
.barra-nav .nav-jugar:hover { color: var(--marca-claro, #F0952D); }
.barra-nav .nav-jugar.active-tab { color: var(--marca-claro, #F0952D); }

/* --- Botones de marca en la barra ---------------------------------------- */
.btn-steam-barra {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(180deg, #2a475e 0%, #1b2838 100%);
    border: 1px solid #4c7a99;
    color: #fff;
    font-family: var(--f-texto, 'Inter', sans-serif);
    font-size: .88rem;
    font-weight: 600;
    padding: .55rem 1.05rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

/* El estado del servidor, más discreto: informa sin competir con los botones. */
.barra-estado { font-size: .68rem; padding: .28rem .55rem; }

@media (max-width: 1100px) {
    .barra-nav .header-nav-link { font-size: .95rem; padding: .5rem .55rem; }
}
@media (max-width: 980px) {
    .barra-estado { display: none; }
}

/* --- Hero sin botones -----------------------------------------------------
   La landing informa; las acciones viven en la barra, que está siempre a la
   vista. El sello de cierre sustituye a los botones que había. */
.hero-sellos { margin-top: 2.4rem; }

/* --- La barra no cabía: seis enlaces + estado + dos botones se solapaban ---
   Corregido el 25-ago-2026. Tres medidas:
   · La barra usa todo el ancho disponible, no el contenedor de 1180 px.
   · La navegación puede encogerse (min-width: 0) en vez de empujar.
   · El estado del servidor pasa a texto corto y desaparece antes que el resto,
     porque es lo menos crítico de los tres grupos. */
.barra-in {
    max-width: 1600px;
    gap: 1rem;
}

@media (max-width: 1400px) {
    .barra-nav .header-nav-link { padding: .5rem .6rem; font-size: .96rem; }
}
@media (max-width: 1250px) {
    .barra-estado { display: none; }
}
@media (max-width: 1050px) {
    .btn-steam-barra { font-size: .82rem; padding: .5rem .8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA SUPERIOR  ·  tercera vuelta (25-ago-2026)
   ---------------------------------------------------------------------------
   Esta vez con las referencias reales delante (capturas de Faceit y ESEA), no
   de memoria. Lo que hacen las dos:
     · Logo a la izquierda, SIN caja: solo icono y wordmark.
     · Tres o cuatro enlaces, no seis. Faceit tiene tres.
     · UN botón de acceso, no tres elementos compitiendo.
     · Nada de estado del servidor arriba: eso baja al contenido.

   Y una corrección de Luis que era obvia: no puede haber «Cómo funciona» en el
   menú y la misma sección dentro de la landing. Se elige uno.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El logo, sin caja. */
.barra-marca .marca-icono { display: none; }

/* El menú, alineado a la izquierda junto a la marca —no centrado a la fuerza—
   y con aire hasta el botón de acceso. Es la disposición de Faceit. */
.barra-nav {
    margin: 0;
    gap: .2rem;
}

/* El estado, ahora en el hero. */
.hero-estado {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-cifra, monospace);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-3, #808690);
    margin: 0 0 1.8rem;
}
.hero-estado.vivo { color: var(--bien, #4FB584); }
.hero-estado.vivo .punto-estado {
    background: var(--bien, #4FB584);
    box-shadow: 0 0 0 3px rgba(79,181,132,.16);
}
.hero-estado.caido { color: var(--mal, #D9564C); }
.hero-estado.caido .punto-estado { background: var(--mal, #D9564C); }
.hero-estado b { font-weight: 500; }

/* --- Últimos ajustes del cabecero (25-ago-2026) ---------------------------
   Luis: «el menú no se interpreta ni que sea de la página, parece copiado de
   otra y pegado aquí». Tenía razón y la causa era concreta: .nav-links del CSS
   antiguo le ponía fondo, borde y radio, así que el menú flotaba como una
   cápsula ajena en vez de formar parte de la barra. Ni Faceit ni ESEA encierran
   su navegación en una caja. */
.barra-top .nav-links {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* El logo tenía que verse mejor: 32 px eran pocos para un escudo con detalle. */
.barra-marca > img { width: 38px; height: 38px; }

/* El punto de «Jugar» respiraba poco. */
.barra-nav .nav-jugar { padding-left: 1.5rem; }
.barra-nav .nav-jugar::before { left: .7rem; }

/* La barra crece un poco para acompañar al logo. */
.barra-top { height: 72px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERO  ·  cuarta vuelta (25-ago-2026)
   ---------------------------------------------------------------------------
   Luis: *"el menú tiene que estar en la izquierda totalmente y el logotipo
   tiene que aparecer que se vea bien, porque no sabemos ni qué página es ni de
   quién es. En el menú no metas el logotipo, mételo en la landing, en el
   lateral izquierdo."*

   Tenía razón en el fondo del problema: un escudo con detalle a 38 px no se
   lee, y un logo que no se lee no cumple su única función. Así que sale de la
   barra y baja al hero, donde tiene sitio para reconocerse.

   El menú arranca en el borde izquierdo, sin nada delante.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El menú, pegado a la izquierda: sin logo delante ya no necesita margen. */
.barra-in { gap: 1.2rem; }

/* --- Steam y Discord: grupo unido, no dos piezas sueltas ------------------
   Antes eran un cuadrado morado y un botón azul flotando por separado. Ahora
   comparten altura, radio y peso: se leen como un solo control de acceso, y
   cada uno conserva el color de SU marca, que es lo que evita que parezcan
   un anuncio pegado. */
.barra-fin {
    gap: 0;
    align-items: stretch;
    height: 38px;
}
/* Discord a la izquierda del par: su morado, en versión discreta. */
.barra-discord {
    border-radius: 6px 0 0 6px;
    background: rgba(88,101,242,.12);
    border-color: rgba(88,101,242,.42);
    border-right-color: rgba(88,101,242,.28);
    color: #a3abf9;
    text-decoration: none;
}
/* Steam a la derecha, con más peso: es la acción principal. */
.btn-steam-barra {
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #2a475e 0%, #1b2838 100%);
    border-color: #4c7a99;
    border-left-color: rgba(88,101,242,.28);
    color: #fff;
    transform: none !important;
}

/* --- El logo, en el hero -------------------------------------------------- */
.hero-logo {
    display: block;
    width: clamp(84px, 9vw, 118px);
    height: auto;
    margin-bottom: 1.6rem;
    /* Un halo tenue lo despega del fondo ilustrado sin recuadrarlo. */
    filter: drop-shadow(0 3px 14px rgba(0,0,0,.55));
}

@media (max-width: 900px) {
    .barra-discord span { display: none; }
    .barra-discord { padding: 0 .8rem; }
}

/* El menú tiene que arrancar EN LA IZQUIERDA, alineado con el contenido de la
   página (el logo del hero, el titular). Antes .barra-in usaba un ancho máximo
   de 1600 px mientras el contenido va a 1180: el menú quedaba flotando en un
   punto que no coincidía con nada. Ahora comparten retícula. */
.barra-in {
    max-width: 1180px;
    padding-inline: clamp(1rem, 4vw, 2rem);
    justify-content: flex-start;
}

/* La barra usa TODO el ancho de la ventana, no el contenedor de 1180 px.
   Así el menú queda pegado al borde izquierdo de verdad y los botones al
   derecho, que es la disposición de Faceit: la barra es la interfaz de la
   plataforma, no una columna de contenido. */
.barra-in {
    max-width: none;
    padding-inline: clamp(1.2rem, 2.5vw, 2.2rem);
}

/* El menú seguía saliendo centrado pese a `margin-inline: 0 auto`. La causa:
   `.barra-fin` también empujaba desde la derecha, así que los dos `auto` se
   repartían el espacio sobrante a partes iguales y el menú acababa en medio.
   La solución es explícita: el menú NO crece, y el hueco lo absorbe un
   separador entre el menú y los botones. */
.barra-fin { margin-left: auto; }

/* ─── El menú, pegado a la izquierda. DE VERDAD esta vez. ──────────────────
   Diagnóstico medido: el menú arrancaba en el 37 % del ancho. La causa era
   `.nav-links { margin: 0 auto }

/* ─── Menú a la izquierda: solución por grid, no por flex ──────────────────
   Cinco intentos con flex no lo movieron. En vez de añadir un sexto parche,
   se cambia el mecanismo: grid con dos columnas nombradas quita toda ambigüedad
   sobre quién absorbe el espacio sobrante.

   Con flex, el reparto del hueco depende de márgenes `auto`, de `flex-grow` y
   del orden de los hijos, y en una barra con seis reglas acumuladas eso es
   imposible de razonar. Con grid, la primera columna se ajusta al contenido y
   la segunda absorbe el resto: no hay nada que interpretar. */
.barra-top .barra-in {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0;
}
/* El hamburguesa está oculto en escritorio; en móvil ocupa la primera celda. */
.barra-top .nav-hamburger { grid-column: 1; }

@media (max-width: 1100px) {
    /* Con el menú plegado, el hamburguesa ocupa la primera celda y el menú
       pasa a ser el panel desplegable que ya gestiona el JS. */
    .barra-top .barra-nav { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRUEBA (25-ago-2026): SIN BARRA NI MENÚ
   ---------------------------------------------------------------------------
   Luis: *"esa barra quítala y pon los botones arriba como si no hubiera
   header"*. Y sirve además de diagnóstico: si los botones se colocan bien sin
   el contenedor, el problema estaba en la barra, no en ellos.

   Los botones flotan sobre el hero, sin fondo ni línea debajo. La navegación
   sigue disponible en el panel lateral («Mi Panel»), así que no se pierde el
   acceso a ninguna sección.
   ═══════════════════════════════════════════════════════════════════════════ */

.barra-top {
    position: absolute;      /* flota sobre el hero, no empuja el contenido */
    top: 0; left: 0; right: 0;
    height: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    z-index: 100;
    pointer-events: none;    /* solo los botones reciben clics */
}

/* Sin barra, el hero recupera el espacio de arriba. */
.hero { padding-block: clamp(5.5rem, 12vw, 9rem) clamp(3.5rem, 9vw, 6.5rem); }

/* El hamburguesa ya no hace falta: no hay menú que plegar. */
.nav-hamburger { display: none !important; }

/* --- Acceso a las secciones, sin menú superior --------------------------- */
.ir-a {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 1rem;
    margin-top: 2.4rem;
}
.ir-tarjeta {
    display: block;
    background: var(--panel, #13161C);
    border: 1px solid var(--linea, #262B35);
    border-radius: 8px;
    padding: 1.5rem 1.4rem;
    text-decoration: none;
    transition: border-color .22s ease, transform .22s ease, background .22s ease;
}
.ir-tarjeta:hover {
    border-color: rgba(221,132,33,.5);
    background: var(--panel-hover, #1F242D);
    transform: translateY(-2px);
}
.ir-tarjeta h3 {
    font-family: var(--f-titulo, sans-serif);
    font-size: 1.12rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 .45rem;
}
.ir-tarjeta p { font-size: .9rem; line-height: 1.6; color: var(--texto-2, #9AA1AC); margin: 0; }
/* «Buscar partida» destaca: es la acción, no una sección más. */
.ir-destacada { border-color: rgba(221,132,33,.42); }
.ir-destacada h3 { color: var(--marca, #DD8421); }

/* --- Dos correcciones de accesibilidad medidas (25-ago-2026) -------------- */

/* El gris de los matices daba 3,9:1 sobre el panel: por debajo del mínimo
   legible de 4,5. Es texto que alguien con poca vista no llega a leer.
   #808690 da 4,94 y mantiene el tono apagado que distingue el matiz del
   argumento principal. */
.capa-matiz { color: #808690 !important; }

/* El botón «Entrar» medía 19 px de alto. El mínimo para un objetivo táctil
   son 44: por debajo, quien tenga poco pulso o use el móvil falla el clic.
   Se sube el par entero para que Discord y Steam sigan alineados. */
.barra-fin { height: 44px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESO CON LOS BOTONES OFICIALES  ·  25-ago-2026
   ---------------------------------------------------------------------------
   Petición de Luis: usar los assets propios de cada empresa, no versiones
   nuestras. El de Steam es el que Valve publica para «Sign in through Steam»
   —incluye su descargo «This site not associated with Valve Corp.»— y el de
   Discord su logo oficial con su morado.

   Y es más que estética: cuando alguien va a vincular una cuenta con tarjeta e
   inventario detrás, el botón familiar ES la señal de que el sitio es
   legítimo. Uno inventado se lee como una suplantación.
   ═══════════════════════════════════════════════════════════════════════════ */

.acceso-oficial {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
    padding-top: 2.2rem;
    border-top: 1px solid var(--linea, #262B35);
}

/* El botón de Steam se sirve tal cual lo publica Valve: sin fondo, sin borde
   y sin recolorear. Alterarlo rompería el reconocimiento. */
.btn-steam-oficial {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    border-radius: 4px;
    transition: transform .18s ease, filter .18s ease;
}

/* Discord con su morado oficial (#5865F2) y su logo. */
.btn-discord-oficial {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    background: #5865F2;
    color: #fff;
    font-family: var(--f-texto, 'Inter', sans-serif);
    font-size: .95rem;
    font-weight: 600;
    padding: .7rem 1.5rem;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.btn-discord-oficial:hover { color: var(--marca, #DD8421); transform: translateY(-2px); }
.btn-discord-oficial:active { transform: translateY(0); }
.btn-discord-oficial:focus-visible { outline: 2px solid #5865F2; outline-offset: 3px; }
.btn-discord-oficial svg { flex-shrink: 0; }

/* Sin barra superior, el hero arranca desde arriba del todo. */
.hero { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 9vw, 6.5rem); }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES DE ACCESO  ·  versión final (25-ago-2026)
   ---------------------------------------------------------------------------
   Los tres con la identidad que les corresponde:

   · Steam — azul marino de su interfaz actual (#171a21 / #1b2838), que es el
     que un jugador reconoce hoy. El botón verde que Valve sigue publicando es
     de la época de CS:GO y ya no se parece a nada de su web.
   · Discord — su morado #5865F2 y solo su nombre. En su propia web el botón
     pone «Discord», no «Entrar al Discord».
   · Mi panel — el nuestro, en naranja de marca: es una acción de TVWARS, no de
     un tercero. Aparece solo con sesión iniciada.
   ═══════════════════════════════════════════════════════════════════════════ */

.acceso-oficial .btn-steam,
.btn-discord-oficial,
.btn-panel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 46px;
    padding: .75rem 1.6rem;
    font-family: var(--f-texto, 'Inter', sans-serif);
    font-size: .95rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

/* Steam: azul marino de fondo, el de su encabezado actual. Texto e icono en
   el de su encabezado actual. */
.acceso-oficial .btn-steam {
    background: #171a21;
    border-color: #2a475e;
    color: #c7d5e0;
    width: auto;
}
.acceso-oficial .btn-steam:hover {
    background: #1b2838;
    border-color: #66c0f4;
    color: #fff;
    transform: translateY(-2px);
}
.acceso-oficial .btn-steam:active { transform: translateY(0); }
.acceso-oficial .btn-steam:focus-visible { outline: 2px solid #66c0f4; outline-offset: 3px; }
.acceso-oficial .btn-steam svg { color: #fff; }

/* Discord: su morado de fondo, texto blanco siempre (25-ago-2026, Luis). */
.btn-discord-oficial { background: #5865F2; color: #fff; }
.btn-discord-oficial:hover { color: var(--marca, #DD8421); transform: translateY(-2px); }

/* Mi panel: naranja de marca — es nuestro, no de un tercero. */
.btn-panel {
    background: transparent;
    border-color: var(--marca-borde, rgba(221,132,33,.35));
    color: var(--marca, #DD8421);
}
.btn-panel:hover {
    background: rgba(221,132,33,.1);
    border-color: var(--marca, #DD8421);
    transform: translateY(-2px);
}
.btn-panel:focus-visible { outline: 2px solid var(--marca, #DD8421); outline-offset: 3px; }
.btn-panel.hidden { display: none; }

/* Fijo en la esquina superior derecha, fuera de la landing: acceso siempre
   visible en toda la página, independiente del scroll (25-ago-2026). */
.btn-panel-fijo {
    position: fixed;
    top: clamp(1rem, 2.5vw, 1.6rem);
    right: clamp(1rem, 2.5vw, 1.6rem);
    z-index: 2005;
    min-height: 40px;
    padding: .6rem 1.3rem;
    font-size: .85rem;
    background: rgba(11,13,17,.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}