/* Selector de combinaciones de color (js/paletas.js). */
.paletas { position: fixed; right: var(--gx); top: calc(88px + env(safe-area-inset-top, 0px)); z-index: 130; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.paletas, .paletas * { cursor: pointer; }
.paletas__boton { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: rgb(var(--superficie-rgb) / .85); color: var(--text); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgb(0 0 0 / .08); }
.paletas__muestra { display: inline-flex; }
.paletas__muestra i { width: 10px; height: 10px; border-radius: 50%; margin-left: -3px; border: 1.5px solid var(--superficie); transition: background .4s; }
.paletas__muestra i:nth-child(1) { background: var(--cian); margin-left: 0; }
.paletas__muestra i:nth-child(2) { background: var(--azul); }
.paletas__muestra i:nth-child(3) { background: var(--text); }

.paletas__panel { display: flex; flex-direction: column; gap: 8px; width: 292px; max-height: calc(100vh - 150px); overflow: auto; padding: 14px;
  border-radius: 18px; background: rgb(var(--superficie-rgb) / .96); color: var(--text); border: 1px solid var(--line);
  backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgb(0 0 0 / .18); overscroll-behavior: contain; }
.paletas__panel[hidden] { display: none; }
.paletas__titulo { margin: 4px 0 0 2px; color: var(--text-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* Cuadrícula: cada tarjeta muestra el fondo real con sus tres acentos encima. */
.paletas__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.paletas__opcion { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; min-width: 0; }
.paletas__lienzo { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1.25;
  border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(var(--text-rgb) / .14); transition: transform .2s, box-shadow .2s; }
.paletas__lienzo i { width: 13px; height: 13px; border-radius: 50%; margin-left: -4px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .55); }
.paletas__lienzo i:first-child { margin-left: 0; }
.paletas__nombre { max-width: 100%; font-size: 11px; line-height: 1.15; color: var(--text-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paletas__opcion:hover .paletas__lienzo { transform: translateY(-1px); }
.paletas__opcion:focus-visible { outline: none; }
.paletas__opcion:focus-visible .paletas__lienzo { box-shadow: 0 0 0 2px var(--cian); }
.paletas__opcion[aria-pressed="true"] .paletas__lienzo { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--cian); }
.paletas__opcion[aria-pressed="true"] .paletas__nombre { color: var(--text); font-weight: 500; }

.paletas__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.paletas__actual { display: flex; flex-direction: column; font-size: 13px; font-weight: 500; color: var(--text); }
.paletas__actual small { font-size: 11px; font-weight: 400; color: var(--text-2); }
.paletas__copiar { padding: 8px 14px; border-radius: 999px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--text); background: var(--text); color: var(--noche); }

@media (max-width: 760px) {
  .paletas { right: 16px; top: calc(126px + env(safe-area-inset-top, 0px)); }
  .paletas__panel { width: min(292px, calc(100vw - 32px)); }
}

/* Pestañas Paleta / Onda del agua */
.paletas__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 999px; background: rgb(var(--text-rgb) / .06); }
.paletas__tab { padding: 7px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); transition: background .2s, color .2s; }
.paletas__tab[aria-selected="true"] { background: rgb(var(--text-rgb) / .16); color: var(--text); }
.paletas__seccion { display: flex; flex-direction: column; gap: 8px; }
.paletas__seccion[hidden] { display: none; }
.paletas__ayuda { margin: 4px 2px 0; font-size: 11px; color: var(--text-2); }
.paletas__icono { background: rgb(var(--text-rgb) / .06); color: var(--cian); font: 500 18px/1 var(--mono); letter-spacing: -.04em; }
.paletas__opcion[aria-pressed="true"] .paletas__icono { background: rgb(var(--text-rgb) / .12); }
/* Muestra de estela: un trazo curvo con sus dos tonos sobre el fondo de la página */
.paletas__estela { background:
  radial-gradient(120% 95% at 15% 115%, transparent 50%, var(--ea) 55%, var(--eb) 63%, transparent 70%),
  radial-gradient(60% 50% at 70% 35%, color-mix(in srgb, var(--ea) 25%, transparent), transparent 70%),
  var(--noche); }