/* ==========================================================================
   Panel de apariencia ISES
   ==========================================================================
   El cajón lateral que abre el engrane de la barra superior. Se pinta ENTERO
   con los tokens del tema (--i-*, --accent, --radius, las fuentes ya
   cargadas), así que cambia de piel solo cuando el usuario cambia el tema
   desde el propio panel. Es también la prueba más honesta de que la
   tokenización funciona: si algo aquí necesitara un hex, faltaría un token.

   DOS REGLAS DE ESTE ARCHIVO
   1. Todo cuelga de `.aj-panel` o de `#ajustesPanel`. El tema declara
      `body.theme-ises input, textarea, select { height: 34px; padding: 0 10px;
      margin-top: 5px; width: 100% }`, que le gana a una clase suelta por
      número de elementos; el slider salía con 34px de alto y un margen que no
      le tocaba. Con el id delante no hay pelea posible.
   2. Ni una sombra en oscuro: --shadow* está en `none` y la separación la dan
      el borde de 1px y el desenfoque, igual que en el resto del tema. En claro
      los tokens de sombra sí tienen valor y el cajón lo hereda solo.
   ========================================================================== */

/* --- El botón del engrane, en la barra superior --------------------------- */

body:not(.theme-ises) .ises-ajustes-btn { display: none; }

body.theme-ises .ises-ajustes-btn {
  order: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--i-h-btn);
  height: var(--i-h-btn);
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--i-brd-08);
  border-radius: var(--i-r-9);
  background: transparent;
  color: var(--i-txt-4);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
body.theme-ises .ises-ajustes-btn svg { width: 16px; height: 16px; }
body.theme-ises .ises-ajustes-btn:hover {
  border-color: var(--i-brd-16);
  color: var(--i-txt-1);
}
/* Abierto, el engrane se queda encendido: es la pista de que el cajón que
   tapa media pantalla salió de aquí. */
body.theme-ises .ises-ajustes-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-surface);
  color: var(--accent);
}


/* --- El cajón ------------------------------------------------------------ */

.aj-panel {
  position: fixed;
  inset: 0;
  /* Por encima de los modales (1000, la escala que reserva el tema): se abre
     desde la barra superior y tiene que poder verse aunque haya un modal
     detrás. */
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

/* Velo apenas insinuado, y NO el de los modales (--i-velo-modal, 72 %).
   Este panel no construye una vista previa porque la app que queda detrás YA
   es la vista previa: cada cambio se aplica en vivo sobre ella. Con el velo
   de modal encima, esa idea se cae — se elige un acento y no se ve dónde
   aterriza. Aquí el velo solo tiene dos trabajos: recoger el clic de fuera
   para cerrar, y separar lo justo el cajón de lo que hay detrás. */
.aj-velo {
  position: absolute;
  inset: 0;
  background: rgb(var(--hueco-rgb, 0 0 0) / 0.22);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.28s ease;
}
.aj-panel.abierto .aj-velo { opacity: 1; }

.aj-caja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  height: 100%;
  pointer-events: auto;
  border-left: 1px solid var(--i-glass-brd);
  background: var(--i-glass-bg);
  backdrop-filter: var(--i-glass-blur-alto);
  -webkit-backdrop-filter: var(--i-glass-blur-alto);
  box-shadow: var(--shadow-lg);
  /* Un solo momento de movimiento en todo el panel, y sale de donde el usuario
     acaba de pulsar. La curva es la del dock: arranca rápido y frena largo. */
  transform: translateX(100%);
  transition: transform 0.34s var(--i-ease-dock, cubic-bezier(0.32, 0.72, 0, 1));
}
.aj-panel.abierto .aj-caja { transform: translateX(0); }


/* --- Cabecera ------------------------------------------------------------ */

.aj-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--i-brd-07);
}

.aj-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--i-txt-1);
}

.aj-cab-acciones { display: flex; align-items: center; gap: 8px; }

.aj-restablecer {
  height: var(--i-h-btn-sm);
  padding: 0 11px;
  border: 1px solid var(--i-brd-08);
  border-radius: var(--i-r-pill);
  background: transparent;
  color: var(--i-txt-4);
  font-family: var(--font-body);
  font-size: 11.5px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.aj-restablecer:hover { border-color: var(--i-brd-16); color: var(--i-txt-1); }

.aj-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--i-h-btn-sm);
  height: var(--i-h-btn-sm);
  padding: 0;
  border: 0;
  border-radius: var(--i-r-7);
  background: transparent;
  color: var(--i-txt-4);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.aj-cerrar svg { width: 15px; height: 15px; }
.aj-cerrar:hover { background: var(--i-brd-08); color: var(--i-txt-1); }


/* --- Pestañas ------------------------------------------------------------ */

.aj-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  flex: 0 0 auto;
  margin: 12px 18px 0;
  padding: 3px;
  border: 1px solid var(--i-brd-08);
  border-radius: var(--i-r-11);
  background: var(--i-sup-2);
}

.aj-tab {
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid transparent;
  border-radius: var(--i-r-9);
  background: transparent;
  color: var(--i-txt-4);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.aj-tab:hover { color: var(--i-txt-2); }
.aj-tab.activo {
  border-color: var(--i-brd-10);
  background: var(--i-sup-5);
  color: var(--i-txt-1);
  font-weight: 600;
}


/* --- Cuerpo -------------------------------------------------------------- */

.aj-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.aj-hoja { display: flex; flex-direction: column; gap: 24px; }

.aj-grupo { display: flex; flex-direction: column; gap: 9px; }

/* El grupo apagado no se esconde: que desaparezcan dos secciones al pulsar
   "Claro" se lee como que la app perdió opciones, y no como que ahí no
   aplican. Se atenúa y se explica con la nota de al lado. */
.aj-grupo.inactivo { opacity: 0.4; pointer-events: none; }

/* La etiqueta de cada grupo. Mono y diminuta: es el idioma que el tema ya usa
   para rotular datos, no un disfraz de "técnico". */
.aj-etiqueta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--i-txt-5);
}
.aj-pista {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--i-txt-6);
}
.aj-cifra { font-family: var(--font-mono); color: var(--accent); }

.aj-nota {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--i-txt-5);
  text-wrap: pretty;
}


/* --- Control segmentado -------------------------------------------------- */

.aj-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--i-brd-08);
  border-radius: var(--i-r-11);
  background: var(--i-sup-2);
}
.aj-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aj-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.aj-seg button {
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: var(--i-r-9);
  background: transparent;
  color: var(--i-txt-4);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.aj-seg button:hover:not(.activo) { color: var(--i-txt-2); }
.aj-seg button.activo {
  border-color: var(--i-brd-10);
  background: var(--i-sup-5);
  color: var(--i-txt-1);
  font-weight: 600;
}
.aj-seg button:disabled { cursor: default; }


/* --- Muestras de color --------------------------------------------------- */

.aj-colores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.aj-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 11px 4px 9px;
  border: 1px solid var(--i-brd-08);
  border-radius: var(--i-r-11);
  background: var(--i-sup-1);
  color: var(--i-txt-4);
  font-family: var(--font-body);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.aj-color:hover { border-color: var(--i-brd-16); color: var(--i-txt-2); }

.aj-color-punto {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* El anillo separa la muestra de su propio fondo cuando los dos son claros
     (el ámbar sobre el tema en claro). */
  box-shadow: inset 0 0 0 1px rgb(var(--linea-rgb) / 0.18);
}

.aj-color.activo {
  border-color: var(--accent);
  background: var(--accent-surface);
  color: var(--i-txt-1);
  font-weight: 600;
}
.aj-color.activo .aj-color-punto {
  box-shadow:
    inset 0 0 0 1px rgb(var(--linea-rgb) / 0.18),
    0 0 0 3px var(--i-glass-bg),
    0 0 0 4px var(--accent);
}


/* --- Lista de tipografías ------------------------------------------------ */

.aj-fuentes { display: flex; flex-direction: column; gap: 7px; }

.aj-fuente {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--i-brd-08);
  border-radius: var(--i-r-11);
  background: var(--i-sup-1);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.aj-fuente:hover { border-color: var(--i-brd-16); }
.aj-fuente.activo { border-color: var(--accent); background: var(--accent-surface); }

/* La muestra "Aa" va en la fuente que representa: es lo único que hace que
   elegir tipografía no sea elegir un nombre a ciegas. */
.aj-fuente-aa {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--i-r-9);
  background: var(--i-sup-3);
  color: var(--i-txt-2);
  font-size: 16px;
  font-weight: 700;
}
.aj-fuente.activo .aj-fuente-aa { color: var(--accent); }

.aj-fuente-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.aj-fuente-nom {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--i-txt-2);
}
.aj-fuente.activo .aj-fuente-nom { color: var(--i-txt-1); }
.aj-fuente-desc {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--i-txt-5);
  text-wrap: pretty;
}

.aj-punto {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid var(--i-brd-16);
  border-radius: 50%;
}
.aj-fuente.activo .aj-punto {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--i-glass-bg);
}


/* --- Fila con interruptor ------------------------------------------------ */

.aj-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--i-brd-08);
  border-radius: var(--i-r-11);
  background: var(--i-sup-1);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.aj-fila:hover { border-color: var(--i-brd-16); }

.aj-fila-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aj-fila-nom {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--i-txt-1);
}
.aj-fila-desc {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--i-txt-5);
}

.aj-sw {
  display: flex;
  align-items: center;
  width: 40px;
  height: 23px;
  flex: 0 0 40px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: var(--i-r-pill);
  background: var(--i-sup-4);
  transition: background-color 0.2s ease;
}
.aj-sw-bola {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--i-txt-3);
  transition: transform 0.2s var(--i-ease-dock, cubic-bezier(0.32, 0.72, 0, 1)),
              background-color 0.2s ease;
}
.aj-fila.activo .aj-sw { background: var(--accent); }
.aj-fila.activo .aj-sw-bola {
  transform: translateX(17px);
  background: var(--accent-ink);
}


/* --- Deslizador ----------------------------------------------------------
   Con el id delante para ganarle a `body.theme-ises input`, que impone 34px de
   alto, relleno y un margen superior que aquí descuadran la fila. */

#ajustesPanel .aj-rango {
  width: 100%;
  height: 4px;
  margin: 6px 0 2px;
  padding: 0;
  border: 0;
  border-radius: var(--i-r-pill);
  background: var(--i-sup-4);
  accent-color: var(--accent);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#ajustesPanel .aj-rango::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}
#ajustesPanel .aj-rango::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}


/* --- Pie ----------------------------------------------------------------- */

.aj-pie {
  flex: 0 0 auto;
  padding: 14px 18px;
  border-top: 1px solid var(--i-brd-07);
}

/* Un solo botón, y dice "Listo", no "Aplicar": todo se aplicó al pulsarlo y ya
   está guardado. "Aplicar" prometería que hasta ahora no había pasado nada. */
.aj-listo {
  width: 100%;
  height: var(--i-h-campo);
  border: 0;
  border-radius: var(--i-r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.aj-listo:hover { background: var(--accent-hover); }


/* --- Teléfono ------------------------------------------------------------
   El mismo umbral que todo el tema: por debajo de 760px la app ES la versión
   de teléfono. Ahí el cajón entra desde abajo, que es de donde alcanza el
   pulgar, y no ocupa la pantalla entera para que se siga viendo qué se está
   cambiando. */

@media (max-width: 759px) {
  .aj-panel { align-items: flex-end; justify-content: center; }

  .aj-caja {
    width: 100%;
    height: auto;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--i-glass-brd);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .aj-panel.abierto .aj-caja { transform: translateY(0); }

  /* El pie se separa del borde inferior del teléfono. */
  .aj-pie { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}