/* --- 1. BASE Y ANIMACIÓN --- */
* {
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    text-align: center;
    color: #2c3e50;
    overflow-x: hidden;
    background: linear-gradient(-45deg, #74ebd5, #ACB6E5, #e0c3fc, #74ebd5);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 2. HEADER Y LOGO --- */
header { 
    padding: 20px 40px; 
    text-align: left; 
}

header h2 { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-weight: 900; 
    margin: 0; 
    color: #333;
    user-select: none;
}

header span.circle { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: conic-gradient(red, orange, yellow, green, blue, indigo, violet); 
}

header hr.divider { 
    border: none; 
    border-top: 2px solid #2c3e50; 
    margin-top: 10px; 
    opacity: 0.2; 
}

/* --- 3. CONTROLES Y BOTONES --- */
h1 { 
    font-size: 3.5rem; 
    font-weight: 900; 
    letter-spacing: -2px; 
    line-height: 1; 
    margin: 20px 0;
    user-select: none;
}

.instruction-text { 
    font-size: 1.1rem; 
    font-weight: 700; 
    margin-bottom: 15px;
    user-select: none;
}

.size-list { 
    list-style: none; 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    padding: 0; 
    margin-bottom: 25px; 
}

.size-list input { display: none; }

.size-list label { 
    background: white; 
    padding: 8px 18px; 
    border-radius: 20px; 
    cursor: pointer; 
    font-weight: 700; 
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    user-select: none;
}

.size-list input:checked + label { 
    background: #4a5673; 
    color: white; 
}

/* Estilos de botones principales */
#genBtn, #saveBtn, #toggleFormatBtn { 
    background: #4a5673; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    padding: 14px 30px; 
    font-weight: 700; 
    font-size: 1rem; 
    cursor: pointer; 
    transition: all 0.3s ease;
    display: inline-block;
    user-select: none;
}

#saveBtn { background: #2c3e50; margin: 40px 0; }

#toggleFormatBtn { margin-left: 10px; }

/* Simetría perfecta para botones de acción */
#genBtn, #toggleFormatBtn {
    min-width: 260.09px;
    justify-content: center;
}

#genBtn:hover, #saveBtn:hover, #toggleFormatBtn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    opacity: 0.9;
}

#genBtn:active, #toggleFormatBtn:active { transform: translateY(0); }

/* --- 4. PALETA DE COLORES --- */
.palette { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    padding: 20px; 
    max-width: 950px; 
    margin: 0 auto; 
}

/* Visibilidad HEX/HSL */
.hsl-code { display: none; }
.palette.show-hsl .hex-code { display: none; }
.palette.show-hsl .hsl-code { display: block; }

.color-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    flex: 0 1 135px; 
    animation: fadeIn 0.5s ease forwards;
    user-select: none;
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.color-box { 
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    border: 4px solid white; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); 
    transition: 0.4s;
    cursor: default;
}

.hex-code, .hsl-code { 
    font-family: 'SF Mono', monospace; 
    cursor: pointer; 
    padding: 4px 8px; 
    border-radius: 4px; 
    transition: 0.2s;
    user-select: none;
}

.hex-code { margin-top: 12px; font-weight: 700; font-size: 1.1rem; }
.hsl-code { color: #333; font-weight: 700; font-size: 0.8rem; margin-top: 12px; }

.hex-code:hover, .hsl-code:hover { background: rgba(255, 255, 255, 0.4); }

.lock-btn { 
    border: none; 
    background: white; 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    cursor: pointer; 
    margin-top: 12px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
    font-size: 1.1rem; 
}

/* Estado Bloqueado */
.color-card.is-locked .color-box { border: 5px solid #2c3e50; transform: scale(0.9); }
.color-card.is-locked .lock-btn { background: #2c3e50; color: white; }

/* --- 5. SECCIÓN GUARDADOS --- */
aside { 
    background: rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(8px); 
    padding: 30px; 
    max-width: 600px; 
    margin: 20px auto; 
    border-radius: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.3);
    user-select: none;
}

#savedList { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.saved-item { 
    background: white; 
    padding: 12px 20px; 
    border-radius: 12px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    cursor: default;
}

/* Eliminación de cursor en números y símbolos # */
.saved-item small, .mini-palette, .mini-dot {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.mini-palette { display: flex; gap: 5px; }
.mini-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #eee; }

.delete-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    font-size: 1.2rem; 
    transition: 0.2s; 
    opacity: 0.6;
}

.delete-btn:hover { transform: scale(1.2); opacity: 1; }

/* --- 6. FOOTER --- */
footer { 
    padding: 60px 20px; 
    opacity: 0.8; 
    font-size: 0.9rem; 
    line-height: 1.8; 
    color: #4a5673;
    user-select: none;
}

footer strong { color: #2c3e50; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }
footer p:first-of-type { font-weight: 700; letter-spacing: 1px; }

.heart { color: #e74c3c; display: inline-block; padding-left: 2px; animation: heartbeat 1.5s ease infinite; }

@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}