/* =========================================================
   BLANKA STANCZUK — PALETAS DE COLOR

   TODOS los colores de la web están aquí. Cambiando una paleta
   cambia la web entera: títulos, botones, bordes, brillos y fondo.

   Para elegir cuál se usa, abre js/data.js y cambia:
        paleta: "neon"
   por el nombre de la que quieras (están listadas más abajo).

   Si tienes activado modoPruebas, te sale abajo a la izquierda
   un selector para ir cambiándolas en vivo.

   ---------------------------------------------------------
   PARA AÑADIR UNA PALETA NUEVA: copia un bloque entero,
   cámbiale el nombre entre comillas y mete tus colores.
   ---------------------------------------------------------

   Qué es cada cosa:
     --c-1 … --c-5   tus 5 colores, del más claro al más oscuro
     --rgb-rose      el claro (bordes finos, etiquetas)
     --rgb-pink      el protagonista (botones, brillos)
     --rgb-violet    el acompañante (degradados, halos)
     --rgb-bg        el fondo general
     --rgb-bg-alt    el fondo de las franjas alternas
     --metal         el degradado metálico de los títulos
   ========================================================= */


/* =========================================================
   1. "neon" — tu marca subida de intensidad  (LA DE AHORA)
   ========================================================= */
:root,
:root[data-paleta="neon"] {
  --c-1: #FFB8D6;
  --c-2: #FF5CA8;
  --c-3: #C2379E;
  --c-4: #8A3FD4;
  --c-5: #411E57;

  --rgb-rose:   255 168 206;
  --rgb-pink:   255  92 168;
  --rgb-violet: 180 124 255;
  --rgb-bg:       7   4  14;
  --rgb-bg-alt:  13   7  25;

  --bg:     #07040E;
  --bg-alt: #0D0719;
  --text:   #F1E9F5;
  --muted:  #A895BC;
  --dim:    #6E5F84;

  --rgb-estrella: 255 194 74;

  --metal: linear-gradient(100deg,
      #FFB8D6 0%, #FFFFFF 8%, #FF5CA8 22%,
      #C2379E 36%, #8A3FD4 50%, #B47CFF 62%,
      #FF6FD8 76%, #FFFFFF 90%, #FFB8D6 100%);
}


/* =========================================================
   2. "marca" — tu guía de marca tal cual, más suave
   ========================================================= */
:root[data-paleta="marca"] {
  --c-1: #EDABBE;   /* Metallic Pink   */
  --c-2: #DE5C8F;   /* Blush           */
  --c-3: #872D72;   /* Boysenberry     */
  --c-4: #7C4EBB;   /* Royal Purple    */
  --c-5: #411E57;   /* American Purple */

  --rgb-rose:   237 171 190;
  --rgb-pink:   222  92 143;
  --rgb-violet: 124  78 187;
  --rgb-bg:       9   5  16;
  --rgb-bg-alt:  16   9  28;

  --bg:     #090510;
  --bg-alt: #10091C;
  --text:   #F1E9F5;
  --muted:  #A895BC;
  --dim:    #6E5F84;

  --rgb-estrella: 255 194 74;

  --metal: linear-gradient(100deg,
      #EDABBE 0%, #FFF4F8 9%, #DE5C8F 24%,
      #872D72 42%, #7C4EBB 58%, #C79BE8 70%,
      #DE5C8F 84%, #FFF4F8 93%, #EDABBE 100%);
}


/* =========================================================
   3. "cromo" — metálico de verdad: plata rosada y acero
   ========================================================= */
:root[data-paleta="cromo"] {
  --c-1: #F6D9E4;
  --c-2: #E88FB4;
  --c-3: #A8628F;
  --c-4: #6F5B8E;
  --c-5: #2B2340;

  --rgb-rose:   246 217 228;
  --rgb-pink:   232 143 180;
  --rgb-violet: 150 130 190;
  --rgb-bg:      10   9  16;
  --rgb-bg-alt:  18  16  28;

  --bg:     #0A0910;
  --bg-alt: #12101C;
  --text:   #F4F0F6;
  --muted:  #A9A2B8;
  --dim:    #6F6880;

  --rgb-estrella: 255 194 74;

  --metal: linear-gradient(100deg,
      #FFFFFF 0%, #F6D9E4 10%, #C9A6BC 22%,
      #8E7FA6 34%, #FFFFFF 46%, #E88FB4 58%,
      #6F5B8E 72%, #F6D9E4 86%, #FFFFFF 100%);
}


/* =========================================================
   4. "electrico" — rosa fluor y violeta, máximo contraste
   ========================================================= */
:root[data-paleta="electrico"] {
  --c-1: #FFD1E8;
  --c-2: #FF2E97;
  --c-3: #D816C6;
  --c-4: #8B2BFF;
  --c-5: #2E0F4F;

  --rgb-rose:   255 209 232;
  --rgb-pink:   255  46 151;
  --rgb-violet: 155  70 255;
  --rgb-bg:       5   2  12;
  --rgb-bg-alt:  12   4  26;

  --bg:     #05020C;
  --bg-alt: #0C041A;
  --text:   #F8EDF8;
  --muted:  #B098C4;
  --dim:    #74608C;

  --rgb-estrella: 255 205 90;

  --metal: linear-gradient(100deg,
      #FFD1E8 0%, #FFFFFF 7%, #FF2E97 20%,
      #D816C6 34%, #8B2BFF 48%, #C46BFF 60%,
      #FF2E97 76%, #FFFFFF 90%, #FFD1E8 100%);
}


/* =========================================================
   5. "aurora" — tus rosas + un toque de cian, como las fotos
      del fondo que mandaste
   ========================================================= */
:root[data-paleta="aurora"] {
  --c-1: #B8F0FF;
  --c-2: #FF5CA8;
  --c-3: #9B4DCC;
  --c-4: #3FC9E8;
  --c-5: #2A1145;

  --rgb-rose:   184 240 255;
  --rgb-pink:   255  92 168;
  --rgb-violet:  99 140 255;
  --rgb-bg:       4   5  16;
  --rgb-bg-alt:  10  10  30;

  --bg:     #040510;
  --bg-alt: #0A0A1E;
  --text:   #EAF2FA;
  --muted:  #93A3C0;
  --dim:    #5E6C88;

  --rgb-estrella: 255 194 74;

  --metal: linear-gradient(100deg,
      #B8F0FF 0%, #FFFFFF 9%, #3FC9E8 22%,
      #638CFF 36%, #9B4DCC 50%, #FF5CA8 66%,
      #FFB8D6 80%, #FFFFFF 92%, #B8F0FF 100%);
}


/* =========================================================
   6. "fucsia" — la paleta de Pinterest "Purple and Pink"
      Magenta fucsia sobre morados muy oscuros
   ========================================================= */
:root[data-paleta="fucsia"] {
  --c-1: #FF6FE0;
  --c-2: #F50FC8;
  --c-3: #8E109A;
  --c-4: #4E0B4A;
  --c-5: #2A0A24;

  --rgb-rose:   255 143 230;
  --rgb-pink:   245  15 200;
  --rgb-violet: 170  40 210;
  --rgb-bg:      12   2  14;
  --rgb-bg-alt:  26   5  30;

  --bg:     #0C020E;
  --bg-alt: #1A051E;
  --text:   #FCEBF8;
  --muted:  #C29ABC;
  --dim:    #8A6285;

  --rgb-estrella: 255 194 74;

  --metal: linear-gradient(100deg,
      #FF9FEA 0%, #FFFFFF 8%, #F50FC8 21%,
      #C10F8E 33%, #8E109A 46%, #C44BE0 58%,
      #FF0FD4 74%, #FFFFFF 89%, #FF9FEA 100%);
}


/* =========================================================
   SELECTOR DE PRUEBAS
   Solo aparece si modoPruebas está en true (js/data.js).
   No se ve en la web publicada.
   ========================================================= */
.probador {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgb(var(--rgb-bg) / .96);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(var(--rgb-rose) / .45);
  box-shadow: 0 16px 50px -14px rgb(var(--rgb-pink) / .7);
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity .25s ease;
}

/* Plegado: solo se ve el título. Se pliega pulsando el título. */
.probador.is-plegado { padding: 10px 14px; }
.probador.is-plegado .probador__opciones,
.probador.is-plegado .probador__nombre { display: none; }

.probador__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--dim);
  cursor: pointer;
}

.probador__cerrar {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  padding: 0;
}

.probador__opciones { display: flex; flex-wrap: wrap; gap: 6px; max-width: 250px; }

.probador__bola {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, border-color .2s ease;
}

.probador__bola:hover { transform: scale(1.15); }
.probador__bola.is-activa { border-color: var(--text); transform: scale(1.15); }

.probador__nombre { color: var(--text); text-transform: none; letter-spacing: .04em; }

.probador__titulo--sub {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgb(var(--rgb-rose) / .15);
}

.probador__fondos { display: flex; flex-wrap: wrap; gap: 6px; max-width: 250px; }

.probador__fondo {
  padding: 6px 11px;
  border-radius: 100px;
  border: 1px solid rgb(var(--rgb-rose) / .25);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.probador__fondo:hover { color: var(--text); border-color: var(--c-2); }

.probador__fondo.is-activa {
  background: linear-gradient(100deg, var(--c-2), var(--c-4));
  border-color: transparent;
  color: #fff;
}

.probador.is-plegado .probador__titulo--sub,
.probador.is-plegado .probador__fondos { display: none; }

/* El selector puede crecer: que nunca se salga de la pantalla */
.probador { max-height: calc(100vh - 32px); overflow-y: auto; }

@media (max-width: 760px) {
  .probador { right: 10px; bottom: 10px; padding: 10px 12px; }
  .probador__opciones { max-width: 160px; }
}