/* wlst · los ajustes (ui/js/ajustes.mjs): la limpieza de Linear con lo
 * que tiene de rico Discord, sin calcar a ninguno.
 *
 * Una página más de la app. A la izquierda, tú (avatar, nombre con su estilo
 * y «Editar perfil»), el buscador y los apartados con iconos de trazo fino,
 * con encabezados de grupo y los sub-apartados del activo; el activo, en el
 * acento. A la derecha, el título y las secciones: título claro y filas sobre
 * la superficie (título, descripción gris y el valor o el control a la
 * derecha). En el móvil, la lista y cada apartado a pantalla completa.
 *
 * Solo tokens de estilo.css: capas, --borde entre filas, --esp-*, radios
 * y --tam-*. */

.ajustes-raiz { display: block; }
.solo-escritorio { display: none !important; }

/* ---------------------------------------------------------------- la columna */

.ajustes-lateral { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.aj-yo { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-1) var(--esp-2) var(--esp-2); }
.aj-yo .avatar.aj-yo-avatar { flex: none; width: 40px; height: 40px; }
.aj-yo-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.aj-yo .aj-yo-nombre { font-size: var(--tam-m); font-weight: 600; }
.aj-yo-editar { display: inline-flex; align-items: center; gap: var(--esp-1); padding: 0; border: 0; background: none; color: var(--texto-3); font: inherit; font-size: var(--tam-s); cursor: pointer; }
.aj-yo-editar:hover { color: var(--texto); }
.aj-yo-editar .aj-icono { width: 13px; height: 13px; }

/* Los iconos de trazo de la lista. */
.aj-icono { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.aj-buscar { display: flex; align-items: center; gap: var(--esp-2); height: 34px; padding: 0 var(--esp-3); border-radius: var(--radio-campo); background: var(--hundido); color: var(--texto-3); cursor: text; }
.aj-buscar:focus-within { box-shadow: inset 0 0 0 1px var(--acento); }
.aj-buscar .aj-icono { width: 16px; height: 16px; }
.aj-buscar-campo { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; font-size: var(--tam-s); outline: none; }
.aj-buscar-campo::placeholder { color: var(--texto-3); }

.aj-menu { display: flex; flex-direction: column; }
.aj-menu[hidden] { display: none; }
.aj-menu-titulo { margin: var(--esp-4) var(--esp-2) var(--esp-1); font-family: var(--fuente); font-size: var(--tam-xs); font-weight: 600; letter-spacing: 0; color: var(--texto-3); }
.aj-menu-titulo:first-child { margin-top: var(--esp-1); }
.aj-menu-opcion {
  display: flex; align-items: center; gap: var(--esp-3); min-height: 34px; padding: var(--esp-1) var(--esp-2);
  border: 0; border-radius: var(--radio); background: none;
  color: var(--texto-2); font: inherit; font-size: var(--tam-s); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.aj-menu-opcion .aj-icono { color: var(--texto-3); }
.aj-menu-opcion:hover { background: var(--estado-hover); color: var(--texto); }
.aj-menu-opcion.activa { background: var(--seleccion); color: var(--texto); }
.aj-menu-opcion.activa .aj-icono { color: var(--acento); }
.aj-menu-texto { display: flex; flex-direction: column; min-width: 0; }
.aj-menu-texto small { font-size: var(--tam-xs); color: var(--texto-3); }

/* Los sub-apartados del activo. */
.aj-sub { display: flex; flex-direction: column; margin: 2px 0 var(--esp-2) 17px; padding-left: var(--esp-3); border-left: 1px solid var(--borde); }
.aj-sub:empty { display: none; }
.aj-sub-opcion { min-height: 28px; padding: 0 var(--esp-2); border: 0; border-radius: var(--radio); background: none; color: var(--texto-3); font: inherit; font-size: var(--tam-s); text-align: left; cursor: pointer; }
.aj-sub-opcion:hover { color: var(--texto); }
.aj-sub-opcion.activa { color: var(--acento); }
.ajustes-raiz .aj-salir, .ajustes-raiz .aj-salir .aj-icono { color: var(--peligro); }
.ajustes-raiz .aj-salir { margin-top: var(--esp-4); }

/* ---------------------------------------------------------------- el contenido */

.ajustes-contenido { min-width: 0; }
.aj-titulo { margin: 0 0 var(--esp-6); font-size: var(--tam-2xl); font-weight: 600; letter-spacing: -0.02em; }
.aj-cuerpo { display: flex; flex-direction: column; gap: var(--esp-10); }

/* La barra del móvil: atrás y el título. */
.ajustes-barra {
  position: sticky; top: var(--cabecera); z-index: 5;
  display: flex; align-items: center; gap: var(--esp-1);
  height: 52px; margin: 0 calc(-1 * var(--lado)) var(--esp-2); padding: 0 var(--esp-2);
  background: var(--fondo);
}
.ajustes-barra h1 { flex: 1; min-width: 0; margin: 0; font-size: var(--tam-l); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- grupos y filas */

.aj-grupo { min-width: 0; scroll-margin-top: calc(var(--cabecera) + var(--esp-4)); }
.aj-grupo[hidden] { display: none; }
.aj-grupo-titulo { margin: 0 0 var(--esp-3); font-family: var(--fuente); font-size: var(--tam-l); font-weight: 600; letter-spacing: -0.01em; color: var(--texto); }
.aj-filas { display: flex; flex-direction: column; border-radius: var(--radio-tarjeta); background: var(--superficie); overflow: hidden; }
.aj-filas:empty { display: none; }
.aj-filas > * + * { border-top: 1px solid var(--borde); }
.aj-nota { margin: var(--esp-2) 0 0; font-size: var(--tam-s); line-height: 1.45; color: var(--texto-3); max-width: 68ch; }

.aj-fila { display: flex; align-items: center; gap: var(--esp-4); min-height: 56px; padding: var(--esp-3) var(--esp-4); }
.aj-fila.apagada { opacity: 0.6; }
.aj-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-fila-titulo { min-width: 0; font-size: var(--tam-m); font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.aj-logo-tmdb { display: block; height: 14px; width: auto; }
.aj-fila-desc { font-size: var(--tam-s); line-height: 1.4; color: var(--texto-3); overflow-wrap: anywhere; }
.aj-fila-control { flex: none; display: flex; align-items: center; gap: var(--esp-2); max-width: 60%; }
.aj-fila .avatar.aj-fila-avatar { flex: none; width: 32px; height: 32px; }
.aj-dato { min-width: 0; font-size: var(--tam-s); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-valor {
  display: inline-flex; align-items: center; gap: var(--esp-2); height: 32px; padding: 0 var(--esp-1);
  border: 0; border-radius: var(--radio); background: none;
  color: var(--texto-2); font: inherit; font-size: var(--tam-s); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.aj-valor:hover { color: var(--texto); }
.aj-chevron { color: var(--texto-3); font-size: var(--tam-l); line-height: 1; }
.ajustes-raiz .aj-desplegable .desplegable-boton { min-width: 150px; justify-content: space-between; background: var(--elevada); }
.ajustes-raiz .aj-desplegable .desplegable-boton:hover { background: color-mix(in srgb, var(--elevada) 85%, var(--texto)); }
.ajustes-raiz .interruptor:disabled, .ajustes-raiz .aj-desplegable .desplegable-boton:disabled { opacity: 0.5; cursor: not-allowed; }
.aj-aviso { margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--superficie); font-size: var(--tam-s); line-height: 1.5; color: var(--texto-2); }

.aj-form-linea { display: flex; gap: var(--esp-2); padding: 0 var(--esp-4) var(--esp-4); }
.aj-filas > .aj-form-linea { border-top: 0; }
.aj-form-linea .campo-texto { flex: 1; min-width: 0; height: 34px; font-size: var(--tam-s); }
.aj-codigo-linea { display: inline-flex; align-items: baseline; gap: var(--esp-2); }
.aj-codigo { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--tam-s); }
.aj-mostrar { padding: 0; border: 0; background: none; color: var(--acento); font: inherit; font-size: var(--tam-s); cursor: pointer; }

/* Lo vacío, con la mascota (en svg de un color: se pinta como máscara). */
.aj-vacio { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); font-size: var(--tam-s); color: var(--texto-3); }
.aj-mascota { flex: none; width: 40px; height: 34px; background: var(--texto-3); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.aj-mascota.dormida { --m: url('/img/mascota/dormida.svg'); }
.aj-mascota.lupa { --m: url('/img/mascota/lupa.svg'); }

/* Lo que se busca, señalado un momento. */
@keyframes aj-senal { 0%, 30% { background: var(--seleccion); } 100% { background: transparent; } }
.aj-senalada { animation: aj-senal 1.6s ease-out; }

/* Las hojas (el nombre, el @, la contraseña y las sesiones). */
.aj-hoja { display: flex; flex-direction: column; gap: var(--esp-4); }
.aj-hoja h3 { margin: 0; font-size: var(--tam-xl); font-weight: 600; }
.aj-hoja-detalle { margin: calc(-1 * var(--esp-2)) 0 0; font-size: var(--tam-s); line-height: 1.45; color: var(--texto-2); }
.aj-hoja .fila-botones:empty { display: none; }
.aj-estado { margin: calc(-1 * var(--esp-1)) 0 0; min-height: 18px; font-size: var(--tam-s); color: var(--texto-3); }
.aj-estado.bien { color: var(--bien); }
.aj-estado.mal { color: var(--peligro); }

/* ---------------------------------------------------------------- Apariencia */

/* Los temas: muestras redondas (el fondo con una media luna del acento) y el nombre debajo. */
.aj-temas { display: flex; flex-wrap: wrap; gap: var(--esp-5) var(--esp-2); }
.aj-tema {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); width: 88px; padding: var(--esp-1) 0 0;
  border: 0; border-radius: var(--radio); background: none; color: var(--texto-2); font: inherit; text-align: center; cursor: pointer;
}
.aj-tema:hover, .aj-tema[aria-checked='true'] { color: var(--texto); }
.aj-tema:focus-visible { outline: none; }
.aj-tema:focus-visible .aj-tema-muestra { outline: 2px solid var(--acento); outline-offset: 6px; }
.aj-tema-circulo { position: relative; display: block; width: 68px; height: 68px; }
.aj-tema-muestra {
  position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; border-radius: 50%;
  background: var(--f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 16%, transparent);
  transition: transform 0.15s ease;
}
.aj-tema:hover .aj-tema-muestra { transform: scale(1.05); }
/* La media luna: un disco del acento tapado en parte por otro del fondo. */
.aj-tema-muestra::before, .aj-tema-muestra::after { content: ''; position: absolute; border-radius: 50%; }
.aj-tema-muestra::before { inset: 24%; background: var(--a); }
.aj-tema-muestra::after { width: 44%; height: 44%; left: 17%; top: 17%; background: var(--f); }
/* El personalizado: el degradado de sus dos colores; sin estrenar, un «+». */
.aj-tema[data-id='propio'] .aj-tema-muestra { background: linear-gradient(135deg, var(--f), var(--a)); }
.aj-tema[data-id='propio'] .aj-tema-muestra::before, .aj-tema[data-id='propio'] .aj-tema-muestra::after { content: none; }
.aj-tema[data-id='propio'] .aj-tema-muestra.vacia { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--borde); color: var(--texto-2); font-size: var(--tam-3xl); font-weight: 300; line-height: 1; }
/* El elegido: un aro claro y la marca. */
.aj-tema[aria-checked='true'] .aj-tema-muestra { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 16%, transparent), 0 0 0 3px var(--fondo), 0 0 0 5px var(--texto); }
.aj-tema-marca { position: absolute; right: -3px; bottom: -3px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--texto); color: var(--fondo); box-shadow: 0 0 0 3px var(--fondo); }
.aj-tema-marca .icono { width: 12px; height: 12px; fill: currentColor; }
.aj-tema[aria-checked='true'] .aj-tema-marca { display: grid; }
.aj-tema-nombre { font-size: var(--tam-s); font-weight: 500; line-height: 1.25; }

/* El personalizado, debajo de las muestras: los dos colores, las muestras rápidas y, si hace falta, una línea. */
.aj-propio { display: flex; flex-direction: column; gap: var(--esp-4); margin-top: var(--esp-6); padding: var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.aj-propio[hidden] { display: none; }
.aj-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--esp-3); }
.aj-pick { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-3); border-radius: var(--radio-tarjeta); background: var(--elevada); box-shadow: inset 0 0 0 1px transparent; cursor: pointer; }
.aj-pick.activo { box-shadow: inset 0 0 0 2px var(--texto-3); }
.aj-pick.apagado { cursor: default; }
.aj-pick.apagado .aj-pick-circulo, .aj-pick.apagado .aj-pick-texto { opacity: 0.4; }
.aj-pick .interruptor { margin-left: auto; }
/* El cuadro del sistema, como una muestra redonda grande (pisa input[type=color] de estilo.css). */
.ajustes-raiz input.aj-pick-circulo {
  appearance: none; -webkit-appearance: none; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 16%, transparent); cursor: pointer; overflow: hidden;
}
.ajustes-raiz input.aj-pick-circulo:disabled { cursor: default; }
.ajustes-raiz input.aj-pick-circulo::-webkit-color-swatch-wrapper { padding: 0; }
.ajustes-raiz input.aj-pick-circulo::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ajustes-raiz input.aj-pick-circulo::-moz-color-swatch { border: 0; border-radius: 50%; }
.aj-pick-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aj-pick-nombre { font-size: var(--tam-m); font-weight: 600; color: var(--texto); }
.ajustes-raiz .aj-hex {
  width: 9ch; height: 24px; padding: 0 var(--esp-1); margin-left: calc(-1 * var(--esp-1)); border: 0; border-radius: var(--radio);
  background: none; box-shadow: none; color: var(--texto-3); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--tam-s);
}
.ajustes-raiz .aj-hex:hover, .ajustes-raiz .aj-hex:focus { background: var(--hundido); color: var(--texto); }
.ajustes-raiz .aj-hex.mal { box-shadow: inset 0 0 0 1px var(--peligro); }
.aj-muestras { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.aj-muestra { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 16%, transparent); cursor: pointer; transition: transform 0.12s ease; }
.aj-muestra:hover { transform: scale(1.1); }
.aj-muestra[aria-checked='true'] { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--texto); }
.aj-juicio { margin: 0; font-size: var(--tam-s); line-height: 1.45; color: var(--texto-3); }
.aj-juicio[hidden] { display: none; }

/* La barra de guardar (la del perfil, perfil.css), pegada abajo; en el móvil, sobre la barra de la app. */
.ajustes-raiz .aj-barra { margin: 0; box-shadow: 0 0 0 1px var(--borde); }
@media (max-width: 899px) {
  .ajustes-raiz .aj-barra { bottom: var(--esp-2); }
  .aj-temas { gap: var(--esp-4) var(--esp-1); }
  .aj-tema { width: 76px; }
  .aj-tema-circulo { width: 56px; height: 56px; }
  .aj-tema-marca { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------- Términos */

.aj-terminos { display: flex; flex-direction: column; gap: var(--esp-6); max-width: 68ch; }
.aj-terminos p { margin: 0 0 var(--esp-2); font-size: var(--tam-m); line-height: 1.6; color: var(--texto-2); }

/* ---------------------------------------------------------------- móvil */

@media (max-width: 899px) {
  .ajustes-raiz.con-apartado .ajustes-lateral, .ajustes-raiz:not(.con-apartado) .ajustes-contenido { display: none; }
  /* Dentro de un apartado no hace falta la barra de abajo: está el atrás. */
  body:has(.ajustes-raiz.con-apartado) #barra { display: none; }
  .ajustes-lateral { padding-bottom: var(--esp-8); }
  /* La lista, en grupos sobre la superficie. */
  .aj-menu-opcion { min-height: 48px; padding: var(--esp-2) var(--esp-4); border-radius: 0; background: var(--superficie); color: var(--texto); font-size: var(--tam-m); }
  .aj-menu-opcion + .aj-menu-opcion { border-top: 1px solid var(--borde); }
  .aj-menu-opcion { position: relative; padding-right: var(--esp-8); }
  .aj-menu-opcion:not(.aj-salir)::after { content: '›'; position: absolute; right: var(--esp-4); top: 50%; transform: translateY(-50%); color: var(--texto-3); font-size: var(--tam-xl); }
  .aj-menu-titulo + .aj-menu-opcion, .aj-menu-opcion:first-child { border-top-left-radius: var(--radio-tarjeta); border-top-right-radius: var(--radio-tarjeta); }
  .aj-menu-opcion:has(+ .aj-menu-titulo), .aj-menu-opcion:last-child, .aj-menu-opcion:has(+ .aj-salir) { border-bottom-left-radius: var(--radio-tarjeta); border-bottom-right-radius: var(--radio-tarjeta); }
  .ajustes-raiz .aj-salir { border-top: 0; border-radius: var(--radio-tarjeta); }
  .aj-menu-titulo { margin-left: var(--esp-1); }
  .aj-sub { display: none; }
  .aj-menu-opcion .aj-icono { width: 20px; height: 20px; }
  .aj-buscar { height: 40px; }
  .aj-buscar-campo { font-size: var(--tam-m); }
  .aj-fila:has(.aj-desplegable) { flex-wrap: wrap; }
  .aj-fila:has(.aj-desplegable) .aj-fila-control, .aj-fila:has(.aj-desplegable) .aj-desplegable, .aj-fila .aj-desplegable .desplegable-boton { width: 100%; max-width: none; }
  /* Unos segmentos (el contenido sensible), debajo del texto y a todo lo ancho, cada uno igual. */
  .aj-fila:has(> .aj-fila-control > .segmentos) { flex-wrap: wrap; }
  .aj-fila-control:has(> .segmentos), .aj-fila-control > .segmentos { width: 100%; max-width: none; }
  .aj-fila-control > .segmentos > .segmento { flex: 1 1 0; }
}

/* ---------------------------------------------------------------- escritorio */

@media (min-width: 900px) {
  .solo-movil { display: none !important; }
  .solo-escritorio { display: block !important; }
  #vista > .ajustes-raiz { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: var(--esp-12); align-items: start; padding-top: var(--esp-6); }
  .ajustes-lateral { position: sticky; top: calc(var(--cabecera) + var(--esp-4)); max-height: calc(100vh - var(--cabecera) - var(--esp-8)); overflow-y: auto; }
}

/* Escritorio ancho (desde 1600 px): la columna más ancha y pegada al contenido,
   las filas con más aire y la letra un punto mayor; las filas no pasan de 960 px. */
@media (min-width: 1600px) {
  body.dentro #vista > .ajustes-raiz { grid-template-columns: clamp(260px, 16vw, 300px) minmax(0, 960px); gap: var(--esp-16); max-width: 1324px; padding-top: var(--esp-8); }
  .ajustes-lateral { gap: var(--esp-4); }
  .aj-yo .avatar.aj-yo-avatar { width: 48px; height: 48px; }
  .aj-buscar { height: 40px; }
  .aj-menu-opcion { min-height: 42px; padding: var(--esp-2) var(--esp-3); font-size: var(--tam-m); }
  .aj-menu-opcion .aj-icono { width: 20px; height: 20px; }
  .aj-sub-opcion { min-height: 32px; font-size: var(--tam-m); }
  .aj-titulo { margin-bottom: var(--esp-8); font-size: var(--tam-3xl); }
  .aj-grupo-titulo { margin-bottom: var(--esp-4); font-size: var(--tam-xl); }
  .aj-fila { min-height: 72px; gap: var(--esp-6); padding: var(--esp-4) var(--esp-6); }
  .aj-fila-titulo { font-size: var(--tam-l); }
  .aj-fila-desc { font-size: var(--tam-m); }
  .aj-temas { gap: var(--esp-6) var(--esp-3); }
  .aj-tema { width: 100px; }
  .aj-tema-circulo { width: 76px; height: 76px; }
  .aj-tema-nombre { font-size: var(--tam-m); }
}