/* =========================================
    Blog List - Estilos Profesionales
    ========================================= */

/* =========================================
   🔍 Formulario de búsqueda profesional
   ========================================= */
.blog-search-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Fieldset: contenedor visual "Filtros de búsqueda" */
.search-filters {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px 16px;
    margin: 0;
    background: #fafbfe;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-filters:focus-within {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.08);
}

.search-filters {
    legend.main-title-filters {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.68rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        padding: 3px 8px 0;
        background: #fafbfe;
        width: auto;
        border-radius: 4px;
    }

    legend.fecha-creacion-title-filters {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.7rem;
        text-transform: uppercase;
    }
}

/* ------------------------------------------------------------------
   🟡 FILA 1: Filtros + acciones en una sola línea
   ------------------------------------------------------------------ */
.blog-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

.fieldset-container {
    /* justify-content: space-around; */
    flex-grow: 1;
    /* text-align: start; */
    gap: 1.5rem;

    button#toggle-sort-menu {
        width: 128px;
        margin-left: 0;
    }
}

.blog-date-range-container {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 6px 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    max-width: 580px;
    width: 100%;
}

.blog-date-range-container:focus-within {
    border-color: #6a11cb;
    box-shadow: 0 4px 20px rgba(106, 17, 203, 0.12);
}

.blog-date-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    position: relative;
}

.blog-date-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6a11cb;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-family: 'Montserrat', sans-serif;
}

.blog-date-label i {
    font-size: 0.6rem;
    color: #8b5cf6;
}

.blog-date-input {
    border: none;
    background: transparent;
    padding: 4px 0;
    font-size: 0.85rem;
    font-family: 'Roboto', sans-serif;
    color: #1e293b;
    outline: none;
    width: 100%;
    cursor: pointer;
}

.blog-date-input::placeholder {
    color: #94a3b8;
    font-weight: 300;
}

/* El altInput de Flatpickr tiene clase flatpickr-alt-input */
.blog-date-input.flatpickr-alt-input {
    background: transparent !important;
    border: none !important;
    font-size: 0.85rem !important;
    font-family: 'Roboto', sans-serif !important;
    color: #1e293b !important;
    padding: 4px 0 !important;
}

.blog-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 0.8rem;
    padding: 0 4px;
    flex-shrink: 0;
}

.blog-date-separator i {
    transition: transform 0.2s ease;
}

.blog-date-range-container:hover .blog-date-separator i {
    transform: translateX(3px);
    color: #6a11cb;
}

.blog-date-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6a11cb, #2575fc) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(106, 17, 203, 0.25);
    flex-shrink: 0;
    margin-left: 6px;
}

.blog-date-apply-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(106, 17, 203, 0.35);
}

.blog-date-apply-btn:active {
    transform: scale(0.95);
}

.blog-date-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 4px;
    text-decoration: none !important;
}

.blog-date-clear-btn:hover {
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
    transform: scale(1.1);
}

/* Responsive: en mobile apilar los campos */
@media (max-width: 640px) {
    .blog-date-range-container {
        flex-wrap: wrap;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .blog-date-field {
        flex: 1 1 40%;
        padding: 2px 4px;
    }

    .blog-date-separator {
        flex: 0 0 20px;
    }

    .blog-date-apply-btn {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
        margin-left: 4px;
    }

    .blog-date-clear-btn {
        width: 24px;
        height: 24px;
        font-size: 0.55rem;
        margin-left: 2px;
    }

    .blog-date-label span {
        display: none;
        /* Oculta texto "Desde"/"Hasta", solo icono */
    }

    .blog-date-input {
        font-size: 0.78rem;
    }
}


/* Personalización del tema Flatpickr para que coincida con el brand */
.flatpickr-calendar {
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #e2e8f0 !important;
    font-family: 'Roboto', sans-serif !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    background: #6a11cb !important;
    border-color: #6a11cb !important;
}

.flatpickr-day.today {
    border-color: #8b5cf6 !important;
}

.flatpickr-day:hover {
    background: #f3e8ff !important;
}

.flatpickr-months .flatpickr-month {
    background: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
    color: #1e293b !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    color: #1e293b !important;
}

.flatpickr-weekday {
    color: #6a11cb !important;
    font-weight: 600 !important;
}

.flatpickr-day.flatpickr-disabled {
    color: #cbd5e1 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* tags  */
.blog-tags-list {
    gap: 4px;
}

/* ==========================================================
   🖼️ PLACEHOLDER DE IMAGEN
   ----------------------------------------------------------
   Cuando un artículo no tiene ``cover_image`` (por ejemplo,
   cuando se publica desde el editor online sin subir portada),
   en lugar de intentar cargar una imagen inexistente (que se
   muestra como icono de "imagen rota"), mostramos un placeholder
   con icono de periódico + texto "Sin imagen de portada".
   ========================================================== */
.blog-card-image__placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    background: linear-gradient(135deg, #eef0f4 0%, #d8dce5 100%);
    color: #6c757d;
    gap: 0.4rem;
    padding: 1rem;
    text-align: center;
}

.blog-card-image__placeholder-icon {
    font-size: 2.5rem;
    color: #8a93a3;
    opacity: 0.7;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.blog-card-image__placeholder-text {
    font-size: 0.72rem;
    font-style: italic;
    color: #6c757d;
    letter-spacing: 0.2px;
    user-select: none;
}

.blog-card:hover .blog-card-image__placeholder-icon {
    transform: scale(1.08);
    opacity: 0.9;
    color: #5d25d5;
}

/* Cuando el <img> falla por URL inválida, ocultamos la imagen rota
   y dejamos que el background del contenedor sea visible. */
.blog-card-image--no-img {
    background: linear-gradient(135deg, #eef0f4 0%, #d8dce5 100%);
}

.blog-card-image--no-img::before {
    content: "\f1ea" " Sin imagen";
    /* fa-newspaper + texto como fallback si la URL falla */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #8a93a3;
    font-size: 0.85rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    pointer-events: none;
}

/* 🟡 Estado vacío del contenedor de tags: se muestra cuando un artículo
   no tiene tags asignados. Mantiene el mismo padding del contenedor
   original y simula la altura de ~2 tags para que las cards no cambien
   de tamaño al pasar de tener tags a no tenerlos. */
.blog-tags-list.blog-tags-container.blog-tags-empty {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    /* min-height que respeta padding (0.25rem arriba/abajo) y la altura
       de una línea de badge (≈ 1.25rem) + un pequeño gap para simular 2 tags. */
    min-height: 2.4rem;
    line-height: 1.2;
    color: #9aa0a6;
    font-size: 0.72rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.blog-tags-list.blog-tags-container.blog-tags-empty:hover {
    border-color: rgba(0, 0, 0, 0.18);
    color: #6c757d;
}

.blog-tags-empty__icon {
    color: #c4c9cf;
    font-size: 0.7rem;
    transition: color 0.2s ease;
}

.blog-tags-list.blog-tags-container.blog-tags-empty:hover .blog-tags-empty__icon {
    color: #9aa0a6;
}

.blog-tags-empty__text {
    font-style: italic;
    letter-spacing: 0.1px;
    user-select: none;
}

/* --- Contenedor de la Card --- */
/* --- Contenedor de la Card --- */
/* --- Contenedor de la Card --- */
/* --- Contenedor de la Card --- */
/* --- Contenedor de la Card --- */
/* --- Contenedor de la Card --- */
/* --- Contenedor de la Card --- */
/* --- Contenedor de la Card --- */
.blog-card {
    position: relative;
    /* Borde ultra‑minimalista: sin borde visible, solo sombra */
    border: 2px solid rgba(1, 1, 1, 0.17);
    border-radius: 13px;
    background-color: #f5faff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}



/* Ensure cards that also have Bootstrap's border-0 keep the ultra‑minimal style (no border) */
.blog-card.card.border-0 {
    border: none !important;
}

/* Hover: mantener el mismo color de borde púrpura para mayor consistencia */
/* Hover: mantiene el borde sutil y aumenta ligeramente la sombra */
/* Hover: mantiene el borde ultra‑minimalista y refuerza la sombra */
/* Hover: refuerza la sombra sin añadir borde */
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    /* sin borde */
}

/* --- Imagen de la Card --- */
.blog-card-image {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
    position: relative;

    aspect-ratio: 16/11;
    overflow: hidden;
    background: #f8f9fa;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.title-article-content {
    background-color: white;
    padding: 0.25rem;
    border-radius: 5px;
    border: 1px solid rgba(1, 1, 1, 0.1);
}

.blog-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.blog-card-image img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
    filter: brightness(0.8);
}

/* --- Títulos y Enlaces --- */
.blog-card .card-body h3 a {
    color: #2c3e50;
    transition: color 0.2s ease;
}

.author-category__container {
    justify-content: space-between;
}

.blog-tags-list.blog-tags-container {
    padding: 0.25rem 0.4rem;
    border: 1px solid #e5e5e5;
    background: white;
    border-radius: 5px;
    margin-bottom: 4px;
    margin-left: 1px;
}


/* --- Badges unificados (comentarios + reacciones) --- */
.comment-info,
.reactions-info {
    position: absolute;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    transform: scale(0.95);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.02em;
    min-height: 28px;
}

.reactions-info {
    left: 12px;
}

.reactions-info .reactions-icon.like-reaction {
    color: #fff;
}

.reactions-info .reactions-icon.love-reaction {
    color: #e84a5f;
}

.reactions-info .reactions-icon.idea-reaction {
    color: #f59e0b;
}

.reactions-info .reactions-icon.fire-reaction {
    color: #f97316;
}

.header-slogan {
    color: #8543af;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
}

.blog-post-content_container {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    padding: 0.25rem;
    background: #fffefa;
}

.comment-info {
    right: 12px;
}

.blog-card:hover .comment-info {
    transform: scale(1);
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.85), rgba(111, 66, 193, 0.65));
    border-color: rgba(196, 181, 253, 0.3);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.25);
}

.blog-card:hover .reactions-info {
    transform: scale(1);
    border-color: #d8cafb;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.25);
}

.reactions-info .reaction-count,
.comment-info .comment-count {
    font-weight: 700;
    font-size: 0.75rem;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    min-width: 14px;
    text-align: center;
}

.comment-info i,
.reactions-info i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.reactions-info i {
    filter: brightness(1.5);
}

.blog-card:hover .comment-info i,
.blog-card:hover .reactions-info i {
    transform: scale(1.15);
}

.blog-card .comment-info,
.blog-card .reactions-info {
    animation: badgeFadeIn 0.3s ease-out forwards;
    opacity: 0;
}

@keyframes badgeFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(0.95);
    }
}

.blog-card .card-body h3 a:hover {
    color: #3498db;
}

.blog-card .stretched-link {
    z-index: 5;
}

/* En mobile, los botones Editar/Moderar deben estar SIEMPRE sobre el link */
@media (max-width: 540px) {

    .edit-btn-wrapper,
    .edit-btn-wrapper .btn {
        z-index: 20;
        position: relative;
    }
}

/* -------------------------------------------------
   UI/UX Mejoras para los botones de acción en la lista de blogs
   ------------------------------------------------- */
.edit-btn-wrapper .btn {
    /* Espaciado uniforme entre los botones (fallback para navegadores sin soporte de gap) */
    margin-right: 0.5rem;
}

.edit-btn-wrapper .btn:last-child {
    margin-right: 0;
}

/* -----------------------------------------------------------------
   Botón Editar (en la lista de artículos)
   -----------------------------------------------------------------
   Ahora comparte el mismo degradado que el botón de búsqueda y
   muestra texto en blanco para lograr consistencia visual.
   ----------------------------------------------------------------- */
.edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #6a11cb, #2575fc) !important;
    color: #fff !important;
    border: none;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 6px rgba(106, 17, 203, 0.2);
}

.edit-btn i {
    font-size: 0.8rem;
}

.edit-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5a0fb0, #1e5edc);
    box-shadow: 0 4px 12px rgba(106, 17, 203, 0.3);
}

.edit-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------------
   Toast de notificaciones (usado en dashboard y comentarios)
   -----------------------------------------------------------------
   Se posiciona en la esquina superior derecha y se le da estilo
   consistente al botón de cierre para que sea visible y usable.
   ----------------------------------------------------------------- */
#toastContainer {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Estilos base para la alerta dentro del toast */
#toastContainer .alert {
    min-width: 280px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    color: #fff;
    padding-right: 2.5rem;
    /* espacio para el botón cerrar */
    position: relative;
}

/* Botón cerrar dentro de la alerta – se asegura que sea blanco y visible */
#toastContainer .alert .btn-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #fff;
    opacity: 1;
    font-size: 1.2rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Hover del botón cerrar */
#toastContainer .alert .btn-close:hover {
    opacity: 0.8;
}

/* Botón de moderación: ahora con degradado similar al botón “Escribir artículo” */
.moderate-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #ff7e5f, #feb47b) !important;
    color: #fff !important;
    border: none;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 200;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 6px rgba(255, 124, 95, 0.2);
}

.moderate-btn i {
    font-size: 0.8rem;
}

.moderate-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #feb47b, #ff7e5f);
    box-shadow: 0 4px 12px rgba(255, 124, 95, 0.3);
}

.moderate-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}



.articles-list__container {
    /* border: 1px solid red; */
    background-color: white;
    border-radius: 5px;
}

/* --- Extracto del contenido (resumen) --- */
/* --- Extracto del contenido (resumen) con borde y fondo mejorados --- */
.blog-card .card-body p.text-muted.mb-2.small {
    background: #f7f7f7;
    color: #64748b !important;
    line-height: 1.65;
    font-size: 0.8rem;
    margin-bottom: 0.5rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border: 1px solid #dde2ff;
    padding: 3px 10px;
    border-radius: 5px;
}

/* --- Título principal con borde degradado --- */
.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
    font-weight: 700;
    background-color: white;
    padding: 0 14px 10px;
    border-radius: 9px;
}

.section-sub-title {
    background-color: white;
    width: auto;
    padding: 2px 14px;
    text-align: center;
    margin: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-radius: 2px;
    transition: background 0.3s ease;
}

/* --- Metadatos (Fecha/Lectura) --- */
.blog-card-meta {
    font-size: 0.85rem;
    color: #6f42c1 !important;
    justify-content: space-between;
    /* color púrpura más vivo para mejor legibilidad */

    span:nth-child(1) {
        background: rgba(111, 66, 193, 0.1);
        color: #6f42c1;
        padding: 2px 6px;
        border-radius: 4px;
    }

    span:nth-child(2) {
        background: rgba(0, 123, 255, 0.1);
        color: #007bff;
        padding: 2px 6px;
        border-radius: 4px;
    }
}

.blog-card-meta i {
    /* Mejora de los íconos de fecha y tiempo */
    color: #6f42c1;
    /* púrpura vibrante que coincide con la paleta */
    font-size: 1.2rem;
    /* ligeramente más grande para mejor legibilidad */
    background: #f5f5f5;
    border-radius: 50%;
    padding: 2px;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover efecto para los íconos de fecha y tiempo */
.blog-card-meta span:hover i {
    color: #3498db;
    /* azul más vivo al pasar el cursor */
    transform: scale(1.15);
}

/* --- Botón Editar --- */
.edit-btn-wrapper {
    position: relative;
    z-index: 20;
}

.edit-btn {
    position: relative;
    z-index: 20;
}

/* --- Tags/Badges --- */
.blog-tags-list .blog-tag {
    font-size: 0.75rem;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    color: #475569;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.blog-tags-list .blog-tag:hover {
    color: #00ADB5;
    background: #fff;
    border-color: #00ADB5;
    transform: translateY(-1px);
    opacity: 1;
}

/* --- Categoría (badge) --- */
.category-badge .category-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 500;
    color: #2c3e50;
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 16px;
    padding: 4px 10px;
    transition: background 0.2s ease, color 0.2s ease;
}

.category-badge .category-link:hover {
    background: #d6d8db;
    color: #1a202c;
}

/* --- Paginación profesional estilo dashboard --- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}

.pagination .page-link {
    border: none;
    border-radius: 10px;
    margin: 0 2px;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    background: #fff;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pagination .page-link:hover {
    background: #f3f0ff;
    color: #6f42c1;
    box-shadow: 0 2px 8px rgba(111, 66, 193, 0.15);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #6f42c1, #5a33a0);
    color: #fff;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

.pagination .page-item.disabled .page-link {
    background: #f9fafb;
    color: #d1d5db;
    cursor: default;
    box-shadow: none;
}

/* --- Footer pegado al fondo (CSS Grid - no afecta nav ni section) --- */
html {
    height: 100%;
}

body.home-p {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    margin: 0;
}

/* --- CSS Grid para las cards --- */
/* Grid layout for article cards */
.blog-grid {
    display: grid;
    /* 4 columnas en pantallas anchas por defecto */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
}

/* Responsive: 2 artículos por fila en móviles pequeños (≤540px) */
@media (max-width: 540px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .blog-card {
        border-radius: 13px;
    }

    /* Imagen ultra baja para reducir altura */
    .blog-card-image {
        aspect-ratio: 16/11;
    }

    .articles-list__container {
        article {
            .float-meta-item {
                gap: 2px;
                font-size: 0.58rem;
                padding: 3px 8px;
                border: 1px solid rgba(255, 255, 255, 0.15);
                font-family: 'Montserrat', sans-serif;
                font-weight: 300;
                letter-spacing: 0.025em;
                position: relative;
                top: -0.52rem;
                left: -0.75rem;
            }

            .card-body {
                padding: 0.25rem !important;
            }

            /* .comment-info,
            .reactions-info {
                bottom: 12px;
                gap: 5px;
                padding: 6px 10px;
                font-size: 0.72rem;
                backdrop-filter: blur(2px);
                letter-spacing: 0.025em;
            } */
        }
    }


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

    .title-article-content {
        font-size: 0.7rem;
        line-height: 1.1;
        padding: 0.1rem 0.25rem;
        margin-bottom: 0.1rem;
        background: transparent;
        border: none;
    }

    .title-article-content a {
        font-size: 0.7rem;
    }

    .title-article-content h6 {
        font-size: 0.7rem;
        margin-bottom: 0.1rem;
    }

    /* Ocultar excerpt en móvil para ahorrar altura */
    .blog-post-content_container {
        display: none !important;
    }

    .blog-card-floating-meta {
        font-size: 0.55rem;
        padding: 2px 5px;
        gap: 3px;
    }

    .float-meta-item {
        font-size: 0.55rem;
    }

    .author-category__container {
        font-size: 0.6rem;
        margin-bottom: 0.15rem;
    }

    .blog-card-image__placeholder-icon {
        font-size: 1.3rem;
    }

    .blog-card-image__placeholder-text {
        font-size: 0.6rem;
    }

    .comment-info,
    .reactions-info {
        font-size: 0.65rem;
        padding: 3px 6px;
        gap: 2px;
        bottom: 6px;
    }

    .reactions-info {
        left: 0;
    }

    .comment-info {
        right: 0;
    }

    .blog-tags-list {
        font-size: 0.6rem;
        margin-bottom: 0.1rem;
    }

    .blog-tags-list .blog-tag {
        font-size: 0.6rem;
        padding: 1px 5px;
    }

    .blog-tags-list.blog-tags-container.blog-tags-empty {
        min-height: 1.7rem;
        font-size: 0.6rem;
    }

    .edit-btn-wrapper .btn {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
    }
}

.jd-section {
    position: relative;

    .addon-imagen-background__blog-list {
        position: absolute;
        width: 100%;
        height: 50vh;
        /* border: 1px solid red; */
        left: 0;
        top: 0;
        overflow: hidden;
        background-image: url(/static/images/addons/addon_metodologia_trabajo.png);
        background-repeat: repeat-x;
        background-size: 54%;
        background-color: rgba(255, 255, 255, 0.85);
        /* background-position-y: -44px; */
        /* background-position-x: -19.5rem; */
        background-blend-mode: overlay;
        background-position: center;
        filter: brightness(.95);
        z-index: 0;
    }
}

/* Aseguramos que el contenedor del blog quede por encima de la capa decorativa */
.jd-section .container {
    /* position: relative; */
    z-index: 1;
}


/* The previous explicit media queries for column counts are no longer needed because the
   auto‑fit/minmax approach above automatically adapts the number of columns based on
   available width. They are therefore removed to avoid conflicts. */

/* =========================================
   🟡 FILRA 2: Buscador + botones alineados izquierda
   ========================================= */
.blog-search-second-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

.blog-search-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 360px;
    min-width: 260px;
    max-width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.blog-search-group:focus-within {
    box-shadow: 0 4px 20px rgba(106, 17, 203, 0.15);
    border-color: #6a11cb;
}

.blog-search-icon {
    background: transparent;
    border: none;
    color: #6a11cb;
    padding-left: 18px;
    padding-right: 10px;
    font-size: 1rem;
    z-index: 2;
}

.blog-search-input {
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 10px !important;
    font-size: 0.95rem;
    font-family: 'Roboto', sans-serif;
    background: transparent !important;
    color: #333;
    outline: none;
    height: auto !important;
    box-shadow: none !important;
    /* Reset total para que el input crezca dentro del input-group sin interferencias de BS4 */
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;
    line-height: normal !important;
    letter-spacing: normal !important;
}

.blog-search-btn {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff;
    border: none;
    border-radius: 0 999px 999px 0 !important;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    height: 46px;
}

.blog-search-btn span {
    font-family: 'Montserrat', sans-serif;
}

.blog-search-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
    color: #fff;
}

.blog-search-btn:active {
    transform: scale(0.98);
}

/* Mobile: columna y buscador al 100% ancho */
@media (max-width: 767px) {
    .blog-search-second-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        width: 100% !important;
    }

    #toggle-advanced-filters {
        align-self: flex-start;
        white-space: nowrap;
        width: auto;
        min-width: 220px;
    }

    /* Forzar input-group a ocupar TODO el ancho disponible sin reservas */
    .blog-search-group {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    /* Icono de búsqueda con ancho fijo */
    .blog-search-group .input-group-text {
        flex: 0 0 auto !important;
        width: 46px !important;
        min-width: 46px !important;
        text-align: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Input: absorbe TODO el espacio sobrante */
    .blog-search-input {
        flex: 1 1 0% !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 12px 10px !important;
        border: none !important;
    }

    /* Botón Buscar tamaño fijo */
    .blog-search-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        height: 46px !important;
    }

    .blog-clear-btn,
    .blog-result-count {
        margin-top: 0.25rem !important;
    }

    .blog-result-count {
        margin-left: auto !important;
    }
}

/* ==========================================================================
   BOTÓN LIMPIAR FILTROS - Ancla profesional
   ========================================================================== */
.blog-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 50px !important;
    color: #6b7280;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.blog-clear-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.blog-clear-btn:hover {
    color: #ef4444;
    background: #fef2f2;
    border-color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    text-decoration: none;
}

.blog-clear-btn:hover i {
    transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   BOTÓN "ESCRIBIR ARTÍCULO" - estilo profesional y limpio
   --------------------------------------------------------------------------
   Se agrega un estilo distintivo para el botón que permite crear un nuevo
   artículo. Utilizamos un degradado sutil, bordes redondeados y transiciones
   suaves para que el botón se sienta moderno sin recurrir a íconos o
   tipografías que recuerden a IA. El icono de pluma ya está presente en el
   HTML, por lo que solo estilizamos el contenedor.
*/
.blog-write-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.blog-write-btn i {
    font-size: 0.8rem;
}

.blog-write-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ff6a45, #fd9e66);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.blog-write-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blog-moderation-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #6f42c1, #5a33a0);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 6px rgba(111, 66, 193, 0.2);
}

.blog-moderation-btn i {
    font-size: 0.8rem;
}

.blog-moderation-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5a33a0, #4a1a8e);
    color: #fff;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

.blog-moderation-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blog-clear-btn:active {
    transform: scale(0.96);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.blog-search-hint {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
    background: #f8f4ff;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.blog-search-hint strong {
    color: #6a11cb;
}



/* ==========================================================================
   BOTÓN FLOTANTE "IR ARRIBA"
   ========================================================================== */
/* ---------------------------------------------------------------
   Back to Top button (global styles)
   --------------------------------------------------------------- */
/* Base style: hidden by default */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 48px;
    height: 48px;
    /* Gradient matching the blog theme */
    background: linear-gradient(135deg, #6f42c1, #e84a5f);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
    z-index: 1000;

    /* position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 48px;
    height: 48px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
    z-index: 1000; */
}

/* Show state for back-to-top button */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Visible when the .show class is added via JS */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Hover effect */
.back-to-top:hover {
    background: linear-gradient(135deg, #5a33a0, #d73a5c);
    color: inherit;
    color: white;
    text-decoration: none;
}

/* Responsive: mobile */
@media (max-width: 576px) {}

/* ============================================
   🟡 Fecha/tiempo flotante en la imagen
   ============================================ */
.blog-card-floating-meta {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.float-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.2s ease;
    align-self: flex-start;
}

.float-meta-item:nth-child(1) {
    align-self: flex-start;
}

.blog-card:hover .float-meta-item {
    background: rgba(0, 0, 0, 0.7);
}

span.author-name {
    padding: 0.5px 8px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #e9ecef;
}

/* Categoría inline (misma línea que autor) */
.category-inline-link {
    color: #6f42c1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    border: 1px solid #f5c794;
    border-radius: 4px;
    padding: 0.5px 6px;
    background: #fff3e5;
}

.category-inline-link:hover {
    color: #4a1a8e;
    text-decoration: underline;
}

/* ============================================
   🟡 Artículos pendientes (article_pending)
   ============================================ */
.article_pending {
    position: relative;
    border: 2px dashed #ffc107 !important;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.15), 0 4px 12px rgba(255, 193, 7, 0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.article_pending:hover {
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25), 0 6px 20px rgba(255, 193, 7, 0.15);
    border-color: #e0a800 !important;
}

.article_pending::before {
    content: "⏳ Pendiente";
    position: absolute;
    top: -1px;
    left: -1px;
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px 0 12px 0;
    z-index: 10;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4);
}

.pending-badge-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    animation: badgePulse 2s ease-in-out infinite;
}

/* Marca de QR asociado - esquina superior derecha */
.qr-badge-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}

.qr-badge-overlay i {
    font-size: 0.85rem;
    color: #fff;
}

.blog-card:hover .qr-badge-overlay {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.75);
}

.pending-badge-overlay .badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 193, 7, 0.5);
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* =============================================
   HU-17.19: Active Filter Chips (estilo Airbnb)
   ============================================= */

.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 4px 0 4px;
    align-items: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f0ff;
    color: #6f42c1;
    border: 1px solid #d8cff5;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    transition: all 0.15s ease;
    text-decoration: none;
}

.chip:hover {
    background: #ede7ff;
    border-color: #c4b5fd;
}

.chip-remove {
    color: #6f42c1;
    text-decoration: none;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    margin-left: 2px;
    line-height: 1;
}

.chip-remove:hover {
    opacity: 1;
    color: #dc2626;
}

.chip-clear-all {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
    font-weight: 600;
    text-decoration: none;
}

.chip-clear-all:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* =============================================
   HU-17.19: Sticky para buscador y chips
   ============================================= */

#filters-sticky-row {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 4px 0;
    transition: box-shadow 0.2s ease;
    align-items: stretch;
}

#filters-sticky-row.is-sticky {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#filter-chips-row {
    position: sticky;
    top: 52px;
    z-index: 99;
    background: #fff;
    padding: 4px 0;
    transition: box-shadow 0.2s ease;
}

#filter-chips-row.is-sticky {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* =============================================
   HU-17.19: Botón X del buscador (inyectado con JS)
   ============================================= */

.blog-search-group {
    position: relative;
}

.blog-search-group .btn-clear-search {
    position: absolute;
    right: 140px;
    /* más espacio por el botón toggle */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 2px 6px;
    font-size: .75rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    display: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.blog-search-group .btn-clear-search:hover {
    color: #6b7280;
}

/* =============================================
   HU-17.19: Contador de resultados
   ============================================= */

.blog-results-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.blog-results-row .blog-result-count {
    font-size: 0.78rem;
    color: #6b7280;
    background: #f9fafb;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
}

/* =============================================
   HU-17.19: Menú de ordenamiento (sort)
   ============================================= */

.sort-menu {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 300px;
    position: relative;
    z-index: 150;
}

.sort-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.15s ease;
}

.sort-option:last-child {
    border-bottom: none;
}

.sort-option:hover {
    background: #f3f0ff;
    color: #6f42c1;
    text-decoration: none;
}

.sort-option.active {
    background: #f3f0ff;
    color: #6f42c1;
    font-weight: 600;
}

.sort-option.active::after {
    content: "✓";
    position: absolute;
    right: 12px;
    font-size: 0.75rem;
    color: #6f42c1;
}

.sort-option i {
    font-size: 0.78rem;
    color: #6f42c1;
}

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

.sort-dropdown-wrapper .sort-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 220px;
}








/* media query: 3 columnas en pantallas medianas (hasta 1199px) */
/* 3 columnas en pantallas medianas (hasta 1199px) */

/* 
    Con el nuevo enfoque de CSS Grid usando auto-fit y minmax, estas media queries explícitas para el número de columnas ya no son necesarias, ya que el diseño se adapta automáticamente al ancho disponible. Sin embargo, si deseas mantener un control más estricto sobre el número de columnas en ciertos puntos de quiebre, puedes conservar estas media queries. De lo contrario, se pueden eliminar para evitar conflictos con el comportamiento automático del grid.
*/
@media (max-width: 1199px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 
    mediaquery: 2 columnas en tablets (hasta 991px) 
     Con el nuevo enfoque de CSS Grid usando auto-fit y minmax, estas media queries explícitas para el número de columnas ya no son necesarias, ya que el diseño se adapta automáticamente al ancho disponible. Sin embargo, si deseas mantener un control más estricto sobre el número de columnas en ciertos puntos de quiebre, puedes conservar estas media queries. De lo contrario, se pueden eliminar para evitar conflictos con el comportamiento automático del grid.
*/
/* 
    mediaquery: 2 columnas en tablets (hasta 991px) 
     Con el nuevo enfoque de CSS Grid usando auto-fit y minmax, estas media queries explícitas para el número de columnas ya no son necesarias, ya que el diseño se adapta automáticamente al ancho disponible. Sin embargo, si deseas mantener un control más estricto sobre el número de columnas en ciertos puntos de quiebre, puedes conservar estas media queries. De lo contrario, se pueden eliminar para evitar conflictos con el comportamiento automático del grid.
*/
/* 2 columnas en tablets (hasta 991px) */
@media (max-width: 991px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 2 columnas en tablets (hasta 991px) */
@media (max-width: 768px) {
    /* 2 columnas entre 568px y 768px */
    /* .blog-grid {        
        grid-template-columns: repeat(2, 1fr);
    } */
}

/* 2 columnas en tablets pequeñas/móviles grandes (568px a 767px) */
@media (max-width: 767px) {
    .fieldset-container {
        flex-direction: column;

        button#toggle-sort-menu {}
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-clear-btn {
        padding: 8px 12px;
        margin-left: 6px;
        font-size: 0.75rem;
    }

    .blog-clear-btn span {
        display: none;
    }
}

/* Responsive: mobile */
@media (max-width: 576px) {

    .qr-badge-overlay {
        top: 2px;
        right: 2px;
        /* width: 32px;
        height: 32px; */
    }

    .blog-search-form {
        max-width: 100%;
    }

    .blog-search-input {
        font-size: 0.85rem;
        padding: 10px 8px;
    }

    .blog-search-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
        width: auto;
    }

    .blog-clear-btn {
        padding: 10px 12px;
    }

    .blog-search-icon {
        padding-left: 12px;
        padding-right: 6px;
    }

    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1rem;
    }
}

/* ============================================
    🚀 EMPTY STATE - Sin artículos
    ============================================ */
.empty-state-container {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.empty-state-icon i {
    opacity: 0.3;
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.empty-state-actions .btn-lg {
    padding: 12px 24px;
    font-size: 0.95rem;
}

/* Desktop: botones más separados horizontalmente */
@media (min-width: 768px) {
    .empty-state-actions {
        gap: 1.5rem !important;
        margin-top: 2rem !important;
    }
}

/* Mobile: botones apilados verticalmente con separación */
@media (max-width: 767px) {
    .empty-state-actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        gap: 1rem !important;
        margin-top: 1.5rem !important;
    }

    .empty-state-actions .btn.blog-write-btn,
    .empty-state-actions .btn.blog-moderation-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex !important;
    }

    .empty-state-actions .btn i {
        margin-right: 0.5rem;
    }
}

/* ============================================
   🎯 ANIMACIÓN PROFESIONAL - Foco en botón escribir
   ============================================ */
.empty-state-actions .btn.blog-write-btn {
    animation: pulseCall 3s ease-in-out infinite;
}

.empty-state-actions .btn.blog-write-btn,
.empty-state-actions .btn.blog-write-btn.btn-lg {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.empty-state-actions .btn.blog-write-btn:hover,
.empty-state-actions .btn.blog-write-btn.btn-lg:hover {
    animation: none;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 126, 95, 0.4) !important;
}

@keyframes pulseCall {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 126, 95, 0.2);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(255, 126, 95, 0.35);
    }
}

/* ============================================
    🔧 BOTÓN TOGGLE FILTROS MÓVIL - Fijo/Sticky
    ============================================ */
.sidebar-header-toggle {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 8px 8px 0 auto;
}

/* En móvil el botón siempre visible */
@media (max-width: 767px) {
    .sidebar-header-toggle {
        position: fixed;
        top: 10px;
        right: 8px;
        z-index: 9999;
        margin: 0;
        background: linear-gradient(135deg, #6a11cb, #2575fc);
        border: none;
    }

    .sidebar-header-toggle:hover {
        background: linear-gradient(135deg, #5a0fb0, #1e5edc);
    }
}