/* assets/css/components/modal.css */

/* --------------------------------------------------
   ESTILOS BASE PARA MODALES
   - Se complementan con reglas específicas en cart.css, etc.
--------------------------------------------------- */

/* Contenedor del modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 12000; /* Suficientemente alto para estar sobre el sidebar (si está en ~9999) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, var(--opacity-overlay)); /* Overlay gris oscuro semi-transparente */
    overflow-y: auto; /* Permite scroll si el contenido excede la pantalla */
    transition: opacity var(--transition-speed) ease; /* Transición suave al abrir/cerrar */
    justify-content: center; /* Centramos contenido horizontalmente */
    align-items: center;     /* Centramos contenido verticalmente */
    /* Por defecto, no usaremos 'display: flex' hasta que se active */
}

/* Mostrar modal cuando está activo */
.modal.active {
    display: flex;  /* Flex para centrar contenido */
    opacity: 1;
}

/* Contenido del modal */
.modal-content {
    background-color: var(--color-card-bg);  /* Blanco #FFFFFF */
    margin: clamp(5%, 2vh, 10%) auto;        /* Margen escalable (vertical) */
    padding: var(--spacing-large);           /* 24px escalable */
    border-radius: var(--border-radius-large); /* 15px para look moderno */
    width: clamp(300px, 90%, 600px);         /* Ancho adaptable entre 300px y 600px */
    max-height: 90vh;                       /* Limita altura para evitar desbordamiento */
    position: relative;
    box-shadow: var(--shadow-dark);         /* Sombra profunda */
    border-top: 4px solid var(--color-primary); /* Barra amarilla #FFC107 arriba */
    overflow-y: auto;                       /* Scroll interno si el contenido es muy largo */
    transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
    transform: scale(0.95);                 /* Efecto de entrada (ligeramente más pequeño) */
    opacity: 0;                             /* Oculto al inicio */
}

/* Animación al mostrar el modal: 
   cuando se añade .active al contenedor, mostramos el contenido gradualmente */
.modal.active .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* ------------------------------
   MODAL ESPECÍFICO DE PRODUCTOS
   (opcional, solo si difiere en estilos)
------------------------------- */
#productModal .modal-content {
    max-width: clamp(400px, 80%, 600px); 
    text-align: center;
}

#productModal img {
    width: 100%;
    height: auto;
    max-height: clamp(200px, 40vh, 300px); /* Imagen escalable */
    margin-bottom: var(--spacing-medium);  /* 16px escalable */
    border-radius: var(--border-radius);   /* 10px escalable */
    object-fit: cover;
    box-shadow: var(--shadow-light);
}

/* ------------------------------
   BOTÓN DE CIERRE
------------------------------- */
.close {
    position: absolute;
    top: var(--spacing-small);   /* 8px escalable */
    right: var(--spacing-small); /* 8px escalable */
    background: none;
    border: none;
    font-size: clamp(20px, 3vw, 28px); /* Ícono escalable */
    color: var(--color-secondary);     /* Rosa-rojo #D81B60 */
    cursor: pointer;
    transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.close:hover {
    color: var(--color-accent); /* Azul #0288D1 */
    transform: scale(1.2);      /* Efecto de agrandamiento */
}

.close:focus {
    outline: 2px solid var(--color-primary); /* Amarillo #FFC107 */
    outline-offset: 2px;
    transform: scale(1.1);
}

/* ------------------------------
   TITULOS, TEXTO Y BOTONES DENTRO DEL MODAL
------------------------------- */
.modal-content h2 {
    font-family: var(--font-secondary); /* Playfair Display */
    font-size: var(--font-size-x-large); /* 24px escalable */
    font-weight: 700;
    color: var(--color-principal);       /* Gris oscuro #333333 */
    margin: 0 0 var(--spacing-medium);   /* 16px escalable abajo */
    text-align: center;
}

.modal-content p {
    font-family: var(--font-primary);  /* Roboto */
    font-size: var(--font-size-medium); /* 16px escalable */
    color: var(--color-principal);     /* Gris oscuro #333333 */
    line-height: 1.6;
    margin-bottom: var(--spacing-medium); /* 16px escalable */
}

/* Botones dentro del modal */
.modal-content .button {
    width: 100%;
    max-width: 300px;
    margin: var(--spacing-small) auto 0; /* Centrado con espaciado arriba */
    padding: var(--padding-medium) var(--padding-large); /* 16px 24px escalable */
}

/* Scroll personalizado en el contenido del modal */
.modal-content::-webkit-scrollbar {
    width: 6px;
}
.modal-content::-webkit-scrollbar-thumb {
    background-color: var(--color-primary); /* Amarillo #FFC107 */
    border-radius: var(--border-radius-small); 
}
.modal-content::-webkit-scrollbar-track {
    background-color: var(--color-bg-testimonial); /* Fondo suave #FAFAFA */
}

/* ------------------------------
   MEDIA QUERIES PARA RESPONSIVIDAD
------------------------------- */
@media (max-width: 1024px) {
    .modal-content {
        width: clamp(280px, 85%, 500px); /* Ajustado para tablets */
        padding: var(--spacing-medium);  /* 16px escalable */
    }
    #productModal .modal-content {
        max-width: clamp(350px, 75%, 500px);
    }
    .modal-content h2 {
        font-size: var(--font-size-large); /* 20px escalable */
    }
}

@media (max-width: 768px) {
    .modal-content {
        width: clamp(260px, 90%, 400px);
        max-height: 85vh;
        margin: clamp(3%, 1vh, 5%) auto; /* Reducido para móviles */
    }
    #productModal .modal-content {
        max-width: clamp(300px, 85%, 400px);
    }
    #productModal img {
        max-height: clamp(150px, 35vh, 200px);
    }
    .close {
        font-size: clamp(18px, 2.5vw, 24px);
    }
    .modal-content .button {
        padding: var(--padding-small) var(--padding-medium); /* 8px 16px */
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: clamp(240px, 95%, 320px);
        padding: var(--spacing-small); /* 8px escalable */
    }
    #productModal .modal-content {
        max-width: clamp(240px, 90%, 320px);
    }
    .modal-content h2 {
        font-size: var(--font-size-medium); /* 16px escalable */
    }
    .modal-content p {
        font-size: var(--font-size-small);  /* 14px escalable */
    }
    #productModal img {
        max-height: clamp(120px, 30vh, 150px);
    }
    .close {
        font-size: clamp(16px, 2vw, 20px);
    }
}