/* EN: panel/modules/color-picker/dbot-color-picker.css */

/*
 * D-BOT MAKER Color Picker - NAHUI STUDIO EDITION 🎨
 * Tema: Cyberpunk Glassmorphism
 */

/* --- 1. Contenedor Principal (El Popup) --- */
#dbot-color-picker {
    width: 280px;
    background: rgba(8, 6, 18, 0.95); /* Cristal oscuro Nahui */
    backdrop-filter: blur(15px); /* Efecto vidrio */
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 223, 216, 0.1); /* Sombra pesada + resplandor neón */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde de cristal */
    padding: 15px;
    position: absolute; 
    z-index: 99999 !important; /* Nivel Dios */
    display: none; 
    font-family: 'Outfit', 'Inter', 'Segoe UI', sans-serif; /* Fuentes de Nahui */
    box-sizing: border-box; 
}

#dbot-color-picker * {
    box-sizing: border-box; 
}

/* --- 2. Canvas Principal (Saturación y Brillo) --- */
.picker-main {
    width: 100%;
    height: 0;
    padding-bottom: 75%; 
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: crosshair;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Separador sutil */
}

.picker-saturation {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
}

.picker-brightness {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, black, rgba(0, 0, 0, 0));
}

.picker-canvas-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    transform: translate(-8px, -8px); 
    pointer-events: none; 
}

/* --- 3. Controles (Sliders y Preview) --- */
.picker-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.picker-sliders {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.picker-hue-slider,
.picker-alpha-slider {
    width: 100%;
    height: 12px; /* Un poco más estilizado */
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.5); /* Hundimiento sutil */
}

.picker-hue-handle,
.picker-alpha-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    background: #fff; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    top: -2px; 
    transform: translateX(-8px); 
    pointer-events: none;
}

/* Gradientes */
.picker-hue-slider {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.picker-alpha-slider {
    background-image: repeating-conic-gradient(#1e1e24 0% 25%, #0a0a0c 0% 50%); /* Cuadritos oscuros pro */
    background-size: 10px 10px; 
}

/* Círculo de previsualización */
.picker-preview {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background-image: repeating-conic-gradient(#1e1e24 0% 25%, #0a0a0c 0% 50%);
    background-size: 10px 10px;
    border: 2px solid rgba(255, 255, 255, 0.1); /* Borde cristal */
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.picker-preview-color {
    width: 100%;
    height: 100%;
    background-color: #ff0000; 
}

/* --- 4. Inputs de Texto (HEX, RGBA) --- */
.picker-inputs {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.input-group {
    flex: 1; 
    position: relative;
}

.input-group:first-child {
    flex-grow: 1.5;
}

.picker-inputs input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4); /* Fondo oscuro transparente */
    padding: 8px 4px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: 'Consolas', monospace; /* Letra de código para los valores */
    text-align: center;
    color: #ffffff; /* Texto blanco brillante */
    outline: none;
    transition: all 0.2s ease;
}

.picker-inputs input:focus {
    border-color: #00DFD8; /* Nahui Neon Blue */
    background: rgba(0, 223, 216, 0.05);
    box-shadow: 0 0 8px rgba(0, 223, 216, 0.3); /* Glow neón */
}

.picker-inputs label {
    display: block;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #8892b0; /* Gris azulado sutil */
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.gallery-manager-item {
            position: relative;
            aspect-ratio: 1 / 1;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--glass-border);
            background: #000;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            transition: transform 0.2s;
        }
        .gallery-manager-item:hover {
            transform: translateY(-3px);
            border-color: var(--primary);
        }
        .gallery-manager-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
            transition: 0.2s;
        }
        .gallery-manager-item:hover img {
            opacity: 1;
        }
        .gallery-manager-delete {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 28px;
            height: 28px;
            background: rgba(255, 0, 0, 0.8);
            color: white;
            border: none;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }
        .gallery-manager-item:hover .gallery-manager-delete {
            opacity: 1;
            transform: scale(1);
        }
        .gallery-manager-delete:hover {
            background: #ff0000;
            transform: scale(1.1) !important;
        }