/*
=====================================================================
   ESTILOS PROFESIONALES PARA LA GALERÍA DE IMÁGENES
=====================================================================
Este CSS controla la visualización de la sección de galería en una
aplicación Django, incluyendo el botón toggle para abrir/cerrar la
galería y el carrusel de imágenes.
*/

/* ============================== */
/* CONTROLES DE LA GALERÍA        */
/* ============================== */
.gallery-controls-image {
    /* Se utiliza position: sticky para que el contenedor se mantenga
       fijo en la parte superior al hacer scroll. */
    position: sticky;
    /* El contenedor se adhiere al top del viewport. */
    top: 0;
    /* z-index alto para asegurarse de que se superponga a otros elementos. */
    z-index: 1000;
    /* El ancho se establece al 100% para que se adapte al ancho de la pantalla. */
    width: 100%;
    /* Se elimina la propiedad min-width para evitar forzar un ancho mayor al viewport.
       min-width: 1200px; */
    /* Se aplica un fondo degradado para un efecto visual moderno. */
    background: linear-gradient(135deg, #27292e 0%, #0f1218 100%);
    /* Sombra para dar profundidad al contenedor. */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    /* Con box-sizing: border-box se incluye el padding y border dentro del ancho total. */
    box-sizing: border-box;
    /* Se establece un margen inferior para separar este bloque de otros elementos. */
    margin-bottom: 15px;
}

/* ============================== */
/* ESTILOS RESPONSIVOS            */
/* ============================== */
@media (max-width: 768px) {
    .gallery-controls-image {
        /* En dispositivos pequeños se aplica un padding para mantener la consistencia visual. */
        padding: 1rem 0.5rem;
    }
}

/* ============================== */
/* BOTÓN TOGGLE DE LA GALERÍA     */
/* ============================== */
.gallery-toggle-button {
    position: sticky; /* Mantenemos el sticky original */
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 1.1rem 0 2rem;
    
    border: none;
    border-bottom: 2px solid rgba(128, 0, 255, 0.3); 
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: #E9D6FF; /* Texto en morado claro */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(34, 12, 71, 0.5);
    overflow: hidden;
}

/* Efecto de brillo dinámico CORREGIDO */
.gallery-toggle-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(177, 131, 255, 0.15) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    transition: left 0.8s ease;
}

.gallery-toggle-button:hover {
    background: linear-gradient(
        90deg,
        rgba(33, 25, 46, 0.95),
        rgba(50, 30, 82, 0.95),
        rgba(38, 15, 77, 0.95)
    );
    box-shadow: 0 6px 25px rgba(98, 44, 191, 0.6);
    filter: brightness(1.12);
}

.gallery-toggle-button:hover::before {
    left: 200%;
}

/* Animación de respiración sutil */
@keyframes breathing-glow {
    0% { box-shadow: 0 4px 20px rgba(34, 12, 71, 0.5); }
    50% { box-shadow: 0 4px 25px rgba(98, 44, 191, 0.7); }
    100% { box-shadow: 0 4px 20px rgba(34, 12, 71, 0.5); }
}

.gallery-toggle-button {
    animation: breathing-glow 4s ease-in-out infinite;
}

/* Contenido interno del botón, utilizando flex para alinear los íconos y el texto */
.gallery-toggle-content {
    display: flex;                   /* Utiliza Flexbox para distribución */
    align-items: center;             /* Centra verticalmente los elementos */
    justify-content: center;         /* Centra horizontalmente los elementos */
    gap: 12px;                       /* Espacio entre los elementos */
    color: #fff;                     /* Color del texto en blanco */
    font-weight: 500;                /* Peso de fuente medio */
    letter-spacing: 0.5px;           /* Espaciado entre letras para mejor legibilidad */
}

/* Indicador (por lo general, un ícono de flecha) que rota al togglear la galería */
.gallery-indicator {
    transition: transform 0.3s ease; /* Transición para el efecto de rotación */
}

/* ============================== */
/* CONTENEDOR DE LA GALERÍA       */
/* ============================== */
.gallery-container {
    /* Inicialmente, la galería está oculta (altura 0, opacidad 0 y no visible) */
    height: 0;
    overflow: hidden;                /* Oculta el contenido que exceda la altura */
    opacity: 0;                      /* Opacidad 0 para efecto de desvanecimiento */
    visibility: hidden;              /* No es visible para evitar interacciones */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* Transición para animar la apertura/cierre */
    background: rgba(16, 20, 27, 0.98); /* Fondo semitransparente */
    backdrop-filter: blur(8px);      /* Desenfoque del fondo para destacar el contenido */
    position: absolute;              /* Se posiciona de forma absoluta para ubicarla justo debajo del botón */
    width: 100%;                     /* Ancho completo para alinear con el contenedor padre */
    top: 100%;                       /* Se posiciona justo debajo del botón toggle */
    left: 0;                         /* Alineación a la izquierda */
}

/* Cuando la galería se activa (se agrega la clase "active") */
.gallery-container.active {
    height: 380px;                    /* Altura fija de 300px */
    opacity: 1;                      /* Se vuelve completamente opaca */
    visibility: visible;             /* Se hace visible */
    overflow: hidden;                /* Se mantiene el overflow oculto para evitar scroll interno */
}
/* ============================== */
/* GALERY HEADER          */
/* ============================== */

.gallery-header-images {
    display: flex;                   /* Flexbox para alinear elementos */
    justify-content: space-between;  /* Espacio entre los elementos */
    align-items: center;             /* Centrado vertical */
    padding: 0.5rem 2rem;              /* Padding interno para separar los elementos */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Borde sutil en la parte inferior */
}

/* ============================== */
/* CARRUSEL DE IMÁGENES           */
/* ============================== */

/* Wrapper del carrusel que contiene la navegación y las imágenes */
.gallery-carousel-wrapper {
    position: relative;              /* Posición relativa para ubicar los botones de navegación de forma absoluta */
    padding: 0rem 2rem;            /* Padding interno para separar el carrusel del borde */
}


/* Revelar efecto de brillo al hacer hover */
.gallery-carousel-item:hover{
    opacity: 1; /* Mostrar efecto de brillo */
}

/* Contenedor de los botones de navegación (izquierda y derecha) */
.gallery-carousel-nav {
    position: absolute;              /* Se posiciona de forma absoluta sobre el carrusel */
    top: 50%;                        /* Centrado verticalmente */
    transform: translateY(-50%);     /* Ajuste para centrar exacto en vertical */
    width: 95%;                     /* Ocupa todo el ancho del carrusel */
    display: flex;                   /* Flexbox para distribuir los botones */
    justify-content: space-between;  /* Botón izquierdo a la izquierda y derecho a la derecha */
    pointer-events: none;            /* Se desactivan eventos en el contenedor, los botones siguen siendo clickeables */
    z-index: 100;                    /* Z-index alto para que se superpongan sobre otros elementos */
}

/* Carrusel de imágenes propiamente dicho */
.gallery-carousel {
    display: flex;                   /* Flexbox para disponer los ítems en una fila */
    gap: 1.5rem;                    /* Espaciado entre cada imagen del carrusel */
    scroll-behavior: smooth;         /* Desplazamiento suave al hacer scroll */
    overflow-x: auto;                /* Se permite el desplazamiento horizontal */
    scroll-snap-type: x mandatory;   /* Snap de scroll para alinear cada imagen correctamente */
    padding: 1rem 0;                 /* Padding vertical para separar el carrusel del contenedor */
    /* scrollbar-width: none; */      /* Oculta la barra de scroll en navegadores compatibles */
}


/* Cada ítem individual del carrusel */
.gallery-carousel-item {
    scroll-snap-align: start;        /* Cada ítem se alinea al inicio del contenedor al hacer scroll */
    flex: 0 0 220px;                 /* Ancho fijo de 280px, sin crecer ni encoger */
    height: 280px;                   /* Altura fija de 200px */
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(140, 20, 252, 0);
    overflow: hidden;                /* Oculta contenido que sobrepase el ítem */
    transform-origin: center;        /* Origen para transformaciones centrado */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones para animaciones en hover */
    position: relative;              /* Posición relativa para posicionar elementos internos (como overlays) */
}

/* Efecto hover para realzar el ítem del carrusel */
.gallery-carousel-item:hover {
    transform: scale(1.05) rotateZ(1deg); /* Escala y ligera rotación 3D */
    box-shadow: 0 0 25px rgba(140, 20, 252, 0.4), /* Sombra exterior neón */
                0 4px 30px rgba(140, 20, 252, 0.2); /* Sombra inferior para profundidad */
    border: 2px solid rgba(188, 98, 255, 0.3); /* Borde morado semi-transparente */
    filter: brightness(1.1); /* Aumento de brillo para destacar */
}

/* Contenedor interno que envuelve la imagen */
.gallery-image-wrapper {
    width: 100%;                     /* Ocupa el ancho completo del ítem */
    height: 100%;                    /* Ocupa la altura completa del ítem */
    position: relative;              /* Posición relativa para posicionar el overlay */
}

/* Estilo para la imagen dentro del carrusel */
.gallery-carousel-item img {
    width: 100%;                     /* La imagen se expande al ancho completo del contenedor */
    height: 100%;                    /* La imagen se ajusta a la altura completa */
    object-fit: cover;               /* La imagen se recorta para cubrir el contenedor sin distorsión */
    border-radius: 8px;              /* Bordes redondeados para suavizar la imagen */
}

/* Capa superpuesta sobre la imagen para mostrar información (por ejemplo, fecha) */
.gallery-image-overlay {
    position: absolute;              /* Posicionamiento absoluto para cubrir la parte inferior de la imagen */
    bottom: 0;                       /* Ubicada en la parte inferior */
    left: 0;
    right: 0;
    padding: 1rem;                   /* Padding interno para dar espacio al contenido */
    background: linear-gradient(transparent 40%, rgba(41, 13, 65, 0.6)); /* Degradado morado translúcido */
    color: white;                    /* Texto en color blanco */
    opacity: 0;                      /* Inicialmente invisible */
    transition: opacity 0.3s ease;   /* Transición para que aparezca suavemente al hacer hover */
}

/* Al pasar el cursor sobre el ítem, se revela el overlay */
.gallery-carousel-item:hover .gallery-image-overlay {
    opacity: 1;
}

/* ============================== */
/* Diseño del texto con borde interactivo */
/* ============================== */

.gallery-image-date {
    font-size: 0.9em;                /* Tamaño de fuente más pequeño */
    font-weight: 500;                /* Peso de fuente medio */
    letter-spacing: 0.5px;           /* Espaciado entre letras */
    display: inline-block;           /* Se muestra como bloque en línea */
    padding: 0.3rem 0.5rem;          /* Padding interno para separar el texto del borde */
    border-radius: 4px;              /* Bordes redondeados */
    border: 1px solid rgba(255,255,255,0.2); /* Borde sutil */

}

/* Animación de la fecha al hacer hover */
.gallery-carousel-item:hover .gallery-image-date {
    background: rgba(140, 20, 252, 0.6); /* Fondo más intenso */
    transform: translateY(-5px); /* Efecto de elevación */
}


/* ============================== */
/* BOTONES DE NAVEGACIÓN DEL CARRUSEL */
/* ============================== */
.gallery-carousel-btn {
    width: 45px;                     /* Ancho fijo para el botón */
    height: 45px;                    /* Altura fija para el botón */
    background: rgba(255,255,255,0.1); /* Fondo semitransparente */
    border: none;                    /* Sin borde para un diseño limpio */
    border-radius: 50%;              /* Forma circular */
    color: white;                    /* Íconos en color blanco */
    cursor: pointer;                 /* Cursor pointer para indicar interactividad */
    pointer-events: all;             /* Habilita la interactividad, a pesar de estar en un contenedor con pointer-events: none */
    transition: all 0.3s ease;       /* Transición para animar cambios en hover */
    backdrop-filter: blur(4px);      /* Desenfoque de fondo para efecto visual */
}

/* Efecto hover para los botones del carrusel */
.gallery-carousel-btn:hover {
    background: rgba(255,255,255,0.2); /* Cambia el fondo al pasar el cursor */
    transform: scale(1.1);            /* Aumenta ligeramente el tamaño para indicar interacción */
}

/* ============================== */
/* MENSAJE CUANDO NO HAY IMÁGENES  */
/* ============================== */
.gallery-no-images {
    color: #666;                     /* Color de texto gris */
    font-style: italic;              /* Texto en cursiva para destacar el mensaje */
    padding: 2rem;                   /* Espacio interno para separar el mensaje */
    text-align: center;              /* Centrado del mensaje */
    width: 100%;                     /* Ocupa el ancho completo */
}

/* ============================== */
/* EFECTOS DE ARRASTRE EN EL CARRUSEL */
/* ============================== */
.gallery-carousel {
    cursor: grab;                    /* Cursor en forma de mano para indicar que se puede arrastrar */
    user-select: none;               /* Previene la selección de texto durante el arrastre */
    
    transition: cursor 0.4s ease; /* Transición suave para el cursor */
    

}

.gallery-carousel:active {
    cursor: grabbing;                /* Cursor cambia a "grabbing" cuando se está arrastrando */
}

/* ============================== */
/* Añadir scroll con buen diseño */
/* ============================== */
.gallery-carousel::-webkit-scrollbar {
    height: 8px;                     /* Altura de la barra de scroll */
}

.gallery-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); /* Color del thumb de la barra de scroll */
    border-radius: 4px;              /* Bordes redondeados del thumb */
}

.gallery-carousel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5); /* Color del thumb al pasar el cursor */
}

.gallery-carousel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);  /* Color del track de la barra de scroll */
    border-radius: 4px;              /* Bordes redondeados del track */
}

/* ============================== */
/* Modal de gallery */
/* ============================== */
/* =====================
   MODAL GL - ESTILOS PROFESIONALES
   ===================== */
   .modal-gl {
    --modal-accent: #6366f1;
    --modal-bg: #18181b;
    --modal-text: #f4f4f5;
    --modal-border: 1px solid rgba(255, 255, 255, 0.1);
    
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    animation: modal-gl-fadeIn 0.4s cubic-bezier(0.32, 0.72, 0.24, 1);
}

.modal-gl__content {
    background: var(--modal-bg);
    width: min(95%, 680px);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: var(--modal-border);
    transform-origin: center;
    overflow: hidden;
}

.modal-gl__header {
    padding: 1.5rem;
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.1),
        rgba(99, 102, 241, 0.05)
    );
    border-bottom: var(--modal-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-gl__title {
    margin: 0;
    color: var(--modal-text);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.25px;
}

.modal-gl__close {
    background: none;
    border: none;
    color: var(--modal-text);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: grid;
    place-items: center;
}

.modal-gl__close:hover {
    background: rgba(255, 255, 255, 0.05);
}

.modal-gl__close i {
    font-size: 1.25rem;
}

.modal-gl__body {
    padding: 2rem;
    position: relative;
}

.modal-gl__prompt-text {
    background: rgba(0, 0, 0, 0.3);
    color: var(--modal-text);
    padding: 1.5rem;
    border-radius: 12px;
    border: var(--modal-border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.75;
    white-space: pre-wrap;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0 0 1.5rem 0;
}

.modal-gl__prompt-text::-webkit-scrollbar {
    width: 8px;
}

.modal-gl__prompt-text::-webkit-scrollbar-track {
    background: transparent;
}

.modal-gl__prompt-text::-webkit-scrollbar-thumb {
    background: var(--modal-accent);
    border-radius: 4px;
}

.modal-gl__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-gl__copy-btn {
    background: var(--modal-accent);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modal-gl__copy-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
}

.modal-gl__copy-btn:active {
    transform: translateY(0);
}

.modal-gl__copy-btn.success {
    background: #22c55e;
}

@keyframes modal-gl-fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

/* =====================
   BOTÓN EN GALERÍA
   ===================== */
.gallery-image-prompt-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.gallery-image-prompt-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.gallery-image-prompt-btn i {
    font-size: 0.9rem;
}