/* Ocultar globalmente las cajas de ayuda del admin cuando el usuario lo desactiva */
body.help-hidden .help-accordion { display: none !important; }

/* ===== Variables CSS ===== */
:root {
    --color-bg-page: #1e1e2a; /* Modo oscuro por defecto - fusiona con sidebar/topbar */
    --color-bg-card: #e5e7eb;
    --color-accent: #7e22ce;
    --color-accent-hover: #6b21a8;
    --color-accent-active: #581c87;
    --color-accent-rgb: 126, 34, 206;

    /* ===== GRID DINÁMICO - Valores por defecto ===== */
    /* Videos */
    --grid-videos-mobile: 1;
    --grid-videos-tablet: 3;
    --grid-videos-desktop: 3;
    /* Galería */
    --grid-gallery-mobile: 2;
    --grid-gallery-tablet: 4;
    --grid-gallery-desktop: 4;
    /* Eventos */
    --grid-events-mobile: 1;
    --grid-events-tablet: 2;
    --grid-events-desktop: 3;
    /* Reseñas */
    --grid-testimonials-mobile: 1;
    --grid-testimonials-tablet: 2;
    --grid-testimonials-desktop: 3;
    /* Blog */
    --grid-blog-mobile: 1;
    --grid-blog-tablet: 2;
    --grid-blog-desktop: 3;
    /* Proyectos */
    --grid-projects-mobile: 1;
    --grid-projects-tablet: 2;
    --grid-projects-desktop: 4;
    /* Tienda */
    --grid-shop-mobile: 1;
    --grid-shop-tablet: 2;
    --grid-shop-desktop: 4;
}

/* Modo claro: fondo de página usa color de acento para fusionar con topbar/sidebar */
body.light-theme-active {
    --color-bg-page: var(--color-accent);
}

/* Modo claro brillante: fondo de página usa color de tarjeta */
body.bright-theme-active {
    --color-bg-page: var(--color-bg-card);
}

/* Ocultar fondo animado en modo claro brillante */
body.bright-theme-active #animated-bg {
    display: none;
}

/* ===== Estilos Base ===== */
html {
    scroll-padding-top: 5rem;
    overflow-x: hidden;
    overflow-y: scroll; /* Fuerza scrollbar siempre visible para prevenir movimiento del topbar */
    max-width: 100vw;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-page);
    color: #1f2937;
    overflow-x: hidden;
    max-width: 100vw;
}
h1, h2, h3, h4, .font-serif { font-family: 'Playfair Display', serif; }
.hidden { display: none; }
.page { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Componentes de Formulario ===== */
.rich-text-editor {
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.75rem;
    min-height: 150px;
    background-color: #FFFFFF;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    line-height: 1.5;
}

/* Forzar line-height heredado a TODOS los elementos hijos del editor */
.rich-text-editor *,
.rich-text-content * {
    line-height: inherit !important;
}

/* Eliminar márgenes de encabezados para que editor y visualización coincidan */
.rich-text-editor h1,
.rich-text-editor h2,
.rich-text-editor h3,
.rich-text-editor h4,
.rich-text-editor h5,
.rich-text-editor h6,
.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content h4,
.rich-text-content h5,
.rich-text-content h6 {
    margin: 0 !important;
}

/* Estilos para listas dentro del editor Y contenido renderizado */
.rich-text-editor ul,
.rich-text-editor ol,
.rich-text-content ul,
.rich-text-content ol {
    margin-left: 0;
    padding-left: 2rem;
    list-style-position: inside;
}

.rich-text-editor ul,
.rich-text-content ul {
    list-style-type: disc;
}

.rich-text-editor ol,
.rich-text-content ol {
    list-style-type: decimal;
}

.rich-text-editor li,
.rich-text-content li {
    margin-bottom: 0.25rem;
}

/* --- Estilos de viñetas personalizadas --- */
/* 1. Viñeta "Ninguna" */
.rich-text-editor .lista-ninguna,
.rich-text-content .lista-ninguna {
    list-style-type: none;
}

/* 2. Viñeta "Círculo" (Disc) */
.rich-text-editor .lista-circulo,
.rich-text-content .lista-circulo {
    list-style-type: disc;
}

/* 3. Viñeta "Flecha" (Personalizada) */
.rich-text-editor .lista-flecha,
.rich-text-content .lista-flecha {
    list-style-type: none;
    padding-left: 1.2em;
}

.rich-text-editor .lista-flecha li::before,
.rich-text-content .lista-flecha li::before {
    content: '►';
    color: currentColor;
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
    margin-right: 0.3em;
}

/* 4. Viñeta "Check" (Personalizada) */
.rich-text-editor .lista-check,
.rich-text-content .lista-check {
    list-style-type: none;
    padding-left: 1.2em;
}

.rich-text-editor .lista-check li::before,
.rich-text-content .lista-check li::before {
    content: '✓';
    color: currentColor;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Ocultar marcadores por defecto en listas anidadas con clases personalizadas */
.rich-text-editor .lista-flecha ul,
.rich-text-editor .lista-check ul,
.rich-text-content .lista-flecha ul,
.rich-text-content .lista-check ul {
    list-style-type: none;
}

/* Asegurar que las listas anidadas dentro de listas personalizadas también sean personalizadas */
.rich-text-editor .lista-flecha li ul,
.rich-text-content .lista-flecha li ul {
    list-style-type: none;
    padding-left: 1.2em;
}

.rich-text-editor .lista-check li ul,
.rich-text-content .lista-check li ul {
    list-style-type: none;
    padding-left: 1.2em;
}

/* Estilo para enlaces en el editor y contenido renderizado */
.rich-text-editor a,
.rich-text-content a {
    color: #0000EE;
    text-decoration: underline;
}

.rich-text-editor a:visited,
.rich-text-content a:visited {
    color: #551A8B;
}

/* Asegurar que el contenido no se desborde */
.rich-text-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;  /* Desactivar partición automática de palabras en texto justificado */
    line-height: 1.5;
}

.rich-text-content p {
    margin-bottom: 1rem;
}

.rich-text-editor p {
    margin-bottom: 1rem;
}

/* NOTA: Comentado para permitir estilos inline de font-size
   Si se necesita tamaño consistente, aplicar a nivel de contenedor .rich-text-content */
/* .rich-text-content p,
.rich-text-content span,
.rich-text-content div {
    font-size: inherit !important;
} */

/* Normalizar encabezados dentro del tagline */
.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content h4,
.rich-text-content h5,
.rich-text-content h6 {
    font-size: 1.1em !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Normalizar font-weight del tagline para que solo las negritas explícitas se vean */
.rich-text-content {
    font-weight: 400 !important;
}

.rich-text-content strong,
.rich-text-content b {
    font-weight: 700 !important;
}

.rich-text-content p,
.rich-text-content span:not(strong):not(b),
.rich-text-content div {
    font-weight: 400 !important;
}

/* Especificidad extra para el tagline del actor */
#actor-tagline.rich-text-content,
#actor-tagline.rich-text-content *:not(strong):not(b) {
    font-weight: 400 !important;
}

#actor-tagline.rich-text-content strong,
#actor-tagline.rich-text-content b {
    font-weight: 700 !important;
}

/* Efectos hover para foto principal */
#main-photo {
    border: 4px solid rgba(var(--color-accent-rgb), 0.3);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.2);
    transition: all 0.4s ease-out;
    cursor: pointer;
}

#main-photo:hover {
    transform: scale(1.01);
    box-shadow: 0 6px 16px rgba(var(--color-accent-rgb), 0.28);
}

/* Efectos hover para tagline */
#actor-tagline {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease-out;
    padding: 1.5rem;  /* Desktop: padding uniforme */
    border-radius: 0.5rem;
}

#actor-tagline:hover {
    transform: scale(1.01);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

/* Reducir padding vertical en móvil */
@media (max-width: 640px) {
    #actor-tagline {
        padding: 0.75rem 1.5rem;  /* Menos padding arriba/abajo, mantener laterales */
    }

    /* Reducir márgenes de párrafos en tagline en móvil */
    #actor-tagline.rich-text-content p {
        margin-bottom: 0.5rem;  /* Reducir de 1rem a 0.5rem */
    }

    #actor-tagline.rich-text-content p:last-child {
        margin-bottom: 0;  /* Eliminar margen del último párrafo */
    }
}

/* ===== MENSAJE DE BIENVENIDA (HOME VACÍO) ===== */
.home-welcome-message {
    animation: fadeInUp 0.5s ease-out;
}

.home-welcome-message h3 {
    color: var(--text-color, #1f2937);
}

.home-welcome-message p {
    color: var(--text-muted, #4b5563);
}

.home-welcome-message ul li {
    color: var(--text-muted, #4b5563);
}

.home-welcome-message .bg-gray-50 {
    background-color: var(--card-bg-subtle, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== LIGHTBOX PARA FOTO PRINCIPAL ===== */
.photo-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.photo-lightbox.hidden {
    display: none;
}

.photo-lightbox.show {
    opacity: 1;
    pointer-events: all;
}

/* Fondo oscuro del lightbox */
.photo-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

/* Contenedor de la imagen */
.photo-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10000;
    animation: lightbox-zoom-in 0.3s ease-out;
}

@keyframes lightbox-zoom-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Imagen ampliada */
.photo-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Botón de cerrar */
.photo-lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    z-index: 10001;
}

.photo-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Cursor de zoom para la foto principal */
#main-photo {
    cursor: zoom-in;
}

/* Responsive */
@media (max-width: 768px) {
    .photo-lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .photo-lightbox-img {
        max-width: 95vw;
        max-height: 95vh;
    }
}

input[type="file"]::file-selector-button { 
    background-color: var(--color-accent); 
    color: white; 
    border: none; 
    padding: 0.5rem 1rem; 
    border-radius: 0.375rem; 
    cursor: pointer; 
    transition: background-color 0.2s; 
}
input[type="file"]::file-selector-button:hover { background-color: var(--color-accent-hover); }
.prose { max-width: 85%; margin-left: auto; margin-right: auto; text-align: left; }
/* Permitir que los estilos inline de alineación sobrescriban el text-align por defecto */
.prose[style*="text-align"] { text-align: inherit !important; }
.preserve-lines { white-space: pre-wrap; }

/* ===== Botones de Empty State para secciones vacías ===== */
.empty-state-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    width: auto !important;
    flex: none !important;
    transition: background-color 0.2s;
    white-space: normal !important;
}

.empty-state-btn-secondary {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

.empty-state-btn-secondary:hover {
    background-color: #d1d5db !important;
}

.empty-state-btn-primary {
    background-color: var(--color-accent) !important;
    color: white !important;
}

.empty-state-btn-primary:hover {
    background-color: var(--color-accent-hover) !important;
}

/* Botón con color de acento - usar en lugar de bg-blue-500 */
.btn-accent {
    background-color: var(--color-accent) !important;
    color: white !important;
}

.btn-accent:hover {
    background-color: var(--color-accent-hover) !important;
}

/* ===== Notificaciones ===== */
#notification {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    z-index: 10001;
    transform: translateX(200%);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#notification.show { transform: translateX(0); }

/* ===== Navegación Admin ===== */
.admin-nav-link { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    border-left: 4px solid transparent; 
    transition: all 0.2s ease-in-out; 
}
.admin-nav-link.active { 
    background-color: #EDE9FE; 
    color: var(--color-accent); 
    border-left-color: var(--color-accent); 
    font-weight: 600; 
}
.admin-nav-link.active svg { stroke: var(--color-accent); }

/* ===== Botones y Enlaces ===== */
.main-nav-link.active { background-color: var(--color-accent-active) !important; cursor: default; }
.btn-accent { background-color: var(--color-accent); }
.btn-accent:hover { background-color: var(--color-accent-hover); }
.accent-ring-focus:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.5);
    border-color: var(--color-accent);
}
/* Item de dropdown con color de acento para hover (admin → galería selección) */
.accent-dropdown-item:hover {
    background-color: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-accent);
}

/* ============================================
   FORM "Añadir Elemento" galería/videos (admin)
   Pills de tipo + dropzone + previews
   ============================================ */

.portfolio-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portfolio-type-pill:hover {
    background-color: rgba(var(--color-accent-rgb), 0.05);
    border-color: var(--color-accent);
}

.portfolio-type-pill.active {
    background-color: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.portfolio-type-pill-icon {
    font-size: 1rem;
    line-height: 1;
}

.portfolio-new-category-btn {
    padding: 0 0.75rem;
    background: white;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.portfolio-new-category-btn:hover {
    background-color: var(--color-accent);
    color: white;
}

.portfolio-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.portfolio-dropzone:hover,
.portfolio-dropzone.dragover {
    border-color: var(--color-accent);
    background-color: rgba(var(--color-accent-rgb), 0.04);
}

.portfolio-dropzone .dropzone-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.5rem;
}

.portfolio-dropzone .dropzone-content p {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
}

#portfolio-file-preview > div,
#portfolio-yt-preview > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

#portfolio-file-preview img,
#portfolio-file-preview video,
#portfolio-yt-preview img {
    max-width: 120px;
    max-height: 90px;
    border-radius: 0.375rem;
    object-fit: cover;
    background: #000;
    flex-shrink: 0;
}

.portfolio-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.portfolio-preview-meta-name {
    font-weight: 500;
    color: #374151;
    word-break: break-all;
    font-size: 0.875rem;
}

.portfolio-preview-meta-info {
    font-size: 0.75rem;
    color: #6b7280;
}

.portfolio-preview-meta-ok {
    font-size: 0.75rem;
    color: #10b981;
    font-weight: 500;
}
.accent-check-filled {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff;
}
.accent-check-partial {
    background-color: rgba(var(--color-accent-rgb), 0.4) !important;
    border-color: var(--color-accent) !important;
    color: #fff;
}
.main-nav-link, .mobile-nav-link, #login-form button, #admin-panel button, #admin-content-area button { 
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, box-shadow 0.2s; 
}
.main-nav-link:hover:not(.active), .mobile-nav-link:hover, #login-form button:hover, 
#admin-panel button:hover, #admin-content-area button:hover { transform: translateY(-2px); }
.delete-portfolio-item:hover, .delete-event-item:hover, .admin-nav-link:hover,
.delete-contact-item:hover, .delete-cv-item:hover { transform: none; }
.main-nav-link:active, .mobile-nav-link:active, #login-form button:active, 
#admin-panel button:active, #admin-content-area button:active { 
    transform: translateY(0) scale(0.97); 
    transition-duration: 0.05s; 
}
#gallery-grid img:active { transform: scale(1.02); }

/* ===== Sombras ===== */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(var(--color-accent-rgb), 0.08), 0 2px 4px -2px rgba(var(--color-accent-rgb), 0.08); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(var(--color-accent-rgb), 0.1), 0 4px 6px -4px rgba(var(--color-accent-rgb), 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(var(--color-accent-rgb), 0.15), 0 8px 10px -6px rgba(var(--color-accent-rgb), 0.15); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(var(--color-accent-rgb), 0.25); }

/* ===== Animaciones de Scroll ===== */
.scroll-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }

/* ===== Lightbox ===== */
#lightbox, #video-lightbox {
    z-index: 10002;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    padding: 5rem 2rem 2rem 2rem;
    box-sizing: border-box;
}
#lightbox.hidden, #video-lightbox.hidden { opacity: 0; visibility: hidden; }
#lightbox-content {
    max-width: 90vw;
    max-height: 75vh;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}
#lightbox:not(.hidden) #lightbox-content { transform: scale(1); }
#video-lightbox-content iframe, #video-lightbox-content video { 
    width: 100%; 
    height: 100%; 
    border-radius: 0.5rem; 
}

/* ===== Video Thumbnails ===== */
.video-thumbnail { 
    cursor: pointer; 
    position: relative; 
    overflow: hidden; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 6px -1px rgba(var(--color-accent-rgb), 0.08), 0 2px 4px -2px rgba(var(--color-accent-rgb), 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.video-thumbnail:hover { 
    transform: scale(1.03); 
    box-shadow: 0 10px 15px -3px rgba(var(--color-accent-rgb), 0.1), 0 4px 6px -4px rgba(var(--color-accent-rgb), 0.1); 
}
.video-thumbnail::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.3); 
    opacity: 1; 
    transition: opacity 0.3s ease; 
}
.video-thumbnail:hover::after { opacity: 0; }
.play-icon { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 64px; 
    height: 64px; 
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    pointer-events: none; 
    transition: transform 0.3s ease, background-color 0.3s ease; 
}
.video-thumbnail:hover .play-icon { 
    transform: translate(-50%, -50%) scale(1.1); 
    background-color: white; 
}
.play-icon svg { 
    width: 32px; 
    height: 32px; 
    color: var(--color-accent); 
    margin-left: 4px; 
}

/* ===== Fondo Animado ===== */
#animated-bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    overflow: hidden; 
}
.blob { 
    position: absolute; 
    border-radius: 50%; 
    background: rgba(var(--color-accent-rgb), 0.2); 
    filter: blur(80px); 
    will-change: transform; 
    animation: move 20s infinite alternate ease-in-out; 
}
@keyframes move { 
    from { transform: translate(-10vw, -10vh) rotate(-90deg) scale(1); } 
    to { transform: translate(10vw, 10vh) rotate(90deg) scale(1.2); } 
}

/* ===== Galería Masonry ===== */
#gallery-grid { column-count: 2; column-gap: 1rem; }
@media (min-width: 768px) { #gallery-grid { column-count: 4; } }

/* Estado vacío de galería - forzar centrado en layout de columnas CSS */
#gallery-grid .empty-state-with-actions,
#gallery-grid > p.text-gray-500 {
    column-span: all;
    text-align: center;
}

/* ===== Botón Volver Arriba ===== */
#back-to-top-btn { 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s; 
    transform: translateY(10px); 
}
#back-to-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top-btn:hover { background-color: var(--color-accent-hover); }

/* ===== Elementos Arrastrables ===== */
.card-background { background-color: var(--color-bg-card); }

/* ===== Card minimum height - dejar 0.5rem con el borde inferior ===== */

/* Desktop with topbar: 70px topbar + 0.5rem margen inferior */
@media (min-width: 1024px) {
    .main-with-topbar .card-background {
        min-height: calc(100vh - 70px - 0.5rem);
    }
}

/* Mobile/Tablet with topbar: 68px topbar + 0.5rem margen inferior */
@media (max-width: 1023px) {
    .main-with-topbar .card-background {
        min-height: calc(100vh - 68px - 0.5rem);
    }
}

/* Reducir padding del main en modo topbar para expandir tarjetas */
.main-with-topbar main {
    padding-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
}

/* Panel admin: altura automática según contenido, no forzar min-height */
#admin-content-area .card-background {
    min-height: auto !important;
}

/* Colores de acento para formulario de Título Sección */
#section-titles-form .text-purple-600,
#section-titles-form .accordion-icon {
    color: var(--color-accent) !important;
}

#section-titles-form .text-purple-800 {
    color: var(--color-accent) !important;
}

#section-titles-form .border-purple-200 {
    border-color: color-mix(in srgb, var(--color-accent) 40%, white) !important;
}

/* Bordes más visibles en acordeones de Título Sección */
#section-titles-form .accordion-section {
    border-width: 2px !important;
    border-color: #d1d5db !important; /* gray-300 */
}

#section-titles-form .from-purple-50 {
    --tw-gradient-from: color-mix(in srgb, var(--color-accent) 10%, white) !important;
}

#section-titles-form input[type="checkbox"] {
    accent-color: var(--color-accent);
}

#section-titles-form select:focus,
#section-titles-form input:focus {
    border-color: var(--color-accent) !important;
    --tw-ring-color: var(--color-accent) !important;
}

.sortable-item { cursor: grab; }
.sortable-item:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.4; background-color: #c7d2fe; border: 2px dashed var(--color-accent); }

/* ===== Admin Portfolio - Grid horizontal (más intuitivo para ordenar) ===== */
.admin-masonry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .admin-masonry-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.admin-masonry-grid .sortable-item {
    margin-bottom: 0;
}

/* ===== Menu Order Drag & Drop ===== */

/* Contenedor grid de 5 columnas (preparado para grupos adicionales) */
.menu-order-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

@media (max-width: 1280px) {
    .menu-order-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .menu-order-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .menu-order-grid {
        grid-template-columns: 1fr;
    }
}

.menu-order-group {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.menu-order-group-header {
    background: linear-gradient(to right, var(--color-accent), color-mix(in srgb, var(--color-accent) 80%, #000));
    color: white;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}

.menu-order-group-header:hover {
    filter: brightness(1.1);
}

.menu-order-group-header:active {
    cursor: grabbing;
}

.menu-order-group-handle {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
}

.menu-order-group-header:hover .menu-order-group-handle {
    color: white;
}

.menu-order-group-label {
    flex: 1;
    text-align: center;
}

/* Grupo siendo arrastrado */
.menu-order-group.group-dragging {
    opacity: 0.5;
    border: 2px dashed var(--color-accent);
}

.menu-order-group.group-ghost {
    opacity: 0.4;
    border: 2px dashed var(--color-accent);
}

.menu-order-items {
    min-height: 100px;
    padding: 0.5rem;
    flex: 1;
}

.menu-order-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
}

.menu-order-item:last-child {
    margin-bottom: 0;
}

.menu-order-item:hover {
    background: #f3f4f6;
    border-color: var(--color-accent);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.menu-order-item:active {
    cursor: grabbing;
}

.menu-order-item.sortable-ghost {
    opacity: 0.4;
    background: #e0e7ff;
    border: 2px dashed var(--color-accent);
}

.menu-order-item.sortable-drag {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--color-accent);
}

.menu-order-item-handle {
    color: #9ca3af;
    display: flex;
    align-items: center;
}

.menu-order-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.menu-order-item-label {
    flex: 1;
    font-size: 0.875rem;
    color: #374151;
}

.menu-order-item-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 9999px;
}

/* Indicador visual de zona de drop */
.menu-order-items.sortable-drag-over {
    background: #f0f9ff;
    border: 2px dashed #3b82f6;
    border-radius: 0.375rem;
}

/* ===== Modal de Confirmación ===== */
#confirm-modal { transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; }
#confirm-modal.hidden { opacity: 0; visibility: hidden; }
#confirm-modal-content { transform: scale(0.95); transition: transform 0.2s ease-in-out; }
#confirm-modal:not(.hidden) #confirm-modal-content { transform: scale(1); }
#confirm-modal-confirm { background-color: #ef4444; }
#confirm-modal-confirm:hover { background-color: #dc2626; }

/* ===== Editor de Texto ===== */
.editor-toolbar { 
    background-color: #f9fafb; 
    border: 1px solid #d1d5db; 
    border-bottom: none; 
    padding: 0.5rem; 
    border-top-left-radius: 0.375rem; 
    border-top-right-radius: 0.375rem; 
    display: flex; 
    gap: 0.25rem; 
    flex-wrap: wrap; 
    align-items: center;
}
.editor-toolbar button { 
    background-color: #fff; 
    border: 1px solid #d1d5db; 
    border-radius: 0.25rem; 
    padding: 0.25rem 0.5rem; 
    cursor: pointer; 
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.editor-toolbar button:hover { 
    background-color: #f3f4f6; 
    border-color: #9ca3af;
    transform: none; 
}
.editor-toolbar button.active { 
    background-color: #EDE9FE; 
    color: var(--color-accent); 
    border-color: var(--color-accent); 
}
.editor-toolbar-separator {
    width: 1px;
    height: 24px;
    background-color: #d1d5db;
    margin: 0 2px;
}
.editor-toolbar-select-container {
    position: relative;
}
.editor-toolbar-select {
    padding: 6px 24px 6px 8px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    min-width: 100px;
    height: 32px;
    appearance: none;
}
.editor-toolbar-select:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

/* Selectores de color estilo Office */
.editor-toolbar-color-palette {
    position: relative;
    display: inline-block;
}
.editor-toolbar-color-btn {
    padding: 4px 8px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    transition: all 0.15s;
}
.editor-toolbar-color-btn:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}
.color-indicator {
    width: 18px;
    height: 18px;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    display: inline-block;
}
.color-palette-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px;
    z-index: 1000;
    min-width: 220px;
    display: none;
}
.color-palette-dropdown.show {
    display: block;
}
.color-palette-section {
    margin-bottom: 12px;
}
.color-palette-section:last-of-type {
    margin-bottom: 8px;
}
.color-palette-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}
.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}
.color-swatch {
    width: 24px;
    height: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border-color: #9ca3af;
    z-index: 1;
}
.more-colors-btn {
    width: 100%;
    padding: 8px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #374151;
    transition: all 0.15s;
    position: relative;
}
.more-colors-btn:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}
.more-colors-btn svg {
    width: 16px;
    height: 16px;
}
.hidden-color-input {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 36px;
    opacity: 0;
    cursor: pointer;
}

/* Selectores de listas estilo Office */
.editor-toolbar-list-selector {
    position: relative;
    display: inline-block;
}
.editor-toolbar-list-btn {
    padding: 4px 8px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    transition: all 0.15s;
}
.editor-toolbar-list-btn:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}
.list-style-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 16px;
    z-index: 1000;
    min-width: 360px;
    display: none;
}
.list-style-dropdown.show {
    display: block;
}
.list-dropdown-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}
.list-style-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.list-style-option {
    padding: 16px 14px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    font-size: 14px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-style-option:hover {
    background-color: #f9fafb;
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.list-preview {
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
    white-space: pre-line;
    font-family: monospace;
}
.form-edit-mode { 
    border: 2px solid var(--color-accent); 
    box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.2); 
}
.preview-container { margin-bottom: 1rem; }
/* NOTA: .preview-image se define en page-builder.css para el grid del constructor */
/* Esta regla se eliminó porque limitaba las imágenes a 200×200px en el page-builder */

/* ===== Spinners ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { 
    border: 4px solid rgba(0,0,0,0.1); 
    border-left-color: var(--color-accent); 
    border-radius: 50%; 
    width: 2.5rem; 
    height: 2.5rem; 
    animation: spin 1s linear infinite; 
}
.btn-spinner { 
    border: 3px solid rgba(255,255,255,0.3); 
    border-left-color: #fff; 
    border-radius: 50%; 
    width: 1.25rem; 
    height: 1.25rem; 
    animation: spin 0.8s linear infinite; 
}

/* ===== Repositorio de Documentos ===== */
.docs-container .breadcrumb-link { color: var(--color-accent); font-weight: 500; }
.docs-container .breadcrumb-link:hover { text-decoration: underline; }
.docs-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-item { transition: transform 0.2s, box-shadow 0.2s; }
.doc-item:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 
}

/* ===== Encabezado de Documentos ===== */
#docs-breadcrumb { 
    display: flex; 
    align-items: center; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    padding-bottom: 5px; 
}
.breadcrumb-part { 
    display: flex; 
    align-items: center; 
    gap: 0.25rem; 
    padding: 0.25rem 0.5rem; 
    border-radius: 0.375rem; 
    font-weight: 500; 
    white-space: nowrap; 
    transition: background-color 0.2s; 
}
.breadcrumb-link { color: #4b5563; cursor: pointer; }
.breadcrumb-link:hover { background-color: #f3f4f6; }
.breadcrumb-current { color: var(--color-accent); background-color: #EDE9FE; }
.breadcrumb-separator { color: #9ca3af; }

/* ===== SIDEBAR MENU LATERAL ===== */
#sidebar {
    --sidebar-bg: rgba(30, 30, 42, 0.85);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --accent-color: var(--color-accent);
    --text-main: #e0e0e0;
    --text-subtle: #a0a0a0;
    --highlighter-gradient: linear-gradient(90deg, rgba(130, 114, 255, 0.2) 0%, transparent 100%);

    width: 256px;
    position: fixed;
    height: calc(100vh - 2rem);
    left: 1rem;
    top: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--sidebar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 40;
}

#sidebar.light-theme {
    --sidebar-bg: rgba(var(--color-accent-rgb), 0.85);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --text-main: rgba(255, 255, 255, 0.9);
    --text-subtle: rgba(255, 255, 255, 0.7);
    --highlighter-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
}

/* Hover y active en tema claro - mantener texto blanco como en topbar */
#sidebar.light-theme .sidebar-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

#sidebar.light-theme .sidebar-nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

#sidebar.light-theme .sidebar-nav-link.active svg {
    /* mantener color original */
}

/* Tema claro brillante para sidebar - fondo de tarjeta con texto negro */
#sidebar.bright-theme {
    --sidebar-bg: var(--color-bg-card);
    --sidebar-border: rgba(0, 0, 0, 0.1);
    --text-main: rgba(0, 0, 0, 0.9);
    --text-subtle: rgba(0, 0, 0, 0.7);
    --highlighter-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
    background: var(--color-bg-card) !important;
    backdrop-filter: none;
}

#sidebar.bright-theme .sidebar-nav-link {
    color: rgba(0, 0, 0, 0.85);
}

#sidebar.bright-theme .sidebar-nav-link svg {
    color: rgba(0, 0, 0, 0.7);
}

#sidebar.bright-theme .sidebar-nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

#sidebar.bright-theme .sidebar-nav-link.active {
    background: rgba(0, 0, 0, 0.08);
}

#sidebar.bright-theme .sidebar-section-title {
    color: rgba(0, 0, 0, 0.6);
}

#sidebar.bright-theme .sidebar-submenu {
    background: rgba(0, 0, 0, 0.03);
}

#main-site-with-sidebar {
    margin-left: calc(256px + 26px);
    min-height: 100vh;
    width: calc(100% - 256px - 26px);
    position: relative;
}

/* Padding lateral para modo sidebar - izquierdo 0 para pegar al sidebar */
#main-site-with-sidebar:not(.main-with-topbar) main {
    padding-left: 0 !important;
    padding-right: 1rem;
}

/* Tarjetas altura completa en modo sidebar */
#main-site-with-sidebar:not(.main-with-topbar) .card-background {
    min-height: calc(100vh - 2rem);
}

/* Container sin márgenes laterales en modo sidebar */
#main-site-with-sidebar:not(.main-with-topbar) .container.mx-auto.card-background,
#main-site-with-sidebar:not(.main-with-topbar) section.content-section .container.mx-auto.card-background {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Eliminar margin-top de todas las secciones inicialmente */
#main-site-with-sidebar main > section {
    margin-top: 0 !important;
}

/* Añadir espaciado solo entre secciones VISIBLES consecutivas */
#main-site-with-sidebar main > section:not(.hidden) + section:not(.hidden) {
    margin-top: 3rem !important; /* 48px mobile, equivalente a space-y-12 */
}

@media (min-width: 768px) {
    #main-site-with-sidebar main > section:not(.hidden) + section:not(.hidden) {
        margin-top: 4rem !important; /* 64px desktop, equivalente a md:space-y-16 */
    }
}

.page:not(.hidden) {
    display: block;
}

#sidebar-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

/* Scrollbar visible y elegante para navegación del sidebar */
#sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#sidebar-nav::-webkit-scrollbar {
    width: 10px;
}

#sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

#sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

#nav-highlighter {
    position: absolute;
    left: 0;
    width: calc(100% - 16px);
    margin: 0 8px;
    background: var(--highlighter-gradient);
    border-radius: 6px;
    transition: top 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    z-index: 0;
    opacity: 0;
}

.sidebar-nav-link {
    color: var(--text-main);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
}

.sidebar-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-left-color: currentColor;
}

.sidebar-nav-link svg {
    color: var(--text-subtle);
    transition: color 0.2s ease;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.sidebar-nav-link:hover svg {
    /* mantener color original */
}

.sidebar-nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-left-color: currentColor;
}

.sidebar-nav-link.active svg {
    /* mantener color original */
}

.sidebar-section-title {
    color: var(--text-subtle);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.5rem 0.125rem;
}

#sidebar-search {
    position: relative;
}

#sidebar-search input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--sidebar-border);
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
    transition: all 0.2s ease;
}

#sidebar-search input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.1);
}

#sidebar-search svg {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--text-subtle);
}

#mobile-sidebar-btn {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: rgba(30, 30, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: white;
    box-shadow: none;
    border: none;
    outline: none;
    transform: translateZ(0);
    transition: background-color 0.3s ease;
}

#mobile-sidebar-btn:hover,
#mobile-sidebar-btn:focus,
#mobile-sidebar-btn:active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateZ(0) !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

#mobile-sidebar-btn svg,
#mobile-sidebar-btn:hover svg,
#mobile-sidebar-btn:focus svg,
#mobile-sidebar-btn:active svg {
    filter: none !important;
    stroke: currentColor !important;
}

/* REGLA ULTRA AGRESIVA - Eliminar TODO efecto en botón hamburguesa y sus hijos */
#mobile-sidebar-btn *,
#mobile-sidebar-btn *::before,
#mobile-sidebar-btn *::after,
#mobile-sidebar-btn::before,
#mobile-sidebar-btn::after {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
    text-shadow: none !important;
}

/* Animación hamburguesa → X para #mobile-sidebar-btn */
#mobile-sidebar-btn svg line {
    transition: all 0.3s ease;
    transform-origin: center;
}

#mobile-sidebar-btn.active svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

#mobile-sidebar-btn.active svg line:nth-child(2) {
    opacity: 0;
}

#mobile-sidebar-btn.active svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

#mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 30;
}

.submenu-arrow {
    color: var(--text-subtle);
    transition: transform 0.25s ease;
    width: 14px;
    height: 14px;
}

.sidebar-nav-link.submenu-open .submenu-arrow {
    transform: rotate(180deg);
}

.sidebar-submenu {
    display: none;
    padding-left: 0.75rem;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-left: 2px solid rgba(126, 34, 206, 0.2);
    margin-left: 1rem;
}

.sidebar-submenu.open {
    display: block;
    animation: slideDown 0.25s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar-submenu .sidebar-nav-link {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.75rem;
}

/* Submenu de segundo nivel (anidado dentro de #admin-submenu-sidebar):
   reduce indentación y opacidad del border-left para no acumular padding
   sobre padding ni hacer el separador visualmente pesado. */
.sidebar-submenu .sidebar-submenu {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left-color: rgba(126, 34, 206, 0.15);
}

/* Botones de cuenta (login/logout) en el sidebar: icon-only, no full-width.
   Estilo minimalista equivalente al icono persona/salir del topbar móvil
   (#topbar-nav-user-btn). */
#login-toggle-sidebar,
#salir-link-sidebar {
    width: fit-content;
    align-self: flex-start;
    padding: 0.375rem;
    border-left: none;
}

#sidebar-logo {
    color: var(--text-main);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.5rem;
}

#sidebar-logo:hover {
    transform: scale(1.05);
}

#sidebar-logo svg {
    color: var(--accent-color);
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

#theme-switcher-sidebar {
    cursor: pointer;
    transition: all 0.2s ease;
}

#theme-switcher-sidebar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.3);
}

/* Botón Salir con formato discreto como el topbar */
#salir-link-sidebar {
    background-color: transparent;
    color: var(--text-main);
}

#salir-link-sidebar:hover {
    background: rgba(255, 255, 255, 0.15);
}

#salir-link-sidebar svg {
    color: var(--text-subtle);
}

#salir-link-sidebar:hover svg {
    color: var(--text-main);
}

/* ===== TARJETAS Y TOPBAR ALINEADOS EN DESKTOP ===== */
/* Selector con alta especificidad para ganar a Tailwind CDN que pone max-width fijos */
@media (min-width: 769px) {
    section.content-section .container.mx-auto.card-background,
    section.content-section > .container.mx-auto.card-background,
    #home .container.mx-auto.card-background,
    .container.mx-auto.card-background {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Topbar con mismo sistema porcentual */
    #topbar {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* En escritorio no se muestra el botón X del sidebar (es sólo móvil) */
    #sidebar-close-btn { display: none !important; }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Ocultar blobs decorativos en móvil para evitar overflow */
    #animated-bg {
        display: none;
    }

    /* Ajustar notificaciones para móvil */
    #notification {
        right: 0.5rem !important;
        left: 0.5rem !important;
        width: auto !important;
    }

    #sidebar {
        display: none;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 10001 !important;
    }

    #sidebar.mobile-open {
        display: flex;
        flex-direction: column;
        transform: translateX(0);
        box-shadow: none;
    }

    body.sidebar-open #topbar { display: none !important; }

    #sidebar-close-btn {
        background: transparent;
        border: none;
        color: var(--text-main);
        padding: 0.5rem;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #sidebar-close-btn:hover {
        background: rgba(0,0,0,0.08);
    }

    #main-site-with-sidebar {
        margin-left: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    #mobile-sidebar-btn {
        display: block;
    }

    #mobile-sidebar-overlay.show {
        display: block;
    }
    
    /* Ajustar márgenes del main para que las tarjetas coincidan con el topbar */
    #main-site-with-sidebar main {
        padding: 2rem 1rem !important; /* Aumentado de 0.125rem (2px) a 1rem (16px) para mejor legibilidad móvil */
        max-width: none !important;
    }

    /* CRÍTICO: Cuando topbar está activo, eliminar padding-top del main */
    #main-site-with-sidebar.main-with-topbar main {
        padding-top: 0 !important;
    }

    /* Ajustes para tarjetas en móvil - tarjetas ocupan todo el ancho del main (que ya tiene padding) */
    #main-site-with-sidebar main .card-background,
    .container.mx-auto.card-background {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 1.5rem 1rem !important; /* Aumentado de 0.25rem (4px) a 1rem (16px) para evitar huecos en móvil */
        box-sizing: border-box !important;
    }

    /* Proyectos: anular padding Y margin horizontal de la tarjeta.
       El margin causa overflow con width:100% → la derecha se recorta con overflow-x:hidden */
    #projects .container.mx-auto.card-background,
    #project-detail .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #project-detail-container > div {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Documentación pública y privada */
    #public-docs .container.mx-auto.card-background,
    #private-docs .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Todas las secciones admin (admin-settings, admin-shop, admin-projects, etc.) */
    section[id^="admin-"] .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    section[id^="admin-"] .container.mx-auto.card-background > .p-8 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Prevenir scroll horizontal en páginas personalizadas */
    #main-site-with-sidebar main {
        overflow-x: hidden;
    }

    .custom-page-container {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Altura completa para páginas personalizadas en móvil */
    #custom-page-view {
        height: calc(100vh - 68px);
        display: flex;
        flex-direction: column;
    }

    #custom-page-view .container.mx-auto.card-background {
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
        min-height: 100% !important;
    }

    #custom-page-view .custom-page-container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    #custom-page-view .custom-page-container iframe {
        flex: 1;
        height: 100% !important;
        min-height: 400px;
    }

    /* Ajustar tamaño de fuentes en móvil */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.875rem !important;
    }
    
    /* Ajustar imágenes para móvil */
    #main-photo {
        max-width: 200px !important;
    }
    
    /* Ajustar galería en móvil */
    #gallery-grid {
        column-count: 2 !important;
        column-gap: 0.5rem;
    }
    
    /* Notificaciones en móvil */
    #notification {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 640px) {
    #gallery-grid {
        column-count: 1 !important;
    }

    .container {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Reducir padding lateral del container en sección Reseñas para móvil */
    #testimonials .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Contacto para móvil */
    #contact .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección CV/Sobre Mi para móvil */
    #cv .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Inicio para móvil */
    #home .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Galería para móvil */
    #gallery .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Videos para móvil */
    #videobook .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Eventos y detalle */
    #events .container.mx-auto.card-background,
    #event-detail-view .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Blog y detalle de post */
    #blog .container.mx-auto.card-background,
    #blog-post-view .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Tienda */
    #shop .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reducir padding lateral del container en sección Proyectos + anular margen
       (el margen 0.75rem de .card-background causa overflow en viewports <640px) */
    #projects .container.mx-auto.card-background,
    #project-detail .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Reducir padding horizontal del contenido del detalle de proyecto */
    #project-detail-container > div {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Documentación pública y privada */
    #public-docs .container.mx-auto.card-background,
    #private-docs .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Todas las secciones admin */
    section[id^="admin-"] .container.mx-auto.card-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    section[id^="admin-"] .container.mx-auto.card-background > .p-8 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Forzar topbar a ancho completo en móvil */
    #topbar.container.mx-auto {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Asegurar márgenes consistentes con el topbar (0.25rem) */
    #main-site-with-sidebar main {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* CRÍTICO: Cuando topbar está activo, eliminar padding-top del main */
    #main-site-with-sidebar.main-with-topbar main {
        padding-top: 0 !important;
    }

    /* Ajustar márgenes de tarjetas para pantallas muy pequeñas */
    .card-background {
        margin: 0 0.75rem !important;
    }
}

/* Content transitions - Slider style */
.content-section {
    position: relative;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    display: none; /* Todas ocultas por defecto */
    scroll-margin-top: 90px; /* Espacio para topbar (70px) + margen superior (1rem = 16px) */
}

.content-section.slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
}

.content-section.slide-in-right {
    transform: translateX(100%);
    opacity: 0;
}

.content-section.active-section {
    display: block; /* Mostrar solo la activa */
    transform: translateX(0);
    opacity: 1;
}

/* Transiciones iguales para secciones admin y general (0.5s) */
section[id^="admin-"].content-section {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* CRÍTICO: Asegurar especificidad mayor que las clases de animación (0,2,1 > 0,2,0) */
section[id^="admin-"].content-section.slide-in-right,
section[id^="admin-"].content-section.slide-out-left,
section[id^="admin-"].content-section.active-section {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* ===== Modal para insertar enlaces ===== */
.link-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.link-modal-content {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 90%;
    max-width: 500px;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.link-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.link-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.link-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.link-modal-close:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.link-modal-body {
    padding: 1.5rem;
}

.link-form-group {
    margin-bottom: 1.25rem;
}

.link-form-group:last-child {
    margin-bottom: 0;
}

.link-form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.link-form-group input,
.link-form-group select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #1f2937;
    transition: all 0.2s;
}

.link-form-group input:focus,
.link-form-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.1);
}

.link-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.link-modal-footer button {
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel {
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-cancel:hover {
    background-color: #f9fafb;
}

.btn-insert {
    background-color: var(--color-accent);
    color: white;
    border: none;
}

.btn-insert:hover {
    background-color: var(--color-accent-hover);
}

/* ===== Estilos para enlaces de tipo botón ===== */
.tagline-link-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin-right: 0.5rem;          /* Espacio horizontal entre botones */
    margin-bottom: 0.75rem;        /* Espacio vertical al envolver a nueva línea */
    background-color: var(--color-accent);
    color: white !important;
    text-decoration: none !important;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    white-space: nowrap;           /* Evitar que el texto dentro del botón se corte */
}

.tagline-link-button:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.tagline-link-button:active {
    background-color: var(--color-accent-active);
    transform: translateY(0);
}

/* Botones responsivos en móviles */
@media (max-width: 640px) {
    .tagline-link-button {
        display: inline-block;       /* Mantener inline para no ocupar todo el ancho */
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        margin: 0.25rem;             /* Espacio uniforme entre botones */
        text-align: center;
    }

    /* Contenedor de botones centrado en móvil */
    .rich-text-content p:has(.tagline-link-button) {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* ===== CALENDARIO DE EVENTOS - FullCalendar Personalizado ===== */

/* Contenedor principal del calendario */
#events-calendar {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Header del calendario */
.fc .fc-toolbar {
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.fc .fc-toolbar-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.875rem !important;
    font-weight: 700;
    color: var(--color-accent);
}

/* Botones de navegación (prev/next/today) */
.fc .fc-button {
    background: var(--color-accent) !important;
    border: none !important;
    color: white !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.25);
}

.fc .fc-button:hover {
    background: var(--color-accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(126, 34, 206, 0.35);
}

.fc .fc-button:active {
    background: var(--color-accent-active) !important;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(126, 34, 206, 0.3);
}

/* Botones de vista (mes/semana/lista) con estilo diferente */
.fc .fc-button-group .fc-button {
    background: white !important;
    color: var(--color-accent) !important;
    border: 2px solid var(--color-accent) !important;
    box-shadow: none;
}

.fc .fc-button-group .fc-button:hover {
    background: var(--color-accent) !important;
    color: white !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-1px);
}

.fc .fc-button-group .fc-button-active {
    background: var(--color-accent) !important;
    color: white !important;
    border: 2px solid transparent !important;
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.3) !important;
}

.fc .fc-button-group .fc-button-active:hover {
    background: var(--color-accent-hover) !important;
    transform: translateY(-1px);
}

/* Días de la semana */
.fc .fc-col-header-cell {
    background: var(--color-accent);
    color: white;
    font-weight: 600;
    padding: 0.75rem 0;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Encabezado del día actual en vistas semana/día */
.fc .fc-col-header-cell.fc-day-today {
    background: var(--color-accent) !important;
    color: white !important;
}

/* Celdas de días */
.fc .fc-daygrid-day {
    transition: all 0.3s ease;
    cursor: pointer;
}

.fc .fc-daygrid-day:hover {
    background-color: rgba(126, 34, 206, 0.05);
}

/* Día actual */
.fc .fc-day-today {
    background: rgba(126, 34, 206, 0.08) !important;
    box-shadow: inset 0 0 0 2px var(--color-accent) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.4);
}

/* Número de día */
.fc .fc-daygrid-day-number {
    padding: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: #374151;
}

/* Días con eventos - marcados especialmente */
.fc .fc-daygrid-day.fc-day-has-events {
    background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(126, 34, 206, 0.15) 100%);
    position: relative;
}

.fc .fc-daygrid-day.fc-day-has-events::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1.2);
    }
}

/* Eventos en el calendario */
.fc-event {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.813rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    text-align: center !important;
    color: white !important;
}

.fc-event:hover {
    background: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent) 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.fc-event-title {
    font-weight: 600 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    color: white !important;
}

.fc-event-time {
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: white !important;
}

/* Ajustes específicos para vista de mes (dayGrid) */
.fc-daygrid-event {
    color: white !important;
    text-align: center !important;
    padding: 0.375rem 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.125rem !important;
}

.fc-daygrid-event-dot {
    display: none !important;
}

.fc-daygrid-event .fc-event-time {
    color: white !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.fc-daygrid-event .fc-event-title {
    color: white !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.813rem !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Ajustes para eventos en vista de semana */
.fc-timegrid-event {
    text-align: center !important;
    color: white !important;
}

.fc-timegrid-event-harness {
    text-align: center !important;
}

.fc-timegrid-event .fc-event-time,
.fc-timegrid-event .fc-event-title {
    color: white !important;
}

/* Forzar centrado en contenedores internos de FullCalendar */
.fc-event-main-container {
    justify-content: center !important;
}

.fc-event-title-container {
    text-align: center !important;
}

.fc-daygrid-event-frame {
    justify-content: center !important;
}

.fc-event-title {
    text-align: center !important;
}

/* Eliminar efecto hover en Vista Lista para mantener visibilidad del texto */
.fc-list-event:hover,
.fc-list-event:hover td {
    background-color: transparent !important;
    cursor: pointer !important;
}

.fc-list-event-title:hover,
.fc-list-event-time:hover {
    background-color: transparent !important;
}

/* Contenedor principal de controles de eventos */
.events-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

/* Filtros dentro del contenedor */
.events-controls .events-filter-tabs {
    margin-bottom: 0;
}

/* Toggle de vistas - siempre alineado a la derecha */
.events-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.view-toggle-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid var(--color-accent);
    background: white;
    color: var(--color-accent);
}

.view-toggle-btn.active {
    background: var(--color-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.3);
}

.view-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.2);
}

/* Responsivo: en móvil apilar verticalmente */
@media (max-width: 768px) {
    .events-controls {
        flex-direction: column;
        gap: 1rem;
    }

    .events-controls .events-filter-tabs,
    .events-controls .events-view-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* Reducir ancho de botones de vista en móvil pequeño */
@media (max-width: 480px) {
    .view-toggle-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Modal de detalles de evento */
.event-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.event-modal-content {
    background: white;
    border-radius: 1rem;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    margin: 5rem 0 2rem 0;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.event-modal-body {
    padding: 2.5rem;
}

.event-modal-image {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    object-fit: contain;
    max-height: 400px;
}

@media (max-width: 640px) {
    .event-modal-body {
        padding: 1.5rem;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.event-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    color: #374151;
    z-index: 10;
}

.event-modal-close:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: rotate(90deg);
}

/* ===== GALERÍA DE EVENTOS ===== */

/* Contenedor del carrusel con botones */
.gallery-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Carrusel de miniaturas */
.event-gallery-carousel {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) #e5e7eb;
}

.event-gallery-carousel::-webkit-scrollbar {
    height: 6px;
}

.event-gallery-carousel::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 3px;
}

.event-gallery-carousel::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 3px;
}

.event-gallery-carousel::-webkit-scrollbar-thumb:hover {
    background: #6b21a8;
}

/* Miniaturas del carrusel */
.gallery-thumb {
    width: 120px;
    height: 120px;
    min-width: 120px;
    object-fit: cover;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gallery-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.3);
}

/* Botones de navegación del carrusel */
.gallery-nav-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.gallery-nav-btn:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.4);
}

.gallery-nav-btn:active {
    background: var(--color-accent-active);
}

/* ===== LIGHTBOX DE GALERÍA ===== */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem 2rem 2rem;
}

/* Mostrar lightbox cuando está activo */
.gallery-lightbox.active {
    display: flex;
}

.gallery-lightbox-overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.gallery-lightbox-content {
    position: relative;
    width: min(90vw, 1100px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.gallery-lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.gallery-lightbox-caption {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-top: 1rem;
    text-align: center;
    font-style: italic;
}

.gallery-lightbox-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
}

.gallery-lightbox-close {
    position: absolute;
    top: -3rem;
    right: 0;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 300;
    transition: all 0.2s ease;
}

.gallery-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Botones de navegación en lightbox */
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Responsive para galería */
@media (max-width: 768px) {
    .gallery-thumb {
        width: 100px;
        height: 100px;
        min-width: 100px;
    }

    .gallery-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .gallery-lightbox {
        padding: 1rem;
    }

    .gallery-lightbox-image {
        max-height: 70vh;
    }

    .gallery-lightbox-close {
        top: -2.5rem;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .gallery-lightbox-prev {
        left: 0.5rem !important;
    }

    .gallery-lightbox-next {
        right: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    .gallery-thumb {
        width: 80px;
        height: 80px;
        min-width: 80px;
    }

    .gallery-carousel-container .gallery-nav-btn {
        display: none; /* Ocultar botones en móvil, usar scroll táctil */
    }
}

/* Badge de contador de eventos */
.fc-daygrid-day-events-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Chips de fechas múltiples en formulario */
.date-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-accent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0.25rem;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.date-chip-remove {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.date-chip-remove:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Responsive calendario */
@media (max-width: 768px) {
    #events-calendar {
        padding: 1rem;
    }

    .fc .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.5rem !important;
    }

    .event-modal-content {
        width: 95%;
        max-height: 85vh;
        margin: 1rem 0;
    }
}

/* ===== Scroll horizontal para pestañas de galería en móvil ===== */
.portfolio-tab-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

/* Estilo del scrollbar para navegadores webkit */
.portfolio-tab-container::-webkit-scrollbar {
    height: 4px;
}

.portfolio-tab-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.portfolio-tab-container::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 2px;
}

/* Asegurar que las pestañas no se compriman */
.portfolio-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ===== Scroll horizontal para pestañas de Look & Feel en móvil ===== */
.display-tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.display-tabs-container::-webkit-scrollbar {
    height: 4px;
}

.display-tabs-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.display-tabs-container::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 2px;
}

/* Asegurar que las pestañas de Look & Feel no se compriman */
.display-tabs-container .display-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Clases de color de acento dinámico */
.border-accent {
    border-color: var(--color-accent) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.hover\:text-accent:hover {
    color: var(--color-accent) !important;
}

.hover\:border-accent:hover {
    border-color: var(--color-accent) !important;
}

/* ===== Grid de Eventos - Diseño Moderno 3 Columnas ===== */
.events-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .events-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* Responsive - Móvil */
@media (max-width: 640px) {
    .events-bento-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ===== Tarjetas de eventos - Diseño Moderno ===== */
.event-card-clickable {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Imagen de fondo */
.event-card-clickable .event-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    z-index: 1;
}

/* Overlay gradiente */
.event-card-clickable::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        transparent 100%
    );
    z-index: 2;
    transition: background 0.3s ease;
}

/* Contenido de texto */
.event-card-clickable .event-card-content {
    position: relative;
    z-index: 3;
    padding: 1.5rem;
    color: white;
    text-align: center;
}

.event-card-clickable .event-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    line-height: 1.3;
}

.event-card-clickable .event-card-date {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Placeholder cuando no hay imagen */
.event-card-clickable .event-card-no-image {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 60%, #000) 100%);
    z-index: 1;
}

/* Hover effects - Efecto lift moderno */
.event-card-clickable:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.event-card-clickable:hover .event-card-image {
    transform: scale(1.08);
}

.event-card-clickable:hover::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.15) 70%,
        transparent 100%
    );
}

/* ===== Eventos pasados/finalizados ===== */
.event-card-clickable.event-past {
    opacity: 0.75;
}

.event-card-clickable.event-past .event-card-image {
    filter: grayscale(40%);
}

.event-card-clickable.event-past:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Badge "Finalizado" - Glassmorphism */
.event-past-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
}

/* ===== Indicador evento próximo (7 días) - Punto verde pulsante ===== */
.event-upcoming-indicator {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    z-index: 10;
    animation: pulse-green 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 1);
        transform: scale(1.2);
    }
}

/* ===== Badge "EN VIVO" para eventos del día ===== */
.event-live-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #f59e0b;
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 10;
    animation: blink-live 1.5s ease-in-out infinite;
}

@keyframes blink-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== Countdown Timer (siempre visible) ===== */
.event-countdown {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    display: flex;
    gap: 0.75rem;
    opacity: 1;
    z-index: 10;
}

/* No mostrar countdown en eventos pasados */
.event-card-clickable.event-past .event-countdown {
    display: none;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.countdown-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive - Ajustar countdown en móvil */
@media (max-width: 640px) {
    .event-countdown {
        /* Mostrar countdown también en móvil */
        display: flex;
        /* Hacer el countdown más pequeño para móvil */
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.375rem 0.5rem;
        gap: 0.5rem;
        font-size: 0.75rem;
    }

    .countdown-item {
        min-width: auto;
    }

    .countdown-value {
        font-size: 0.875rem;
    }

    .countdown-label {
        font-size: 0.625rem;
    }
}

/* ===== Pestañas de filtro de eventos ===== */
.events-filter-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.events-filter-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
}

.events-filter-tab:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.events-filter-tab.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* ===== Eventos pasados en calendario ===== */
.fc-event.event-calendar-past {
    opacity: 0.6;
    filter: grayscale(30%);
}

.fc-event.event-calendar-past .fc-event-title::after {
    content: ' ✓';
    font-size: 0.75em;
}

/* ============================================ */
/* BLOG - ESTILOS PRINCIPALES                  */
/* ============================================ */

/* Header del Blog - Estilo similar a Eventos */
.blog-title-wrapper {
    background: var(--color-accent);
    padding: 1.875rem 2rem;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Efecto decorativo de fondo con patrón sutil */
.blog-title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.blog-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
    transition: letter-spacing 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.blog-title:hover {
    letter-spacing: 2px;
    transform: scale(1.03);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 35px rgba(255, 255, 255, 0.3);
}

.blog-title-icon {
    display: inline-block;
    animation: pulse-blog 2s ease-in-out infinite;
    margin: 0 0.75rem;
    font-size: 2.5rem;
}

/* Animación para los iconos del blog */
@keyframes pulse-blog {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .blog-title-wrapper {
        padding: 1.5rem 1.5rem;
    }

    .blog-title {
        font-size: 2rem;
    }

    .blog-title-icon {
        font-size: 1.75rem;
        margin: 0 0.5rem;
    }
}

@media (max-width: 480px) {
    .blog-title {
        font-size: 1.75rem;
    }

    .blog-title-icon {
        font-size: 1.5rem;
        margin: 0 0.35rem;
    }
}

/* ========== TIENDA - Estilos de Título ========== */
.shop-title-wrapper {
    background: var(--color-accent);
    padding: 1.875rem 2rem;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.shop-title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.shop-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
    transition: letter-spacing 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.shop-title:hover {
    letter-spacing: 2px;
    transform: scale(1.03);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 35px rgba(255, 255, 255, 0.3);
}

.shop-title-icon {
    display: inline-block;
    animation: pulse-shop 2s ease-in-out infinite;
    margin: 0 0.75rem;
    font-size: 2.5rem;
}

@keyframes pulse-shop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .shop-title-wrapper {
        padding: 1.5rem 1.5rem;
    }

    .shop-title {
        font-size: 2rem;
    }

    .shop-title-icon {
        font-size: 1.75rem;
        margin: 0 0.5rem;
    }
}

@media (max-width: 480px) {
    .shop-title {
        font-size: 1.75rem;
    }

    .shop-title-icon {
        font-size: 1.5rem;
        margin: 0 0.35rem;
    }
}

/* Grid de Posts */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .blog-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Card de Post - Estilo Bohemio/Artístico (Papel rasgado + Polaroid) */
.blog-post-card {
    background: #fff;
    background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.03) 100%);
    border-radius: 8px;
    overflow: visible;
    box-shadow:
        2px 3px 8px rgba(0, 0, 0, 0.12),
        4px 6px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
}

/* Rotación sutil - tarjetas impares */
.blog-post-card:nth-child(odd) {
    transform: rotate(-1.2deg);
}

/* Rotación sutil - tarjetas pares */
.blog-post-card:nth-child(even) {
    transform: rotate(1.2deg);
}

/* Efecto de cinta adhesiva - sobre la imagen */
.blog-post-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 60px;
    height: 24px;
    background: linear-gradient(135deg,
        rgba(255, 220, 180, 0.85) 0%,
        rgba(240, 200, 150, 0.75) 100%);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.blog-post-card:hover {
    transform: rotate(0deg) translateY(-12px) scale(1.02);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.1);
}

.blog-post-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
    border-radius: 0;
}

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

.blog-post-card-image-wrapper {
    overflow: hidden;
    position: relative;
    border-radius: 0;
}

.blog-post-card-no-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg,
        #f5f0e8 0%,
        #e8e0d5 50%,
        #ddd5c8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    position: relative;
}

/* Patrón de líneas tipo cuaderno para no-image */
.blog-post-card-no-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        transparent 0px,
        transparent 28px,
        rgba(100, 150, 200, 0.15) 28px,
        rgba(100, 150, 200, 0.15) 29px
    );
    border-radius: 2px;
}

.blog-post-card-no-image svg {
    width: 56px;
    height: 56px;
    color: rgba(120, 100, 80, 0.4);
    position: relative;
    z-index: 1;
}

.blog-post-card-body {
    padding: 1rem 1rem 1.25rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.blog-post-card-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d2a26;
    margin-bottom: 0.625rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-card-excerpt {
    font-size: 0.875rem;
    color: #5c5750;
    line-height: 1.6;
    margin-bottom: 0.875rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-card-meta {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.75rem;
    color: #8a8580;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.blog-post-card-author {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.blog-post-card-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== ETIQUETAS DEL BLOG ===== */
.blog-tags-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 5;
}

.blog-tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.blog-tag-badge:hover {
    transform: scale(1.05);
}

.blog-tag-more {
    background: rgba(0,0,0,0.6) !important;
}

/* Responsive - desactivar rotación en móvil para mejor lectura */
@media (max-width: 640px) {
    .blog-post-card:nth-child(odd),
    .blog-post-card:nth-child(even) {
        transform: rotate(0deg);
    }

    .blog-post-card:hover {
        transform: translateY(-8px) scale(1.01);
    }

    .blog-post-card::before {
        width: 50px;
        height: 20px;
        top: -6px;
    }
}

/* Estado vacío del Blog */
.blog-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

/* ============================================ */
/* BLOG - MODAL DE POST DETALLADO              */
/* ============================================ */

.blog-post-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
}

.blog-post-modal-content {
    background: white;
    border-radius: 1.5rem;
    max-width: 900px;
    width: 100%;
    margin: 3rem auto;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.blog-post-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: #333;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.blog-post-modal-close:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: rotate(90deg);
}

/* Contenido del Post en Modal */
.blog-post-detail {
    padding: 0;
}

.blog-post-hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 1.5rem 1.5rem 0 0;
}

.blog-post-hero-placeholder {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 70%, #000) 100%);
    border-radius: 1.5rem 1.5rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-post-hero-placeholder svg {
    width: 80px;
    height: 80px;
    color: rgba(255, 255, 255, 0.4);
}

.blog-post-detail-body {
    padding: 2.5rem;
}

.blog-post-detail-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.blog-post-detail-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9375rem;
    color: #6b7280;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.blog-post-detail-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #374151;
}

.blog-post-detail-content p {
    margin-bottom: 1.5rem;
}

.blog-post-detail-content h2,
.blog-post-detail-content h3 {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #1f2937;
    margin: 2rem 0 1rem;
}

.blog-post-detail-content img {
    max-width: 100%;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

/* Galería de imágenes en el post */
.blog-post-gallery {
    margin: 2rem 0;
}

.blog-post-gallery-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

.blog-post-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.blog-post-gallery-item {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
}

.blog-post-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    margin: 0;
}

.blog-post-gallery-item:hover img {
    transform: scale(1.1);
}

/* ============================================ */
/* BLOG - COMENTARIOS                          */
/* ============================================ */

.blog-comments-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid #e5e7eb;
}

.blog-comments-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-comments-count {
    font-size: 0.875rem;
    background: var(--color-accent);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-weight: 500;
}

/* Lista de comentarios */
.blog-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.blog-comment {
    background: #f3f4f6;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border-left: 3px solid var(--color-accent);
}

.blog-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.blog-comment-author {
    font-weight: 600;
    color: #1f2937;
}

.blog-comment-date {
    font-size: 0.8125rem;
    color: #9ca3af;
}

.blog-comment-content {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.6;
}

/* Respuestas anidadas */
.blog-comment-replies {
    margin-top: 1rem;
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid #e5e7eb;
}

.blog-comment-reply {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
}

/* Formulario de comentario */
.blog-comment-form {
    background: #f3f4f6;
    padding: 1.5rem;
    border-radius: 0.75rem;
}

.blog-comment-form-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

.blog-comment-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    color: #1f2937;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease;
    margin-bottom: 1rem;
}

.blog-comment-form-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.blog-comment-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    color: #1f2937;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease;
    min-height: 120px;
    resize: vertical;
    margin-bottom: 1rem;
}

.blog-comment-form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.blog-comment-form-submit {
    background: var(--color-accent);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.blog-comment-form-submit:hover {
    opacity: 0.9;
}

.blog-comment-form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Estado vacío de comentarios */
.blog-comments-empty {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
}

/* Toggle para mostrar/ocultar formulario de comentarios */
.blog-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-accent);
    background: none;
    border: 2px solid var(--color-accent);
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
    font-weight: 500;
}

.blog-comment-toggle:hover {
    background: var(--color-accent);
    color: white;
}

.blog-comment-toggle.active {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

.blog-comment-toggle.active:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Wrapper del formulario de comentarios */
.blog-comment-form-wrapper {
    margin-top: 0.5rem;
    animation: slideDown 0.3s ease;
}

.blog-comment-form-wrapper.hidden {
    display: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================ */
/* BLOG - PÁGINA DE POST DEDICADA              */
/* ============================================ */

/* Enlace volver al listado */
.blog-post-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4b5563;
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.2s;
    margin-bottom: 1.5rem;
}

.blog-post-back-link:hover {
    color: #111827;
}

.blog-post-back-link svg {
    transition: transform 0.2s;
}

.blog-post-back-link:hover svg {
    transform: translateX(-2px);
}

.blog-post-back-link svg {
    transition: transform 0.3s ease;
}

.blog-post-back-link:hover svg {
    transform: translateX(-3px);
}

/* Imagen destacada dentro de la tarjeta */
.blog-post-featured-image {
    max-width: 700px;
    margin: 0 auto 1.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-featured-image:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.blog-post-featured-image.hidden {
    display: none;
}

.blog-post-featured-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.blog-post-featured-image:hover .blog-post-featured-img {
    transform: scale(1.1);
}

/* Título del post (texto oscuro sobre fondo claro) */
.blog-post-page-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    text-align: center;
}

/* Extracto del post */
.blog-post-page-excerpt {
    font-size: 1.125rem !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    font-style: italic !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

/* Meta información del post */
.blog-post-page-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.blog-post-page-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-post-page-meta svg {
    opacity: 0.7;
}

/* Separador */
.blog-post-separator {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 1.5rem 0 2rem 0;
}

/* Contenido interior del blog (fondo blanco dentro de la tarjeta) */
#blog .p-8,
#blog .md\:p-12,
#blog-post-view .p-6,
#blog-post-view .md\:p-10 {
    background: white;
}

/* Contenido del artículo */
.blog-post-page-content {
    font-size: 1.125rem;
    line-height: 1.9;
    color: #374151;
}

.blog-post-page-content p {
    margin-bottom: 1.75rem;
}

.blog-post-page-content h2 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.75rem;
    color: #1f2937;
    margin: 3rem 0 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.blog-post-page-content h3 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.375rem;
    color: #1f2937;
    margin: 2rem 0 1rem;
}

.blog-post-page-content img {
    width: 100%;
    border-radius: 0.75rem;
    margin: 2rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.blog-post-page-content blockquote {
    border-left: 4px solid var(--color-accent);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6b7280;
}

.blog-post-page-content ul,
.blog-post-page-content ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.blog-post-page-content li {
    margin-bottom: 0.5rem;
}

/* Galería de imágenes */
.blog-post-page-gallery {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
}

.blog-post-page-gallery-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.5rem;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

.blog-post-page-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .blog-post-page-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .blog-post-page-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.blog-post-page-gallery-item {
    aspect-ratio: 1;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-page-gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.blog-post-page-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.blog-post-page-gallery-item:hover img {
    transform: scale(1.1);
}

/* Sección de comentarios */
.blog-post-page-comments {
    margin-top: 1.5rem;
    padding-top: 1rem;
}

/* Solo mostrar borde superior en comentarios cuando la galería está oculta */
.blog-post-page-gallery.hidden + .blog-post-page-comments {
    border-top: 2px solid #e5e7eb;
}

/* Responsive - Blog Post Page */
@media (max-width: 768px) {
    .blog-post-page-title {
        font-size: 1.75rem;
    }

    .blog-post-page-meta {
        gap: 1rem;
        font-size: 0.875rem;
    }

    .blog-post-page-content {
        font-size: 1rem;
    }

    .blog-post-featured-img {
        max-height: 300px;
    }

    .blog-post-back-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        margin-top: 1rem;
    }

    .blog-comments-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }

    .event-detail-back-link {
        margin-top: 1rem;
        margin-bottom: 2.25rem;
    }
}

@media (max-width: 480px) {
    .blog-post-page-title {
        font-size: 1.5rem;
    }

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

    .blog-post-featured-img {
        max-height: 220px;
    }
}

/* ============================================ */
/* EVENT DETAIL VIEW - PÁGINA DE DETALLE       */
/* ============================================ */

/* Botón volver a eventos */
.event-detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4b5563;
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.2s;
    margin-bottom: 1.5rem;
}

.event-detail-back-link:hover {
    color: #111827;
}

.event-detail-back-link svg {
    transition: transform 0.2s;
}

.event-detail-back-link:hover svg {
    transform: translateX(-2px);
}

/* Imagen hero del evento - Ahora dentro de .event-poster-image */
.event-detail-hero.hidden {
    display: none;
}

/* Badge de estado - ahora centrado debajo del título */
.event-detail-badge {
    margin-bottom: 1rem;
}

.event-detail-badge-past,
.event-detail-badge-upcoming {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-detail-badge-past {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
}

.event-detail-badge-upcoming {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

/* Título del evento */
.event-detail-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    margin-top: -1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Info de fecha y hora */
.event-detail-datetime {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 1rem;
}

.event-detail-date-box,
.event-detail-duration-box,
.event-detail-price-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.event-detail-date-icon,
.event-detail-duration-icon,
.event-detail-price-icon {
    font-size: 2rem;
}

.event-detail-date-info {
    display: flex;
    flex-direction: column;
}

.event-detail-date {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    text-transform: capitalize;
}

.event-detail-time {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

.event-detail-duration {
    font-size: 1.125rem;
    font-weight: 500;
    color: #4b5563;
}

/* Countdown */
.event-detail-countdown {
    margin-bottom: 2rem;
    text-align: center;
}

.event-detail-countdown.hidden {
    display: none;
}

.event-countdown-title {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-countdown-boxes {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.event-countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    border-radius: 0.75rem;
    min-width: 70px;
}

.event-countdown-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.event-countdown-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Separador */
.event-detail-separator {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: 2rem 0;
}

/* Contenido del evento */
.event-detail-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #1f2937; /* Texto oscuro siempre */
    margin: 0 auto;
    max-width: calc(100% - 9rem); /* Margen de 4.5rem a cada lado (triplicado) */
}

/* ===== GLASSMORPHISM DESIGN FOR EVENT DESCRIPTION ===== */

/* Wrapper principal con efecto glassmorphism - siempre fondo claro */
.event-description-glass-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.85); /* Fondo blanco siempre, más opaco para mejor legibilidad */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.5rem;
    padding: 0.25rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para hover */
}

/* Efecto hover sobre toda la tarjeta: agrandar ligeramente */
.event-description-glass-wrapper:hover {
    transform: scale(1.015); /* Aumento muy sutil del 1.5% */
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Borde lateral izquierdo con degradado — oculto */
.event-description-accent-border {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--color-accent) 10%,
        var(--color-accent) 90%,
        transparent 100%
    );
    border-radius: 1.5rem 0 0 1.5rem;
    z-index: 1;
}

/* Efecto glow sutil al borde */
.event-description-accent-border::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 80%;
    background: inherit;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -1;
}

/* Contenedor interno con padding generoso */
.event-description-inner {
    padding: 3.5rem;
    position: relative;
    z-index: 2;
}

.event-description-inner.animate-in {
    /* animación desactivada */
}

/* Asegurar herencia de estilos del contenido rich-text */
.event-description-inner .rich-text-content {
    color: inherit;
}

/* Animación: Blur to Focus + Letter Spacing (2x más lenta) */
@keyframes textReveal {
    0% {
        opacity: 0;
        filter: blur(8px);
        letter-spacing: 0.05em;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        letter-spacing: 0;
    }
}

/* Iconos decorativos en esquinas */
.event-description-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 3;
    pointer-events: none;
}

/* Esquina superior izquierda */
.event-description-corner-tl {
    top: 1.5rem;
    left: 2rem;
}

.event-description-corner-tl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px; /* Triplicado: de 20px a 60px */
    height: 2px;
    background: var(--color-accent);
    opacity: 0.4;
}

.event-description-corner-tl::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 60px; /* Triplicado: de 20px a 60px */
    background: var(--color-accent);
    opacity: 0.4;
}

/* Esquina inferior derecha */
.event-description-corner-br {
    bottom: 1.5rem;
    right: 1.5rem;
}

.event-description-corner-br::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px; /* Triplicado: de 20px a 60px */
    height: 2px;
    background: var(--color-accent);
    opacity: 0.4;
}

.event-description-corner-br::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2px;
    height: 60px; /* Triplicado: de 20px a 60px */
    background: var(--color-accent);
    opacity: 0.4;
}

/* Fallback para navegadores sin backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .event-description-glass-wrapper {
        background: rgba(255, 255, 255, 0.95); /* Fondo claro siempre */
    }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .event-description-glass-wrapper {
        transition: none;
    }

    .event-description-glass-wrapper:hover {
        transform: none;
    }

    /* Desactivar animación de texto si el usuario prefiere menos movimiento */
    .event-description-inner,
    .event-description-inner.animate-in {
        animation: none;
        opacity: 1;
        filter: blur(0);
        letter-spacing: 0;
    }
}

/* Alto contraste para accesibilidad */
@media (prefers-contrast: high) {
    .event-description-glass-wrapper {
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid var(--color-accent);
    }

    .event-detail-content {
        color: #000;
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .event-detail-content {
        max-width: calc(100% - 6rem); /* Margen de 3rem a cada lado (triplicado) */
    }

    .event-description-inner {
        padding: 2.5rem;
    }

    .event-detail-content {
        font-size: 1rem;
    }

    .event-description-corner {
        width: 60px;
        height: 60px;
    }

    .event-description-corner-tl::before,
    .event-description-corner-br::before {
        width: 45px; /* Proporcionalmente reducido para tablet */
    }

    .event-description-corner-tl::after,
    .event-description-corner-br::after {
        height: 45px; /* Proporcionalmente reducido para tablet */
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    /* Reducir padding del contenedor padre para aprovechar espacio */
    #event-detail-view .p-6 {
        padding: 0.5rem !important; /* Reducir de p-6 (1.5rem) a 0.5rem */
    }

    /* Mayor separación entre botón "Volver" y título */
    .event-detail-back-link {
        margin-bottom: 2.5rem; /* Aumentado de 1.5rem a 2.5rem */
    }

    .event-detail-content {
        max-width: 100%; /* Sin márgenes adicionales, el padding del padre ya lo controla */
    }

    .event-description-inner {
        padding: 1rem; /* Reducido de 1.5rem a 1rem para aprovechar espacio */
    }

    /* Reducir intensidad del blur para mejor rendimiento */
    .event-description-glass-wrapper {
        backdrop-filter: blur(10px) saturate(150%);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
    }

    /* Borde más delgado */
    .event-description-accent-border {
        width: 4px;
    }

    /* Ocultar iconos decorativos en móvil */
    .event-description-corner {
        display: none;
    }

    /* Border-radius más pequeño */
    .event-description-glass-wrapper {
        border-radius: 1rem;
    }

    .event-description-accent-border {
        border-radius: 1rem 0 0 1rem;
    }
}

/* Galería de imágenes del evento */
.event-detail-gallery {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
}

.event-detail-gallery.hidden {
    display: none;
}

.event-detail-gallery-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

/* ===== CARRUSEL DE GALERÍA DE EVENTOS ===== */

/* Contenedor principal con botones de navegación */
.event-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 0;
}

/* Wrapper — overflow-x recorta laterales, overflow-y visible para el scale del central */
.event-carousel-track-wrapper {
    flex: 1;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    max-width: 1160px;
}

/* Track — altura para 280px × scale(1.15) = 322px + 38px margen = 360px */
.event-detail-gallery-carousel {
    position: relative;
    width: 100%;
    height: 360px;
}

/* Item base — 280×280px, posición absoluta desde el centro del track */
.carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    cursor: pointer;
    transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
    transform-origin: center center;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

/* Contenedor interno del item */
.carousel-item-inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #e5e7eb;
}

/* Imagen del item */
.carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Caption (solo visible en imagen central) */
.carousel-item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    color: white;
    padding: 1rem 0.75rem 0.5rem;
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* ===== CLASES DE POSICIÓN =====
   Items 280px, gap 12px:
   ±1: ±(140 + 12 + 140) = ±292px
   ±2: ±(292 + 12 + 140) = ±444px
   Los ±2 quedan detrás de ±1 (z-index inferior) — efecto "cartas apiladas"
*/

/* Oculto (>±2) */
.carousel-item.carousel-hidden {
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

/* ±2 — detrás de ±1, ligeramente oscurecidos con brightness */
.carousel-item.carousel-far-left {
    transform: translateX(calc(-50% - 444px)) translateY(-50%);
    filter: brightness(0.7);
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.carousel-item.carousel-far-left:hover { filter: brightness(0.9); }

.carousel-item.carousel-far-right {
    transform: translateX(calc(-50% + 444px)) translateY(-50%);
    filter: brightness(0.7);
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.carousel-item.carousel-far-right:hover { filter: brightness(0.9); }

/* ±1 — delante de ±2 por z-index */
.carousel-item.carousel-left {
    transform: translateX(calc(-50% - 292px)) translateY(-50%);
    filter: brightness(0.85);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.carousel-item.carousel-left:hover { filter: brightness(1); }

.carousel-item.carousel-right {
    transform: translateX(calc(-50% + 292px)) translateY(-50%);
    filter: brightness(0.85);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.carousel-item.carousel-right:hover { filter: brightness(1); }

/* CENTRAL — scale + outline, siempre al frente */
.carousel-item.carousel-center {
    transform: translateX(-50%) translateY(-50%) scale(1.15);
    filter: brightness(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}
.carousel-item.carousel-center .carousel-item-inner {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}
.carousel-item.carousel-center .carousel-item-caption {
    opacity: 1;
}

/* ===== BOTONES DE NAVEGACIÓN DEL CARRUSEL ===== */

.carousel-nav-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.carousel-nav-btn:hover {
    background: var(--color-accent-hover);
    transform: scale(1.08);
}

.carousel-nav-btn:active {
    transform: scale(0.95);
}

.carousel-nav-btn svg {
    width: 22px;
    height: 22px;
}

/* ===== RESPONSIVE - TABLET (768px) ===== */
/* Items 200px → ±1: ±(100+10+100)=±210px, ±2: ±(210+10+100)=±320px, height: 260px */
@media (max-width: 768px) {
    .event-detail-gallery-carousel {
        height: 260px;
    }
    .carousel-item {
        width: 200px;
        height: 200px;
    }
    .carousel-item.carousel-far-left  { transform: translateX(calc(-50% - 320px)) translateY(-50%); }
    .carousel-item.carousel-far-right { transform: translateX(calc(-50% + 320px)) translateY(-50%); }
    .carousel-item.carousel-left  { transform: translateX(calc(-50% - 210px)) translateY(-50%); }
    .carousel-item.carousel-right { transform: translateX(calc(-50% + 210px)) translateY(-50%); }
    .carousel-nav-btn { width: 36px; height: 36px; }
    .carousel-nav-btn svg { width: 18px; height: 18px; }
}

/* ===== RESPONSIVE - MOBILE (480px) ===== */
/* Items 160px → ±1: ±(80+8+80)=±168px, ±2 ocultos, height: 215px */
@media (max-width: 480px) {
    .event-carousel-container {
        padding: 1rem 0;
    }
    .event-carousel-track-wrapper {
        max-width: 100%;
    }
    .event-detail-gallery-carousel {
        height: 215px;
    }
    .carousel-item {
        width: 160px;
        height: 160px;
    }
    .carousel-item.carousel-left  { transform: translateX(calc(-50% - 168px)) translateY(-50%); }
    .carousel-item.carousel-right { transform: translateX(calc(-50% + 168px)) translateY(-50%); }
    .carousel-item.carousel-far-left,
    .carousel-item.carousel-far-right {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(-50%);
    }
    .carousel-nav-btn { width: 32px; height: 32px; }
    .carousel-nav-btn svg { width: 16px; height: 16px; }
    .carousel-item-caption { font-size: 0.75rem; padding: 0.75rem 0.5rem 0.4rem; }
}

/* Comentarios del evento */
.event-detail-comments {
    margin-top: 2.5rem;
    padding-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .event-detail-title {
        font-size: 2.25rem;
    }

    .event-detail-datetime {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .event-countdown-boxes {
        gap: 0.5rem;
    }

    .event-countdown-box {
        padding: 0.75rem 1rem;
        min-width: 60px;
    }

    .event-countdown-number {
        font-size: 1.5rem;
    }

    .event-detail-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .event-detail-title {
        font-size: 1.75rem;
    }

    .event-detail-back-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

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

    .event-countdown-box {
        padding: 0.5rem 0.75rem;
        min-width: 50px;
    }

    .event-countdown-number {
        font-size: 1.25rem;
    }

    .event-countdown-label {
        font-size: 0.625rem;
    }
}

/* ============================================ */
/* EVENT DETAIL - LAYOUT CARTELERA/PÓSTER      */
/* ============================================ */

/* Grid principal: Poster + Info */
.event-detail-poster-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
    align-items: start;
}

/* Contenedor del marco estilo cartelera */
.event-poster-frame {
    position: relative;
    max-width: 450px;
    margin: 0 auto;
}

/* Marco interior */
.event-poster-inner {
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Esquinas decorativas ocultas */
.poster-corner {
    display: none;
}

.poster-corner-tl {
    top: -4px;
    left: -4px;
    border-right: none;
    border-bottom: none;
}

.poster-corner-tr {
    top: -4px;
    right: -4px;
    border-left: none;
    border-bottom: none;
}

.poster-corner-bl {
    bottom: -4px;
    left: -4px;
    border-right: none;
    border-top: none;
}

.poster-corner-br {
    bottom: -4px;
    right: -4px;
    border-left: none;
    border-top: none;
}

/* Imagen dentro del poster */
.event-poster-image {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
}

.event-poster-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.event-poster-image:hover img {
    transform: scale(1.03);
}

/* Indicador de zoom en hover */
.poster-zoom-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 2rem 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.event-poster-image:hover .poster-zoom-hint {
    opacity: 1;
}

/* Sombra decorativa inferior (efecto 3D) */
.poster-shadow {
    position: absolute;
    bottom: -15px;
    left: 10%;
    right: 10%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);
    filter: blur(8px);
}

/* Panel de información (lado derecho) */
.event-detail-info-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Ajustar datetime para ser vertical dentro del grid */
.event-detail-poster-grid .event-detail-datetime {
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 1rem;
    padding: 0.5rem;
    justify-content: flex-start;
}

/* Countdown ajustado para panel lateral */
.event-detail-poster-grid .event-detail-countdown {
    text-align: left;
    margin-bottom: 0;
}

.event-detail-poster-grid .event-countdown-boxes {
    justify-content: flex-start;
}

/* Badge centrado debajo del título */
.event-detail-badge {
    text-align: center;
    margin-bottom: 2rem;
}

/* Ocultar el marco cuando no hay imagen */
.event-poster-frame.hidden {
    display: none;
}

/* Cuando no hay imagen, el panel de info ocupa todo */
.event-detail-poster-grid:has(.event-poster-frame.hidden) {
    grid-template-columns: 1fr;
}

.event-detail-poster-grid:has(.event-poster-frame.hidden) .event-detail-info-panel {
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive para el layout de cartelera */
@media (max-width: 900px) {
    .event-detail-poster-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .event-poster-frame {
        max-width: 350px;
    }

    .event-detail-info-panel {
        gap: 0;
    }

    .event-detail-poster-grid .event-detail-datetime {
        align-items: flex-start;
        padding: 0.25rem;
        gap: 0;
    }

    .event-detail-poster-grid .event-detail-date {
        font-size: 0.875rem;
    }

    .event-detail-poster-grid .event-detail-time {
        font-size: 1rem;
    }

    .event-detail-poster-grid .event-detail-date-info {
        gap: 0;
        line-height: 1.2;
    }

    .event-detail-poster-grid .event-detail-countdown {
        text-align: center;
    }

    .event-detail-poster-grid .event-countdown-boxes {
        justify-content: center;
    }

    .event-detail-separator {
        margin: 1rem 0;
    }

    .event-detail-comments {
        margin-top: 1.25rem;
        padding-top: 1rem;
    }
}

@media (max-width: 480px) {
    .event-poster-frame {
        max-width: 100%;
    }

    .event-poster-inner {
        padding: 4px;
        border-width: 6px;
    }

    .poster-corner {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }
}

/* ============================================ */
/* BLOG - ADMIN                                */
/* ============================================ */

.blog-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.blog-admin-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.blog-admin-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.blog-admin-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-subtle);
    font-size: 0.9375rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.blog-admin-tab:hover {
    color: var(--text-primary);
}

.blog-admin-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.blog-admin-tab-badge {
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 1rem;
    margin-left: 0.5rem;
}

/* ============================================
   PESTAÑAS ESTILO PILLS (para admin de tienda)
   ============================================ */
.shop-admin-tabs {
    display: inline-flex;
    background: #e5e7eb;
    border-radius: 9999px;
    padding: 0.25rem;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar sutil para las pestañas de admin */
.shop-admin-tabs::-webkit-scrollbar {
    height: 4px;
}
.shop-admin-tabs::-webkit-scrollbar-track {
    background: transparent;
}
.shop-admin-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.shop-admin-tab {
    padding: 0.5rem 1.25rem;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 9999px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.shop-admin-tab:hover {
    color: #374151;
}

.shop-admin-tab.active {
    background: white;
    color: #1f2937;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shop-admin-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #ef4444;
    color: white;
    border-radius: 9999px;
    margin-left: 0.5rem;
}

/* Grid de posts en admin */
.blog-admin-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

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

.blog-admin-card {
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease;
}

.blog-admin-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.blog-admin-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

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

.blog-admin-card-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.blog-admin-card-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.blog-admin-card-status {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.blog-admin-card-status.draft {
    background: #fef3c7;
    color: #92400e;
}

.blog-admin-card-status.published {
    background: #d1fae5;
    color: #065f46;
}

.blog-admin-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.blog-admin-card-btn {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.blog-admin-card-btn.edit {
    background: var(--color-accent);
    color: white;
}

.blog-admin-card-btn.delete {
    background: #fee2e2;
    color: #dc2626;
}

.blog-admin-card-btn:hover {
    opacity: 0.8;
}

/* Formulario de edición de post */
.blog-admin-form {
    max-width: 100%;
}

.blog-admin-form-group {
    margin-bottom: 1.5rem;
}

.blog-admin-form-label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.blog-admin-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;  /* Gris claro visible (Tailwind gray-300) */
    border-radius: 0.5rem;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-admin-form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.blog-admin-form-slug {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-admin-form-slug-prefix {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Filtros en admin */
.blog-admin-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.blog-admin-filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-subtle);
    border-radius: 2rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blog-admin-filter-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.blog-admin-filter-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* ============================================ */
/* TOPBAR (MENÚ SUPERIOR)                      */
/* ============================================ */

#topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: #1e1e2a; /* Opaco - sin transparencia */
    border-radius: 0;
    /* Sin box-shadow: cuando el topbar comparte color con el fondo de la
       página (modo personalizado), la sombra se interpretaba como una raya
       separadora que rompía la fusión visual. El contraste de color en los
       temas que difieren del fondo (default oscuro vs. página clara) ya es
       suficiente para distinguir el topbar sin profundidad añadida. */
    z-index: 10000;
    /* Acotado: solo cambios de tema (background/color/border) animan. Antes
       era `all 0.3s ease`, lo que disparaba microtransiciones perceptibles
       al togglear .no-logo (visibility/opacity). */
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* El ancho del topbar lo controla .container mx-auto aplicado directamente al header#topbar */

/* Aplicar padding al container del topbar (igual que el contenido main) */
#topbar.container {
    padding-left: 2rem !important;
    padding-right: 0 !important;
}

.topbar-container {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Logo del topbar */
.topbar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-accent, #7e22ce);
    font-weight: 700;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.topbar-logo:hover {
    transform: scale(1.05);
}

.topbar-logo svg {
    flex-shrink: 0;
}

#topbar-logo-text {
    white-space: nowrap;
}

/* Navegación central */
.topbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* Enlaces de navegación */
.topbar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    color: var(--text-main, rgba(255, 255, 255, 0.9));
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

/* Subrayado animado */
.topbar-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease, left 0.3s ease;
}

.topbar-nav-link:hover::after {
    width: 100%;
    left: 0;
}

.topbar-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.topbar-nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.topbar-nav-link.active::after {
    width: 100%;
    left: 0;
}

/* Dropdown wrappers */
.topbar-dropdown-wrapper {
    position: relative;
}

.topbar-dropdown-toggle {
    font-family: inherit;
}

.topbar-dropdown-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.topbar-dropdown-wrapper:hover .topbar-dropdown-icon,
.topbar-dropdown-wrapper.open .topbar-dropdown-icon {
    transform: rotate(180deg);
}

/* Dropdown menu */
.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 200px;
    background: rgba(30, 30, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    z-index: 100;
}

.topbar-dropdown-wrapper:hover .topbar-dropdown-menu,
.topbar-dropdown-wrapper:focus-within .topbar-dropdown-menu,
.topbar-dropdown-wrapper.open .topbar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menú admin con mismo comportamiento que menús generales */
.topbar-admin-dropdown:hover .topbar-admin-menu,
.topbar-admin-dropdown:focus-within .topbar-admin-menu,
.topbar-admin-dropdown.open .topbar-admin-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    color: var(--text-main, rgba(255, 255, 255, 0.9));
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.topbar-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.topbar-dropdown-item svg {
    flex-shrink: 0;
}

/* Sub-dropdown (nivel 3) */
.topbar-subdropdown-wrapper {
    position: relative;
    display: block;
    padding: 0;
}

.topbar-subdropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    color: var(--text-main, rgba(255, 255, 255, 0.9));
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.topbar-subdropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.topbar-subdropdown-icon {
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: transform 0.2s ease;
}

.topbar-subdropdown-wrapper:hover .topbar-subdropdown-icon,
.topbar-subdropdown-wrapper.open .topbar-subdropdown-icon {
    transform: rotate(90deg);
}

.topbar-subdropdown-menu {
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 0;
    min-width: 180px;
    background: rgba(30, 30, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.25s ease;
    z-index: 101;
}

.topbar-subdropdown-wrapper:hover .topbar-subdropdown-menu,
.topbar-subdropdown-wrapper.open .topbar-subdropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.topbar-subdropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--text-main, rgba(255, 255, 255, 0.9));
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

.topbar-subdropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

/* Área de cuenta (derecha) */
.topbar-account {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end !important; /* Alinear contenido a la derecha */
}

.topbar-account-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--text-main, rgba(255, 255, 255, 0.9));
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.topbar-account-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    transition: width 0.3s ease, left 0.3s ease;
}

.topbar-account-btn:hover::after {
    width: 100%;
    left: 0;
}

.topbar-account-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.topbar-account-btn svg {
    flex-shrink: 0;
}

/* Botón Salir pegado al extremo derecho */
#salir-btn-topbar {
    margin-left: auto !important;
}

/* Dropdown de admin y login en el área de cuenta */
.topbar-admin-menu,
.topbar-login-menu {
    right: 0;
    left: auto;
}

/* Formulario de login en topbar */
.topbar-login-form {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 250px;
}

.topbar-login-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: white;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.2s ease;
}

.topbar-login-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.topbar-login-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-accent, #7e22ce);
}

.topbar-login-submit {
    width: 100%;
    padding: 0.625rem;
    background: var(--color-accent, #7e22ce);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.topbar-login-submit:hover {
    background: var(--color-accent-hover, var(--color-accent, #7e22ce));
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.topbar-login-submit:focus,
.topbar-login-submit:active {
    background: var(--color-accent, #7e22ce);
    outline: none;
}

.topbar-login-submit:disabled {
    background: var(--color-accent, #7e22ce);
    opacity: 0.7;
    cursor: wait;
}

.topbar-login-error {
    color: #ef4444;
    font-size: 0.75rem;
    text-align: center;
    margin: 0;
}

/* Botón móvil del topbar */
.topbar-mobile-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-main, rgba(255, 255, 255, 0.9));
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.topbar-mobile-btn svg line {
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Animación hamburguesa → X cuando está activo (menú abierto) */
.topbar-mobile-btn.active svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.topbar-mobile-btn.active svg line:nth-child(2) {
    opacity: 0;
}

.topbar-mobile-btn.active svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Overlay móvil del topbar */
.topbar-mobile-overlay {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9997;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.topbar-mobile-overlay.show {
    display: block;
    opacity: 1;
}

/* Ajuste del contenido cuando topbar está activo */
.main-with-topbar {
    padding-top: 70px !important;
    margin-left: 0 !important;
    width: 100% !important;
    /* Sin transition en padding-top: el cambio se aplica vía MutationObserver
       en logo-section-visibility.js dentro del mismo tick que ocurren
       active-section.remove + display:none en navigateToSection. Para entonces
       la sección saliente está invisible y la entrante todavía no se ha
       pintado. Una transición aquí (que probamos antes) hacía que el padding
       siguiera animando DURANTE el slide-in del target, dándole un movimiento
       diagonal (right→center + bottom 60px) que el usuario percibía como
       "la imagen baja para que entre el topbar". */
}

.main-with-topbar main {
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Tema claro para topbar */
#topbar.light-theme {
    background: var(--color-accent, #7e22ce); /* Opaco - sin transparencia */
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

#topbar.light-theme .topbar-logo {
    color: rgba(255, 255, 255, 0.95);
}

#topbar.light-theme .topbar-nav-link {
    color: rgba(255, 255, 255, 0.9);
}

#topbar.light-theme .topbar-nav-link:hover,
#topbar.light-theme .topbar-nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

#topbar.light-theme .topbar-dropdown-menu,
#topbar.light-theme .topbar-subdropdown-menu {
    background: var(--color-accent, #7e22ce);
    background: rgba(var(--color-accent-rgb, 126, 34, 206), 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

#topbar.light-theme .topbar-dropdown-item,
#topbar.light-theme .topbar-subdropdown-item,
#topbar.light-theme .topbar-subdropdown-toggle,
#topbar.light-theme .topbar-account-btn {
    color: rgba(255, 255, 255, 0.9);
}

#topbar.light-theme .topbar-login-input {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.95);
}

#topbar.light-theme .topbar-login-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Tema claro brillante para topbar - fondo de tarjeta con texto negro */
#topbar.bright-theme {
    background: var(--color-bg-card);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#topbar.bright-theme .topbar-logo {
    color: rgba(0, 0, 0, 0.9);
}

#topbar.bright-theme .topbar-nav-link {
    color: rgba(0, 0, 0, 0.85);
}

#topbar.bright-theme .topbar-nav-link:hover,
#topbar.bright-theme .topbar-nav-link.active {
    background: rgba(0, 0, 0, 0.05);
}

#topbar.bright-theme .topbar-dropdown-menu,
#topbar.bright-theme .topbar-subdropdown-menu {
    background: var(--color-bg-card);
    border-color: rgba(0, 0, 0, 0.1);
}

#topbar.bright-theme .topbar-dropdown-item,
#topbar.bright-theme .topbar-subdropdown-item,
#topbar.bright-theme .topbar-subdropdown-toggle,
#topbar.bright-theme .topbar-account-btn {
    color: rgba(0, 0, 0, 0.85);
}

#topbar.bright-theme .topbar-dropdown-item:hover,
#topbar.bright-theme .topbar-subdropdown-item:hover,
#topbar.bright-theme .topbar-subdropdown-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

#topbar.bright-theme .topbar-login-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

#topbar.bright-theme .topbar-login-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

/* Override de títulos de sección en Modo Claro */
body.bright-theme-active .section-title-wrapper,
body.bright-theme-active .blog-title-wrapper,
body.bright-theme-active .gallery-title-wrapper,
body.bright-theme-active .events-title-wrapper,
body.bright-theme-active .testimonials-title-wrapper,
body.bright-theme-active .home-title-wrapper,
body.bright-theme-active .cv-title-wrapper,
body.bright-theme-active .videobook-title-wrapper,
body.bright-theme-active .public-docs-title-wrapper,
body.bright-theme-active .private-docs-title-wrapper,
body.bright-theme-active .contact-title-wrapper,
body.bright-theme-active .projects-title-wrapper,
body.bright-theme-active .shop-title-wrapper {
    background: var(--color-bg-card) !important;
}

body.bright-theme-active .section-title,
body.bright-theme-active .blog-title,
body.bright-theme-active .gallery-title,
body.bright-theme-active .events-title,
body.bright-theme-active .testimonials-title,
body.bright-theme-active .home-title,
body.bright-theme-active .cv-title,
body.bright-theme-active .videobook-title,
body.bright-theme-active .public-docs-title,
body.bright-theme-active .private-docs-title,
body.bright-theme-active .contact-title,
body.bright-theme-active .projects-title,
body.bright-theme-active .shop-title {
    color: var(--color-accent) !important;
    text-shadow: none !important;
}

/* También los iconos del título */
body.bright-theme-active .section-title-icon {
    color: var(--color-accent) !important;
}

/* Vista uniforme en Modo Claro - sin sombras */
body.bright-theme-active .card-background,
body.bright-theme-active .shadow-md,
body.bright-theme-active .shadow-lg,
body.bright-theme-active .shadow-xl,
body.bright-theme-active .shadow-2xl,
body.bright-theme-active .video-thumbnail,
body.bright-theme-active .doc-item {
    box-shadow: none !important;
}

/* ============================================ */
/* RESPONSIVE: TOPBAR MÓVIL                    */
/* ============================================ */

@media (max-width: 1023px) {
    /* Ocultar sidebar en móvil/tablet */
    #sidebar {
        display: none !important;
    }

    #sidebar.mobile-open {
        display: flex !important;
    }

    /* Ocultar blobs decorativos para evitar overflow */
    #animated-bg {
        display: none;
    }

    /* Ajustar notificaciones para móvil */
    #notification {
        right: 0.5rem !important;
        left: 0.5rem !important;
        width: auto !important;
    }

    #topbar {
        height: 60px;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
    }

    #topbar.container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .topbar-container {
        padding: 0;
    }

    .main-with-topbar {
        /* Topbar móvil: height 60px, top 0 → padding-top exacto = 60px.
           Antes 68px asumía un top:8px que ya no existe; los 8px sobrantes
           dejaban un gap visible con el body bg entre topbar y tarjeta. */
        padding-top: 60px !important;
    }

    /* ====================================================== */
    /* CRÍTICO: ELIMINAR ESPACIO EXTRA ENTRE TOPBAR Y TARJETA */
    /* ====================================================== */

    /* Forzar padding/margin 0 en MAIN con múltiples selectores para máxima especificidad */
    .main-with-topbar main,
    .main-with-topbar main.mt-4,
    .main-with-topbar main.space-y-12,
    .main-with-topbar main.space-y-16,
    .main-with-topbar > main,
    #main-site-with-topbar main,
    div.main-with-topbar main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Eliminar margin-top de TODAS las secciones (space-y crea márgenes en hijos) */
    .main-with-topbar main > section,
    .main-with-topbar main > .content-section,
    .main-with-topbar main > section:first-child,
    .main-with-topbar main > .content-section:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Sección HOME específica */
    #home.content-section,
    section#home {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Container dentro de secciones */
    .content-section > .container,
    #home > .container {
        margin-top: 0 !important;
    }

    /* Secciones admin: reducir padding superior del contenedor */
    section[id^="admin-"].content-section > .container {
        padding-top: 1rem !important;
    }

    .topbar-logo {
        font-size: 1.125rem;
    }

    .topbar-logo svg {
        width: 24px;
        height: 24px;
    }

    /* Menú móvil del topbar — pantalla completa */
    .topbar-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        flex: unset !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 1rem !important;
        background: rgba(30, 30, 42, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        overflow-y: auto !important;
        transform: translateX(-100%) !important;
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease !important;
        z-index: 10001 !important;
    }

    .topbar-nav.mobile-open {
        transform: translateX(0) !important;
        visibility: visible;
    }

    .topbar-nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    /* Separador bajo los links directos (ej: Inicio) igual que los dropdown wrappers */
    .topbar-nav.mobile-open > .topbar-nav-link {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .topbar-dropdown-wrapper {
        width: 100%;
    }

    .topbar-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
    }

    /* Dropdowns en móvil se expanden verticalmente */
    .topbar-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0;
        margin-top: 0.5rem;
        background: rgba(0, 0, 0, 0.3);
    }

    .topbar-dropdown-wrapper.open .topbar-dropdown-menu {
        max-height: none;
        padding: 0.5rem;
    }

    /* Sub-dropdowns en móvil */
    .topbar-subdropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0;
        margin-top: 0.25rem;
        margin-left: 1rem;
        background: rgba(0, 0, 0, 0.2);
    }

    .topbar-subdropdown-menu {
        border: none;
    }

    .topbar-subdropdown-wrapper.open .topbar-subdropdown-menu {
        max-height: none;
        padding: 0.5rem;
    }

    /* Subdropdown toggle - alinear elementos juntos en móvil */
    .topbar-subdropdown-toggle {
        justify-content: flex-start !important;
    }

    /* Flecha del subdropdown - moverla al final */
    .topbar-subdropdown-toggle .topbar-subdropdown-icon {
        margin-left: auto !important;
    }

    /* Cuenta en móvil - se mueve dentro de la hamburguesa vía JavaScript */
    .topbar-nav.mobile-open .topbar-account {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        gap: 0 !important;
        margin-top: 0;
        padding-top: 0;
        flex: unset !important;
        justify-content: flex-start !important;
        align-self: auto !important;
    }

    #topbar-nav-user-btn.logged-in {
        opacity: 1;
        color: var(--color-accent, #7e22ce) !important;
    }

    /* En el menú móvil nunca mostrar el dropdown de login (hay pantalla dedicada) */
    .topbar-nav.mobile-open #login-dropdown-topbar { display: none !important; }

    /* En móvil el botón Salir no aparece en el menú (se usa el icono del header) */
    .topbar-nav.mobile-open #salir-btn-topbar { display: none !important; }

    .topbar-nav.mobile-open .topbar-account-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
    }

    .topbar-nav.mobile-open .topbar-account-btn.topbar-dropdown-toggle {
        justify-content: space-between;
    }

    .topbar-nav.mobile-open .topbar-admin-text,
    .topbar-nav.mobile-open .topbar-login-text,
    .topbar-nav.mobile-open .topbar-logout-text {
        display: inline !important;
    }

    .topbar-admin-text,
    .topbar-login-text,
    .topbar-logout-text {
        display: none;
    }

    .topbar-mobile-btn {
        display: flex;
    }

    .topbar-mobile-overlay {
        display: none;
    }

    .topbar-mobile-overlay.show {
        display: block;
    }

    /* Ocultar cuenta en móvil - solo visible dentro de hamburguesa */
    .topbar-account {
        display: none !important;
    }

    /* Tema claro móvil */
    #topbar.light-theme .topbar-nav {
        background: rgba(var(--color-accent-rgb, 126, 34, 206), 0.98) !important;
    }

    #topbar.light-theme .topbar-dropdown-menu {
        background: rgba(255, 255, 255, 0.15);
    }

    #topbar.light-theme .topbar-subdropdown-menu {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ===== Accordion Styles ===== */
.accordion-content {
    transition: all 0.3s ease;
    overflow: hidden;
}

.accordion-content.hidden {
    max-height: 0;
    opacity: 0;
}

.accordion-icon {
    transition: transform 0.2s ease;
}

/* ===== Help Accordion (Panel Admin) ===== */
.help-accordion-header {
    cursor: pointer;
    user-select: none;
}

.help-accordion-header:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.help-accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.help-accordion-content:not(.hidden) {
    max-height: 2000px;
    opacity: 1;
}

.help-accordion-icon {
    transition: transform 0.2s ease;
}

/* ===== Category Dropdown (con Acordeón) ===== */

/* Wrapper del trigger - botón + texto + count + clear */
.category-trigger-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Botón trigger - solo iconos */
.category-sheet-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-bg-card, white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: var(--text-main, #374151);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.category-sheet-trigger:hover {
    border-color: var(--color-accent, #7e22ce);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Texto de la ruta (fuera del botón) */
.category-trigger-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-main, #374151);
}

/* Contador */
.category-trigger-count {
    color: var(--color-accent, #7e22ce);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Botón limpiar */
.category-clear-btn {
    padding: 0.375rem;
    color: #9ca3af;
    transition: color 0.2s, background 0.2s;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
}

.category-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* ===== FILTER DRAWER — Panel lateral izquierdo ===== */

/* Panel lateral */
.filter-drawer-panel {
    width: 320px;
    background: var(--color-bg-card, white);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.18);
}

@media (max-width: 480px) {
    .filter-drawer-panel {
        width: 100%;
    }
}

/* Header con fondo accent */
.filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--color-accent, #7e22ce);
    flex-shrink: 0;
}

.filter-drawer-header-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: white;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.01em;
}

.filter-drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.filter-drawer-close-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

/* Buscador */
.filter-drawer-search {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: var(--color-bg, #f9fafb);
    flex-shrink: 0;
}

.filter-drawer-search-icon {
    color: #9ca3af;
    flex-shrink: 0;
}

.filter-drawer-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    outline: none;
    color: var(--text-main, #374151);
}

.filter-drawer-search-input::placeholder {
    color: #b0b8c9;
}

/* Área de scroll */
.filter-drawer-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.filter-drawer-apply-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9375rem;
    color: white;
    background: var(--color-accent, #7e22ce);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.01em;
}

.filter-drawer-apply-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.filter-drawer-apply-btn:active {
    transform: translateY(0);
}

/* Lista de categorías */
.category-dropdown-list {
    padding: 0.375rem 0;
}

/* Título de sección (Tendencias, Categorías) */
.category-section-title {
    padding: 0.5rem 1.125rem;
    font-weight: 700;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    background: transparent;
    margin-top: 0.375rem;
}

/* Item de categoría */
.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.125rem 0.7rem 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border-left: 3px solid transparent;
    position: relative;
}

.category-item:hover {
    background: rgba(var(--color-accent-rgb, 126, 34, 206), 0.05);
    border-left-color: var(--color-accent, #7e22ce);
}

.category-item.active {
    background: rgba(var(--color-accent-rgb, 126, 34, 206), 0.08);
    border-left-color: var(--color-accent, #7e22ce);
}

.category-item.active .category-item-name {
    color: var(--color-accent, #7e22ce);
    font-weight: 600;
}

.category-item-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.category-item-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-item-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-main, #374151);
}

.category-item-count {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    min-width: 1.75rem;
    text-align: center;
}

.category-item.active .category-item-count {
    background: rgba(var(--color-accent-rgb, 126, 34, 206), 0.12);
    color: var(--color-accent, #7e22ce);
}

/* Trend chips row */
.trend-chips-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.625rem 1rem 0.5rem;
}

.trend-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.25rem;
    border-radius: 0.5rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    background: transparent;
}

.trend-chip-new {
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
}
.trend-chip-new:hover, .trend-chip-new.active {
    background: rgba(16, 185, 129, 0.18);
    border-color: #059669;
}

.trend-chip-featured {
    color: #d97706;
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}
.trend-chip-featured:hover, .trend-chip-featured.active {
    background: rgba(245, 158, 11, 0.18);
    border-color: #d97706;
}

.trend-chip-sale {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}
.trend-chip-sale:hover, .trend-chip-sale.active {
    background: rgba(239, 68, 68, 0.18);
    border-color: #dc2626;
}

/* Indicador de categoría padre en resultados de búsqueda */
.category-item-parent {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

/* Flecha de navegación a subcategorías */
.category-arrow {
    width: 18px;
    height: 18px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.2s;
}

.category-item:hover .category-arrow {
    color: var(--color-accent, #7e22ce);
}

/* Spacer para alinear cuando no hay flecha */
.category-arrow-spacer {
    width: 18px;
    flex-shrink: 0;
}

/* Icono de tendencia */
.category-trend-icon {
    font-size: 1rem;
}

/* ===== PANELES DESLIZANTES ESTILO AMAZON ===== */

/* Contenedor de paneles - dos paneles lado a lado */
.category-panels-container {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.3s ease;
}

/* Cuando se muestra el panel de subcategorías, deslizar a la izquierda */
.category-panels-container.show-subcategories {
    transform: translateX(-50%);
}

/* Cada panel ocupa el 50% del contenedor (100% del área visible) */
.category-panel {
    width: 50%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Header de "volver" en panel subcategorías */
.category-back-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-accent, #7e22ce);
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #f9fafb;
    transition: background 0.15s;
}

.category-back-header:hover {
    background: rgba(var(--color-accent-rgb, 126, 34, 206), 0.08);
}

.category-back-header svg {
    width: 16px;
    height: 16px;
}

/* Título de la categoría en panel subcategorías */
.category-sub-title {
    padding: 0.625rem 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-align: center;
    color: white;
    background: var(--color-accent, #7e22ce);
}

/* ===== ESTILOS PARA MODAL DE EVENTOS ===== */

/* Animación para el modal de eventos */
#event-modal {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#event-modal.hidden {
    opacity: 0;
    visibility: hidden;
}

#event-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Animación del contenido del modal */
#event-modal > div {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Padding personalizado para secciones de contenido */
.content-padding-mobile {
    padding: 1rem 0.5rem 0; /* 1rem arriba, 0.5rem laterales en móvil */
}

/* Padding detalle de evento */
.event-detail-content-padding {
    padding: 0 0.5rem; /* 0.5rem laterales en móvil */
}

@media (min-width: 768px) {
    .content-padding-mobile {
        padding: 1.5rem; /* 24px en desktop */
    }
    .event-detail-content-padding {
        padding: 2.5rem; /* md:p-10 original en desktop */
    }
}

/* ===== Category Pills Filter ===== */
.category-pills-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    justify-content: flex-start;
}

.category-pills-container::-webkit-scrollbar {
    display: none;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    color: var(--text-main, #374151);
}

.category-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.category-pill.active {
    background: var(--color-accent, #7e22ce);
    color: white;
    border-color: var(--color-accent, #7e22ce);
}

.category-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.1);
}

.category-pill.active .category-pill-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Wrapper con gradientes fade-out */
.category-pills-wrapper {
    position: relative;
    width: 100%;
}

.category-pills-wrapper::before,
.category-pills-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Gradiente izquierdo */
.category-pills-wrapper::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 100%
    );
    opacity: 0; /* Oculto por defecto */
}

/* Gradiente derecho */
.category-pills-wrapper::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 100%
    );
    opacity: 1; /* Visible por defecto (indica que hay más contenido) */
}

/* Estados dinámicos del wrapper (controlados por JavaScript) */
.category-pills-wrapper.has-scroll-left::before {
    opacity: 1;
}

.category-pills-wrapper.has-scroll-right::after {
    opacity: 1;
}

.category-pills-wrapper.no-scroll::before,
.category-pills-wrapper.no-scroll::after {
    opacity: 0;
}

/* Mobile: Gradientes más prominentes */
@media (max-width: 768px) {
    .category-pills-wrapper::before,
    .category-pills-wrapper::after {
        width: 30px;
    }

    .category-pills-wrapper::before {
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0%,
            transparent 100%
        );
    }

    .category-pills-wrapper::after {
        background: linear-gradient(
            to left,
            rgba(0, 0, 0, 0.25) 0%,
            transparent 100%
        );
    }
}

/* ===== GRID DINÁMICO - Estilos responsivos ===== */

/* Videos */
#videobook-content {
    grid-template-columns: repeat(var(--grid-videos-mobile), 1fr) !important;
}
@media (min-width: 768px) {
    #videobook-content {
        grid-template-columns: repeat(var(--grid-videos-tablet), 1fr) !important;
    }
}
@media (min-width: 1024px) {
    #videobook-content {
        grid-template-columns: repeat(var(--grid-videos-desktop), 1fr) !important;
    }
}

@media (min-width: 1024px) {
    /* En escritorio el header del menú móvil (logo + X) no debe verse */
    #topbar-nav-header { display: none !important; }
    #topbar-nav-user-btn { display: none !important; }
}

/* Galería (Masonry - usa column-count) */
#gallery-grid {
    column-count: var(--grid-gallery-mobile) !important;
}
@media (min-width: 768px) {
    #gallery-grid {
        column-count: var(--grid-gallery-tablet) !important;
    }
}
@media (min-width: 1024px) {
    #gallery-grid {
        column-count: var(--grid-gallery-desktop) !important;
    }
}

/* Eventos */
.events-bento-grid {
    grid-template-columns: repeat(var(--grid-events-mobile), 1fr) !important;
}
@media (min-width: 640px) {
    .events-bento-grid {
        grid-template-columns: repeat(var(--grid-events-tablet), 1fr) !important;
    }
}
@media (min-width: 1024px) {
    .events-bento-grid {
        grid-template-columns: repeat(var(--grid-events-desktop), 1fr) !important;
    }
}

/* Reseñas */
#testimonials-grid {
    grid-template-columns: repeat(var(--grid-testimonials-mobile), 1fr) !important;
}
@media (min-width: 768px) {
    #testimonials-grid {
        grid-template-columns: repeat(var(--grid-testimonials-tablet), 1fr) !important;
    }
}
@media (min-width: 1024px) {
    #testimonials-grid {
        grid-template-columns: repeat(var(--grid-testimonials-desktop), 1fr) !important;
    }
}

/* Blog */
.blog-posts-grid {
    grid-template-columns: repeat(var(--grid-blog-mobile), 1fr) !important;
}
@media (min-width: 640px) {
    .blog-posts-grid {
        grid-template-columns: repeat(var(--grid-blog-tablet), 1fr) !important;
    }
}
@media (min-width: 1024px) {
    .blog-posts-grid {
        grid-template-columns: repeat(var(--grid-blog-desktop), 1fr) !important;
    }
}

/* Proyectos */
.projects-grid {
    grid-template-columns: repeat(var(--grid-projects-mobile), 1fr) !important;
}
@media (min-width: 640px) {
    .projects-grid {
        grid-template-columns: repeat(var(--grid-projects-tablet), 1fr) !important;
    }
}
@media (min-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(var(--grid-projects-desktop), 1fr) !important;
    }
}

/* Tienda */
#shop-products-grid {
    grid-template-columns: repeat(var(--grid-shop-mobile), 1fr) !important;
}
@media (min-width: 640px) {
    #shop-products-grid {
        grid-template-columns: repeat(var(--grid-shop-tablet), 1fr) !important;
    }
}
@media (min-width: 1024px) {
    #shop-products-grid {
        grid-template-columns: repeat(var(--grid-shop-desktop), 1fr) !important;
    }
}

/* ============================================
   Sección Contacto — Layout horizontal (Fase 1)
   ============================================ */
.contact-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
}
.contact-icon-option:hover {
    background-color: rgba(var(--color-accent-rgb, 126, 34, 206), 0.08);
}
.contact-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    text-align: center;
}
.contact-item-card.contact-item-card--static {
    cursor: default;
}
.contact-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}
.contact-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: color 0.2s ease;
}
.contact-item-icon svg {
    width: 100%;
    height: 100%;
}
.contact-item-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #374151;
    word-break: break-word;
    line-height: 1.3;
}

/* Hover con color de marca */
.contact-item-card[data-icon="instagram"]:hover .contact-item-icon { color: #e4405f; }
.contact-item-card[data-icon="facebook"]:hover .contact-item-icon { color: #1877f2; }
.contact-item-card[data-icon="whatsapp"]:hover .contact-item-icon { color: #25d366; }
.contact-item-card[data-icon="telegram"]:hover .contact-item-icon { color: #0088cc; }
.contact-item-card[data-icon="twitter"]:hover .contact-item-icon { color: #1da1f2; }
.contact-item-card[data-icon="linkedin"]:hover .contact-item-icon { color: #0a66c2; }
.contact-item-card[data-icon="gmail"]:hover .contact-item-icon { color: #ea4335; }
.contact-item-card[data-icon="phone"]:hover .contact-item-icon { color: var(--color-accent); }
.contact-item-card[data-icon="youtube"]:hover .contact-item-icon { color: #ff0000; }
.contact-item-card[data-icon="tiktok"]:hover .contact-item-icon { color: #000000; }

/* Tema oscuro */
[data-theme="dark"] .contact-item-card,
.dark .contact-item-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .contact-item-card:hover,
.dark .contact-item-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .contact-item-label,
.dark .contact-item-label { color: #e5e7eb; }
[data-theme="dark"] .contact-item-icon,
.dark .contact-item-icon { color: #9ca3af; }

/* ============================================
   Sección Contacto — Bloques por tipo (Fase 3.1)
   ============================================ */
.contact-items-grid + .contact-items-grid {
    margin-top: 1.5rem;
}
/* Bloque DIRECT: tarjetas más prominentes con borde acento */
.contact-items-grid--direct {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-width: 720px;
}
.contact-item-card--direct {
    border-color: rgba(var(--color-accent-rgb), 0.25);
    background: rgba(var(--color-accent-rgb), 0.04);
}
.contact-item-card--direct:hover {
    border-color: rgba(var(--color-accent-rgb), 0.45);
    background: rgba(var(--color-accent-rgb), 0.08);
}
.contact-item-card--direct .contact-item-icon { color: var(--color-accent); }
/* Bloque SOCIAL: grid compacto (default) */
.contact-items-grid--social {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    max-width: 800px;
}
/* Bloque EXTERNAL: tarjetas más grandes con descripción */
.contact-items-grid--external {
    grid-template-columns: 1fr;
    max-width: 640px;
}
.contact-item-card--external {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    text-align: left;
    padding: 1.25rem;
    gap: 0.25rem 0.85rem;
}
.contact-item-link-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 14px;
    height: 14px;
    color: #9ca3af;
    transition: color 0.2s;
}
.contact-item-card--external:hover .contact-item-link-badge {
    color: var(--color-accent);
}
.contact-item-card--external .contact-item-icon {
    grid-row: span 2;
    margin-top: 0.15rem;
    width: 40px;
    height: 40px;
    color: var(--color-accent);
}
.contact-item-card--external .contact-item-label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0;
    grid-column: 2;
}
.contact-item-description {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.4;
    grid-column: 2;
}
[data-theme="dark"] .contact-item-description,
.dark .contact-item-description { color: #9ca3af; }

/* ============================================
   Sección Contacto — Extras (Fase 3.2)
   ============================================ */
.contact-extras {
    max-width: 720px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.contact-extras.hidden { display: none; }
[data-theme="dark"] .contact-extras,
.dark .contact-extras { border-top-color: rgba(255, 255, 255, 0.1); }

.contact-extra-block {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 1rem;
}
[data-theme="dark"] .contact-extra-block,
.dark .contact-extra-block {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Mapa */
.contact-extra-map-address {
    margin: 0 0 0.6rem 0;
    font-size: 0.95rem;
    color: var(--text-color, #1f2937);
    line-height: 1.4;
}
.contact-extra-map-address-label {
    font-weight: 600;
    color: #6b7280;
    margin-right: 0.3rem;
}
.contact-extra-map-clip {
    overflow: hidden;
    border-radius: 8px;
    height: 300px;
}
.contact-extra-map iframe {
    width: 100%;
    height: 325px;
    border: 0;
    border-radius: 0;
    display: block;
}
.contact-extra-map-credit {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #9ca3af;
}
.contact-extra-map-credit a {
    color: inherit;
    text-decoration: underline;
}

/* Horario */
.contact-schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.contact-schedule-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}
[data-theme="dark"] .contact-schedule-header h4,
.dark .contact-schedule-header h4 { color: #e5e7eb; }
.contact-schedule-status {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}
.contact-schedule-status.is-open { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.contact-schedule-status.is-closed { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.contact-schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.contact-schedule-item {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #4b5563;
}
.contact-schedule-item.is-today {
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-accent);
    font-weight: 600;
}
.contact-schedule-item.is-closed-day .contact-schedule-hours {
    color: #9ca3af;
    font-style: italic;
}
[data-theme="dark"] .contact-schedule-item,
.dark .contact-schedule-item { color: #d1d5db; }
.contact-schedule-day { font-weight: 500; min-width: 110px; }
.contact-schedule-hours { text-align: right; }

.contact-schedule-holidays {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.5;
}
.contact-schedule-holidays-label {
    font-weight: 600;
    color: var(--color-accent);
    margin-right: 0.3rem;
}
[data-theme="dark"] .contact-schedule-holidays,
.dark .contact-schedule-holidays {
    color: #d1d5db;
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* vCard */
.contact-extra-vcard { text-align: center; background: transparent; border: none; padding: 0; }
.contact-vcard-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contact-vcard-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.25);
}

/* ============================================
   Sección Contacto — Formulario público (Fase 2)
   ============================================ */
.contact-form-wrapper {
    max-width: 640px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}
.contact-form-wrapper.hidden { display: none; }
.contact-form-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-align: center;
    color: #1f2937;
}
.contact-public-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 600px) {
    .contact-form-row { grid-template-columns: 1fr; }
}
.contact-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form-input:focus {
    outline: none;
    border-color: var(--color-accent, #7e22ce);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #7e22ce) 20%, transparent);
}
textarea.contact-form-input { resize: vertical; min-height: 120px; }
.contact-form-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.contact-form-submit {
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
}
.contact-form-submit:hover:not(:disabled) { opacity: 0.92; }
.contact-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.contact-form-status {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    min-height: 1.2em;
}
.contact-form-status.is-success { color: #059669; }
.contact-form-status.is-error { color: #dc2626; }

/* Tema oscuro */
[data-theme="dark"] .contact-form-wrapper,
.dark .contact-form-wrapper { border-top-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .contact-form-title,
.dark .contact-form-title { color: #e5e7eb; }
[data-theme="dark"] .contact-form-input,
.dark .contact-form-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
}
[data-theme="dark"] .contact-form-input::placeholder,
.dark .contact-form-input::placeholder { color: #9ca3af; }

/* ============================================
   Thumbnails y paginación (movido desde inline en index.html, FASE A1)
   ============================================ */

.image-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    min-height: 200px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gallery-thumb {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery-thumb:hover {
    transform: scale(1.05);
}

.sortable-item {
    cursor: move;
    transition: all 0.2s ease;
}

.sortable-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#load-more-photos-btn,
#load-more-videos-btn,
#load-more-admin-btn {
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#load-more-photos-btn:hover,
#load-more-videos-btn:hover,
#load-more-admin-btn:hover {
    transform: translateY(-1px);
}

/* Fallback fonts mientras cargan Google Fonts (evita FOUT) */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.fonts-loaded body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   MÓVIL SIN LOGO — hamburguesa anidada + FAB flotante
   Activo solo cuando #topbar tiene clase .no-logo (cliente
   borró logo explícitamente) y viewport < 1024px.
   Lógica en js/mobile-no-logo-hamburger.js.
   ============================================================ */
@media (max-width: 1023px) {
    /* Topbar invisible pero presente en el DOM (visibility en vez de display:none)
       — los descendientes con position:fixed (#topbar-nav.mobile-open, overlay)
       necesitan que el padre NO esté display:none para poder renderizarse al
       abrir el menú. Anulamos eventos de puntero para que no intercepte clicks. */
    #topbar.no-logo {
        visibility: hidden;
        pointer-events: none;
    }
    /* Cuando el menú móvil se abre, sus hijos vuelven a ser visibles e
       interactivos (override de la herencia de visibility:hidden).
       #mobile-login-screen es hermano de #topbar, no hijo, así que no necesita
       override aquí. */
    #topbar.no-logo .topbar-nav.mobile-open,
    #topbar.no-logo #mobile-topbar-overlay.show {
        visibility: visible;
        pointer-events: auto;
    }
    body.topbar-no-logo .main-with-topbar { padding-top: 0 !important; }

    /* Anchor para la hamburguesa anidada — sin condicional de body para que
       siempre tenga position:relative en móvil cuando el botón se inyecte */
    [class*="-title-wrapper"] { position: relative; }

    /* Hamburguesa anidada en la cabecera coloreada de la sección activa.
       Anclada arriba a la derecha (no centrada vertical) — cuando la
       cabecera tiene imagen alta, centrarla verticalmente la dejaba muy
       abajo. right: 2rem para librarse del clipping del rounded-2xl +
       overflow:hidden del .card-background — el title-wrapper puede
       extenderse 16-17px más allá del card en algunos viewports y a menos
       right el botón queda detrás del corner. */
    .title-wrapper-hamburger {
        position: absolute;
        top: 12px;
        right: 2rem;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.28);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: background 0.2s ease;
    }
    .title-wrapper-hamburger:hover,
    .title-wrapper-hamburger:focus-visible {
        background: rgba(255, 255, 255, 0.28);
        outline: none;
    }
    .title-wrapper-hamburger svg { display: block; }

    /* FAB flotante (visible al hacer scroll cuando la cabecera sale).
       Para alinear horizontalmente con la hamburguesa anidada hay que
       compensar el margen lateral del .card-background:
       - <768px: card margin 0.75rem + anchored offset 1rem = 1.75rem
       - 769-1023px: card margin 1rem + anchored offset 1rem = 2rem
       Ver media queries específicas debajo. */
    .hamburger-fab {
        position: fixed;
        top: 12px;
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        border: none;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, background 0.2s ease;
    }
    .hamburger-fab.visible {
        opacity: 1;
        pointer-events: auto;
    }
    .hamburger-fab:hover,
    .hamburger-fab:focus-visible {
        background: rgba(0, 0, 0, 0.7);
        outline: none;
    }
    .hamburger-fab svg { display: block; }
}

/* FAB right offset por viewport para alinear con la hamburguesa anidada.
   El card-background tiene distinto margen lateral según viewport, y la
   anidada está a right:1rem dentro del card. El FAB necesita compensar
   margin_card + 1rem para acabar en la misma X del viewport. */
@media (max-width: 768px) {
    .hamburger-fab { right: 1.75rem; }  /* 0.75rem (margen card) + 1rem (offset anidada) */
}
@media (min-width: 769px) and (max-width: 1023px) {
    .hamburger-fab { right: 2rem; }  /* 1rem (margen card) + 1rem (offset anidada) */
}

/* Desktop: nunca mostrar el FAB ni la hamburguesa anidada (defensivo) */
@media (min-width: 1024px) {
    .hamburger-fab,
    .title-wrapper-hamburger { display: none !important; }
}

/* ============================================================
   IMAGEN COMO TÍTULO DE SECCIÓN
   El admin puede subir una imagen por sección que sustituye al
   título de texto. La imagen ocupa todo el ancho y la misma altura
   que tendría el texto — gobernada por el padding/fontSize que
   configura el usuario en Look & Feel → Título Sección.
   Inyectada vía applySectionTitleImages en apply-section-titles.js.
   ============================================================ */
[class*="-title-wrapper"].has-title-image {
    position: relative;     /* anchor para la imagen position:absolute */
    overflow: hidden;       /* recorta si la imagen tiene aspect ratio distinto */
    background: transparent !important;  /* solo la imagen, sin fondo */
    background-image: none !important;
    /* Padding del wrapper con imagen: usa la variable per-imagen si
       applySectionTitleImages la seteó, si no fallback al global de
       generateCSS (--global-title-pad). El default literal `1rem` es
       crítico — si la config antigua no expone `--global-title-pad` en el
       <style id="section-titles-dynamic-styles">, sin este fallback el
       padding resuelve a 0 y el wrapper colapsa al alto del h2 sin que
       el multiplicador del media query mobile tenga efecto. */
    /* !important obligatorio: sections.css:1176-1194 declara
       `.container .{section}-title-wrapper { padding: 1.5rem 1.5rem !important }`
       en mobile para hacer que los wrappers lleguen al borde del card. Sin
       !important aquí esa regla pisa nuestro padding-top/bottom calculado. */
    padding-top: var(--image-title-pad, var(--global-title-pad, 1rem)) !important;
    padding-bottom: var(--image-title-pad, var(--global-title-pad, 1rem)) !important;
}
/* Multiplicador en tablet (769-1023px) y mobile (≤768px) para wrappers con
   imagen. Mayor que desktop porque el h2 oculto (visibility:hidden) tiene
   font-size mucho menor en estas anchuras (1.7rem vs 3.8rem desktop), así
   que sin amplificación el wrapper queda demasiado cuadrado y la imagen
   panorámica se renderiza muy pequeña en proporción. */
@media (min-width: 769px) and (max-width: 1023px) {
    [class*="-title-wrapper"].has-title-image {
        padding-top: calc(var(--image-title-pad, var(--global-title-pad, 1rem)) * 1.5) !important;
        padding-bottom: calc(var(--image-title-pad, var(--global-title-pad, 1rem)) * 1.5) !important;
    }
}
@media (max-width: 768px) {
    [class*="-title-wrapper"].has-title-image {
        padding-top: calc(var(--image-title-pad, var(--global-title-pad, 1rem)) * 1.5) !important;
        padding-bottom: calc(var(--image-title-pad, var(--global-title-pad, 1rem)) * 1.5) !important;
    }
    /* Cuando el wrapper-imagen va seguido del contenedor de secciones del
       home (visible solo en home), reducir el padding-top de la primera
       .home-section para que la franja gris (card-background asomando)
       sea menos perceptible. Desktop también la tiene pero proporcionalmente
       pasa desapercibida; en mobile al ser un viewport estrecho destaca. */
    [class*="-title-wrapper"].has-title-image + .home-sections-container .home-section:first-child {
        padding-top: 0.75rem !important;
    }
}
/* También ocultar pseudoelementos decorativos de la cabecera (ej.
   .home-title-wrapper::before tiene gradientes radiales) — solo
   queremos ver la imagen. */
[class*="-title-wrapper"].has-title-image::before,
[class*="-title-wrapper"].has-title-image::after {
    display: none !important;
}
/* Ocultar el <h2> visualmente PERO conservar su layout (visibility:hidden,
   no display:none): así el wrapper mantiene la altura que tendría con el
   texto — padding configurable + font-size + line-height — y la imagen
   absolute la replica exacta. Cualquier cambio del slider "Altura del
   Fondo (Padding Vertical)" o "Tamaño" se refleja sin tocar este CSS. */
[class*="-title-wrapper"].has-title-image > h2,
[class*="-title-wrapper"].has-title-image > [class*="-title"]:not(.section-title-image) {
    visibility: hidden !important;
}
.section-title-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Logo oculto solo en la home cuando setting hideLogoOnHome=true.
   La clase .logo-hidden-on-home la añade js/logo-section-visibility.js
   en hashchange (y en initial-ui.js para evitar flash en LCP). */
body.logo-hidden-on-home #topbar-logo,
body.logo-hidden-on-home #sidebar-logo {
    display: none !important;
}

/* Panel inline de propiedades por imagen (admin → Visibilidad de Títulos) */
.title-image-props-panel {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgb(249, 250, 251);
    border-radius: 0.5rem;
    border: 1px solid rgb(229, 231, 235);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.title-image-props-panel label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: rgb(75, 85, 99);
}
.title-image-props-panel label > span:first-child {
    font-weight: 500;
    flex-shrink: 0;
}
.title-image-props-panel input[type="range"] {
    flex: 1;
    max-width: 8rem;
}
.title-image-props-panel select {
    min-width: 9rem;
}


/* Modal de propiedades de imagen como título de sección.
   Único modal compartido al body — al click ⚙️ se abre con valores de la
   fila origen y los sincroniza de vuelta al panel inline oculto. */
.title-image-props-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.title-image-props-modal-overlay.hidden { display: none; }

.title-image-props-modal-content {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.title-image-props-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    gap: 0.5rem;
}

.title-image-props-modal-header h4 {
    font-size: 1rem;
}

#title-image-props-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    color: #6b7280;
    flex-shrink: 0;
}
#title-image-props-modal-close:hover { background: #f3f4f6; color: #111827; }

.title-image-props-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.title-image-props-modal-body label {
    display: grid;
    grid-template-columns: 140px 1fr auto auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
}
.title-image-props-modal-body label > select {
    grid-column: 2 / -1;
}

@media (max-width: 480px) {
    .title-image-props-modal-body label {
        grid-template-columns: 1fr auto auto;
        row-gap: 0.25rem;
    }
    .title-image-props-modal-body label > span:first-child {
        grid-column: 1 / -1;
    }
    .title-image-props-modal-body label > select {
        grid-column: 1 / -1;
    }
}

/* Auto-cierre de dropdowns desktop tras click en un sub-item.
   Estrategia: clase global en <body> activada durante 500 ms tras el
   click (handleTopbarNavClick lo setea con setTimeout). display:none
   gana sin discusión sobre el :hover que mantenía el menú visible.
   Tras 500 ms el hover vuelve a funcionar normal — si el usuario
   sigue hovering, reabre, comportamiento aceptable. */
body.menu-just-clicked .topbar-dropdown-menu,
body.menu-just-clicked .topbar-subdropdown-menu {
    display: none !important;
}