/* San Andreas RP · Web — capa de renovación visual pública.
   Se carga DESPUÉS de estilo.css/landing.css. No toca el admin; solo mejora
   legibilidad, jerarquía y componentes de cara a nuevos jugadores. */

/* ---------- Legibilidad base: subir el suelo tipográfico ---------- */
.formulario label,
.grupo-label,
.pie,
.foro-cat-meta,
.foro-tema-meta,
.acceso-nota,
.campo-ayuda,
.enlace-secundario,
.landing-paso p,
.landing-destacado p,
.acceso-publicidad-intro,
.acceso-publicidad-lista li,
.mec-card > p,
.mec-card li,
.mec-nota,
.landing-ip .detalle,
.landing-android,
.tenue {
    font-size: .95rem;
}

.formulario label,
.grupo-label {
    color: #c4ccd8;
}

.campo-ayuda,
.foro-ultima,
.mec-chips .fc span {
    font-size: .82rem;
}

.mec-card .k,
.mec-stats .l,
.mec-kicker,
.landing-conectar-envoltura .kicker {
    font-size: .78rem;
}

.foro-cat-info p,
.foro-tema-titulo p {
    font-size: .95rem;
}

code {
    font-size: .95em;
}

/* ---------- Accesibilidad ---------- */
:focus-visible {
    outline: 3px solid rgba(255, 209, 92, .85);
    outline-offset: 2px;
    border-radius: 8px;
}

::selection {
    background: rgba(240, 149, 42, .35);
}

.saltar-enlace {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 50;
    background: var(--acento);
    color: #1a1206;
    padding: .7rem 1rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: top .18s ease;
}
.saltar-enlace:focus {
    top: 1rem;
}

html {
    scroll-behavior: smooth;
}
section[id], main[id] {
    scroll-margin-top: 1rem;
}

/* ---------- Key visual de la landing (fondo fijo/parallax) ---------- */
.pagina-landing .hero {
    background:
        linear-gradient(90deg, rgba(14,15,18,.96) 0%, rgba(14,15,18,.86) 42%, rgba(14,15,18,.58) 100%),
        url("portada.jpg") center / cover no-repeat fixed,
        var(--fondo);
}
/* En móvil el background-attachment:fixed se comporta raro (iOS lo ignora o
   escala mal): lo dejamos con scroll normal y conserva el mismo aspecto. */
@media (max-width: 760px) {
    .pagina-landing .hero {
        background-attachment: scroll;
    }
}

/* ---------- Navegación pública de la landing ---------- */
.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: .2rem 0 1rem;
}
.landing-nav-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}
.landing-nav-enlaces a {
    color: var(--texto);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .45rem .8rem;
    font-weight: 700;
    font-size: .92rem;
}
.landing-nav-enlaces a:hover {
    border-color: var(--borde);
    background: rgba(255,255,255,.03);
    color: var(--acento-2);
}
.landing-nav-enlaces a[aria-current="page"] {
    border-color: var(--acento);
    color: var(--acento-2);
}

/* ---------- Ruta de nuevos jugadores ---------- */
.ruta-nueva {
    background:
        radial-gradient(1000px 420px at 0% 0%, rgba(240,149,42,.10), transparent 55%),
        var(--fondo);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}
.ruta-nueva-envoltura {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(2.2rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem);
}
.ruta-nueva .kicker {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--acento);
    font-weight: 900;
    margin: 0 0 .5rem;
}
.ruta-nueva h2 {
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    margin: 0 0 .6rem;
}
.ruta-nueva .intro {
    color: var(--tenue);
    max-width: 68ch;
    font-size: 1.05rem;
    margin: 0 0 1.6rem;
}
.ruta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.ruta-paso {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    border: 1px solid var(--borde);
    border-radius: 18px;
    padding: 1.35rem;
    box-shadow: var(--sombra);
}
.ruta-paso .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--acento-2), var(--acento));
    color: #221600;
    font-weight: 900;
    margin-bottom: .9rem;
}
.ruta-paso h3 {
    margin: 0 0 .5rem;
    font-size: 1.18rem;
}
.ruta-paso p {
    margin: 0 0 .9rem;
    color: var(--tenue);
}
.ruta-paso ul {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--texto);
    display: grid;
    gap: .35rem;
}
.ruta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

/* ---------- Tienda pública ---------- */
.tienda-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}
.tienda-pack {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.tienda-pack .btn {
    margin-top: auto;
}
.tienda-precio {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin: 0 0 .8rem;
    border-left: 4px solid var(--acento);
    padding-left: .7rem;
}
button:disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
}

/* ---------- Foro público: filtro ---------- */
.foro-herramientas {
    display: flex;
    gap: .7rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.foro-buscar {
    flex: 1 1 280px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto);
    padding: .75rem 1rem;
    font-size: 1rem;
}
.foro-buscar:focus {
    outline: 2px solid var(--acento);
    border-color: var(--acento);
}
.foro-vacio {
    display: none;
    margin: 1rem 0;
}
.foro-vacio.visible {
    display: block;
}

/* ---------- Barra pública común ---------- */
.barra-publica .barra-usuario {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.barra-publica .barra-usuario a[aria-current="page"] {
    border-color: var(--acento);
    color: var(--acento-2);
}

/* ---------- Quick wins UX auditoría ---------- */
.foro-post-cuerpo {
    max-width: 70ch;
}
textarea {
    background: var(--fondo-2);
}
textarea:focus {
    outline: 2px solid var(--acento);
    border-color: var(--acento);
}
.grupo-sexo {
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: .7rem .8rem .8rem;
    margin-top: .7rem;
}
.grupo-sexo legend {
    padding: 0 .4rem;
    color: #c4ccd8;
    font-size: .9rem;
}

/* ---------- Páginas públicas de datos (comandos/facciones) ---------- */
.datos-publicos {
    display: grid;
    gap: 1rem;
}
.datos-publicos-cabecera {
    display: grid;
    gap: .8rem;
    margin: 1rem 0 1.4rem;
}
.buscador-publico {
    width: 100%;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 12px;
    color: var(--texto);
    padding: .8rem 1rem;
    font-size: 1rem;
}
.filtros-publicos {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.filtro-publico {
    border: 1px solid var(--borde);
    background: var(--tarjeta);
    color: var(--texto);
    border-radius: 999px;
    padding: .45rem .8rem;
    cursor: pointer;
    font-weight: 700;
}
.filtro-publico:hover,
.filtro-publico.activo {
    border-color: var(--acento);
    color: var(--acento-2);
}
.grupo-publico {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.1rem;
    box-shadow: var(--sombra);
}
.grupo-publico h2 {
    margin: 0 0 .8rem;
    font-size: 1.05rem;
    color: var(--acento-2);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.lista-publica {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}
.item-publico {
    border-top: 1px dashed var(--borde);
    padding-top: .65rem;
}
.item-publico:first-child {
    border-top: none;
    padding-top: 0;
}
.item-publico .titulo {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .7rem;
    align-items: baseline;
    font-weight: 800;
}
.item-publico .titulo code {
    font-size: 1rem;
}
.item-publico .detalle {
    margin: .25rem 0 0;
    color: var(--tenue);
}
.item-publico .meta {
    color: var(--tenue);
    font-size: .85rem;
}
.sin-resultados {
    display: none;
}
.sin-resultados.visible {
    display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .ruta-grid,
    .tienda-grid {
        grid-template-columns: 1fr;
    }
    .landing-nav {
        align-items: flex-start;
        flex-direction: column;
    }
    .landing-nav-enlaces {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .saltar-enlace { transition: none; }
}