/* ==========================================================================
   estilos.css — Aspecto del visor.

   Diseño: tema claro, mapa a la izquierda y panel fijo de 420 px a la derecha.
   Los colores se definen una vez como variables en :root y el resto del
   fichero solo las usa, así que para cambiar la paleta basta con tocar aquí.
   ========================================================================== */

:root {
  --bg: #eef1f5;       /* fondo de la página y del mapa mientras cargan teselas */
  --panel: #ffffff;    /* fondo del panel lateral y de las fichas */
  --linea: #e0e4ea;    /* separadores y bordes */
  --texto: #1f2430;    /* texto principal */
  --suave: #6b7280;    /* texto secundario (etiquetas, notas) */
  --acento: #b9257a;   /* sliders, botones, selección (CARTO SunsetDark) */
  --ok: #7c1d6f;       /* puntuación buena (CARTO SunsetDark, el más oscuro) */
  --raya: #f7f8fa;     /* filas alternas y bloques destacados */
  --sel: #fdeef3;      /* fila seleccionada en la lista */
}

* { box-sizing: border-box; }

/* Sliders y casillas con el color de la paleta, no el azul del navegador. */
input[type=range], input[type=checkbox] { accent-color: var(--acento); }

/* El atributo `hidden` de HTML tiene que ganar siempre. Sin esto, cualquier
   regla con `display` (como .fila { display: flex }) lo anula y el elemento
   sigue viéndose: pasaba con las filas de Competencia y Captación. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--texto);
  overflow: hidden;            /* la página no hace scroll: lo hace el panel */
}

/* --- Estructura: mapa (flexible) + panel (ancho fijo) -------------------- */
#app   { display: flex; height: 100%; }
#mapa  { flex: 1; position: relative; }
#panel {
  width: 420px;
  background: var(--panel);
  border-left: 1px solid var(--linea);
  box-shadow: -2px 0 12px rgba(20, 30, 50, .06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;          /* para el cajón de la cuenta (#cuenta) */
}

/* --- Cabecera del panel --------------------------------------------------- */
header  { padding: 14px 16px; border-bottom: 1px solid var(--linea);
          display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h1      { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .2px; }
h1 span { color: var(--suave); font-weight: 400; }

/* --- Controles (selectores y deslizadores) -------------------------------- */
.controles  { padding: 12px 16px; border-bottom: 1px solid var(--linea); display: grid; gap: 10px; }
.fila       { display: flex; align-items: center; gap: 10px; }
.fila label { color: var(--suave); min-width: 104px; font-size: 12px; }

select, input[type=range] {
  background: #fff;
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  flex: 1;
}
input[type=range] { padding: 0; height: 22px; }

/* El número que acompaña a cada deslizador. */
.val { color: var(--acento); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Zona de resultados (la única parte del panel que hace scroll) -------- */
#contenido { flex: 1; overflow-y: auto; }
.aviso     { padding: 16px; color: var(--suave); }

/* Bloque gris con el resumen de la zona de origen. */
.origen      { padding: 12px 16px; background: var(--raya); border-bottom: 1px solid var(--linea); }
.origen .tit { font-weight: 600; margin-bottom: 4px; }
.origen .sub { color: var(--suave); font-size: 12px; }

/* Lista de gemelos / oportunidades. */
ul.gemelos    { list-style: none; margin: 0; padding: 0; }
ul.gemelos li {
  padding: 9px 16px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
ul.gemelos li:hover { background: var(--raya); }
ul.gemelos li.sel   { background: var(--sel); box-shadow: inset 3px 0 0 var(--acento); }
.puesto { color: var(--suave); min-width: 16px; }
.sim    { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; }
.meta   { color: var(--suave); font-size: 12px; flex: 1; }

/* Tabla comparativa de datos reales. */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
table caption, .titulo { text-align: left; padding: 12px 16px 6px; color: var(--suave); font-size: 12px; }
td, th { padding: 3px 16px; text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; color: var(--suave); font-weight: 400; }
tbody tr:nth-child(odd) { background: var(--raya); }
thead th {
  position: sticky;            /* la cabecera se queda fija al hacer scroll */
  top: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  color: var(--suave);
  font-weight: 500;
}
.dif { font-size: 11px; color: var(--suave); }

/* --- Leyenda flotante sobre el mapa --------------------------------------- */
.leyenda {
  position: absolute;
  z-index: 1;          /* encima del lienzo de MapLibre, que se añade después y la tapaba */
  left: 12px;
  bottom: 26px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}
/* Los colores deben coincidir con RAMPA en js/mapa.js. */
.barra {
  height: 8px;
  width: 180px;
  border-radius: 4px;
  margin: 6px 0 4px;
  background: linear-gradient(90deg, #fcde9c, #faa476, #f0746e, #e34f6f, #dc3977, #b9257a, #7c1d6f);
}
.leyenda .ext { display: flex; justify-content: space-between; color: var(--suave); }

/* --- Ajustes sobre los estilos por defecto de MapLibre -------------------- */
.maplibregl-ctrl-attrib { font-size: 10px; }

.maplibregl-popup-content {
  background: var(--panel);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 4px 18px rgba(20, 30, 50, .18);
  font-size: 12px;
}
.maplibregl-popup-tip { border-top-color: #fff !important; border-bottom-color: #fff !important; }

/* Ficha que sale al pasar el ratón por un hexágono. */
.ficha .cab    { font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 12px; }
.ficha .cab .s { color: var(--ok); font-variant-numeric: tabular-nums; }
.ficha dl      { display: grid; grid-template-columns: auto auto; gap: 1px 12px; margin: 0; }
.ficha dt      { color: var(--suave); }
.ficha dd      { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ficha .poi    { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linea); color: var(--suave); }

/* Cuadradito de color de cada tipo (modo Tipología: panel y ficha). */
.muestra {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
  margin-right: 4px;
  vertical-align: -1px;
}

/* --- Selección y grupos (modo Gemelos) ------------------------------------ */
button {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  color: var(--texto);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
button:disabled { opacity: .45; cursor: default; }
button.principal { background: var(--acento); border-color: var(--acento); color: #fff; padding: 7px 10px; }
button.principal:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
#filaSeleccion .meta { flex: 1; }

/* Un interruptor por grupo: casilla, nombre y nº de variables. */
#grupos { display: grid; gap: 4px; }
.grupo-fila { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 0; }
.grupo-fila .meta { margin-left: auto; flex: none; }

/* Cabecera de cada grupo dentro de la tabla comparativa. */
tr.grupo td {
  padding-top: 10px;
  font-weight: 600;
  color: var(--texto) !important;
  background: var(--panel);
}

/* --- Modo Explorar (premium) ---------------------------------------------- */
/* Cada variable en dos líneas: arriba el nombre y lo elegido ("alta ●●○"),
   abajo el slider entre las palabras de sus extremos. El centro del slider,
   marcado con una raya, es "indiferente". */
.pre-fila { padding: 4px 16px 6px; font-size: 12px; }
.pre-cab { display: flex; justify-content: space-between; gap: 8px; }
.pre-cab .val { min-width: 0; font-size: 11px; white-space: nowrap; }
.pre-barra { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 6px; }
.pre-extremo { color: var(--suave); font-size: 11px; }
.pre-barra .pre-extremo:first-child { text-align: right; }
.pre-fila input[type=range] {
  padding: 0;
  height: 18px;
  background: linear-gradient(90deg, transparent calc(50% - 1px), var(--linea) calc(50% - 1px),
                              var(--linea) calc(50% + 1px), transparent calc(50% + 1px));
}
/* Las variables en "indiferente" se ven en gris. */
.pre-fila.inactiva .pre-nombre, .pre-fila.inactiva .val { color: var(--suave); }
.pre-fila.inactiva input[type=range] { opacity: .5; }

/* Atajos: botones que colocan varios sliders de golpe. */
.pre-atajos { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 4px; }
.pre-atajos button { border-radius: 14px; }

details.pre-seccion { border-top: 1px solid var(--linea); margin-top: 8px; }
details.pre-seccion summary { padding: 10px 16px; cursor: pointer; font-weight: 600; display: flex; gap: 8px; }
details.pre-seccion summary .meta { margin-left: auto; font-weight: 400; flex: none; }
.pre-subtitulo { padding: 8px 16px 2px; color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }

/* Variable en "parecido" (◎): como la zona de partida. */
.pre-fila.parecido .pre-nombre, .pre-fila.parecido .val { color: var(--acento); }
.pre-fila.parecido input[type=range] { opacity: .8; }
.pre-cab .pre-parecido {
  margin-left: auto;
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
  border-radius: 8px;
}

/* --- Pestañas del panel (modo Explorar) ----------------------------------- */
/* Buscar / Zona / Mejores. Cada pestaña es un bloque que hace scroll por
   dentro y ocupa todo el alto libre del panel; solo se ve una. */
#pestanas { display: flex; border-bottom: 1px solid var(--linea); padding: 0 8px; flex: none; }
#pestanas button {
  flex: 1; border: 0; border-radius: 0; background: none; padding: 9px 4px 8px;
  color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 12.5px;
}
#pestanas button:hover:not(:disabled) { color: var(--texto); }
#pestanas button.on { color: var(--texto); font-weight: 600; border-bottom-color: var(--acento); }
.pestana { flex: 1; overflow-y: auto; min-height: 0; }

/* La fila de controles se esconde si no le queda nada visible (con un solo
   ámbito, en Explorar). */
.controles:not(:has(> :not([hidden]))) { display: none; }

/* Cabecera: el texto del ámbito cede sitio al chip de la cuenta. */
header h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cabAmbito { font-size: 12px; }

/* --- Pestaña Buscar ------------------------------------------------------- */
.pre-ayuda { padding: 10px 16px 0; color: var(--suave); font-size: 12px; }
.pre-atajos .pre-limpiar { border-style: dashed; color: var(--suave); }
/* Caja "Partiendo de N hexágonos": solo con zona de partida. */
.pre-partida {
  margin: 8px 16px 4px; padding: 8px 10px; border-radius: 8px;
  background: var(--sel); border: 1px solid #f3d3e0; display: grid; gap: 6px;
}
.pre-partida .meta { color: var(--texto); }
.pre-partida .pre-vecinos { min-width: 0; color: var(--suave); cursor: pointer; white-space: nowrap; }

/* --- Pestaña Zona (insights) ---------------------------------------------- */
#insights { font-size: 12px; }
.ins-cab { padding: 14px 16px 12px; border-bottom: 1px solid var(--linea); background: var(--raya); position: relative; }
.ins-tit { font-size: 15px; font-weight: 600; padding-right: 28px; }
.ins-sub { color: var(--suave); margin-top: 2px; }
.ins-x { position: absolute; top: 10px; right: 10px; padding: 2px 8px; }
.ins-acciones { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ins-acciones label { color: var(--suave); cursor: pointer; }

.ins-sec { padding: 10px 16px 12px; border-bottom: 1px solid var(--linea); }
.ins-sec h3 { font-size: 12px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); }
.ins-nota { color: var(--suave); font-size: 11px; margin-top: 6px; }

/* Una barra: etiqueta · pista con relleno (la zona) y raya (la provincia) · número. */
.ins-barra { display: grid; grid-template-columns: 96px 1fr 62px; align-items: center; gap: 8px; margin: 3px 0; }
.ins-et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-pista { position: relative; height: 10px; background: #f6ecef; border-radius: 5px; }
.ins-relleno { position: absolute; left: 0; top: 0; bottom: 0; background: #e34f6f; border-radius: 5px; }
.ins-raya { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #1f2430; opacity: .55; }
.ins-num { text-align: right; font-variant-numeric: tabular-nums; }

.ins-evol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ins-evol div { background: var(--raya); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
.ins-evol span { color: var(--suave); font-size: 11px; }
.ins-evol .sube b { color: #0f7b45; }
.ins-evol .baja b { color: #b91c1c; }
.ins-sec ul.gemelos li { padding: 7px 0; }

/* Leyenda por clases (modo Explorar): cuadraditos de color en vez de la barra. */
.leyenda.clases .barra, .leyenda.clases .ext { display: none; }
.ley-clases { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* Cada clase es un botón que la enciende o apaga en el mapa. */
.ley-clases button {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 10px; font-size: 11px;
  color: var(--texto); white-space: nowrap;
}
.ley-clases button.apagada { color: var(--suave); text-decoration: line-through; }
.ley-clases button.apagada i { opacity: .25; }
.ley-clases i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; opacity: .85; }

/* Botón del informe PDF, al final del panel de insights. */
.ins-informe { border-bottom: 0; padding-bottom: 24px; }
.ins-informe button { width: 100%; padding: 8px 10px; }

/* Ficha de Explorar: "zona de partida ↔ esta zona", en verde suave si se
   parece o cumple lo pedido, en rojo suave si no. */
.ficha-premium dl { grid-template-columns: auto 1fr; gap: 2px 10px; }
.ficha-premium dd { padding: 1px 6px; border-radius: 4px; text-align: right; white-space: nowrap; }
.ficha-premium dd.si { background: #e6f2ea; color: #2f6b47; }
.ficha-premium dd.no { background: #f8e6e6; color: #9a3f3f; }
.ficha-premium .flecha { opacity: .55; margin: 0 2px; }
.ficha-cols { display: grid; grid-template-columns: auto 1fr; font-size: 10.5px; color: var(--suave); margin: -2px 0 3px; }
.ficha-cols span:last-child { text-align: right; }

/* La ficha del ratón, por encima de la leyenda y del panel de insights. */
.maplibregl-popup { z-index: 3; }

/* --- Área privada (js/cuenta.js) ------------------------------------------ */

/* Chip de la cabecera: inicial · organización · saldo ▾ */
#cuentaChip {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 3px; border-radius: 16px; max-width: 210px;
}
#cuentaChip[hidden] { display: none; }
.cta-ini {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--acento); color: #fff; font-weight: 600;
  display: grid; place-items: center; font-size: 11px;
}
.cta-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta-saldo {
  background: var(--sel); color: var(--ok); font-weight: 600; border-radius: 9px;
  padding: 0 7px; font-variant-numeric: tabular-nums;
}
.cta-saldo.cero { background: #f8e6e6; color: #9a3f3f; }
.cta-flecha { color: var(--suave); font-size: 10px; }

/* Cajón: ocupa el panel lateral entero, por encima de sus controles. */
#cuenta {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--panel); overflow-y: auto;
  box-shadow: -4px 0 18px rgba(20, 30, 50, .12);
  animation: cta-entra .16s ease-out;
}
@keyframes cta-entra { from { transform: translateX(24px); opacity: 0; } }
.cta-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--linea); background: var(--raya);
}
.cta-tit { font-size: 15px; font-weight: 600; }
.cta-sub { color: var(--suave); font-size: 11.5px; font-weight: 400; }
.cta-x { padding: 2px 8px; }

.cta-saldo-caja {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 16px 4px; padding: 12px 14px; border-radius: 10px;
  background: var(--sel); border: 1px solid #f3d3e0;
}
.cta-saldo-caja.cero { background: #fbf0f0; border-color: #f0d6d6; }
.cta-num { font-size: 30px; font-weight: 700; color: var(--ok); line-height: 1; font-variant-numeric: tabular-nums; }
.cta-saldo-caja.cero .cta-num { color: #9a3f3f; }

.cta-sec { padding: 10px 16px 12px; border-bottom: 1px solid var(--linea); }
.cta-sec h3 {
  font-size: 12px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--suave); display: inline-flex; gap: 6px;
}
details.cta-sec summary { cursor: pointer; list-style: none; }
details.cta-sec summary::-webkit-details-marker { display: none; }
details.cta-sec summary h3::after { content: '▸'; margin-left: 4px; }
details.cta-sec[open] summary h3::after { content: '▾'; }
.cta-sec.destacada { background: var(--sel); }

.cta-paquetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cta-paquetes button {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 4px; border-radius: 8px;
}
.cta-paquetes button span { font-size: 14px; font-weight: 600; color: var(--acento); }
.cta-paquetes small { color: var(--suave); font-size: 10.5px; }
.cta-simulado { margin-top: 6px; }

ul.cta-lista { list-style: none; margin: 0; padding: 0; }
ul.cta-lista li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed var(--linea);
}
ul.cta-lista li:last-child { border-bottom: 0; }
ul.cta-lista li[data-h3] { cursor: pointer; }
ul.cta-lista li[data-h3]:hover span:first-child { color: var(--acento); }
ul.cta-lista li.baja b { text-decoration: line-through; color: var(--suave); }
.cta-acc { display: flex; gap: 4px; flex: none; }
.cta-acc button { padding: 1px 7px; font-size: 11px; }

.cta-form { display: grid; gap: 6px; margin-top: 8px; }
.cta-fila { display: flex; gap: 6px; }
.cta-form input, #acceso input {
  font: inherit; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 6px;
  width: 100%; background: #fff; color: var(--texto);
}
.cta-form input:focus, #acceso input:focus { outline: 2px solid #f3c6d9; border-color: var(--acento); }
.cta-clave { margin-top: 8px; padding: 8px 10px; background: var(--raya); border-radius: 6px; }
.cta-clave code { font-size: 13px; user-select: all; }
.cta-pie { padding: 14px 16px 24px; }
.cta-pie button { width: 100%; }

/* Pantalla de entrada: velo sobre todo el visor y caja centrada. */
#acceso {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(31, 36, 48, .35); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 16px;
}
.acc-caja {
  width: 100%; max-width: 340px; background: var(--panel); border-radius: 12px;
  padding: 22px 22px 18px; box-shadow: 0 12px 40px rgba(20, 30, 50, .25);
}
.acc-marca { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--ok); }
.acc-pestanas { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); }
.acc-pestanas button {
  border: 0; border-radius: 0; background: none; padding: 6px 10px; color: var(--suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acc-pestanas button.on { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
#acceso form { display: grid; gap: 10px; }
#acceso label { display: grid; gap: 3px; color: var(--suave); font-size: 12px; }
#acceso label small { font-size: 10.5px; opacity: .8; }
#acceso form button.principal { margin-top: 4px; padding: 8px; }
.acc-nota { color: var(--suave); font-size: 11.5px; }
.acc-error { margin-top: 10px; padding: 7px 10px; border-radius: 6px; background: #f8e6e6; color: #9a3f3f; }

/* Aviso flotante abajo en el centro. */
.cta-aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  background: #1f2430; color: #fff; padding: 8px 14px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2); transition: opacity .4s; max-width: calc(100% - 32px);
}
.cta-aviso.error { background: #9a3f3f; }
.cta-aviso.fuera { opacity: 0; }

/* --- Entrada guiada (js/guiado.js) ---------------------------------------- */
h1 a.marca { color: inherit; text-decoration: none; }
.gui { padding: 14px 16px 12px; display: grid; gap: 14px; border-bottom: 1px solid var(--linea); }
.gui-caso { background: var(--sel); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.gui-paso { display: grid; gap: 6px; }
.gui-tit { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; color: var(--texto); }
.gui-n {
  width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--acento); color: #fff; font-size: 11px; font-weight: 700;
}
.gui select { padding: 7px 8px; }
.gui-buscar { display: flex; gap: 6px; }
.gui-buscar input {
  flex: 1; font: inherit; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 6px;
  background: #fff; color: var(--texto); min-width: 0;
}
.gui-buscar input:focus { outline: 2px solid #f3c6d9; border-color: var(--acento); }
.gui-pista { color: var(--suave); font-size: 11.5px; }
ul.gui-sugerencias { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 6px; }
ul.gui-sugerencias li { padding: 6px 8px; border-bottom: 1px solid var(--linea); font-size: 12px; }
ul.gui-sugerencias li:last-child { border-bottom: 0; }
ul.gui-sugerencias li[data-n] { cursor: pointer; }
ul.gui-sugerencias li[data-n]:hover { background: var(--sel); }
.gui-local {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 6px; background: var(--raya); border: 1px solid var(--linea);
}
.gui-local span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gui-temas { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.gui-temas label { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; }
.gui-ver { padding: 9px 10px; font-size: 13px; }
.gui-precio { color: var(--suave); font-size: 11px; text-align: center; margin-top: -6px; }

/* "Ajuste avanzado": los sliders de siempre, plegados. */
details.pre-avanzado > summary {
  padding: 11px 16px; cursor: pointer; font-weight: 600; display: flex; gap: 8px; color: var(--suave);
}
details.pre-avanzado > summary .meta { margin-left: auto; font-weight: 400; flex: none; }
details.pre-avanzado[open] > summary { color: var(--texto); }

/* Pestaña Mejores: título con el contexto y aviso del informe al final. */
.gui-mejores { color: var(--texto) !important; font-weight: 600; font-size: 13px !important; }
.gui-sub { color: var(--suave); font-weight: 400; font-size: 11.5px; }
.gui-cta { padding: 12px 16px 20px; color: var(--suave); font-size: 11.5px; text-align: center; }

/* Cuenta: "Entrar" en el chip sin sesión, y la ✕ de la pantalla de entrada. */
.cta-entrar { padding: 1px 8px; font-weight: 600; color: var(--acento); }
.acc-caja { position: relative; }
.acc-x { position: absolute; top: 10px; right: 10px; padding: 2px 8px; }
.gui-dist { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 12px; margin-top: 4px; }
.gui-dist select { flex: none; padding: 2px 4px; }
.acc-error.info { background: var(--sel); color: var(--ok); }
.cta-pdf { padding: 1px 8px; font-size: 11px; flex: none; }