/*
 * Color Swatches — Círculos de color para atributo pa_color
 * Archivo: assets/wc/css/color-swatches.css
 *
 * Estrategia: Reemplaza VISUALMENTE el dropdown custom para pa_color.
 * El <select> nativo de WooCommerce permanece oculto y funcional.
 *
 * @package HybinetInterface
 */

/* ==========================================================================
   CONTENEDOR DE CÍRCULOS
   ========================================================================== */

.hybinet-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
}

/* ==========================================================================
   CÍRCULO BASE
   ========================================================================== */

.hybinet-color-swatch {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    outline: none;
    flex-shrink: 0;

    /* Transiciones suaves */
    transition:
        transform var(--hybinet-transition-fast, 0.2s ease),
        border-color var(--hybinet-transition-fast, 0.2s ease),
        box-shadow var(--hybinet-transition-fast, 0.2s ease);
}

/* Anillo exterior (visible al seleccionar / hover) */
.hybinet-color-swatch::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color var(--hybinet-transition-fast, 0.2s ease);
    pointer-events: none;
}

/* Disco interior de color */
.hybinet-color-swatch__dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* background-color se inyecta por JS via style inline */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform var(--hybinet-transition-fast, 0.2s ease);
    overflow: hidden;
}

/* ==========================================================================
   ESTADOS: HOVER
   ========================================================================== */

.hybinet-color-swatch:hover {
    transform: scale(1.12);
}

.hybinet-color-swatch:hover .hybinet-color-swatch__dot {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2),
                0 3px 10px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   ESTADOS: SELECCIONADO (.is-active)
   ========================================================================== */

.hybinet-color-swatch.is-active {
    transform: scale(1.08);
    border-color: var(--hybinet-color-text-primary, #111111);
}

.hybinet-color-swatch.is-active::before {
    border-color: var(--hybinet-color-text-primary, #111111);
}

/* Check mark de selección */
.hybinet-color-swatch.is-active .hybinet-color-swatch__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / 14px no-repeat;
}

/* Para colores muy claros el check es oscuro */
.hybinet-color-swatch.is-active.is-light .hybinet-color-swatch__dot::after {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-color: rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   ESTADOS: DISABLED / NO DISPONIBLE
   ========================================================================== */

.hybinet-color-swatch.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.hybinet-color-swatch.is-disabled:hover {
    transform: none;
}

/* Línea diagonal de "no disponible" */
.hybinet-color-swatch.is-disabled .hybinet-color-swatch__dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        transparent 45%,
        rgba(180, 0, 0, 0.75) 45%,
        rgba(180, 0, 0, 0.75) 55%,
        transparent 55%
    );
    z-index: 1;
}

/* ==========================================================================
   FALLBACK — Slug sin mapeo HEX (círculo con patrón de rayas)
   ========================================================================== */

.hybinet-color-swatch.is-unmapped .hybinet-color-swatch__dot {
    background-color: #e0e0e0 !important;
    background-image: repeating-linear-gradient(
        45deg,
        #ccc 0px,
        #ccc 3px,
        #e8e8e8 3px,
        #e8e8e8 9px
    ) !important;
}

/* Ícono de interrogación en fallback */
.hybinet-color-swatch.is-unmapped .hybinet-color-swatch__dot::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
}

/* ==========================================================================
   NOMBRE DEL COLOR SELECCIONADO (Móvil & Desktop)
   ========================================================================== */

.hybinet-selected-color-name {
    font-weight: 500;
    color: var(--hybinet-color-text-secondary, #4B5563);
    margin-left: 2px;
    letter-spacing: 0.01em;
    display: inline;
    transition: opacity var(--hybinet-transition-fast, 0.2s ease);
}

.hybinet-selected-color-name:empty {
    display: none;
}

/* ==========================================================================
   TOOLTIP — nombre del color al hacer hover (solo dispositivos con puntero fino)
   ========================================================================== */

.hybinet-color-swatch[data-label]::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--hybinet-core-ink-strong, #161617);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    letter-spacing: 0.02em;
}

@media (hover: hover) and (pointer: fine) {
    .hybinet-color-swatch[data-label]:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==========================================================================
   BLANCO: necesita borde siempre para ser visible
   ========================================================================== */

.hybinet-color-swatch.is-white {
    border-color: var(--hybinet-color-border-default, #DADEE4);
}

.hybinet-color-swatch.is-white:hover,
.hybinet-color-swatch.is-white.is-active {
    border-color: var(--hybinet-color-text-primary, #111111);
}

/* ==========================================================================
   MULTICOLOR — degradado arcoíris fijo (cónico)
   ========================================================================== */

/* Disco con degradado lineal arcoíris suavizado */
.hybinet-color-swatch.is-multicolor .hybinet-color-swatch__dot {
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        #f87171,   /* rojo    */
        #fb923c,   /* naranja */
        #facc15,   /* amarillo */
        #4ade80,   /* verde   */
        #38bdf8,   /* celeste */
        #818cf8,   /* azul    */
        #c084fc,   /* lila    */
        #f472b6    /* rosado  */
    ) !important;
}

/* Check de selección: overlay semitransparente + check blanco */
.hybinet-color-swatch.is-multicolor.is-active .hybinet-color-swatch__dot::after {
    background-color: rgba(0, 0, 0, 0.20);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Anillo activo con degradado para que combine con el disco */
.hybinet-color-swatch.is-multicolor.is-active::before {
    border-color: transparent;
    background: conic-gradient(
        #f87171 0deg 45deg,
        #facc15 45deg 135deg,
        #4ade80 135deg 225deg,
        #818cf8 225deg 315deg,
        #f87171 315deg 360deg
    );
    border-radius: 50%;
    inset: -5px;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    .hybinet-color-swatch {
        width: 32px;
        height: 32px;
    }
}