/* ========================================================================
   ARCHIVO DE ESTILOS PRINCIPAL
   ------------------------------------------------------------------------
   Autor: Leonardo Huerta Pastrana/Stylends
   Proyecto: Stylends.com/Clothing customizer
   Versión: 2.6
   
   --- ÍNDICE ---
   1. VARIABLES GLOBALES (CENTRO DE CONTROL)
   2. ESTILOS BASE Y GLOBALES
   3. ESTILOS DE COMPONENTES
      3.1. Botones y Selectores (Estados)
      3.2. Selector de Color
      3.3. Header (Sección Superior)
      3.4. Footer (Sección Inferior Fija)
      3.5. Visor de Prenda
      3.6. Galería de Diseños (Catálogo)
      3.7. Modal (Resumen de Pedido)
      3.8. Toast (Notificación Pop-up)
      3.9. Checkbox Personalizado
      3.10. Colapsable (Info de Entrega)
      3.11. Bloqueo de Orientación (Móvil)
   4. ANIMACIONES Y EFECTOS
   5. ALINEACIÓN Y TAMAÑO (Helpers)
   6. MEDIA QUERIES (DISEÑO ADAPTATIVO)
   ======================================================================== */

/* ========================================================================
   --- 1. VARIABLES GLOBALES (CENTRO DE CONTROL) ---
   ======================================================================== */
/*
 * ¿Qué hace esto?
 * Este es el "Centro de Control" de tu sitio. Define todos los colores
 * y efectos principales en un solo lugar.
 *
 * ¿Qué pasa si cambio...?
 * Si cambias un valor aquí, se actualizará en *todos* los lugares
 * donde se use esa variable. Es la forma más rápida de cambiar
 * el "tema" (theme) de tu web.
 */
:root {
    /* ----------------------------------
     * 🎨 TU CENTRO DE CONTROL DE COLORES
     * ---------------------------------- */
    
    /* 1.1. PALETA DE FONDOS */
    /* ¿Qué pasa si cambio...?
     * --color-bg-deep: Es el fondo principal más oscuro.
     * --color-bg-panel: Fondo para secciones "flotantes" como el modal.
     * --color-bg-viewer: Fondo del visor donde aparece la prenda.
     */
    --color-bg-deep: #0d0d0d;
    --color-bg-panel: #1a1a1a;
    --color-bg-viewer: #C4C4C4;

    /* 1.2. PALETA de TEXTO */
    --color-text-primary: #f0f0f0;  /* Texto principal (blanco) */
    --color-text-secondary: #B8B8B8; /* Texto secundario (gris) */

    /* 1.3. PALETA DE ACENTOS (¡Los colores de tu marca!) */
    /* ¿Qué pasa si cambio...?
     * --color-accent-primary: ¡El color de tu marca! Se usa en botones
     * activos, bordes y brillos. Cambiarlo tiene el mayor impacto visual.
     * --color-accent-secondary: Un tono secundario, usado en hovers o
     * versiones más oscuras del acento.
     * --color-accent-disabled: Color para botones deshabilitados.
     */
    --color-accent-primary: #C60C2B;
    --color-accent-secondary: #8C081D;
    --color-accent-disabled: #333;

    /* 1.4. EFECTOS "GLOW" (Brillos) */
    /* Usados para dar un efecto "neón" a los elementos activos. */
    --glow-primary: 0 0 5px var(--color-accent-primary), 0 0 5px var(--color-accent-primary);
    --glow-secondary: 0 0 5px var(--color-accent-secondary), 0 0 5px var(--color-accent-secondary);
    --glow-header-sticky: 0 4px 10px -3px rgba(255, 0, 77, 0.5); /* Sombra "glow" (basada en el --color-accent-primary) */

    /* 1.5. EFECTOS "GLASS" (Transparencias) */
    /* ¿Qué pasa si cambio...?
     * --color-bg-transparent: El color del "vidrio". El último valor (0.17)
     * es la opacidad. Súbelo para un vidrio menos transparente.
     * --blur-amount: Nivel de desenfoque. Súbelo para un efecto
     * "esmerilado" (borroso) más intenso.
     */
    --color-bg-transparent: rgba(28, 28, 28, 0.17);
    --blur-amount: 8px;
}


/* ========================================================================
   --- 2. ESTILOS BASE Y GLOBALES ---
   ======================================================================== */

/* --- 2.1. Configuración del HTML y Body --- */

html {
    /* * ¿Qué pasa si cambio...?
     * font-size: Define el tamaño base para las unidades "rem".
     * 87% (aprox 14px) hace todo un poco más pequeño que el default (16px).
     */
    font-size: 87%;
    background-color: var(--color-bg-deep); /* Fondo base de toda la página */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: transparent; /* El body es transparente para ver el ::before */
    color: var(--color-text-primary); 
    padding-bottom: 6rem; /* Espacio para el footer fijo */
    position: relative;
    /* z-index: 1 asegura que el contenido esté sobre el fondo (z-index: -1) */
    z-index: 1;
}

/* --- 2.2. Fondo Fijo Desenfocuscado (Pseudo-elemento) --- */
/*
 * ¿Qué hace esto?
 * Este es el "truco" para tener una imagen de fondo fija y desenfocada
 * que NO se mueve con el scroll.
 */
body::before {
    content: ''; 
    position: fixed; /* Fijo en la pantalla */
    top: 0; left: 0; right: 0; bottom: 0;
    /* Se coloca DETRÁS del contenido del body */
    z-index: -1;
    
    background-image: url('../assets/img/Fondo web.svg');
    background-size: cover;      
    background-position: center center; 
    background-repeat: no-repeat;
    
    /* ¿Qué pasa si cambio...?
     * filter: blur(2px): El nivel de desenfoque. Auméntalo para más "blur".
     * transform: scale(1.02): Evita bordes blancos que a veces
     * causa el 'blur'. Déjalo así.
     */
    filter: blur(2px);
    transform: scale(1.02); 
}

/* --- 2.3. Estilos Globales de Texto --- */
h2 {
    color: #fff;
}

/* Textos secundarios (itálicas) */
#custom-design-checkbox-container label,
#color-selector + p {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Notificación de color (texto premium) */
#color-notification {
    font-size: 0.65rem; 
    line-height: 1.2; 
    color: #9ca3af; /* text-gray-400 */
    text-align: center; 
}

/* --- 2.4. Resaltado de Texto (Peligro/Advertencia) --- */
.text-highlight-danger {
    color: var(--color-accent-primary) !important;
    font-weight: 600;
}


/* ========================================================================
   --- 3. ESTILOS DE COMPONENTES ---
   ======================================================================== */

/* --- 3.1. Botones y Selectores (Estados) --- */

/* Estado Activo (Botón seleccionado) */
/*
 * ¿Qué hace esto?
 * Define cómo se ve un botón CUANDO está seleccionado (Talla, Prenda, etc.).
 * Usa !important para anular estilos de Tailwind.
 */
.btn-active,
.category-btn.bg-gray-800 {
    background-color: var(--color-accent-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-accent-primary) !important;
    box-shadow: var(--glow-primary); /* Efecto de brillo */
}

/* Estado Inactivo (Botones por defecto) */
.garment-selector button, 
.size-selector button, 
.fit-selector button, 
.category-btn {
    background-color: transparent;
    border: 1px solid #444; 
    color: var(--color-text-secondary);
    transition: all 0.2s ease; /* Animación suave */
}

/* Hover en Botones Inactivos */
.garment-selector button:not(.btn-active):hover, 
.size-selector button:not(.btn-active):hover, 
.fit-selector button:not(.btn-active):hover, 
.category-btn:not([class*="bg-gray-800"]):hover {
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
    background-color: rgba(255, 0, 77, 0.1); /* Ligero fondo rojo */
}

/* --- 3.2. Selector de Color --- */

/* Bordes redondeados (excepción a la regla global) */
#color-selector button, 
#order-count {
    border-radius: 9999px !important; /* Círculo perfecto */
}

/* Estado Activo (Selector de color) */
.color-active {
    outline: 3px solid var(--color-accent-secondary) !important; 
    outline-offset: 2px; /* Espacio entre el círculo y el borde */
}

/* Estado Deshabilitado (Selector de color) */
#color-selector button {
    position: relative;
    overflow: hidden;
}

.color-disabled {
    opacity: 0.69;
    cursor: not-allowed;
    transition: none !important;
    transform: none !important;
}

/* * ¿Qué hace esto?
 * Dibuja la barra roja diagonal (slash) sobre los colores deshabilitados.
 * Usa un pseudo-elemento 'after'.
 */
.color-disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 3px; 
    background-color: var(--color-accent-primary); 
    /* Centra y rota la barra */
    transform: translate(-50%, -50%) rotate(45deg); 
    box-shadow: var(--glow-primary); 
    border-radius: 2px !important;
}

/* --- 3.3. Header (Sección Superior) --- */
header img {
    filter: invert(1); /* Invierte el logo (negro a blanco) */
    margin-bottom: -1rem; 
}

/*
 * ¿Qué hace esto?
 * Define el estado INICIAL (Glassmorphism) del header que se
 * vuelve "pegajoso" (sticky).
 */
#top-section-wrapper {
    /* Efecto "vidrio esmerilado" */
    background-color: var(--color-bg-transparent) !important; 
    backdrop-filter: blur(var(--blur-amount));
    border-bottom: 1px solid #444; 
    
    /* Transición para el efecto "sticky" */
    transition: background-color 0.4s ease-out, border-color 0.4s ease-out;
}

/*
 * ¿Qué hace esto?
 * Define el estado "Sticky" (al hacer scroll).
 * Esta clase '.sticky-shadow' la añade el JS.
 */
#top-section-wrapper.sticky-shadow {
    /* ¿Qué pasa si cambio...?
     * background-color: Se vuelve más opaco (0.90) para que se lea bien.
     * border-bottom: Cambia al color de acento con brillo.
     */
    background-color: rgba(28, 28, 28, 0.90) !important; 
    border-bottom: 1px solid var(--color-accent-primary);
    box-shadow: var(--glow-header-sticky) !important; 
}

/* --- 3.4. Footer (Sección Inferior Fija) --- */
/*
 * ¿Qué hace esto?
 * Estilos para el footer fijo en la parte inferior, que también
 * usa el efecto "glassmorphism".
 */
footer {
    border-top: 1px solid var(--color-accent-primary) !important; 
    background: rgba(28, 28, 28, 0.90) !important; /* Opaco para legibilidad */
    backdrop-filter: blur(var(--blur-amount));
}

/* Textos del Footer */
#price-display { color: var(--color-text-primary); }
#price-breakdown { color: var(--color-text-secondary); }
#custom-design-message .font-semibold { color: var(--color-accent-secondary) !important; }
#custom-design-message p { color: var(--color-text-secondary) !important; }
#add-to-order-notification { color: var(--color-accent-primary) !important; }

/* Notificación de botones (placeholder de altura) */
/* * ¿Qué hace esto?
 * Reserva un espacio (1rem) debajo de los botones del footer
 * para mostrar notificaciones (ej. "Prenda agregada") sin
 * que el layout "brinque".
 */
.footer-btn-notification {
    height: 1rem;       /* h-4 */
    margin-top: 0.25rem;  /* mt-1 */
    font-size: 0.7rem;
    line-height: 1;
}

/* Botones CTA (Call to Action) del Footer */
#add-to-order-btn {
    background-color: var(--color-accent-secondary);
    color: #000;
    font-weight: 700;
}
#add-to-order-btn:hover { background-color: #F10E34; }

#complete-order-btn {
    background-color: var(--color-accent-primary);
    color: #fff;
    font-weight: 700;
}
#complete-order-btn:hover { background-color: #F10E34; }

/* Estado Deshabilitado (Botones CTA) */
#add-to-order-btn:disabled,
#complete-order-btn:disabled { 
    background-color: var(--color-accent-disabled) !important; 
    color: #666 !important;
}

/* Estado "Falsamente Deshabilitado" (para guiar al usuario) */
/* * ¿Qué hace esto?
 * Se usa (con JS) para que el botón "Agregar" parezca deshabilitado
 * si el usuario no ha completado todos los pasos, aunque
 * técnicamente no esté :disabled.
 */
#add-to-order-btn.is-not-actionable {
    background-color: var(--color-accent-disabled) !important; 
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
#add-to-order-btn.is-not-actionable:hover {
    background-color: var(--color-accent-disabled) !important;
}

/* --- 3.5. Visor de Prenda --- */
#viewer-section .p-4 {
    /* Fondo del visor (de gris claro a oscuro) */
    background: linear-gradient(to bottom, #C4C4C4, #808080) !important; 
}

#garment-viewer {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    overflow: hidden; 
    cursor: none; /* Oculta el cursor para la "lupa" (si se implementa) */
}

#garment-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Imagen del diseño (y su capa de lupa) */
/*
 * ¿Qué hace esto?
 * Define los estilos del diseño que va *sobre* la prenda.
 * 'position: absolute' es clave para superponerlo.
 */
#design-image, .design-image-loupe {
    position: absolute;
    width: auto;  
    height: auto; 
    left: 50%;
    /* 'transform' centra el diseño horizontalmente */
    transform: translateX(-50%) scale(1); 
    object-fit: contain; 
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding: 0 !important; 
}

/* Wrapper interno para zoom (efecto lupa) */
#viewer-inner-wrap {
    position: relative; 
    width: 100%;
    transform: scale(1); 
    transform-origin: center center; 
    transition: transform 0.25s ease-out, clip-path 0.25s ease-out; 
}

/* * ¡ESTILOS CRÍTICOS DE POSICIONAMIENTO!
 * ¿Qué hace esto?
 * Estas clases definen el tamaño y la posición EXACTA del
 * diseño sobre cada tipo de prenda.
 *
 * ¿Qué pasa si cambio...?
 * Si cambias las imágenes base de las prendas (playera.png, sudadera.png),
 * tendrás que "calibrar" estos valores de 'top', 'max-width' y 'max-height'
 * hasta que el diseño se vea centrado y del tamaño correcto.
 */
.design-on-playera {
    top: 20.5%; 
    max-width: 29%;
    max-height: 39%;
}

.design-on-sudadera {
    top: 20.75%; 
    max-width: 28.1%;
    max-height: 38.1%; 
}

/* --- 3.6. Galería de Diseños (Catálogo) --- */
#design-gallery {
    /* Efecto "glass" sutil para la galería */
    background: rgba(28, 28, 28, 0.07);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid #444;
}

.catalog-enhanced h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.catalog-enhanced h3 {
    color: #fff !important;
}

.catalog-grid {
    gap: 1rem !important;
    padding: 1.5rem !important; /* p-6 */
}

/* Fondo de cada item en la galería */
.design-item .bg-gray-100 { 
    background-image: linear-gradient(to bottom, #525252, #383838);
}

/* Texto de cada item en la galería */
#design-gallery .design-item p,
#design-gallery .design-item span {
    color: #C4C4C4 !important;
}

/* --- 3.7. Modal (Resumen de Pedido) --- */
.modal {
    transition: opacity 0.25s ease;
    /* Ajustes para scroll interno y pantallas bajas */
    align-items: flex-start; /* Alinea arriba */
    padding-top: 2rem; 
    padding-bottom: 2rem; 
}

.modal-content {
    background-color: var(--color-bg-panel) !important;
    border: 1px solid var(--color-accent-primary); 
    transition: transform 0.25s ease;
    
    /* ¿Qué pasa si cambio...?
     * max-height: 85vh (85% de la altura de la pantalla).
     * Evita que el modal sea más alto que la pantalla.
     * overflow-y: auto: Activa el scroll vertical SÓLO si es necesario.
     */
    max-height: 85vh; 
    overflow-y: auto; 
    scrollbar-width: thin; 
    scrollbar-color: var(--color-accent-primary) var(--color-bg-panel);
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.2); /* Sombra interna abajo */
}

/* Estilos de Scrollbar (WebKit - Chrome/Safari) */
.modal-content::-webkit-scrollbar {
    width: 6px; 
}
.modal-content::-webkit-scrollbar-track {
    background: var(--color-bg-panel); 
    border-radius: 9999px; 
}
.modal-content::-webkit-scrollbar-thumb {
    background: var(--color-accent-primary); 
    border-radius: 9999px;
    box-shadow: var(--glow-primary); 
}
.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-secondary); 
}

/* Botón de cerrar modal */
#close-modal-btn { color: var(--color-text-secondary); }
#close-modal-btn:hover { color: var(--color-text-primary); }

/* Contenedor del resumen de ítems */
#order-summary { 
    background-color: var(--color-bg-deep) !important;
}

/* Textos DENTRO del listado dinámico del modal */
#order-summary .text-gray-800,
#order-summary .font-medium {
    color: var(--color-text-primary) !important;
}

/* Textos FUERA del listado (Total, Párrafo WhatsApp) */
.modal-content .text-gray-800 {
     color: var(--color-text-primary) !important;
}
.modal-content .text-gray-600 {
     color: var(--color-text-secondary) !important;
}

#modal-total-price { 
    color: var(--color-text-primary); 
}

/* Botón de WhatsApp */
#whatsapp-link {
    background-color: var(--color-accent-primary);
    font-weight: 700;
}
#whatsapp-link:hover { background-color: #ff3377; }

/* Botón de quitar ítem (en el modal) */
.remove-item-btn {
    background-color: #EF4444; /* red-500 */
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s;
}
.remove-item-btn:hover {
    background-color: #DC2626; /* red-600 */
}

/* --- 3.8. Toast (Notificación Pop-up) --- */
/*
 * ¿Qué hace esto?
 * Es la pequeña notificación que aparece arriba a la derecha
 * (ej. "¡Prenda agregada!").
 */
#toast {
    background-color: var(--color-accent-secondary);
    color: #000;
    font-weight: 600;
    text-shadow: none;
    z-index: 100; /* Asegura que esté sobre otros elementos */
    pointer-events: none; /* No debe ser clickeable */
}

/* --- 3.9. Checkbox Personalizado (Diseño Premium) --- */

/* Oculta el input nativo */
#custom-design-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important; 
}

/* Contenedor (label) */
#custom-design-checkbox-container label {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none; /* Evita seleccionar el texto */
    padding-left: 2rem; /* Espacio para la casilla falsa */
    color: var(--color-text-primary);
}

/* Texto de la label */
#custom-design-checkbox-container label span {
    font-size: 0.9rem !important; /* text-sm */
    font-weight: 400 !important; /* font-normal */
}

/* * ¿Qué hace esto?
 * Dibuja la casilla personalizada (cuadrado) usando
 * el pseudo-elemento 'before' de la label.
 */
#custom-design-checkbox-container label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem; /* h-5 w-5 */
    height: 1.25rem;
    background-color: var(--color-bg-panel); 
    border: 2px solid var(--color-text-secondary);
    border-radius: 0.25rem; /* rounded */
    transition: all 0.3s ease; 
}

/* Hover (casilla) */
#custom-design-checkbox-container label:hover::before {
    border-color: #8C081D;
    box-shadow: 0 0 5px #8C081D;
}

/* Focus (accesibilidad con teclado) */
#custom-design-checkbox:focus + label::before {
    outline: none;
    box-shadow: 0 0 5px #8C081D, 0 0 5px #8C081D;
    border-color: #8C081D;
}

/* Estado Marcado (Checked) */
#custom-design-checkbox:checked + label::before {
    background-color: #8C081D !important; 
    border-color: #8C081D !important;
    box-shadow: var(--glow-secondary); 
}

#custom-design-checkbox:checked + label span {
    color: #8C081D !important; /* Texto rojo oscuro */
}

/* --- 3.10. Colapsable (Información de Entrega en Modal) --- */
/*
 * ¿Qué hace esto?
 * Estilos para el <details> que muestra la información de
 * pago y entrega dentro del modal.
 */
.delivery-info {
    background-color: var(--color-bg-deep); 
    border: 1px solid #444;
    margin-bottom: 1rem;
}

/* Título/Botón del colapsable (<summary>) */
.delivery-info-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-weight: 600;
    list-style: none; /* Oculta flecha default de <details> */
    transition: background-color 0.2s ease;
}
.delivery-info-summary::-webkit-details-marker {
    display: none; /* Oculta flecha default en Safari */
}
.delivery-info-summary:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Icono Chevron (flecha) */
.delivery-info-chevron {
    transition: transform 0.3s ease;
    color: var(--color-text-secondary);
}

/* Estado Abierto [open] */
.delivery-info[open] > .delivery-info-summary {
    color: var(--color-accent-primary); 
}
.delivery-info[open] .delivery-info-chevron {
    transform: rotate(180deg); /* Gira la flecha */
    color: var(--color-accent-primary);
}

/* Contenido del colapsable */
.delivery-info-content {
    padding: 1rem 1.25rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    border-top: 1px solid #444;
}

/* Lista de pasos */
.delivery-step-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}
.delivery-step-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
}
.delivery-step-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.delivery-step-list li p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.delivery-step-list li strong {
    color: var(--color-text-primary);
}

/* Icono de número (círculo) */
.step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--color-accent-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 9999px !important; /* Círculo */
    line-height: 1;
}

/* Lista de puntos de entrega (sub-lista) */
.delivery-points {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.delivery-points li {
    display: list-item;
    margin-bottom: 0.25rem;
}
.delivery-points strong {
     color: var(--color-accent-secondary); 
}
.delivery-tramos {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
    display: block;
}

/* ========================================================================
   --- 4. ANIMACIONES Y EFECTOS ---
   ======================================================================== */

/* --- 4.1. Animación Fade-in (para modal, etc.) --- */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* --- 4.2. Animación de Colapsable (Detalles de entrega) --- */
.delivery-info[open] .delivery-info-content {
    animation: fadeInDetails 0.5s ease;
}
@keyframes fadeInDetails {
    from {
        opacity: 0;
        transform: translateY(-10px); /* Entra desde arriba */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 4.3. Animación de Bloqueo de Orientación (Icono) --- */
/* (Usada en 3.11) */
@keyframes rotate-anim {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}

/* --- 4.4. Animación de Parpadeo (Advertencia pasos faltantes) --- */
/*
 * ¿Qué hace esto?
 * Esta clase (puesta con JS) hace que un texto parpadee
 * para llamar la atención del usuario.
 */
.highlight-missing-step {
    animation: warning-blink 1.5s infinite ease-in-out;
    transition: text-shadow 0.3s ease-out, color 0.3s ease-out;
}
@keyframes warning-blink {
    /* Estado ENCENDIDO (Intenso) */
    0%, 100% {
        color: #fff; 
        text-shadow: 0 0 10px #fff, 
                     0 0 20px var(--color-accent-primary), 
                     0 0 30px var(--color-accent-primary);
    }
    /* Estado APAGADO (Sutil) */
    50% {
        color: var(--color-text-secondary); 
        text-shadow: none;
    }
}


/* ========================================================================
   --- 5. ALINEACIÓN Y TAMAÑO (Helpers) ---
   ======================================================================== */
/*
 * ¿Qué hace esto?
 * Esta sección anula los estilos de Tailwind para FORZAR
 * tamaños y alineaciones específicas.
 *
 * ¿Por qué se usa '!important'?
 * Para asegurar que estos estilos "ganen" la batalla de especificidad
 * contra las clases de utilidad de Tailwind (ej. 'py-2', 'px-6').
 * Esto garantiza una altura y centrado consistentes.
 */

/* --- 5.1. Altura fija y centrado para botones de selección --- */
.garment-selector button,
.fit-selector button,
.size-selector button {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* --- 5.2. Altura fija y centrado para botones del Footer --- */
#add-to-order-btn,
#complete-order-btn {
    height: 3.5rem !important;
    min-height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; /* Evita que el texto se parta en 2 líneas */
    box-sizing: border-box !important;
}

/* --- 5.3. Badge (Contador de pedido) --- */
#order-count {
    /* Anula el 'transform' de Tailwind para un mejor control */
    top: -0.375rem !important;
    right: -0.375rem !important;
    transform: none !important;
}


/* ========================================================================
   --- 6. MEDIA QUERIES (DISEÑO ADAPTATIVO) ---
   ======================================================================== */

/* ------------------------------------------------------------------------
   6.1. MÓVIL (max-width: 1023px)
   (Pantallas de 1023px de ancho o MENOS)
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {

    /* --- 6.1.1. Lógica de colapso del Header (Estado Inicial) --- */
    /*
     * ¿Qué hace esto?
     * Define el estado inicial (visible) de los elementos del header en móvil.
     * La 'transition' es clave para que al ocultarse (en 6.1.2)
     * se vea una animación suave.
     */
    #top-section-wrapper h2,
    #size-selector,
    #color-selector + p,
    #custom-design-checkbox-container {
        transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out;
        max-height: 100px; /* Altura de sobra para que quepa */
        opacity: 1;
        overflow: hidden;
        margin-bottom: 0.75rem; /* mb-3 */
    }

    #custom-design-checkbox-container {
        margin-bottom: 0;
    }

    /* --- 6.1.2. Lógica de colapso del Header (Estado .is-scrolled) --- */
    
    /*
     * ¿Qué hace esto?
     * Define el estado del header en móvil CUANDO el usuario
     * ha hecho scroll (se añade la clase .is-scrolled vía JS).
     */
    #top-section-wrapper.is-scrolled {
        background-color: rgba(28, 28, 28, 0.90) !important; 
        padding-top: 0.25rem; 
        padding-bottom: 0.125rem;
        gap: 0 !important;
    }

    /* * ¡AQUÍ ESTÁ LA MAGIA DEL COLAPSO!
     * Oculta elementos al hacer scroll.
     *
     * ¿Qué pasa si cambio...?
     * max-height: 0: Es el truco. Animar de '100px' a '0'
     * crea el efecto de "colapso" vertical.
     * opacity: 0: Hace que desaparezcan suavemente.
     */
    #top-section-wrapper.is-scrolled h2,
    #top-section-wrapper.is-scrolled #size-selector,
    #top-section-wrapper.is-scrolled #size-selector-container,
    #top-section-wrapper.is-scrolled #color-selector + p,
    #top-section-wrapper.is-scrolled #custom-design-checkbox-container {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    /* Muestra los 2 títulos principales compactos */
    #top-section-wrapper.is-scrolled .options-column > div:first-child h2,
    #top-section-wrapper.is-scrolled #fit-selector-container h2 {
        display: block !important; 
        max-height: 2rem !important;
        opacity: 1 !important;
        margin-bottom: 0.25rem !important; /* mb-1 */
        font-size: 1rem !important; /* text-xs */
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    /* Reacomoda selectores en fila */
    #top-section-wrapper.is-scrolled .options-column {
        space-y-0 !important;
        gap: 0rem; 
    }
    #top-section-wrapper.is-scrolled #fit-selector-container {
        margin-top: 0;
        margin-bottom: 0.75rem !important; 
        margin-left: auto;  /* Centrado */
        margin-right: auto; /* Centrado */
    }
    #top-section-wrapper.is-scrolled #garment-type-selector,
    #top-section-wrapper.is-scrolled #fit-selector {
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
    }

    /* Encoge el visor */
    #top-section-wrapper.is-scrolled #garment-viewer {
        max-width: 275px !important;
        margin: 0 auto !important;
        transition: max-width 0.3s ease-out;
    }
    #top-section-wrapper.is-scrolled #viewer-section .p-4 {
        padding: 0.125rem !important;
        transition: padding 0.3s ease-out;
    }
    #top-section-wrapper.is-scrolled #viewer-section {
        line-height: 1; /* Colapsa altura de línea */
    }

    /* Ajusta botones y colores */
    #top-section-wrapper.is-scrolled #color-selector {
        gap: 0.5rem !important;
    }
    #top-section-wrapper.is-scrolled #color-selector-container {
        margin-top: 0.5rem !important; /* Espacio entre visor y colores */
    }

    /* Botones de selección largos en modo sticky */
    #top-section-wrapper.is-scrolled #garment-type-selector button,
    #top-section-wrapper.is-scrolled #fit-selector button {
        min-width: 10rem !important;
        width: auto !important;
    }

    /* Muestra notificación de color premium en modo sticky */
    #top-section-wrapper.is-scrolled #color-notification:not(.hidden) {
        display: block !important;
        max-height: 3rem !important;
        opacity: 1 !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
        font-size: 0.65rem !important;
        overflow: visible !important;
        transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    }

    /* --- 6.1.3. Ajuste de Alineación (Móvil Sticky) --- */
    #top-section-wrapper.is-scrolled #garment-type-selector,
    #top-section-wrapper.is-scrolled #fit-selector,
    #top-section-wrapper.is-scrolled #size-selector {
                  align-items: center !important;
                  height: 2.75rem !important;
    }
    
    /* --- 6.1.4. Footer Compacto (Móvil) --- */
    /* (Reduce tamaños y espaciados para que quepa en móviles) */
    footer {
        padding: 0.5rem 1rem !important;
    }
    #footer-inner-content {
        gap: 0.75rem !important;
    }
    
    /* Precios */
    #price-display {
        font-size: 1.25rem !important; /* text-xl */
        line-height: 1.3 !important;
    }
    #price-breakdown {
        font-size: 0.75rem !important; /* text-xs */
    }
    
    /* Botones */
    #add-to-order-btn,
    #complete-order-btn {
        font-size: 0.7rem !important; /* text-sm */
        padding: 0.625rem 1rem !important;
        min-height: 2.75rem !important;
        line-height: 1.2 !important;
    }
    
    /* Mensaje Diseño Personalizado */
    #custom-design-message {
        max-width: 160px !important;
        padding: 0.5rem !important;
    }
    #custom-design-message .font-semibold {
        font-size: 0.8125rem !important;
    }
    #custom-design-message p {
        font-size: 0.6875rem !important;
        line-height: 1.3 !important;
    }
    
    /* Badge */
    #order-count {
        font-size: 0.6875rem !important;
        min-height: 1.25rem !important;
        min-width: 1.25rem !important;
    }
    
    /* Notificación de botón (placeholder) */
    .footer-btn-notification {
        font-size: 0.65rem !important;
        line-height: 1 !important;
        height: 0.5rem !important;
        margin-top: 0.125rem !important;
    }
    
    /* --- 6.1.5. Modal (Móvil) --- */
    .modal {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .modal-content {
        max-height: 95vh; /* Más altura en móvil */
        padding: 1rem;
    }
    .modal-content h2 {
        font-size: 1.25rem;
    }
    .delivery-info-content {
        font-size: 0.85rem;
    }
    #whatsapp-link {
        font-size: 0.9rem;
        padding: 0.75rem;
    }
} /* --- FIN MÓVIL (max-width: 1023px) --- */


/* ------------------------------------------------------------------------
   6.2. MÓVIL HORIZONTAL (Bloqueo)
   (Detecta si el móvil está en horizontal Y es < 1023px)
   ------------------------------------------------------------------------ */
@media (orientation: landscape) and (max-width: 1023px) {
    /* * ¿Qué hace esto?
     * MUESTRA el overlay de bloqueo (definido en 3.11).
     */
    #orientation-lock-overlay {
        display: flex;
    }
    /* OCULTA el contenido principal. */
    body > .container, body > footer {
        display: none;
    }
}


/* ------------------------------------------------------------------------
   6.3. DESKTOP / LAPTOP (min-width: 1024px)
   (Pantallas de 1024px de ancho o MÁS)
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {

    /* --- 6.3.1. Galería (Desktop) --- */
    /* (Ajusta el tamaño de las imágenes en la galería para desktop) */
    .catalog-grid .design-item img {
        height: 120px !important;
        width: 120px !important;
        object-fit: contain;
        transition: transform 0.2s ease;
    }
    .catalog-grid .design-item:hover img {
        transform: scale(1.1); /* Efecto zoom al pasar el mouse */
    }
    
    /* --- 6.3.2. Fallback (Laptops con poca altura) --- */
    /*
     * ¿Qué hace esto?
     * Detecta laptops que son anchas (desktop) pero BAJAS
     * (max-height: 800px) y fuerza un layout más compacto.
     */
    @media (max-height: 800px) {
        #top-section-wrapper {
            py-0.5; /* (Clase Tailwind, asumida) */
            gap: 4; /* (Clase Tailwind, asumida) */
        }
        .options-column { space-y-2 !important; }
        .garment-selector, .fit-selector { flex-direction: row !important; space-y-0 !important; space-x-2 !important; }
        .size-selector { grid-cols-4 !important; gap-1 !important; }
        .color-selector { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center; gap-2 !important; }
        #garment-viewer { max-width: 400px !important; max-height: 400px !important; }
        #top-section-wrapper h2 { font-size: 1rem !important; margin-bottom: 0.5rem !important; }
        #top-section-wrapper button { padding: 0.5rem 1rem !important; font-size: 0.875rem !important; }
        #viewer-section .p-4 { padding: 1rem !important; }
    }
}

/* ------------------------------------------------------------------------
   6.4. DESKTOP XL (min-width: 1280px)
   ------------------------------------------------------------------------ */
@media (min-width: 1280px) {
    /* (Imágenes de galería más grandes) */
    .catalog-grid .design-item img {
        height: 140px !important;
        width: 140px !important;
    }
}

/* ------------------------------------------------------------------------
   6.5. DESKTOP XXL (min-width: 1536px)
   ------------------------------------------------------------------------ */
@media (min-width: 1536px) {
    /* (Imágenes de galería aún más grandes) */
    .catalog-grid .design-item img {
        height: 160px !important;
        width: 160px !important;
    }
}


/* ------------------------------------------------------------------------
   6.6. LAPTOP 16:9 (min-width: 1024px) y (min-aspect-ratio: 16/9)
      (Layout ultra-compacto para pantallas panorámicas)
   ------------------------------------------------------------------------ */
/*
 * ¿Qué hace esto?
 * Este es un media query muy específico. Se activa SOLO si:
 * 1. Es desktop (más de 1024px)
 * 2. Y la pantalla es MUY ancha (aspect ratio 16/9 o mayor).
 * Esto fuerza un layout súper compacto para aprovechar el ancho.
 */
@media (min-width: 1024px) and (min-aspect-ratio: 16/9) {

    /* --- 6.6.1. Header Compacto (16:9) --- */
    #top-section-wrapper {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        gap: 3; /* 3 */
        flex-wrap: wrap;
    }

    /* Opciones en fila */
    .options-column {
        flex-direction: row !important;
        flex-wrap: wrap;
        column-gap: 1.25rem; 
        row-gap: 1rem; 
        align-items: flex-start; 
        space-y-0 !important;
    }

    /* Selectores en fila */
    .garment-selector,
    .fit-selector,
    .size-selector,
    .color-selector {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 2 !important; /* 2 */
        align-items: center;
    }
    .size-selector {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Alineación vertical (Helper) */
    .garment-selector,
    .fit-selector,
    .size-selector {
        align-items: center !important;
        height: 2.75rem !important;
    }

    /* Visor mínimo */
    #garment-viewer {
        max-width: 275px !important;
        max-height: 275px !important;
        margin: 0 auto;
    }
    #viewer-section > div {
        padding: 0.5rem !important;
    }

    /* Fuentes pequeñas */
    #top-section-wrapper h2 {
        font-size: 0.875rem !important; /* text-sm */
        margin-bottom: 0.25rem !important;
    }
    #top-section-wrapper button,
    #top-section-wrapper label span {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    /* Checkbox pequeño */
    #custom-design-checkbox {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    /* Botones de selección largos */
    .garment-selector button,
    .fit-selector button {
        min-width: 12.5rem !important;
    }

    /* --- 6.6.2. Footer Compacto (16:9) --- */
    footer {
        padding-top: 1.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    #footer-inner-content {
        gap: 1rem !important;
    }

    /* Precios */
    #price-display {
        font-size: 1.25rem !important; /* text-xl */
        margin-top: 0 !important;
    }
    #price-breakdown {
        font-size: 0.75rem !important; /* text-xs */
    }

    /* Botones */
    #add-to-order-btn,
    #complete-order-btn {
        height: 2.75rem !important;
        min-height: 2.75rem !important;
        font-size: 0.8rem !important;
    }

    /* Mensaje Diseño Personalizado */
    #custom-design-message {
        padding: 0.25rem 0.5rem !important;
        max-width: 180px !important;
    }
    #custom-design-message p {
         font-size: 0.65rem !important;
         line-height: 1.2;
    }

    /* --- 6.6.3. Galería (16:9) --- */
    .catalog-grid {
        gap: 1rem !important;
        padding: 2.5rem !important;
    }
}