/* Blog público (web.epackenvios) — index (/blog), detalle (/blog/{slug}). */

:root {
    --blog-color-blanco: #ffffff;
    --blog-color-gris: #f1f1f1;
    --blog-color-naranja: #ff8b00;
    --blog-color-oscuro: #1a1a1a;
}

/* --- Breadcrumb --- */
.blog-breadcrumb {
    background: var(--blog-color-gris);
    padding: 0.75rem 0;
}

/* --- Index: cards grid --- */
.blog-index-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.blog-card {
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.blog-card-img {
    height: 180px;
    background-color: var(--blog-color-gris);
    background-size: cover;
    background-position: center;
}

.blog-card-body {
    padding: 1rem;
}

.blog-card-badge {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #fff1e0;
    color: #c05a00;
    border-radius: 3px;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
}

.blog-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.4rem;
}

.blog-card-excerpt {
    font-size: 0.9rem;
    color: #5c6b7a;
    margin-bottom: 0;
}

/* --- Detail: title band (used when the post has no hero row) --- */
.blog-post-title-band {
    padding: 2rem 0 1rem;
}

.blog-hero-title {
    color: #212529;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Alternativa enriquecida a hero (2026-10-16, ver renderRow()): es un <div>
   (nunca un <h1> -- el H1 real de la página ya lo imprime blog-post.php por
   su cuenta cuando no hay hero), SIN tamaño/peso forzado -- a diferencia de
   .blog-hero-title (que siempre es texto plano, por eso necesita su propio
   tamaño fijo), acá el contenido es HTML libre con toolbar completo: el
   tamaño/negrita/encabezado los decide quien escribe el post desde el
   editor (headers, selector de tamaño de letra), forzar un tamaño aquí
   encima solo lo infla artificialmente (bug real reportado por el usuario:
   texto normal, sin formato aplicado, se veía gigante sin motivo). */
.blog-hero-title-libre {
    color: #212529;
    margin-bottom: 1.5rem;
}

.blog-hero-title-libre :last-child {
    margin-bottom: 0;
}

/* --- Contraste del fondo de la fila (2026-10-12) ---
   El color de fondo ahora es libre (un <input type="color">, no una paleta
   cerrada de nombres), así que ya no existe un nombre fijo (blanco/gris/
   naranja/oscuro) del que derivar una clase CSS por caso. El contraste de
   texto para fondo.tipo="color" se calcula por luminancia y se imprime
   INLINE en el propio style="" de la fila (BlogRenderer::contrastTextColor()),
   no aquí. Los botones (.blog-btn-primario/.blog-btn-secundario) ya NO se
   invierten automáticamente según el fondo -- su estilo es fijo siempre
   (simplificación: antes solo existía un caso especial para "naranja", y un
   color libre no tiene un nombre del que colgar ese caso especial).

   Imagen: SIN capa de color encima y SIN texto blanco forzado -- antes había
   un degradado azul semitransparente para garantizar que el texto blanco se
   leyera sobre cualquier foto. Ahora el color de cada bloque de texto lo
   elige quien escribe el post (picker de color/resaltado en el editor); el
   fondo de imagen ya no impone ningún color por su cuenta. Riesgo a tener
   presente: si alguien deja el texto en su color por defecto sobre una foto
   clara, puede no leerse -- eso ya no lo evita el sistema, lo evita quien
   arma el post.
*/

/* --- Detail: builder rows --- */
.blog-row {
    padding: 2.5rem 0;
}

.blog-row-h-s { min-height: 200px; display: flex; align-items: center; }
.blog-row-h-m { min-height: 350px; display: flex; align-items: center; }
.blog-row-h-l { min-height: 500px; display: flex; align-items: center; }

.blog-block {
    margin-bottom: 1.25rem;
}

.blog-block-texto :last-child {
    margin-bottom: 0;
}

/* Espaciado de párrafos/viñetas dentro de texto/tarjeta/caja (2026-10-16),
   elegible por bloque desde el editor. "normal" es un preset propio (no
   "sin clase") porque, en particular, los <li> no tenían NINGÚN margen por
   defecto del navegador -- así que hasta la opción "normal" ya es más
   generosa que el comportamiento de antes de este campo. El :last-child de
   arriba (más específico) sigue ganando siempre, así nunca queda un hueco
   al final del bloque sin importar el preset elegido. */
.blog-espaciado-compacto p { margin-bottom: 0.5rem; }
.blog-espaciado-compacto li { margin-bottom: 0.15rem; }
.blog-espaciado-normal p { margin-bottom: 1rem; }
.blog-espaciado-normal li { margin-bottom: 0.4rem; }
.blog-espaciado-amplio p { margin-bottom: 1.75rem; }
.blog-espaciado-amplio li { margin-bottom: 0.85rem; }

.blog-block-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* Sin display:block a propósito: un <img> es inline/replaced por
       defecto, así que respeta el text-align del contenedor
       (.blog-img-align-*, abajo) -- mismo mecanismo que ya usa
       .blog-block-boton.blog-btn-align-* para los botones. Forzar
       display:block aquí rompería ese posicionamiento (un bloque ignora el
       text-align del padre). */
}

/* Posición horizontal cuando el ancho (estilo inline) es menor a 100% --
   sin efecto visible al 100%, la imagen ya ocupa todo el ancho posible. */
.blog-img-align-left   { text-align: left; }
.blog-img-align-center { text-align: center; }
.blog-img-align-right  { text-align: right; }

.blog-aspect-16-9 img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.blog-aspect-4-3 img  { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.blog-aspect-1-1 img  { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.blog-aspect-21-9 img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }

.blog-block-tarjeta {
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    padding: 1.25rem;
    background: #fff;
    /* Fondo de color opcional (2026-10-16, para que una imagen subida sin
       fondo se vea mejor): se imprime inline cuando existe
       (BlogRenderer::renderTarjeta), sobrescribiendo este blanco fijo. */
}

.blog-tarjeta-img {
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.blog-tarjeta-titulo {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.blog-btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 20px;
    font-weight: 700;
    text-decoration: none;
}

.blog-btn-primario {
    background-color: var(--blog-color-naranja);
    color: #fff !important;
}

.blog-btn-secundario {
    background-color: #fff;
    color: var(--blog-color-naranja) !important;
    border: 2px solid var(--blog-color-naranja);
}

.blog-block-boton.blog-btn-align-center { text-align: center; }
.blog-block-boton.blog-btn-align-right { text-align: right; }
.blog-block-boton.blog-btn-align-left { text-align: left; }

/* blog-caja-{nombre} (2026-10-12): eliminadas -- el color de la caja ahora
   es libre (BlogRenderer::renderCaja() lo imprime inline, background-color +
   color de texto calculados por luminancia), no una paleta cerrada de
   nombres con una clase por caso. */

.blog-block-caja {
    border-radius: 10px;
    padding: 1.25rem;
}

.blog-block-iconos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
}

.blog-iconos-item {
    text-align: center;
}

.blog-iconos-item i {
    font-size: 1.8rem;
    color: var(--blog-color-naranja);
    margin-bottom: 0.5rem;
}

/* Marcador tipo imagen (2026-10-13, alternativa a ícono FA -- mismo tamaño
   dimensionable, ver BlogRenderer::renderListaIconos). El tamaño real se
   fija inline (ancho/alto en px); aquí solo el espaciado respecto al
   título, igual que el ícono. */
.blog-iconos-item img {
    margin-bottom: 0.5rem;
}

.blog-iconos-item h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.blog-iconos-item p {
    font-size: 0.85rem;
    color: #5c6b7a;
}

/* Disposición "fila" (2026-10-13): cada item es una fila horizontal
   marcador + título + texto, apiladas como una lista -- en vez de la
   cuadrícula centrada de siempre. Mismo HTML (blog-iconos-item), solo
   cambia el layout vía esta clase en el contenedor. */
.blog-block-iconos.blog-iconos-fila,
.blog-block-iconos.blog-iconos-vinetas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-block-iconos.blog-iconos-fila .blog-iconos-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.blog-block-iconos.blog-iconos-fila .blog-iconos-item i,
.blog-block-iconos.blog-iconos-fila .blog-iconos-item img,
.blog-iconos-item-vineta i,
.blog-iconos-item-vineta img {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Disposición "vinetas" (2026-10-16): una sola línea por item -- ícono a la
   izquierda, centrado verticalmente con la descripción, SIN título (nunca
   se dibuja .blog-iconos-item-body aquí, ver BlogRenderer::renderListaIconos). */
.blog-iconos-item-vineta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.blog-iconos-item-vineta p {
    margin-bottom: 0;
}

/* Espaciado entre items en disposición "fila"/"vinetas" (2026-10-16,
   elegible desde el editor -- mismo campo/enum que texto/tarjeta/caja). Sin
   efecto en "cuadricula": esa disposición mantiene su gap fijo (ver regla
   de arriba, más específica por el .blog-iconos-fila/.blog-iconos-vinetas
   compartido). */
.blog-block-iconos.blog-iconos-fila.blog-espaciado-compacto,
.blog-block-iconos.blog-iconos-vinetas.blog-espaciado-compacto { gap: 0.5rem; }
.blog-block-iconos.blog-iconos-fila.blog-espaciado-normal,
.blog-block-iconos.blog-iconos-vinetas.blog-espaciado-normal { gap: 1rem; }
.blog-block-iconos.blog-iconos-fila.blog-espaciado-amplio,
.blog-block-iconos.blog-iconos-vinetas.blog-espaciado-amplio { gap: 1.75rem; }

/* Clase compartida con el builder de admin: span.resaltado generado por
   Quill dentro de bloques texto/tarjeta/caja (ver
   admin.epackenvios/assets/css/blog-builder.css — misma regla, para que el
   highlight se vea igual en el editor y en el sitio público). */
.resaltado {
    background: #fff1e0;
    color: #c05a00;
    padding: 0 2px;
    border-radius: 2px;
}

/* --- CTA banner --- */
.blog-cta-banner {
    background-color: var(--blog-color-oscuro);
    color: #fff;
    padding: 3rem 0;
}

.blog-cta-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.blog-cta-subtitle {
    color: #c7ced6;
    margin-bottom: 1.5rem;
}

.blog-cta-btn {
    background-color: var(--blog-color-naranja);
    padding: 0.75rem 2rem;
    border-radius: 24px;
    display: inline-block;
}

/* --- Pagination --- */
.blog-pagination {
    margin-top: 2rem;
}