/* ============================================================
   CONTENEDOR Y BOTÓN
   ============================================================ */
#gt-contenedor-movil { 
    margin: 15px 0 20px 0; 
    width: 100%; 
    display: none; /* <--- CAMBIO CLAVE: Invisible al cargar para evitar parpadeo */
    clear: both; 
}

.gt-btn-open {
    display: inline-flex; align-items: center; padding: 8px 15px;
    background-color: #f1f8fa; color: #24b9d7 !important;
    border: 1px solid #24b9d7; border-radius: 3px;
    text-decoration: none; cursor: pointer; font-weight: bold;
    text-transform: uppercase; font-size: 13px; transition: all 0.3s ease;
}

.gt-btn-open:hover { background-color: #24b9d7; color: white !important; }
.gt-btn-open i { margin-right: 8px; font-size: 18px; }

/* ============================================================
   MODAL (POP-UP)
   ============================================================ */
.gt-modal { 
    display: none; position: fixed; z-index: 99999; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.8); overflow-y: auto; 
}

.gt-modal-content { 
    background-color: #fff; margin: 30px auto; padding: 25px; 
    width: 95%; max-width: 700px; border-radius: 4px; position: relative; 
}

.gt-close { position: absolute; right: 15px; top: 10px; font-size: 32px; cursor: pointer; color: #7a7a7a; }
.gt-img-prenda { max-width: 180px; height: auto; display: block; margin: 15px auto; }

/* ============================================================
   TABLA CON SCROLL Y COLUMNA FIJA
   ============================================================ */
@keyframes gt-bounce {
    0%, 100% { transform: translateX(0) translateY(-50%); }
    50% { transform: translateX(10px) translateY(-50%); }
}

.gt-table-responsive {
    width: 100%; overflow-x: auto; margin-top: 20px;
    border: 1px solid #ebebeb; position: relative;
    -webkit-overflow-scrolling: touch;
}

/* LA FLECHA: Ahora más pequeña y transparente para que se lea el número debajo */
.gt-table-responsive::after {
    content: '↔'; position: absolute; 
    right: 5px; top: 50%;
    background: rgba(36, 185, 215, 0.4); /* Transparencia 0.4 (antes 0.9) */
    color: #130ff1; /* <--- Color del símbolo (Amarillo) */
    width: 24px; height: 24px; line-height: 17px; /* Tamaño circulo line centrar vertical */
    text-align: center; border-radius: 50%;
    font-weight: bold; font-size: 18px; /* Tamaño simbolo */
    animation: gt-bounce 2s infinite;
    pointer-events: none; z-index: 10;
}

@media (min-width: 768px) {
    .gt-table-responsive::after { display: none; }
}

.gt-table { 
    width: 100%; border-collapse: separate; border-spacing: 0; min-width: 450px; 
}

.gt-table th, .gt-table td { 
    padding: 12px 10px; border-bottom: 1px solid #ebebeb; 
    border-right: 1px solid #ebebeb; text-align: center; font-size: 14px; 
}

.gt-table th { background-color: #f6f6f6; font-weight: bold; }

/* COLUMNA FIJA (STICKY) - Ajuste de ancho y alineación */
.gt-table td:first-child, .gt-table th:first-child {
    position: sticky !important;
    left: 0;
    z-index: 5;
    background-color: #ffffff !important;
    border-right: 2px solid #24b9d7;
    font-weight: bold;
    
    /* --- NUEVOS AJUSTES SEGUROS --- */
    text-align: left !important;  /* Texto a la izquierda */
    padding-left: 10px !important; /* Margen para que no pegue al borde */
    width: 80px !important;       /* Estrechamos la columna */
    min-width: 80px !important;   /* Evitamos que se deforme */
    font-size: 13px !important;   /* Letra un pelín más pequeña para ganar espacio */
}

/* RESALTE DE TALLA (Activado por JS) */
.gt-col-highlight { 
    background-color: #e1f5fe !important; 
    font-weight: bold !important; 
}

@media (max-width: 767px) {
    .gt-btn-open { width: 100%; justify-content: center; }
}