/* Archivo: fotos/static/css/captmom_base_styles.css */


/* ========================================================================= */
/* --- 1. VARIABLES DE COLOR Y RAÍZ (ROOT) ---                               */
/* ========================================================================= */

:root {
    /* Colores Principales del Branding */
    --vino: #6a053c;        /* Principal: Vino / Borgoña oscuro */
    --morado: #4a2f44;      /* Secundario: Gris-malva */
    --vino-claro: #f2e9d9;  /* Beige para fondo de tarjeta (Color claro principal) */
    --bg-tertiary: #f8f0e3; /* Beige/Crema general y fondos */

    /* Colores de Estado / Énfasis */
    --verde: #388e3c;       /* Éxito/WhatsApp (para botones y estados) */
    --dorado: #d1b100;      /* Advertencia/Oro (para favoritos y alertas) */
    --whatsapp: #25D366;    /* Color verde claro/oficial de WhatsApp para el botón flotante */
    --facebook: #1877f2;    /* Color del botón Facebook */

    /* Colores Específicos de Componentes (Login / Círculos) */
    --coral-icon: #a44a6b;  /* Color de los iconos de campo de formulario de Login */

    /* Colores para los Círculos de Íconos Faltantes (dashboard.html) */
    --pink-circle: #f7d5e0;    /* Color del círculo del corazón (rosa claro) */
    --light-green-circle: #e6f6ee; /* Color del círculo de la galería (verde claro) */
    --light-yellow-circle: #fcf9e6; /* Color del círculo de la estrella (amarillo claro) */
}


/* ========================================================================= */
/* --- 2. BASE DE PÁGINA Y CLASES DE COLOR GLOBALES ---                      */
/* ========================================================================= */

/* Color de fondo general de la página */
body {
    background-color: #fefcf7;
}

/* 2.1. Color Primario (Vino) */
.color-vino {
    color: var(--vino) !important;
}
.bg-vino-claro {
    background-color: var(--vino-claro) !important;
}
.color-vino-claro { /* Para el logo de la cámara en el login (CÓDIGO DIRECTO) */
    color: #f2e9d9 !important;
}

/* 2.2. Color Secundario (Morado) */
.color-morado {
    color: var(--morado) !important;
}

/* FUERZA EL COLOR MORADO EN MODO CLARO para evitar el desbordamiento del blanco. */
h5.color-morado {
    /* Utiliza las variables de su tema para el Morado (el color oscuro original) */
    color: var(--morado) !important;
}

/* 2.3. Color Dorado (Warning) */
.color-dorado {
    color: var(--dorado) !important;
}
.bg-dorado-claro {
    background-color: #fcf9e6 !important;
}

/* 2.4. Color Verde (Success) */
.color-verde {
    color: var(--verde) !important;
}
.bg-verde-claro {
    background-color: #e6f6ee !important;
}

/* 2.5. Color Terciario (Beige/Crema para fondos) */
.bg-tertiary-captmom,
.bg-tertiary-form { /* Usado en el footer y el input-group-text del login */
    background-color: var(--bg-tertiary) !important;
}


/* ========================================================================= */
/* --- 3. ESTILOS DE CÍRCULOS PARA ÍCONOS FALTANTES (Dashboard) ---          */
/* ========================================================================= */

.circle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* 3.1. CÍRCULO ROSA CLARO (CORAZÓN) */
.circle-pink {
    background-color: var(--pink-circle) !important;
}
.circle-pink i {
    color: #cc407c; /* Color del corazón (rosa oscuro) */
}

/* 3.2. CÍRCULO VERDE CLARO (GALERÍA) */
.circle-light-green {
    background-color: var(--light-green-circle) !important;
}
.circle-light-green i {
    color: var(--verde); /* Color del icono de galería (verde) */
}

/* 3.3. CÍRCULO AMARILLO CLARO (ESTRELLA) */
.circle-light-yellow {
    background-color: var(--light-yellow-circle) !important;
}
.circle-light-yellow i {
    color: var(--dorado); /* Color del icono estrella (dorado) */
}


/* ========================================================================= */
/* --- 4. COMPONENTES GENERALES Y TARJETAS (Dashboard) ---                   */
/* ========================================================================= */

/* 4.1. BARRA DE NAVEGACIÓN (base.html) */
.navbar {
    background-color: var(--vino) !important;
}

/* 4.2. Tarjetas (Efecto hover) */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* 4.3. Estilos de Tarjetas Específicas */
.header-card {
    border-radius: 1.5rem !important; /* Tarjeta de encabezado */
}
.card-header-captmom {
    background-color: var(--vino-claro) !important; /* Encabezado de la tarjeta */
}

/* 4.4. Estilos de Precios e Iconos de Paquetes */
.price-badge {
    font-size: 2.25rem;
    font-weight: bold;
}
.package-icon {
    width: 70px;
    height: 70px;
}

/* REGLA CLAVE PARA LA ALINEACIÓN DE BOTONES DE PAQUETES (Flexbox en acción) */
.package-buttons-container {
    /* Empuja los botones hacia la parte inferior de la tarjeta */
    margin-top: auto;
    padding-top: 15px;
}


/* ========================================================================= */
/* --- 5. CLASES DE BOTONES PERSONALIZADOS ---                             */
/* ========================================================================= */

/* 5.1. Botones Primarios (Vino) */
.card-header.bg-primary-custom, /* Aumenta la especificidad para la cabecera del Login */
.btn-primary-custom,
.btn-primary {
    background-color: #6a053c !important; /* BORDEAUX DIRECTO */
    border-color: #6a053c !important;
    color: white;
}
.btn-primary:hover,
.btn-primary-custom:hover {
    background-color: #4a032d !important;
    border-color: #4a032d !important;
    color: #d1b100; /* Color amarillo-dorado al pasar el ratón */
}

/* Botones Outlines Primarios */
.btn-outline-primary-custom {
    color: var(--vino);
    border-color: var(--vino);
}
.btn-outline-primary-custom:hover {
    background-color: var(--vino);
    color: white;
}

/* 5.2. Botones Success (Verde) */
.btn-success,
.btn-success-custom {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: white;
}
.btn-success:hover,
.btn-success-custom:hover {
    background-color: #2e7d32 !important;
    border-color: #2e7d32 !important;
}

/* Botones Outlines Success */
.btn-outline-success-custom {
    color: var(--verde);
    border-color: var(--verde);
}
.btn-outline-success-custom:hover {
    background-color: var(--verde);
    color: white;
}

/* 5.3. Botones Warning (Dorado) */
.btn-warning-custom {
    background-color: var(--dorado);
    color: white;
    border-color: var(--dorado);
}
.btn-warning-custom:hover {
    background-color: #c29f00;
    border-color: #c29f00;
}

/* Botones Outlines Warning */
.btn-outline-warning-custom {
    color: var(--dorado);
    border-color: var(--dorado);
}
.btn-outline-warning-custom:hover {
    background-color: var(--dorado);
    color: white;
}

/* 5.4. Botones Secundarios (eventos_viewer, paginación) */
.btn-secondary-custom {
    background-color: var(--vino-claro);
    color: var(--morado);
    border-color: var(--vino-claro);
}
.btn-secondary-custom:hover {
    background-color: #e6e0d4;
    color: var(--morado);
    border-color: #e6e0d4;
}


/* ========================================================================= */
/* --- 6. ESTILOS ESPECÍFICOS DE LOGIN.HTML ---                            */
/* ========================================================================= */

/* 6.1. Altura mínima del contenedor para centrar el formulario */
.min-vh-75 {
    min-height: 75vh;
}

/* 6.2. Bordes redondeados específicos del formulario */
.rounded-4 {
    border-radius: 1rem !important;
}
.rounded-top-4 {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
.rounded-bottom-4 {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* 6.3. Icono de campo de formulario */
.color-coral {
    color: var(--coral-icon) !important;
}

/* 6.4. Focus de los Inputs */
.input-group .input-focus-custom:focus,
.input-focus-custom:focus {
    box-shadow: 0 0 0 0.2rem rgba(106, 5, 60, 0.25);
    border-color: var(--coral-icon);
}

/* 6.5. Botones de Redes Sociales */
.btn-icon-small {
    width: 45px;
    height: 45px;
}
.btn.rounded-circle:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Facebook */
.btn-facebook-custom {
    background-color: var(--facebook);
    color: white;
}
.btn-facebook-custom:hover,
.btn-facebook-custom:hover i {
    background-color: #1565c0 !important;
    color: white !important;
}

/* WhatsApp */
.btn-whatsapp-custom {
    background-color: var(--whatsapp);
    color: white;
}
.btn-whatsapp-custom:hover,
.btn-whatsapp-custom:hover i {
    background-color: #128C7E !important;
    color: white !important;
}


/* ========================================================================= */
/* --- 7. GALERÍA (eventos_viewer) ---                                     */
/* ========================================================================= */

/* 7.1. Contenedor y Tarjetas */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px 0;
}
.photo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.photo-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* 7.2. Miniaturas */
.thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
}
.video-thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
}

/* 7.3. Elementos Internos de las Tarjetas */
.photo-card h5 { /* Título del video en la galería */
    color: var(--vino);
    font-size: 1rem;
    margin-top: 10px;
}
.separator-bar {
    width: 80%;
    margin: 50px auto;
    border-top: 3px solid var(--vino);
    opacity: 0.5;
}


/* 7.4. Botón de Favorito en Miniatura */
.photo-card .favorite-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
/* Checkbox de selección */
.photo-card .photo-checkbox {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
}
/* Contenedor de descarga de archivo (Si aplica) */
.photo-card .file-download-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}


/* 7.5. Overlay de Video de YouTube (Icono Play) */
.photo-card .video-link-overlay {
    position: relative;
    display: block;
    line-height: 0;
}
.photo-card .video-link-overlay::after {
    content: "\f144"; /* Código del icono de Font Awesome (fa-play-circle) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: color 0.2s;
    pointer-events: none;
}
.photo-card .video-link-overlay:hover::after {
    color: rgba(255, 255, 255, 1);
}


/* ========================================================================= */
/* --- 8. LIGHTBOX (VISOR) ---                                               */
/* ========================================================================= */

/* 8.1. Contenedor Principal (Modal/Visor) */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Contenido (Imagen/Video) */
.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* 8.1.5. Control de Transición del Diaporama (Fundido/Fade) */

/* Transición RÁPIDA por defecto: utilizada para la navegación manual (0.1s) */
/* Aplicada a los elementos media para todas las transiciones */
#lightboxImage, #lightboxVideo {
    transition: opacity 0.1s ease-in-out;
    opacity: 1; /* Asegura que los medios sean visibles por defecto */
}

/* Transición LENTA: utilizada únicamente cuando el Diaporama está activo (0.5s) */
#lightboxImage.slow-transition, #lightboxVideo.slow-transition {
    transition: opacity 0.5s ease-in-out;
}

/* Estado de ocultación (utilizado para el fundido de salida - fade-out) */
/* La opacidad se establece en 0 para ocultar el elemento. */
#lightboxImage.fade-out, #lightboxVideo.fade-out {
    opacity: 0 !important;
}

/* Estado de visualización (utilizado para el fundido de entrada - fade-in) */
/* La opacidad se restablece a 1 para mostrar el elemento. */
#lightboxImage.fade-in, #lightboxVideo.fade-in {
    opacity: 1 !important;
}

/* 8.2. Controles (Cierre y Navegación) */
.close-btn, .nav-btn {
    position: absolute;
    color: white;
    /* font-size y padding se definen en las reglas específicas de abajo */
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    z-index: 10003;
}
/* Posicionamiento específico */
.lightbox .close-btn {
    top: 6px;       /* 🎯 Ajuste de altura final (mejor que 0px) */
    right: 10px;    /* 10px desde el borde derecho */
    font-size: 32px; /* 🎯 Tamaño reducido para armonizar con botones de acción */
    padding: 5px;   /* Pequeño padding para área de click */
}
.nav-btn.prev, .nav-btn.next {
    font-size: 40px; /* Tamaño por defecto para Desktop */
    padding: 10px 15px; /* Padding de navegación */
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical perfecto */
}
.nav-btn.prev {
    left: 20px;
}
.nav-btn.next {
    right: 20px;
}


/* 8.3. Controles Específicos (Favoritos, Descarga, Filtro) */

/* Clase base para los botones de acción (Descarga, Favorito, etc.) */
.lightbox-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

/* Estilo de los iconos (Desktop) */
.lightbox-btn i {
    font-size: 26px; /* Tamaño final de los iconos de acción en Desktop */
    color: white;
    /* Sombra para mejorar la visibilidad sobre cualquier fondo */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.8);
    padding: 5px; /* Añade zona de clic alrededor del icono */
}

/* 🎯 NUEVO: Contenedores de Grupo de Acciones (Aplicación en todos los tamaños de pantalla) */
.lightbox-actions-group {
    position: absolute;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;           /* Espaciado estándar entre los botones */
    top: 20px;           /* Posicionamiento por defecto */
}

/* Posicionamiento del Grupo Izquierdo (Favoritos, Filtro, Marco) */
#lightbox-actions-left {
    left: 20px;
}

/* Posicionamiento del Grupo Derecho (Diaporama, Descarga) */
#lightbox-actions-right {
    right: 60px; /* Deja espacio para la cruz de cierre (32px + 5px padding + 5px right = 42px. Usamos 60px de seguridad) */
}

/* Estilo específico para el Favorito activo (Dorado) */
.lightbox-btn i.text-warning,
.lightbox-btn i.fa-star.text-warning {
    color: var(--dorado) !important;
}

/* Efecto de sobrevuelo */
.lightbox-btn:hover i {
    opacity: 0.8;
}

.lightbox-btn i.fa-star.text-muted {
    /* Utiliza un blanco semi-transparente (20% de opacidad) para el efecto 'invisible/discreto' */
    color: rgba(255, 255, 255, 0.2) !important;
    text-shadow: none !important; /* Retira la sombra para que parezca inactivo/transparente */
}

/* ----------------------------------------------------------- */
/* 8.4. Teléfonos Portrait (Máxima Compactación Moderada)       */
/* Dispositivos de ancho <= 768px en modo vertical.            */
/* ----------------------------------------------------------- */
@media (max-width: 768px) and (orientation: portrait) {

    /* Botones de cierre y navegación */
    .nav-btn.prev, .nav-btn.next { font-size: 30px; }
    .lightbox .close-btn {
        top: 0px;
        right: 5px;
        font-size: 40px;
        line-height: 1;
    }

    /* Compactación de los grupos de acciones */
    .lightbox-actions-group {
        top: 12px; /* Sube los grupos para el alineamiento con la cruz */
        gap: 10px; /* Espaciado moderado */
    }

    #lightbox-actions-right {
        right: 45px; /* Espacio para la cruz */
    }

    /* Reducción de la talla de los iconos */
    .lightbox-btn i {
        font-size: 22px;
        padding: 3px;
    }
}

/* ----------------------------------------------------------- */
/* 8.6. Tabletas Portrait (Compactación Ligera)                */
/* Ancho entre 769px y 1280px en modo vertical.                */
/* Mucho espacio horizontal; solo ajuste visual.               */
/* ----------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1280px) and (orientation: portrait) {

    /* La cruz de cierre desciende ligeramente */
    .lightbox .close-btn {
        top: 0px;
        right: 15px;
        font-size: 42px;
        line-height: 1;
    }

    /* Los grupos de acciones bajan y se separan ligeramente */
    .lightbox-actions-group {
        gap: 12px;
        top: 10px;
    }

    #lightbox-actions-right {
        right: 55px; /* Espacio de seguridad amplio */
    }

    /* Íconos con tamaño ligeramente reducido */
    .lightbox-btn i {
        font-size: 24px;
        padding: 4px;
    }
}


/* ----------------------------------------------------------- */
/* 8.7. Tabletas Paisaje (Compactación Moderada/Fuerte)        */
/* Ancho max 1280px en modo horizontal.                        */
/* Escenario crítico por la falta de altura.                   */
/* ----------------------------------------------------------- */
@media (max-width: 1280px) and (orientation: landscape) {

    /* La cruz de cierre sube un poco */
    .lightbox .close-btn {
        top: 0px;
        right: 10px;
        font-size: 40px;
        line-height: 1;
    }

    /* Subir y compactar los grupos de acciones */
    .lightbox-actions-group {
        top: 12px;
        gap: 8px;
    }

    #lightbox-actions-right {
        right: 45px; /* Espacio más compacto para la cruz */
    }

    /* Reducción de la talla de los iconos */
    .lightbox-btn i {
        font-size: 22px;
        padding: 3px;
    }
}


/* ========================================================================= */
/* --- 9. FILTROS DE IMAGEN (LightBox y Miniaturas) ---                      */
/* ========================================================================= */

/* Filtro Blanco y Negro */
.grayscale {
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;
}

/* Filtro Sepia */
.sepia {
    filter: sepia(100%);
    transition: filter 0.5s ease-in-out;
}


/* ========================================================================= */
/* --- 10. MARCO MADERA NOGAL ---                                            */
/* ========================================================================= */

/* Contenedor del marco */
.frame-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    transition: padding 0.3s ease;
    z-index: 10001;
}

/* Asegurar que la imagen/video permanezca dentro de los límites */
.frame-container .lightbox-content {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Marco de madera nogal activado */
.frame-container.with-frame {
    padding: 60px;
    background:
        /* Textura de madera fina */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(0,0,0,0.05) 1px,
            rgba(0,0,0,0.05) 2px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 35px,
            rgba(0,0,0,0.03) 35px,
            rgba(0,0,0,0.03) 70px
        ),
        /* Vetas más pronunciadas */
        radial-gradient(ellipse at 15% 25%, rgba(0,0,0,0.15) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(0,0,0,0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 45% 85%, rgba(0,0,0,0.10) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 20%, rgba(0,0,0,0.08) 0%, transparent 35%),
        /* Color nogal auténtico #6c451c */
        linear-gradient(135deg,
            #5a3617 0%,    /* Nogal oscuro */
            #6c451c 15%,   /* Nogal base */
            #7d5423 30%,   /* Nogal claro */
            #6c451c 45%,   /* Nogal base */
            #5a3617 60%,   /* Nogal oscuro */
            #7d5423 75%,   /* Nogal claro */
            #6c451c 90%,   /* Nogal base */
            #5a3617 100%   /* Nogal oscuro */
        );
    box-shadow:
        /* Sombras externas profundas */
        0 25px 70px rgba(0,0,0,0.8),
        0 15px 40px rgba(0,0,0,0.6),
        /* Bisel exterior superior (luz) */
        inset 4px 4px 0 rgba(255,255,255,0.12),
        /* Bisel exterior inferior (sombra) */
        inset -4px -4px 0 rgba(0,0,0,0.5),
        /* Relieve interno */
        inset 8px 8px 15px rgba(0,0,0,0.4),
        inset -8px -8px 15px rgba(255,255,255,0.06),
        /* Textura general */
        inset 0 0 40px rgba(0,0,0,0.35);
    border-radius: 3px;
}

/* Ajustar la imagen/video cuando el marco está activo */
.frame-container.with-frame .lightbox-content {
    max-width: calc(90vw - 120px);
    max-height: calc(90vh - 120px);
}

/* Borde interior dorado */
.frame-container.with-frame::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 1px solid rgba(184, 134, 11, 0.3);
    pointer-events: none;
    box-shadow:
        0 0 10px rgba(184, 134, 11, 0.2),
        inset 0 0 5px rgba(184, 134, 11, 0.15);
}

/* Detalles esculpidos */
.frame-container.with-frame::after {
    content: '';
    position: absolute;
    top: 42px;
    left: 42px;
    right: 42px;
    bottom: 42px;
    border: 8px solid;
    border-image: linear-gradient(
        135deg,
        rgba(125, 84, 35, 0.9) 0%,   /* Nogal claro (arriba-izquierda) */
        rgba(90, 54, 23, 0.9) 25%,   /* Nogal oscuro */
        rgba(108, 69, 28, 0.9) 50%,  /* Nogal base #6c451c */
        rgba(90, 54, 23, 0.9) 75%,   /* Nogal oscuro */
        rgba(125, 84, 35, 0.9) 100%  /* Nogal claro (abajo-derecha) */
    );
    border-image-slice: 1;
    pointer-events: none;
    box-shadow:
        /* Sombra profunda del bisel interno */
        inset 0 4px 8px rgba(0,0,0,0.5),
        inset 0 -4px 8px rgba(255,255,255,0.08),
        /* Relieve lateral */
        inset 4px 0 8px rgba(0,0,0,0.4),
        inset -4px 0 8px rgba(255,255,255,0.06);
}

/* Responsive Móvil */
@media (max-width: 768px) {
    .frame-container.with-frame {
        padding: 40px;
    }

    .frame-container.with-frame .lightbox-content {
        max-width: calc(90vw - 80px);
        max-height: calc(90vh - 80px);
    }

    .frame-container.with-frame::before {
        top: 35px;
        left: 35px;
        right: 35px;
        bottom: 35px;
    }

    .frame-container.with-frame::after {
        top: 30px;
        left: 30px;
        right: 30px;
        bottom: 30px;
    }
}

/* Estilo del botón de marco activo */
.lightbox-btn.frame-active i {
    color: #6c451c !important;
}


/* ========================================================================= */
/* --- 11. CORRECCIONES Y AJUSTES MÓVILES (Media Queries) ---                */
/* ========================================================================= */

/* 11.1. AJUSTE PARA MÓVIL (eventos_viewer: 3 MINIATURAS CUADRADAS POR LÍNEA) */
@media (max-width: 768px) {
    /* 1. Fuerza a la cuadrícula a tener solo tres columnas iguales */
    .gallery-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px; /* Reduce un poco el espaciado en móvil */
        padding: 10px 0;
    }

    /* 2. Fuerza la relación de aspecto 1:1 (cuadrado) para las miniaturas */
    .thumbnail {
        width: 100%;
        /* Importante para ignorar la altura fija previa de 150px */
        height: auto;
        /* Fuerza una relación Alto/Ancho de 1/1 */
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* 3. Ajusta la tarjeta para contener el aspecto cuadrado */
    .photo-card {
        height: auto;
    }

    /* 4. El contenedor de los iconos (Favorito/Checkbox) se ajusta al nuevo tamaño */
    .photo-card .favorite-photo-btn,
    .photo-card .photo-checkbox {
         top: 5px;
    }
}

/* 11.2. AJUSTES DE MODAL PARA TELÉFONO HORIZONTAL Y TABLETA VERTICAL */
/* Criterio: Breakpoint entre 668px y 1024px */
@media (min-width: 668px) and (max-width: 1024px) {
    .custom-select-modal {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.4rem !important;
        max-width: 100px !important;
    }
}


/* ========================================================================= */
/* --- 12. PESTAÑAS ROTATORIAS (PAQUETES COMERCIALES) ---                   */
/* ========================================================================= */

/* Estilos de Pestañas Base */
.nav-pills .nav-link {
    background-color: transparent;
    color: var(--vino);
    border: 1px solid var(--vino);
    margin-right: -1px;
    transition: all 0.3s ease;
    position: relative;
}

/* Estilo de Pestaña Activa */
.nav-pills .nav-link.active {
    background-color: var(--vino) !important;
    color: white !important;
    border-color: var(--vino) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Retiro de esquinas para dar un aspecto continuo */
.nav-pills .nav-item:first-child .nav-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.nav-pills .nav-item:last-child .nav-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.nav-pills .nav-item:not(:first-child):not(:last-child) .nav-link {
    border-radius: 0;
}

/* 12.1. Indicador de Progreso (Animación) */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--dorado);
    width: 0%;
}

.nav-link.active::after {
    animation: progressBar 5s linear;
}

@keyframes progressBar {
    from { width: 0%; }
    to { width: 100%; }
}

/* Pausa de la animación al pasar el cursor sobre los contenedores */
#tab-container:hover .nav-link.active::after,
#categoryTabsContent:hover .nav-link.active::after {
    animation-play-state: paused;
}


/* ========================================================================= */
/* --- 13. BOTÓN FLOTANTE DE WHATSAPP ---                                    */
/* ========================================================================= */

/* Animación para llamar la atención del usuario */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); /* Verde WhatsApp */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp-float {
    /* Posicionamiento */
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    z-index: 99999 !important;

    /* Tamaño y Forma */
    width: 40px !important;
    height: 40px !important;
    border-radius: 40px !important; /* Círculo perfecto */

    /* Color y Apariencia */
    background-color: var(--whatsapp) !important;
    color: #FFF !important;
    text-align: center !important;
    font-size: 24px !important;
    box-shadow: 2px 2px 3px #999 !important;

    /* Centrado del icono */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    /* Animación y Transición */
    text-decoration: none !important;
    animation: pulse 2s infinite !important;
    transition: transform 0.3s ease !important;
}

.whatsapp-float:hover {
    color: #FFF !important;
    text-decoration: none !important;
    transform: scale(1.1) !important; /* Agrandamiento al pasar el cursor */
    animation: none !important; /* Detiene la animación */
}


/* ========================================================================= */
/* --- 14. CORRECCIONES FINALES DE SUBRAYADO Y TEXTO ---                     */
/* ========================================================================= */

/* A. CORRECCIÓN DEL LOGO (navbar-brand) */
.navbar.navbar-dark .navbar-brand {
    text-decoration: none !important; /* Anula el subrayado por defecto */
}
/* Asegura que el texto dentro del enlace tampoco tenga subrayado */
.navbar.navbar-dark .navbar-brand span {
    text-decoration: none !important;
}
.navbar-dark .navbar-brand:hover {
    text-decoration: none !important;
    opacity: 0.85;
}

/* B. CORRECCIÓN DEL ÍCONO WHATSAPP */
.whatsapp-float i {
    text-decoration: none !important;
}

/* C. ESTILOS DE BARRA DE ACCIONES (Mobile / Desktop) */

/* Botones principales de la barra de acciones */
.actions-bar .action-btn {
    min-width: 210px;
}
/* Comportamiento por defecto: mostrar texto largo, ocultar corto */
.btn-text-long {
    display: inline;
}
.btn-text-short {
    display: none;
}

@media (max-width: 768px) {
    .actions-bar .action-btn {
        width: 95%;
        min-width: unset;
    }
    .actions-bar .action-buttons-container {
       padding: 0 10px 0 23px;
    }
}

/* Móvil horizontal Y tablets en portrait: texto corto */
@media (max-width: 1024px) and (orientation: landscape) {
    .actions-bar .action-btn {
        width: auto;
        min-width: 210px;
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
    }
    /* Mostrar texto corto, ocultar texto largo */
    .btn-text-long {
        display: none;
    }
    .btn-text-short {
        display: inline;
    }
     #printModal .modal-dialog {
        max-width: 85% !important;
        width: 85% !important;
        margin: 1.75rem auto;
    }
}

/* Tables en vertical */

@media (min-width: 769px) and (max-width: 1024px) {

    /* 💡 El correctivo: El diálogo del modal toma el 85% del ancho de la pantalla */
    #printModal .modal-dialog {
        max-width: 85% !important;
        width: 85% !important;
        margin: 1.75rem auto;
    }

    /* Estructura de la fila con justificación entre foto y selects */
    #modal-photo-list .photo-item-row {
        display: flex;
        gap: 1rem;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between; /* Espacio entre foto y selects */
    }

    /* Foto con ancho FIJO alineada a la izquierda */
    #modal-photo-list .photo-item-row img {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        object-fit: cover;
    }

    /* Selects alineados a la derecha con ancho fijo */
    #modal-photo-list .photo-options-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 300px; /* 👉 AMPLIADO: era 250px, ahora 300px */
        flex-shrink: 0; /* No se encoge */
        align-items: flex-end; /* Alinea el contenido a la derecha */
    }

    /* 2. Uniformidad de los campos de selección */
    #modal-photo-list select,
    #modal-photo-list .custom-select-modal {
        width: 100%;
    }

    /* 3. Estilo de los botones de acción (Conserva el min-width de 210px) */
    .actions-bar .action-btn {
        width: auto;
        min-width: 210px;
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
    }

    /* Mostrar texto corto, ocultar texto largo */
    .btn-text-long {
        display: none;
    }
    .btn-text-short {
        display: inline;
    }
}

/* ========================================================================= */
/* --- 15. MODAL COTIZACIÓN (Estructura y Responsividad) ---                 */
/* ========================================================================= */

/* 15.1. Estilos de Base */

/* Estilo personalizado de los Selects (sin Bootstrap) */
.custom-select-modal {
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    /* (Se mantiene la flecha nativa) */
}

/* Correcciones de elementos molestos (checkboxes y decoraciones) */
#modal-photo-list .custom-select-modal::before,
#modal-photo-list .custom-select-modal::after,
#modal-photo-list select::before,
#modal-photo-list select::after,
#modal-photo-list *::before,
#modal-photo-list *::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

#modal-photo-list input[type="checkbox"],
#modal-photo-list input[type="radio"] {
    display: none !important;
}

#modal-photo-list > div {
    list-style: none !important;
}

/* Estructura de la línea de la foto (div principal) */
#modal-photo-list .photo-item-row { /* Renombrado para coincidir con JS */
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
}

/* Miniatura */
#modal-photo-list .photo-item-row img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Contenedor de Selects (corregido de photo-info) */
#modal-photo-list .photo-options-group {
    /* Flex-grow-1 y gap: 2 se gestionan con clases de Bootstrap */
}

/* 15.2. Comportamiento */
@media (max-width: 768px) {
    /* Retirar la cuadrícula para volver a un modo de lista vertical */
    #modal-photo-list {
        display: block;
        /* En móviles, la lista debe apilarse verticalmente (display: block es suficiente) */
        gap: 10px;
    }

    /* Estructura de la fila: Foto a la izquierda, opciones a la derecha (horizontal) */
    #modal-photo-list .photo-item-row {
        display: flex;
        flex-direction: row; /* Coloca la foto y las opciones lado a lado */
        align-items: flex-start; /* Alinea los ítems al inicio de la línea */
        gap: 0.75rem;
        padding: 0.75rem;
    }

    /* Miniatura: Define un tamaño fijo para que no ocupe todo el ancho */
    #modal-photo-list .photo-item-row img {
        width: 70px;
        height: 70px;
        flex-shrink: 0; /* Asegura que la imagen no se encoja */
        margin: 0;
    }

    /* Contenedor de Selects: Debe tomar el espacio restante y apilar sus contenidos */
    #modal-photo-list .photo-options-group {
        width: auto;
        flex-grow: 1; /* Permite que este contenedor use todo el espacio a la derecha */
        display: flex;
        flex-direction: column; /* Apila los selects verticalmente (uno debajo del otro) */
        gap: 0.5rem;
        align-items: flex-end;
        text-align: left; /* Asegura que el texto y los selects no estén centrados */
    }

    /* Asegura que los selects usen el 100% del ancho de su contenedor (photo-options-group) */
    #modal-photo-list select,
    #modal-photo-list .custom-select-modal {
        width: 100%;
        max-width: 130px;
    }

}


/* ========================================================================= */
/* --- 16. MENSAJE FLOTANTE DE DESCARGA DENEGADA (Lightbox) ---              */
/* ========================================================================= */

/* 16.1. ESTILOS DE BASE Y POSICIONAMIENTO */
#download-denied-message {
    /* Posicionamiento al centro de la Lightbox */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Clave para el centrado perfecto */
    z-index: 100; /* Asegura que esté encima de la imagen/video */
    pointer-events: none; /* Crucial: permite pasar clics a la imagen y botones */

    /* Estilos de Texto */
    font-size: 1.2rem;
    color: red; /* Color de advertencia visible */
    text-shadow: 1px 1px 3px black; /* Sombra para asegurar la legibilidad */
    padding: 10px;

    /* Configuración por defecto: INVISIBLE */
    opacity: 0;
    transition: opacity 0.3s;
    visibility: hidden; /* Oculta el elemento completamente cuando está inactivo */
}

/* Ajuste de fuente para móviles */
@media (max-width: 767px) {
    #download-denied-message {
        font-size: 0.8rem;
    }
}

/* 16.2. VISIBILIDAD CONDICIONAL (Activación por JS) */

/* Regla A: MOSTRAR el mensaje (Lightbox abierta Y permiso denegado) */
#myLightbox.active #download-denied-message.access-denied {
    visibility: visible;
    opacity: 1; /* Hacemos el texto visible */
}

/* Regla B: Ocultar el mensaje (Descarga Autorizada) */
#myLightbox.active #download-denied-message.access-granted {
    visibility: hidden; /* Mantiene el elemento invisible */
    opacity: 0; /* Mantiene el texto transparente */
}


/* ========================================================================= */
/* --- 99. REGLAS DEL MODO OSCURO (Adaptación del Sistema: prefers-color-scheme: dark) --- */
/* ========================================================================= */

@media (prefers-color-scheme: dark) {

    /* --- COLORES DE FONDO GENERALES Y TEXTO --- */

    /* 1. Body: Inversión del Beige claro (#fefcf7) a Gris oscuro */
    body {
        background-color: #121212; /* Fondo muy oscuro */
        color: #e0e0e0; /* Texto claro */
    }

    /* 2. Texto predeterminado (títulos) */
    h1, h2, h3, h4, h5, h6, .fw-bold {
        color: #ffffff !important;
    }

    /* 3. Textos Apagados (text-muted) */
    .text-muted {
        color: #9a9a9a !important;
    }

    /* 4. Enlaces normales */
    a {
        color: #b0b0b0;
    }

    /* --- INVERSIÓN DE COLORES DE MARCA / UTILITARIOS --- */

    /* 5. Inversión del Vino-Claro (#f2e9d9) y del bg-tertiary-captmom */
    /* Estos fondos claros se vuelven oscuros para alto contraste */
    .bg-vino-claro,
    .bg-tertiary-captmom,
    .bg-tertiary-form {
        background-color: #2c2020 !important; /* Un Gris-Vino oscuro */
        color: #f2e9d9 !important; /* Asegura que el texto sobre este fondo sea claro */
    }
    .color-vino-claro {
        /* Se mantiene como color claro para contraste (usado en el logo) */
        color: #f2e9d9 !important;
    }

    /* 6. Inversión de los fondos Claros de Colores de Estado (Dorado, Verde) */
    .bg-dorado-claro {
        /* Sustitución de fondos muy claros por oscuros para contraste */
        background-color: #282800 !important; /* Gris oscuro para el Dorado */
    }
    .bg-verde-claro {
         background-color: #1f3e21 !important; /* Gris oscuro para el Verde */
    }

    /* --- COMPONENTES BASE Y TARJETAS --- */

    /* 7. Tarjetas (Cards): Inversión del Blanco a Gris oscuro */
    .card,
    .modal-content,
    .bg-white,
    #modal-photo-list .photo-item-row {
        background-color: #1e1e1e !important;
        border: 1px solid #333333 !important;
        box-shadow: none !important; /* Elimina las sombras oscuras en fondos oscuros */
    }
    .hover-card:hover {
        /* Asegura que la sombra sea visible, pero discreta */
        box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1) !important;
    }
    .card-header-captmom {
        /* Usa .bg-vino-claro, pero asegura que el texto sea claro */
        color: white !important;
    }

    /* 8. Separador de Galería */
    .separator-bar {
        border-top-color: #333333;
        margin-bottom: 2px;
    }

    /* --- BARRA DE NAVEGACIÓN Y LIGHTBOX --- */

    /* 9. Barra de Navegación (Navbar) */
    .navbar {
        /* Mantiene el Vino (#6a053c) o lo oscurece ligeramente */
        background-color: #5c0434 !important;
    }

    /* 10. Lightbox: El fondo ya es oscuro (rgba(0,0,0,0.9)), no requiere cambio */

    /* 11. Paginación: Asegura que el enlace de paginación sea visible */
    .pagination .page-link {
        background-color: #1e1e1e;
        border-color: #333333;
        color: #e0e0e0;
    }
    .pagination .page-item.active .page-link {
        /* Mantiene el color Vino para el enlace activo */
        background-color: var(--vino) !important;
        color: white !important;
        border-color: var(--vino) !important;
    }

    /* --- FORMULARIOS E INPUTS (Login) --- */

    /* 12. Inputs de Formulario: se vuelven oscuros */
    .form-control,
    .custom-select-modal {
        background-color: #282828 !important; /* Fondo de input oscuro */
        border-color: #555555 !important;
        color: #e0e0e0 !important;
    }
    .input-group .input-focus-custom:focus,
    .input-focus-custom:focus {
        /* La sombra de enfoque usa el color Vino (#6a053c), lo cual es correcto */
        box-shadow: 0 0 0 0.2rem rgba(106, 5, 60, 0.5) !important;
    }
    /* El ícono de formulario (coral-icon) se aclara ligeramente */
    .color-coral {
        color: #d17592 !important; /* Aclarar el coral para contraste */
    }

    /* --- BOTONES --- */

    /* 13. Botones Outlines: Invertir para que tengan fondo oscuro y texto claro */
    .btn-outline-primary-custom,
    .btn-outline-success-custom,
    .btn-outline-warning-custom {
        background-color: transparent;
        color: #e0e0e0 !important; /* Texto claro */
    }
    /* Mantener los colores de borde para identificación */
    .btn-outline-primary-custom { border-color: var(--vino); }
    .btn-outline-success-custom { border-color: var(--verde); }
    .btn-outline-warning-custom { border-color: var(--dorado); }

    /* Hover de botones outlines */
    .btn-outline-primary-custom:hover {
        background-color: var(--vino) !important;
        color: white !important;
    }

    /* Botones Secundarios (basados en vino-claro) */
    .btn-secondary-custom {
        background-color: #3c2a38 !important; /* Gris-malva oscuro para el fondo */
        color: #f2e9d9 !important;
        border-color: #3c2a38 !important;
    }
    .btn-secondary-custom:hover {
        background-color: #4a2f44 !important;
        color: #ffffff !important;
        border-color: #4a2f44 !important;
    }

    /* --- CORRECCIONES FINALES DE ELEMENTOS --- */

    /* 14. CORRECCIÓN DEL TÍTULO DE INICIO DE SESIÓN ("Acceso a tus Galerías Privadas") */
    h5.color-morado {
        color: #ffffff !important;
    }
    h5.color-morado i.fa-lock {
        color: #ffffff !important;
    }

    /* 15. CORRECCIÓN ESPECÍFICA DEL FONDO DEL ENCABEZADO DE TARJETA DE EVENTO */
    .card-header-captmom {
        background-color: #2c2020 !important; /* Gris-Vino oscuro */
        border-bottom: 1px solid #333333 !important; /* Assure une séparation avec le corps de la carte */
        color: #f2e9d9 !important; /* Assure que le texte du título hérité est claro */
    }

    /* 16. CORRECCIÓN DEL ÍCONO DE CIERRE DE LA MODAL (La "X" negra) */
    .btn-close {
        filter: invert(100%) brightness(150%); /* Hace que el ícono (que es negro) se vuelva blanco */
        opacity: 0.8 !important;
    }

    /* 17. CORRECCIÓN DE FONDOS DE MENSAJES DE ALERTA (Modales de Cotización/Contacto) */
    .alert-success,
    .alert-info,
    .alert {
        background-color: #1f3e21 !important; /* Gris oscuro para éxito/info */
        color: #e0e0e0 !important;
        border-color: #2e7d32 !important;
    }
    .alert-warning {
        background-color: #282800 !important; /* Gris oscuro para advertencia */
        color: #e0e0e0 !important;
        border-color: #d1b100 !important;
    }

    /* 18. CORRECCIÓN DE LABELS DE FORMULARIO (Nombre de Usuario, Contraseña) */
    /* Label con las clases form-label y color-morado para anular el color oscuro de base. */
    label.form-label.color-morado {
        color: #ffffff !important;
    }

    /* 19. CORRECCIÓN DE BORDES DEL BLOQUE DE ÍCONO (INPUT-GROUP-TEXT) */
    .input-group-text {
        /* Asegurar que la bordura lateral del bloque de ícono sea visible */
        border-color: #555555 !important;
        /* Fondo igual al input para uniformidad */
        background-color: #282828 !important;
    }

    /* 20. CORRECCIÓN DEL FONDO DEL TEXTO DEL SEPARADOR (que era blanco) */
    .rompecabezas-header .text-content {
        /* El fondo blanco se cambia a gris oscuro (color de su tarjeta/modal) */
        background-color: #1e1e1e !important;
    }

    /* 21. CORRECCIÓN DEL COLOR DE LAS LÍNEAS DEL SEPARADOR */
    .rompecabezas-header.separator-text::before,
    .rompecabezas-header.separator-text::after {
        /* Aclarar las líneas para que sean visibles sobre el fondo oscuro */
        background-color: #555555 !important;
    }

    /* 22. CORRECCIÓN DEL COLOR DEL TEXTO DEL SEPARADOR (si el título sigue oscuro) */
    .rompecabezas-header.separator-text {
        /* Fuerza el color del texto a blanco puro o al color de texto principal claro */
        color: #9a9a9a !important;
    }

    /* 23. CORRECCIÓN DEL CONTENEDOR DE LA IMAGEN DEL ROMPECABEZAS */
    .puzzle-image-container {
        /* Hacer el borde/sombra más sutil y visible */
        box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1) !important;
    }
    .puzzle-image-container:hover {
        box-shadow: 0 6px 10px rgba(255, 255, 255, 0.2) !important;
    }

    /* 24. CORRECCIÓN DEL BOTÓN 'Jugar' del Rompecabezas */
    .puzzle-play-link {
        /* Inversión: Oscurecer ligeramente el color de fondo para mantener la estética oscura */
        background-color: rgba(106, 5, 60, 0.7) !important; /* Vino con menos opacidad */
        color: #f2e9d9 !important; /* Texto claro */
    }
    .puzzle-play-link:hover {
        background-color: #6a053c !important; /* Vino completo al pasar el ratón */
    }

    /* 25. CORRECCIÓN DEL MENSAJE DE SUCCESO (¡Terminaste el rompecabezas!) */
    #puzzle-success-message {
        /* El fondo blanco se cambia a gris oscuro (color de su tarjeta/modal) */
        background: #1e1e1e !important;
        /* Asegura que el borde es visible y armoniza */
        border: 1px solid #333333 !important;
        /* Sombra clara */
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
    }

    /* 26. CORRECCIÓN DEL TEXTO DENTRO DEL MENSAJE DE SUCCESO */
    #puzzle-success-message h2,
    #puzzle-success-message .lead {
        /* El texto oscuro se reemplaza por blanco/claro */
        color: #ffffff !important;
    }

    /* 27. CORRECCIÓN DE BORDES Y FONDO DE LA PESTAÑA ACTIVA EN MODAL (del juego) */
    #puzzle-container {
        /* Asegurar que el borde del contenedor del puzzle sea visible */
        border: 2px solid #555555 !important;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
    }

    /* 28. CORRECCIÓN DE LAS PIEZAS DEL PUZZLE */
    .puzzle-tile {
        /* Aclarar ligeramente el borde de separación entre las piezas */
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .puzzle-tile.selected {
        /* Mantener el color de selección visible */
        border: 3px solid #00aaff !important; /* Azul más claro */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    }
}