/* ==========================================================================
   1. SWATCHES DE COLOR (Círculos/Cuadrados de selección)
   ========================================================================== */

/* Contenedor externo que envuelve todos los swatches */
.color-swatches-wrapper { 
    margin-bottom: 20px; /* Espacio inferior respecto a la tabla */
    display: block !important; 
}

/* Alineación de los swatches (flexbox para que se pongan uno al lado del otro) */
.color-swatches { 
    display: flex; 
    gap: 12px; /* Espacio entre cada círculo de color */
    flex-wrap: wrap; /* Si no caben, saltan a la siguiente línea */
    align-items: center; 
}

/* El círculo de color individual */
.swatch-color { 
    width: 44px;  /* Ancho del swatch */
    height: 44px; /* Alto del swatch */
    border-radius: 20%; /* 50% para círculo perfecto, 20% para cuadrado redondeado */
    border: 1px solid #d0d0d0; /* Borde fino gris */
    cursor: pointer; 
    transition: all .2s ease; /* Suavidad al pasar el ratón o seleccionar */
    box-shadow: 0 3px 5px rgb(0 0 0 / 30%); /* Sombra para dar profundidad */
}

/* Efecto al pasar el ratón por encima (Hover) */
.swatch-color:hover { 
    transform: scale(1.3); /* Se agranda un 30% */
}

/* Estado cuando el color está seleccionado */
.swatch-color.selected { 
    border-color: #0071f3; /* Cambia el borde al azul de marca */
    transform: scale(1.1); /* Se queda un poco más grande que el resto */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0071f3; /* Efecto de doble anillo exterior */
}


/* ==========================================================================
   2. TABLA DE TALLAS (Estructura general)
   ========================================================================== */

/* Caja blanca que contiene toda la tabla */
.tabla-tallas-wrapper { 
    margin-top: 25px; 
    background: #fff; 
    border: 1px solid #d0d0d0; 
    border-radius: 12px; /* Esquinas redondeadas de la tabla */
    padding: 15px; 
}

/* Filas y Cabecera: Define el ancho de las columnas (Talla | Color | Controles) */
.tabla-tallas-header, .tabla-talla-row { 
    display: grid; 
    grid-template-columns: 80px 120px 1fr; /* 80px talla, 120px nombre color, resto botones */
    align-items: center; 
    gap: 15px; 
    padding: 5px 0; 
}

/* Estilo de los títulos de la cabecera */
.tabla-tallas-header { 
    font-weight: 700; 
    font-size: 13px; 
    text-transform: uppercase; 
    color: #767676; 
    border-bottom: 2px solid #d5d5d5; 
}

/* Línea divisoria entre cada fila de producto */
.tabla-talla-row { 
    border-bottom: 1px solid #eee; 
    transition: opacity 0.3s; 
}

/* --- Gestión de Stock --- */

/* Fila cuando no hay stock (se vuelve gris y semitransparente) */
.tabla-talla-row.out-of-stock { 
    opacity: 0.4; 
    pointer-events: none; /* Bloquea clics */
    filter: grayscale(1); 
}

/* Tacha el texto de la talla cuando no hay stock */
.tabla-talla-row.out-of-stock .talla-pill { 
    text-decoration: line-through; 
}

/* La pastilla (botón) que muestra la talla (S, M, L, etc) */
.talla-pill { 
    background: #f5f5f5; 
    width: 100%; 
    height: 40px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    transition: 0.2s; 
}

/* Color de la pastilla cuando hay cantidad añadida */
.talla-pill.pill-selected { 
    background: #0071f3; /* Azul */
    color: #fff; 
}

/* Miniatura de color que aparece dentro de la tabla */
.col-color { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.color-swatch-mini { 
    width: 24px; 
    height: 24px; 
    border-radius: 4px; 
    border: 1px solid rgba(0,0,0,0.1); 
    display: inline-block; 
}

/* Espaciado entre la tabla de tallas y el botón de añadir al carrito */
.variations_button.woocommerce-variation-add-to-cart {
    margin-top: -30px; /* Puedes subir este número si quieres más espacio */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espacio entre el botón de añadir y el de ver carrito si aparecen juntos */
}


/* ==========================================================================
   3. CONTROLES DE CANTIDAD (Botones + / - e Input)
   ========================================================================== */

.talla-controles { 
    display: flex; 
    justify-content: flex-end; 
    gap: 8px; 
    align-items: center; 
}

/* Botones de + y - */
.btn-talla { 
    background: #eef6ff; 
    border: none; 
    border-radius: 8px; 
    width: 75px; /* Ancho del botón */
    height: 36px; /* Alto del botón */
    font-size: 20px; 
    font-weight: 700; 
    cursor: pointer; 
    color: #0071f3; 
    transition: 0.2s; 
}

/* Hover de los botones + y - */
.btn-talla:hover { 
    background: #0071f3; 
    color: #fff; 
}

/* Cuadro de número donde se ve la cantidad */
.talla-cantidad { 
    width: 45px; 
    height: 36px; 
    border: 1px solid #eee; 
    border-radius: 8px; 
    text-align: center; 
    font-weight: 700; 
}

/* Ocultar flechas del cuadro de escritura de cantidad de talla */
.talla-cantidad::-webkit-outer-spin-button,
.talla-cantidad::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Ocultar flechas nativas en Firefox */
.talla-cantidad {
  -moz-appearance: textfield;
}

/* Evita que el móvil seleccione el texto de los botones al mantener pulsado */
.btn-talla {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+ */
    user-select: none;         /* Estándar */
    -webkit-tap-highlight-color: transparent; /* Quita el recuadro azul al tocar */
    touch-action: manipulation; /* Optimiza el toque ignorando el doble tap de zoom */
}

/* ==========================================================================
   4. BOTÓN RESTEABLECER (Limpiar selección)
   ========================================================================== */

.reset-wrap { display: flex; justify-content: flex-end; margin-top: 15px; }

.btn-resetear { 
    background: #fff; 
    border: 1px solid #ff4d4d; /* Borde rojo */
    color: #ff4d4d; 
    border-radius: 8px; 
    padding: 6px 14px; 
    font-size: 12px; 
    cursor: pointer; 
    display: none; /* Se activa por JS solo cuando hay algo seleccionado */
}

.btn-resetear:hover {
    background-color: #EB5050; 
    color: white;
}


/* ==========================================================================
   5. LIMPIEZA DE ELEMENTOS NATIVOS DE WOOCOMMERCE
   ========================================================================== */

/* Oculta los selectores desplegables y etiquetas estándar para que no se dupliquen con nuestra tabla */
.variations label, .variations .label, .select-color-oculto, .select-talla-oculto, .reset_variations { 
    display: none !important; 
}

.variations { width: 100%; border: 0 !important; }


/* ==========================================================================
   6. RESPONSIVE TABLA DE TALLAS (Ajustes para móviles)
   ========================================================================== */

@media (max-width: 640px) {
    /* Cambiamos el orden de las columnas: Talla | Color | Botones */
    .tabla-tallas-header, .tabla-talla-row { 
        grid-template-columns: 50px 1fr 140px; 
        gap: 10px; 
        padding: 10px 0;
    }

    /* Hacemos los botones de + y - más cuadrados y fáciles de pulsar */
    .btn-talla { 
        flex: 0 0 35px; 
        height: 35px; 
        font-size: 24px; 
    }

    /* Input de cantidad más alto en móvil */
    .talla-cantidad { 
        flex: 0 0 60px; 
        height: 44px; 
        width: 60px;
    }
}


/* ==========================================================================
   7. GESTIÓN DE IMÁGENES (Evita que se corten las fotos de los productos)
   ========================================================================== */

/* Asegura que las fotos de producto se vean completas (contain) y no se estiren */
.woocommerce-product-gallery__image img,
.ct-image-container img,
.wp-post-image,
.attachment-shop_single {
    object-fit: contain !important; /* Mantiene la proporción de la foto sin cortarla */
    width: 100% !important;
    background-color: transparent !important;
}

/* Centrado de la imagen en su contenedor */
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Altura máxima de la foto en PC para que no ocupe más de la pantalla */
@media (min-width: 641px) {
    .woocommerce-product-gallery__image img {
        height: auto !important;
        max-height: 75vh !important;
    }
}

/* Altura máxima de la foto en Móvil */
@media (max-width: 640px) {
    .woocommerce-product-gallery__image img {
        height: auto !important;
        max-height: 400px !important;
    }
}

/* Ajuste para las miniaturas en los listados/categorías */
.products .product-card .ct-media-container img {
    object-fit: contain !important;
    aspect-ratio: auto !important;
    height: 250px !important;
}

/* ==========================================================================
   8. VENTANA POP UP DE AVISO DE ERROR (Estética Original 100%)
   ========================================================================== */

.aviso-propio-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.aviso-propio-caja {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: aparecerAviso 0.3s ease;
}

.aviso-propio-caja p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* TODOS los botones: Aceptar, Sí y No serán NEGROS */
.aviso-propio-boton, .btn-cerrar-todo, .btn-confirmar-accion {
    background: #000 !important; /* Negro total */
    color: #fff !important;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s;
    display: inline-block;
}

.aviso-propio-boton:hover, .btn-cerrar-todo:hover, .btn-confirmar-accion:hover {
    opacity: 0.5;
}

/* Espaciado para cuando hay dos botones juntos */
.aviso-botones-confirm {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

@keyframes aparecerAviso {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   9. MINI-CARRITO: Correción de colores y estilos.
   ========================================================================== */

/* 1. CONTENEDOR PRINCIPAL: Forzar fondo blanco y variables */
[data-id="cart"] .ct-cart-content {
    --dropdownTopOffset: 15px;
    --theme-text-color: #1a1a1a !important;   /* Texto oscuro */
    --mini-cart-background-color: #ffffff !important; /* Fondo blanco */
    --mini-cart-divider-color: rgba(0, 0, 0, 0.10);
    
    background-color: #ffffff !important;      /* Forzado total del fondo blanco */
    background: #ffffff !important;
}

/* 2. TEXTO GLOBAL: Forzar que todo sea oscuro sobre el fondo blanco */
[data-id="cart"] .ct-cart-content,
[data-id="cart"] .ct-cart-content *:not(.button):not(button) {
    color: #1a1a1a !important;
}

/* 3. BOTONES: Tu Rojo Original (#E8363C) */
[data-id="cart"] .ct-cart-content .button,
[data-id="cart"] .ct-cart-content button,
[data-id="cart"] .ct-cart-content .wc-forward {
    background-color: #E8363C !important; 
    color: #ffffff !important;
    border-radius: 0 !important;
}

/* Hover botones más oscuro (#c52d32) */
[data-id="cart"] .ct-cart-content .button:hover,
[data-id="cart"] .ct-cart-content button:hover,
[data-id="cart"] .ct-cart-content .wc-forward:hover {
    background-color: #c52d32 !important;
}

/* 4. SUBTOTAL: Texto oscuro (#111111) e Importe en Rojo Oscuro (#8B0000) */
[data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total strong {
    color: #111111 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

[data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total bdi,
[data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total bdi span.woocommerce-Price-currencySymbol {
    color: #8B0000 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* 5. DIVISORES Y BORDES */
[data-id="cart"] .ct-cart-content {
    --mini-cart-divider-color: rgba(0,0,0,0.25);
}

[data-id="cart"] .ct-cart-content .woocommerce-mini-cart-item,
[data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total,
[data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons {
    border-color: rgba(0,0,0,0.35) !important;
}

/* 6. PRODUCTOS: Títulos en negrita y Precios en Rojo Oscuro */
[data-id="cart"] .ct-cart-content .product-title {
    font-weight: 700 !important;
}

[data-id="cart"] .ct-cart-content .woocommerce-mini-cart-item .woocommerce-Price-amount,
[data-id="cart"] .ct-cart-content .woocommerce-mini-cart-item .amount,
[data-id="cart"] .ct-cart-content .woocommerce-mini-cart-item bdi {
    color: #8B0000 !important;
    font-weight: 600 !important;
}

/* 7. ICONO ELIMINAR: Gris inicial, Rojo (#E8363C) en hover */
[data-id="cart"] .ct-cart-content .woocommerce-mini-cart-item .remove svg path {
    fill: #888888;
    transition: fill 0.2s ease;
}

[data-id="cart"] .ct-cart-content .woocommerce-mini-cart-item .remove:hover svg path {
    fill: #E8363C;
}

/* 8. SCROLLBAR PERSONALIZADO */
[data-id="cart"] .ct-cart-content::-webkit-scrollbar { 
    width: 6px; 
}
[data-id="cart"] .ct-cart-content::-webkit-scrollbar-track { 
    background: #f0f0f0; 
}
[data-id="cart"] .ct-cart-content::-webkit-scrollbar-thumb { 
    background: #c2c2c2; 
    border-radius: 4px; 
}


/* ==========================================================================
   10. Botón productos Favoritos
   ========================================================================== */

/* Corazón base: Siempre la misma forma, solo el borde rojo */
.btn-favorito-bajo-precio .corazon-icono {
    color: transparent !important; /* Interior invisible */
    -webkit-text-stroke: 2px #E8363C; /* Borde rojo de 2px */
    font-size: 42px; 
    line-height: 1;
    display: inline-block;
    transition: all 0.3s ease; /* Transición suave al rellenarse */
}

/* Cuando el producto está en favoritos: Se rellena el interior */
.btn-favorito-bajo-precio.is-active .corazon-icono {
    color: #E8363C !important; /* El interior se vuelve rojo */
    -webkit-text-stroke: 2px #E8363C; /* Mantenemos el mismo borde */
}

/* El efecto de bombeo que te gustaba */
.btn-favorito-bajo-precio:hover .corazon-icono {
    animation: bombeo 0.6s infinite alternate;
}

@keyframes bombeo {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

/* Mantenemos el resto de estilos del botón y contenedor */
.seccion-favoritos-descripcion {
    margin: 20px 0 10px 0 !important;
    display: block;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 15px;
}

.btn-favorito-bajo-precio {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
}