/* ============================================================
   FILBB 2026 – base.css
   Reset, base y componentes reutilizables.
   ============================================================ */

/* ── Reset mínimo ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family:    var(--font-principal);
    font-size:      var(--text-base);
    color:          var(--filbb-texto);
    background:     var(--filbb-blanco);
    line-height:    1.6;
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: var(--filbb-naranja); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--filbb-naranja-osc); }
a:focus-visible { outline: 3px solid var(--filbb-naranja); outline-offset: 3px; border-radius: var(--radio-sm); }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--filbb-oscuro);
}

p { margin-bottom: var(--gap-sm); }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.5rem; }

/* ── Saltar al contenido (accesibilidad) ── */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--filbb-naranja);
    color: var(--filbb-blanco);
    padding: .5rem 1rem;
    border-radius: var(--radio-sm);
    z-index: calc(var(--z-header) + 1);
    transition: top var(--transicion);
}
.skip-to-content:focus { top: 1rem; }

/* ── Contenedor ── */
.filbb-contenedor {
    max-width: var(--contenedor-max);
    margin-inline: auto;
    padding-inline: var(--contenedor-pad);
}

/* ── Botones ── */
.filbb-btn {
    display:         inline-block;
    padding:         .65rem 1.5rem;
    border-radius:   var(--radio-md);
    font-family:     var(--font-principal);
    font-size:       var(--text-sm);
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      background var(--transicion), color var(--transicion), border-color var(--transicion);
    white-space:     nowrap;
}

/* Naranja sólido */
.filbb-btn--naranja {
    background: var(--filbb-naranja);
    color:      var(--filbb-blanco);
    border-color: var(--filbb-naranja);
}
.filbb-btn--naranja:hover, .filbb-btn--naranja:focus-visible {
    background: var(--filbb-naranja-osc);
    border-color: var(--filbb-naranja-osc);
    color: var(--filbb-blanco);
}

/* Naranja pequeño */
.filbb-btn--naranja-sm {
    display:       inline-block;
    padding:       .4rem 1rem;
    background:    var(--filbb-naranja);
    color:         var(--filbb-blanco);
    border-radius: var(--radio-sm);
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing:.05em;
    text-transform:uppercase;
}

/* Blanco (para el header naranja) */
.filbb-btn--blanco {
    background:  var(--filbb-blanco);
    color:       var(--filbb-naranja);
    border-color:var(--filbb-blanco);
}
.filbb-btn--blanco:hover, .filbb-btn--blanco:focus-visible {
    background: rgba(255,255,255,.15);
    color: var(--filbb-blanco);
    border-color: var(--filbb-blanco);
}

/* Outline naranja (para fondos claros/celestes) */
.filbb-btn--outline-naranja {
    background:   transparent;
    color:        var(--filbb-naranja);
    border-color: var(--filbb-naranja);
}
.filbb-btn--outline-naranja:hover, .filbb-btn--outline-naranja:focus-visible {
    background: var(--filbb-naranja);
    color:      var(--filbb-blanco);
}

/* ── Cabecera de páginas internas ── */
.filbb-pagina-header {
    padding: var(--gap-lg) 0;
    background: var(--filbb-oscuro);
    color: var(--filbb-blanco);
}
.filbb-pagina-header--naranja { background: var(--filbb-naranja); }
.filbb-pagina-header--celeste { background: var(--filbb-celeste); }

.filbb-pagina-header__titulo {
    font-size:     var(--text-2xl);
    color:         var(--filbb-blanco);
    text-transform:uppercase;
    letter-spacing:.05em;
}
.filbb-pagina-header__subtitulo {
    color: rgba(255,255,255,.85);
    font-size: var(--text-md);
    margin-top: var(--gap-sm);
}

/* ── Aviso de admin ── */
.filbb-aviso-admin {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radio-md);
    padding: var(--gap-md);
    margin: var(--gap-lg) 0;
    font-size: var(--text-sm);
}
.filbb-aviso-admin a { color: #856404; text-decoration: underline; }

/* ── Contenido WordPress (editor de bloques) ── */
.wp-content h2 { margin-top: var(--gap-lg); margin-bottom: var(--gap-sm); font-size: var(--text-xl); }
.wp-content h3 { margin-top: var(--gap-md); margin-bottom: var(--gap-xs); font-size: var(--text-lg); }
.wp-content p  { margin-bottom: var(--gap-sm); }
.wp-content ul, .wp-content ol { margin-bottom: var(--gap-sm); }
.wp-content img { border-radius: var(--radio-md); margin-bottom: var(--gap-md); }
.wp-content a   { text-decoration: underline; }

/* ── Paginación ── */
.navigation.pagination { margin: var(--gap-xl) 0; }
.nav-links { display: flex; gap: var(--gap-sm); justify-content: center; flex-wrap: wrap; }
.nav-links .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radio-sm);
    border: 2px solid var(--filbb-gris-borde);
    font-weight: 700;
    color: var(--filbb-texto);
    transition: all var(--transicion);
}
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
    background: var(--filbb-naranja);
    border-color: var(--filbb-naranja);
    color: var(--filbb-blanco);
}
.nav-links .prev, .nav-links .next { width: auto; padding: 0 var(--gap-sm); }

/* ── 404 ── */
.filbb-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.filbb-404__inner { text-align: center; }
.filbb-404__codigo { font-size: 8rem; color: var(--filbb-naranja); line-height: 1; }
.filbb-404__msg { font-size: var(--text-lg); color: var(--filbb-texto-suave); margin: var(--gap-md) 0 var(--gap-lg); }

/* ── Post cards genéricos ── */
.filbb-post-card {
    border-bottom: 1px solid var(--filbb-gris-borde);
    padding: var(--gap-md) 0;
}
.filbb-post-card h2 { font-size: var(--text-lg); }
.filbb-post-card h2 a { color: var(--filbb-oscuro); }
.filbb-post-card h2 a:hover { color: var(--filbb-naranja); }

/* ── Entrada individual (blog) ── */
.filbb-entrada__header { text-align: left; }
.filbb-entrada__categoria {
    display: inline-block;
    background: var(--filbb-naranja);
    color: var(--filbb-blanco);
    padding: .2rem .7rem;
    border-radius: var(--radio-full);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--gap-sm);
}
.filbb-entrada__titulo { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.filbb-entrada__meta { color: var(--filbb-texto-suave); font-size: var(--text-sm); margin-top: var(--gap-xs); }
.filbb-entrada__imagen { max-height: 500px; overflow: hidden; }
.filbb-entrada__foto { width: 100%; height: 100%; object-fit: cover; }
.filbb-entrada__contenido { padding-top: var(--gap-xl); padding-bottom: var(--gap-xl); }
.filbb-entrada__nav .nav-links { justify-content: space-between; }