/* ==========================================================================
   blog.css
   Estilos del frontend del Blog.
   Mobile-first — sin dependencia de Bootstrap ni otro framework.
   ========================================================================== */


/* --------------------------------------------------------------------------
   VARIABLES
   -------------------------------------------------------------------------- */
:root {
    --blog-color-primario:    #1B6B2A;
    --blog-color-primario-h:  #0C3E17;
    --blog-color-texto:       #1B6B2A;
    --blog-color-texto-suave: #1B6B2A;
    --blog-color-borde:       #1B6B2A;
    --blog-color-fondo:       #f8fafc;
    --blog-color-blanco:      #ffffff;
    --blog-color-badge-fondo: #1B6B2A;
    --blog-color-badge-texto: #eff6ff;

    --blog-radio:       10px;
    --blog-radio-sm:    6px;
    --blog-sombra:      0 2px 12px rgba(0,0,0,.07);
    --blog-sombra-h:    0 6px 24px rgba(0,0,0,.12);
    --blog-transicion:  all .2s ease;

    --blog-fuente:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --blog-ancho-max:   1200px;
    --blog-ancho-texto: 1100px;
}


/* --------------------------------------------------------------------------
   CONTENEDOR PRINCIPAL
   -------------------------------------------------------------------------- */
.blog-container {
    max-width: var(--blog-ancho-max);
    margin:    30px auto 80px;
    padding:   0 1.25rem 3rem;
    font-family: var(--blog-fuente);
    color:     var(--blog-color-texto);
}


/* --------------------------------------------------------------------------
   LAYOUT LISTADO — Main 8 cols + Sidebar 4 cols
   -------------------------------------------------------------------------- */
.blog-layout {
    display: grid;
    gap:     2.5rem;
    grid-template-columns: 1fr;  /* Mobile: una columna */
}

@media (min-width: 900px) {
    .blog-layout {
        grid-template-columns: 1fr 300px;  /* Desktop: contenido + sidebar */
        align-items: start;
    }
}


/* --------------------------------------------------------------------------
   ARTÍCULO DESTACADO
   -------------------------------------------------------------------------- */
.blog-destacado {
    display:       flex;
    flex-direction: column;
    background:    var(--blog-color-blanco);
    border-radius: var(--blog-radio);
    box-shadow:    var(--blog-sombra);
    overflow:      hidden;
    margin-bottom: 2rem;
    transition:    var(--blog-transicion);
}

.blog-destacado:hover {
    box-shadow: var(--blog-sombra-h);
    transform:  translateY(-2px);
}

@media (min-width: 640px) {
    .blog-destacado {
        flex-direction: row;
    }

    .blog-destacado-img-link {
        flex: 0 0 45%;
    }
}

.blog-destacado-img-link {
    display: block;
    overflow: hidden;
}

.blog-destacado-img {
    width:      100%;
    height:     260px;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease;
}

.blog-destacado:hover .blog-destacado-img {
    transform: scale(1.03);
}

.blog-destacado-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
}

.blog-destacado-titulo {
    font-size:   1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin:      0;
}

.blog-destacado-titulo a {
    color:           var(--blog-color-texto);
    text-decoration: none;
    transition:      color .2s;
}

.blog-destacado-titulo a:hover {
    color: var(--blog-color-primario);
}

.blog-destacado-desc {
    
    font-size:   .95rem;
    line-height: 1.6;
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}


/* --------------------------------------------------------------------------
   GRID DE TARJETAS
   -------------------------------------------------------------------------- */
.blog-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
}

@media (min-width: 540px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --------------------------------------------------------------------------
   TARJETA
   -------------------------------------------------------------------------- */
.blog-card {
    background:    var(--blog-color-blanco);
    border-radius: var(--blog-radio);
    box-shadow:    var(--blog-sombra);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    var(--blog-transicion);
}

.blog-card:hover {
    box-shadow: var(--blog-sombra-h);
    transform:  translateY(-3px);
}

.blog-card-img-link {
    display:  block;
    overflow: hidden;
}

.blog-card-img {
    width:      100%;
    height:     200px;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.04);
}

.blog-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}

.blog-card-titulo {
    font-size:   1.05rem;
    font-weight: 700;
    margin:      0;
    line-height: 1.35;
}

.blog-card-titulo a {
    color:           var(--blog-color-texto);
    text-decoration: none;
    transition:      color .2s;
}

.blog-card-titulo a:hover {
    color: var(--blog-color-primario);
}

.blog-card-desc {
    /*color:       var(--blog-color-texto-suave);*/
    font-size:   .875rem;
    line-height: 1.55;
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
    flex: 1;
}


/* --------------------------------------------------------------------------
   META (fecha + categoría)
   -------------------------------------------------------------------------- */
.blog-meta {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    flex-wrap:   wrap;
    font-size:   .8rem;
    color:       var(--blog-color-texto-suave);
}

.blog-categoria-badge {
    background:      var(--blog-color-badge-fondo);
    color:           var(--blog-color-badge-texto);
    font-size:       .75rem;
    font-weight:     600;
    padding:         .2rem .65rem;
    border-radius:   20px;
    text-decoration: none;
    transition:      var(--blog-transicion);
    white-space:     nowrap;
}

.blog-categoria-badge:hover {
    background: var(--blog-color-primario);
    color:      var(--blog-color-blanco);
}


/* --------------------------------------------------------------------------
   BOTÓN LEER MÁS
   -------------------------------------------------------------------------- */
.blog-btn-leer {
    display:         inline-flex;
    align-items:     center;
    gap:             .3rem;
    color:           var(--blog-color-primario);
    font-size:       .875rem;
    font-weight:     600;
    text-decoration: none;
    margin-top:      auto;
    transition:      gap .2s, color .2s;
}

.blog-btn-leer:hover {
    color: var(--blog-color-primario-h);
    gap:   .5rem;
}


/* --------------------------------------------------------------------------
   PLACEHOLDER SIN IMAGEN
   -------------------------------------------------------------------------- */
.blog-img-placeholder {
    background:      var(--blog-color-fondo);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--blog-color-borde);
    font-size:       .8rem;
}


/* --------------------------------------------------------------------------
   PAGINACIÓN
   -------------------------------------------------------------------------- */
.blog-paginacion {
    margin-top: 2.5rem;
}

.blog-paginacion-lista {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .4rem;
    list-style:      none;
    padding:         0;
    margin:          0;
    flex-wrap:       wrap;
}

.blog-pag-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       2.25rem;
    height:          2.25rem;
    padding:         0 .5rem;
    border-radius:   var(--blog-radio-sm);
    border:          1px solid var(--blog-color-borde);
    background:      var(--blog-color-blanco);
    color:           var(--blog-color-texto);
    font-size:       .9rem;
    text-decoration: none;
    transition:      var(--blog-transicion);
    cursor:          pointer;
}

.blog-pag-btn:hover {
    background: var(--blog-color-primario);
    border-color: var(--blog-color-primario);
    color:      var(--blog-color-blanco);
}

.blog-pag-activo {
    background:   var(--blog-color-primario);
    border-color: var(--blog-color-primario);
    color:        var(--blog-color-blanco);
    font-weight:  700;
    cursor:       default;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
.blog-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    position:       sticky;
    top:            1.5rem; /* Se queda fijo al hacer scroll */
}

.blog-sidebar-bloque {
    background:    var(--blog-color-blanco);
    border-radius: var(--blog-radio);
    box-shadow:    var(--blog-sombra);
    padding:       1.25rem;
}

.blog-sidebar-titulo {
    font-size:     1rem;
    font-weight:   700;
    margin:        0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--blog-color-primario);
    color:         var(--blog-color-texto);
}


/* Buscador */
.blog-buscador-grupo {
    display: flex;
    gap:     .4rem;
}

.blog-buscador-input {
    flex:          1;
    border:        1px solid var(--blog-color-borde);
    border-radius: var(--blog-radio-sm);
    padding:       .5rem .75rem;
    font-size:     .9rem;
    font-family:   var(--blog-fuente);
    color:         var(--blog-color-texto);
    outline:       none;
    transition:    border-color .2s;
}

.blog-buscador-input:focus {
    border-color: var(--blog-color-primario);
}

.blog-buscador-btn {
    background:    var(--blog-color-primario);
    color:         var(--blog-color-blanco);
    border:        none;
    border-radius: var(--blog-radio-sm);
    padding:       .5rem .75rem;
    cursor:        pointer;
    transition:    background .2s;
    display:       flex;
    align-items:   center;
}

.blog-buscador-btn:hover {
    background: var(--blog-color-primario-h);
}


/* Categorías */
.blog-sidebar-categorias {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        .3rem;
}

.blog-cat-enlace {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         .45rem .6rem;
    border-radius:   var(--blog-radio-sm);
    text-decoration: none;
    color:           var(--blog-color-texto);
    font-size:       .9rem;
    transition:      var(--blog-transicion);
}

.blog-cat-enlace:hover,
.blog-cat-activa {
    background: var(--blog-color-badge-fondo);
    color:      #fff;
}

.blog-cat-count {
    background:    var(--blog-color-fondo);
    color:         var(--blog-color-texto-suave);
    font-size:     .75rem;
    padding:       .1rem .45rem;
    border-radius: 20px;
    font-weight:   600;
}


/* Últimos artículos */
.blog-sidebar-ultimos {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        .75rem;
}

.blog-sidebar-ultimo-link {
    display:         flex;
    gap:             .75rem;
    align-items:     flex-start;
    text-decoration: none;
    color:           var(--blog-color-texto);
    transition:      color .2s;
}

.blog-sidebar-ultimo-link:hover {
    color: var(--blog-color-primario);
}

.blog-sidebar-thumb {
    width:         60px;
    height:        60px;
    min-width:     60px;
    object-fit:    cover;
    border-radius: var(--blog-radio-sm);
}

.blog-sidebar-ultimo-texto {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
}

.blog-sidebar-ultimo-titulo {
    font-size:   .875rem;
    font-weight: 600;
    line-height: 1.35;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.blog-sidebar-ultimo-fecha {
    font-size: .75rem;
    color:     var(--blog-color-texto-suave);
}


/* --------------------------------------------------------------------------
   PÁGINA DETALLE
   -------------------------------------------------------------------------- */
.blog-detalle-wrapper {
    max-width: var(--blog-ancho-texto);
    margin:    0 auto;
    padding:   2rem 0 3rem;
}

.blog-detalle-header {
    margin-bottom: 2rem;
}

.blog-detalle-titulo {
    font-size:   2rem;
    font-weight: 800;
    line-height: 1.25;
    margin:      .75rem 0;
    color:       var(--blog-color-texto);
}

@media (min-width: 640px) {
    .blog-detalle-titulo {
        font-size: 2.5rem;
    }
}

.blog-detalle-entradilla {
    font-size:   1.1rem;
    color:       var(--blog-color-texto-suave);
    line-height: 1.65;
    margin:      0;
}

.blog-detalle-figura {
    margin: 1.5rem 0;
}

.blog-detalle-img {
    width:         100%;
    max-height:    480px;
    object-fit:    cover;
    border-radius: var(--blog-radio);
    display:       block;
}

.blog-detalle-contenido {
    font-size:   1.05rem;
    line-height: 1.8;
    color:       var(--blog-color-texto);
    margin:      1.5rem 0;
}

/* Estilos para el contenido generado por TinyMCE */
.blog-detalle-contenido h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .75rem; line-height: 1.25; }
.blog-detalle-contenido h3 { font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 .6rem; line-height: 1.25; }
.blog-detalle-contenido p  { margin: 0 0 1.1rem; }
.blog-detalle-contenido ul,
.blog-detalle-contenido ol { padding-left: 1.5rem; margin: 0 0 1.1rem; }
.blog-detalle-contenido li { margin-bottom: .4rem; }
.blog-detalle-contenido a  { color: var(--blog-color-primario); text-decoration: underline; }
.blog-detalle-contenido a:hover { color: var(--blog-color-primario-h); }
.blog-detalle-contenido blockquote {
    border-left: 4px solid var(--blog-color-primario);
    margin:      1.5rem 0;
    padding:     .75rem 1.25rem;
    background:  var(--blog-color-fondo);
    border-radius: 0 var(--blog-radio-sm) var(--blog-radio-sm) 0;
    color:       var(--blog-color-texto-suave);
    font-style:  italic;
}
.blog-detalle-contenido img {
    max-width:     100%;
    border-radius: var(--blog-radio-sm);
    height:        auto;
}
.blog-detalle-contenido table {
    width:           100%;
    border-collapse: collapse;
    margin:          1.5rem 0;
    font-size:       .9rem;
}
.blog-detalle-contenido th,
.blog-detalle-contenido td {
    border:  1px solid var(--blog-color-borde);
    padding: .6rem .9rem;
    text-align: left;
}
.blog-detalle-contenido th {
    background:  var(--blog-color-fondo);
    font-weight: 700;
}

/* Bloque contenido 2 sin imagen — ocupa el 100% */
.blog-detalle-bloque-100 {
    display: block;
    margin:  2rem 0;
}

/* --------------------------------------------------------------------------
   NAVEGACIÓN ANTERIOR / SIGUIENTE
   -------------------------------------------------------------------------- */
.blog-nav-articulos {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
    margin:                3rem 0;
    padding-top:           2rem;
    border-top:            1px solid var(--blog-color-borde);
}

.blog-nav-btn {
    display:         flex;
    flex-direction:  column;
    gap:             .3rem;
    padding:         1rem 1.25rem;
    background:      var(--blog-color-blanco);
    border:          1px solid var(--blog-color-borde);
    border-radius:   var(--blog-radio);
    text-decoration: none;
    color:           var(--blog-color-texto);
    transition:      var(--blog-transicion);
}

.blog-nav-btn:hover {
    border-color: var(--blog-color-primario);
    box-shadow:   var(--blog-sombra);
    color:        var(--blog-color-primario);
}

.blog-nav-siguiente {
    text-align: right;
}

.blog-nav-label {
    font-size:   .75rem;
    font-weight: 600;
    color:       var(--blog-color-texto-suave);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.blog-nav-titulo {
    font-size:   .9rem;
    font-weight: 600;
    line-height: 1.35;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}


/* --------------------------------------------------------------------------
   ARTÍCULOS RELACIONADOS
   -------------------------------------------------------------------------- */
.blog-relacionados {
    padding-top:  2rem;
    border-top:   1px solid var(--blog-color-borde);
    margin-top:   1rem;
}

.blog-relacionados-titulo {
    font-size:     1.35rem;
    font-weight:   700;
    margin:        0 0 1.5rem;
    color:         var(--blog-color-texto);
}

.blog-grid-relacionados {
    grid-template-columns: 1fr;
}

@media (min-width: 540px) {
    .blog-grid-relacionados {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* --------------------------------------------------------------------------
   SIN RESULTADOS Y ERRORES
   -------------------------------------------------------------------------- */
.blog-sin-resultados,
.blog-error {
    text-align:  center;
    padding:     3rem 1rem;
    color:       var(--blog-color-texto-suave);
    font-size:   1.1rem;
}

/* --------------------------------------------------------------------------
   BUSCADOR — SUGERENCIAS AUTOCOMPLETE
   -------------------------------------------------------------------------- */
.blog-buscador-grupo {
    position: relative;
}

.blog-sugerencias {
    display:       none;
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    background:    var(--blog-color-blanco);
    border:        1px solid var(--blog-color-borde);
    border-radius: var(--blog-radio);
    box-shadow:    var(--blog-sombra-h);
    z-index:       100;
    overflow:      hidden;
}

.blog-sugerencia-item {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    padding:         .65rem .9rem;
    text-decoration: none;
    color:           var(--blog-color-texto);
    transition:      background .15s;
    cursor:          pointer;
}

.blog-sugerencia-item:hover,
.blog-sugerencia-activa {
    background: var(--blog-color-fondo);
}

.blog-sugerencia-thumb {
    width:         42px;
    height:        42px;
    min-width:     42px;
    object-fit:    cover;
    border-radius: var(--blog-radio-sm);
}

.blog-sugerencia-thumb-placeholder {
    background: var(--blog-color-fondo);
}

.blog-sugerencia-texto {
    display:        flex;
    flex-direction: column;
    gap:            .15rem;
    overflow:       hidden;
}

.blog-sugerencia-titulo {
    font-size:     .875rem;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.blog-sugerencia-fecha {
    font-size: .75rem;
    color:     var(--blog-color-texto-suave);
}

.blog-sugerencia-mark {
    background:  #fef9c3;
    color:       var(--blog-color-texto);
    font-style:  normal;
    border-radius: 2px;
    padding:     0 1px;
}

.blog-sugerencia-ver-todos {
    display:      block;
    padding:      .65rem .9rem;
    font-size:    .825rem;
    font-weight:  600;
    color:        var(--blog-color-primario);
    text-decoration: none;
    border-top:   1px solid var(--blog-color-borde);
    transition:   background .15s;
}

.blog-sugerencia-ver-todos:hover {
    background: var(--blog-color-fondo);
}

.blog-sugerencia-vacio {
    padding:   1rem .9rem;
    font-size: .875rem;
    color:     var(--blog-color-texto-suave);
    text-align: center;
}

/* Cabecera listado */
.blog-cabecera {
    padding:       2.5rem 0 2rem;
    border-bottom: 1px solid var(--blog-color-borde);
    margin-bottom: 2rem;
}

.blog-cabecera-titulo {
    font-size:   2rem;
    font-weight: 800;
    margin:      0 0 .5rem;
    color:       var(--blog-color-texto);
}

.blog-cabecera-desc {
    font-size:   1.05rem;
    color:       var(--blog-color-texto-suave);
    margin:      0;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   DETALLE — BLOQUES 50/50
   -------------------------------------------------------------------------- */
.blog-detalle-bloque-50 {
    display:               grid;
    grid-template-columns: 1fr;  /* Mobile: una columna */
    gap:                   1.5rem;
    margin:                2rem 0;
    align-items:           center;
}

@media (min-width: 640px) {
    .blog-detalle-bloque-50 {
        grid-template-columns: 1fr 1fr;  /* Desktop: 50/50 */
    }

    /* Bloque invertido — texto izquierda, imagen derecha */
    .blog-detalle-bloque-invertido .blog-detalle-contenido { order: 1; }
    .blog-detalle-bloque-invertido .blog-detalle-bloque-figura { order: 2; }
}

.blog-detalle-bloque-figura {
    margin: 0;
}

.blog-detalle-bloque-img {
    width:         100%;
    /*height:        320px;*/
    height:        auto;
    object-fit:    cover;
    border-radius: var(--blog-radio);
    display:       block;
}

/* Contenido final — 100% ancho con separador visual */
.blog-detalle-contenido-final {
    /*padding-top:  2rem;
    border-top:   1px solid var(--blog-color-borde);
    margin-top:   1rem;*/
}