/* ===========================================================================
   POOL — lanzador asomado y panel
   ===========================================================================

   POR QUE EL ARCHIVO SE SIGUE LLAMANDO pool.css
       El nombre visible del asistente paso de "Pool" a "Pool" (ETC_POOL,
       2026-09-28), pero los identificadores internos se conservan a proposito:
       `pool.js`, `pool.css`, `POOL_ACTIVO` y `data/pool/`. Renombrarlos
       romperia referencias y, sobre todo, partiria la continuidad del registro
       de auditoria, que es lo ultimo que conviene partir en un sistema de
       control interno.

   QUE CUBRE ESTE ARCHIVO
       La carcasa: el lanzador que se asoma desde el borde, la insignia, el
       tooltip y los tres tamanos del panel. El PERSONAJE no se toca aqui --
       sus estados, objetos, parpadeo y movimiento viven en
       `assets/pool/pool-estados.css`, y sus colores en
       `assets/pool/pool-temas.css`. Los dos vinieron del paquete de diseno.

   POR QUE ESA SEPARACION IMPORTA
       La excepcion del verificador de diseno (`.impeccable/config.json`) cubre
       ESTE archivo, por la transicion de layout del panel. Al dejar las
       animaciones de Pool en sus propios archivos, quedan FUERA de esa
       excepcion y se siguen revisando -- que es lo que pide el ETC §15.1.

   DE DONDE SALEN LOS COLORES
       De los tokens de Pool (`--pool-*`), que cambian con `data-tz-theme`, el
       mismo atributo que ya usa TRAZA. No hay un segundo interruptor de tema.
   =========================================================================== */

:root {
  --pool-margen: 28px;
  /* El lanzador se ve COMPLETO (2026-10-04, pedido de Diego: antes se hundía 26 px bajo el borde y se veía cortado): el dibujo mide
     84 px y queda 12 px por encima del borde inferior. Al acercarse sube un poco. */
  --pool-asoma-dibujo: 84px;
  --pool-asoma-hundido: 12px;
  --pool-asoma-sube: 6px;
}

/* --- Lanzador asomado ----------------------------------------------------- */

.tz-pool-lanzador {
  position: fixed;
  right: var(--pool-margen);
  bottom: var(--pool-asoma-hundido);
  width: var(--pool-asoma-dibujo);
  height: var(--pool-asoma-dibujo);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: var(--pool-z-lanzador, 900);
  display: grid;
  place-items: end center;
  /* Solo transform y opacidad: nada que provoque reflujo. */
  transition: transform var(--pool-t-base) var(--pool-curva),
              opacity var(--pool-t-base) var(--pool-curva);
}

/* Al acercarse, Pool sube y se deja ver entero. */
.tz-pool-lanzador:hover,
.tz-pool-lanzador:focus-visible { transform: translateY(calc(var(--pool-asoma-sube) * -1)); }
.tz-pool-lanzador:focus-visible { outline: 3px solid var(--pool-ui-acento); outline-offset: 4px; border-radius: 12px; }

/* El area de clic no puede ser el dibujo entero: buena parte queda bajo el
   borde de la pantalla. Se garantiza una zona real de 56 px sobre el borde. */
.tz-pool-lanzador::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 56px;
  height: 56px;
  transform: translateX(-50%);
}

.tz-pool-lanzador .tz-pool-avatar { display: block; width: 100%; height: 100%; }
.tz-pool-lanzador .pool { width: 100%; height: 100%; }

.tz-pool-lanzador.tz-pool-arrastrando { transition: none; cursor: grabbing; transform: none; }

/* Modo discreto: en lectura larga se encoge y se aclara, sin perder su zona de
   clic. Al acercar el cursor vuelve entero. */
.tz-pool-lanzador.tz-pool-discreto { transform: scale(0.714); opacity: 0.7; }
.tz-pool-lanzador.tz-pool-discreto:hover,
.tz-pool-lanzador.tz-pool-discreto:focus-visible {
  transform: translateY(calc(var(--pool-asoma-sube) * -1));
  opacity: 1;
}

.tz-pool-insignia {
  position: absolute;
  top: 6px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--pool-oxido);
  color: var(--pool-marfil);
  font: 600 11px/20px var(--font-app);
  text-align: center;
  box-shadow: 0 0 0 2px var(--pool-ui-superficie);
}

.tz-pool-tooltip,
.tz-pool-susurro {
  position: fixed;
  z-index: var(--pool-z-lanzador, 900);
  border-radius: 8px;
  background: var(--pool-ui-burbuja);
  color: var(--pool-ui-burbuja-texto);
  font: 500 12px/1.35 var(--font-app);
  pointer-events: none;
}
.tz-pool-tooltip { padding: 5px 9px; white-space: nowrap; opacity: 0; transition: opacity var(--pool-t-rapido) ease; }
.tz-pool-tooltip[data-visible="1"] { opacity: 1; }

/* Aviso breve de severidad alta: una linea junto al lanzador, 6 s, sin robar
   el foco y sin abrir el panel. */
.tz-pool-susurro {
  max-width: 260px;
  padding: 9px 12px;
  font-size: 12.5px;
  box-shadow: 0 6px 20px rgba(15, 27, 45, 0.28);
}

/* --- Panel --------------------------------------------------------------- */

.tz-pool-panel {
  position: fixed;
  right: var(--pool-margen);
  bottom: calc(var(--pool-margen) + 34px);
  width: var(--pool-panel-compacto);
  max-height: var(--pool-panel-alto-max);
  display: flex;
  flex-direction: column;
  background: var(--pool-ui-superficie);
  color: var(--pool-ui-texto);
  border: 1px solid var(--pool-ui-borde);
  border-radius: var(--pool-radio-panel);
  box-shadow: 0 18px 50px rgba(15, 27, 45, 0.28);
  z-index: var(--pool-z-panel, 901);
  overflow: hidden;
  /* Excepcion de diseno registrada (.impeccable/config.json, alcance: este
     archivo): el panel crece de 380 a 520 px de ancho y hasta
     min(720px, 80vh) de alto al llegar la respuesta, y el ETC lo pide con
     320 ms. Un transform:scale deformaria el texto y las citas, que reflowan
     al crecer. Un solo elemento position:fixed, una vez por interaccion, y
     anulado mas abajo por prefers-reduced-motion.
     Las animaciones del PERSONAJE no estan cubiertas por esta excepcion:
     viven en assets/pool/pool-estados.css. */
  transition: width var(--pool-t-expandir) var(--pool-curva), height var(--pool-t-expandir) var(--pool-curva);
}

.tz-pool-panel[data-tamano="expandido"] {
  width: var(--pool-panel-expandido);
  height: var(--pool-panel-alto-max);
}

/* Anclado: columna derecha que EMPUJA el contenido (no lo tapa). El empuje
   lo hace `.tz-app`, que esta en flujo normal. */
.tz-pool-panel[data-tamano="anclado"] {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--pool-panel-anclado);
  max-height: none;
  height: auto;
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
body.tz-pool-anclado .tz-app { padding-right: var(--pool-panel-anclado); }
body.tz-pool-anclado .tz-pool-lanzador { right: calc(var(--pool-panel-anclado) + var(--pool-margen)); }

.tz-pool-cabeza {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--pool-ui-borde);
}
.tz-pool-avatar-cabeza { flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.tz-pool-cabeza .pool { width: 32px; height: 32px; }
.tz-pool-titulo { font: 600 13.5px/1 var(--font-app); }
.tz-pool-acciones-cabeza { margin-left: auto; display: flex; gap: 2px; }

.tz-pool-icono-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--pool-ui-texto-2);
  cursor: pointer;
}
.tz-pool-icono-btn:hover { background: var(--pool-ui-borde); color: var(--pool-ui-texto); }
.tz-pool-icono-btn:focus-visible { outline: 2px solid var(--pool-ui-acento); outline-offset: 1px; }
.tz-pool-icono-btn svg { width: 15px; height: 15px; }

.tz-pool-cuerpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.tz-pool-pie { flex: none; border-top: 1px solid var(--pool-ui-borde); padding: 10px 12px; }

/* Chip de contexto */
.tz-pool-contexto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 4px 6px 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--pool-ui-borde);
  font: 500 11.5px/1.4 var(--font-app);
  color: var(--pool-ui-texto-2);
}
.tz-pool-contexto-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-pool-contexto button {
  flex: none; width: 17px; height: 17px; border: none; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; font-size: 12px; line-height: 1;
}
.tz-pool-contexto button:hover { background: var(--pool-ui-borde); }

/* Campo de pregunta */
.tz-pool-form { display: flex; gap: 7px; align-items: flex-end; }
.tz-pool-pregunta {
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 110px;
  padding: 9px 11px;
  border: 1px solid var(--pool-ui-borde);
  border-radius: 11px;
  background: transparent;
  color: var(--pool-ui-texto);
  font: 400 13.5px/1.45 var(--font-app);
  resize: none;
}
.tz-pool-pregunta:focus { outline: 2px solid var(--pool-ui-acento); outline-offset: -1px; }
.tz-pool-enviar {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: none; border-radius: 11px; background: var(--pool-ui-acento); color: var(--pool-ojos); cursor: pointer;
}
.tz-pool-enviar:disabled { opacity: 0.45; cursor: default; }
.tz-pool-enviar svg { width: 16px; height: 16px; }

/* Sugerencias y comandos */
.tz-pool-sugerencias { display: flex; flex-direction: column; gap: 6px; }
.tz-pool-sugerencia {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--pool-ui-borde);
  border-radius: 10px;
  background: transparent;
  color: var(--pool-ui-texto);
  font: 400 12.5px/1.4 var(--font-app);
  cursor: pointer;
}
.tz-pool-sugerencia:hover { border-color: var(--pool-ui-acento); }
.tz-pool-sugerencia:focus-visible { outline: 2px solid var(--pool-ui-acento); outline-offset: 1px; }

.tz-pool-comandos { margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; }
.tz-pool-comando {
  display: flex; gap: 9px; align-items: baseline; text-align: left;
  padding: 6px 9px; border: none; border-radius: 8px; background: transparent;
  color: var(--pool-ui-texto); font: 400 12.5px/1.4 var(--font-app); cursor: pointer;
}
.tz-pool-comando:hover, .tz-pool-comando[aria-selected="true"] { background: var(--pool-ui-borde); }
.tz-pool-comando code { font: 600 12px var(--font-app); color: var(--pool-ui-acento); }
.tz-pool-comando span { color: var(--pool-ui-texto-2); font-size: 11.5px; }

/* Respuesta */
.tz-pool-respuesta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tz-pool-avatar-respuesta { flex: none; width: 24px; height: 24px; display: block; }
.tz-pool-avatar-respuesta .pool { width: 24px; height: 24px; }

.tz-pool-nota { font: 400 12px/1.5 var(--font-app); color: var(--pool-ui-texto-2); }
.tz-pool-certeza {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font: 600 11px/1.5 var(--font-app); border: 1px solid var(--pool-ui-borde);
  color: var(--pool-ui-texto-2);
}
.tz-pool-certeza[data-nivel="varias"] { color: var(--pool-cuerpo); border-color: var(--pool-cuerpo); }
.tz-pool-certeza[data-nivel="unica"] { color: var(--pool-ambar); border-color: var(--pool-ambar); }
.tz-pool-certeza[data-nivel="ninguna"] { color: var(--pool-oxido); border-color: var(--pool-oxido); }

.tz-pool-cita { margin-bottom: 10px; border: 1px solid var(--pool-ui-borde); border-radius: 12px; overflow: hidden; }
.tz-pool-cita-top {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--pool-ui-borde);
  font: 600 11.5px/1.4 var(--font-app); color: var(--pool-ui-texto-2);
}
.tz-pool-cita-texto { padding: 10px; font: 400 13px/1.55 var(--font-app); white-space: pre-wrap; }
.tz-pool-cita-pie { padding: 0 10px 10px; display: flex; gap: 7px; }
.tz-pool-cita-plegado { padding: 0 10px 10px; }
.tz-pool-cita-plegado summary { cursor: pointer; font: 500 12px var(--font-app); color: var(--pool-ui-acento); }

/* Tabla de precios de una circular: las cifras tal como ella las rotula; lo pedido, resaltado. */
.tz-pool-precios-resumen { list-style: none; margin: 0; padding: 0 10px 8px; display: flex; flex-direction: column; gap: 4px; }
.tz-pool-precios-resumen li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font: 400 12.5px/1.5 var(--font-app); }
.tz-pool-precios-resumen strong { font: 650 15px/1.3 var(--font-app); font-variant-numeric: tabular-nums; color: var(--pool-ui-acento); }
.tz-pool-tabla { margin: 0 10px 10px; overflow-x: auto; border: 1px solid var(--pool-ui-borde); border-radius: 8px; }
.tz-pool-tabla table { border-collapse: collapse; width: 100%; min-width: 420px; font: 400 12px/1.4 var(--font-app); }
.tz-pool-tabla th, .tz-pool-tabla td { padding: 7px 9px; text-align: right; border-bottom: 1px solid var(--pool-ui-borde); font-variant-numeric: tabular-nums; }
.tz-pool-tabla thead th { font: 600 11px/1.3 var(--font-app); color: var(--pool-ui-texto-2); }
.tz-pool-tabla th[scope="row"], .tz-pool-tabla thead th:first-child { text-align: left; font-weight: 600; }
.tz-pool-tabla tr:last-child th, .tz-pool-tabla tr:last-child td { border-bottom: 0; }
.tz-pool-tabla .pedida { background: color-mix(in srgb, var(--pool-ui-acento) 14%, transparent); }
.tz-pool-tabla td.pedida { font-weight: 650; }
.tz-pool-pagina { display: block; width: calc(100% - 20px); margin: 0 10px 10px; border: 1px solid var(--pool-ui-borde); border-radius: 8px; background: #fff; }
.tz-pool-precios-resumen small { font: 400 11px/1.3 var(--font-app); color: var(--pool-ui-texto-2); }
.tz-pool-vigencia { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--pool-ui-borde); font: 600 11px/1.4 var(--font-app); }
.tz-pool-vigencia.vigente { border-color: color-mix(in srgb, var(--pool-ui-acento) 70%, transparent); color: var(--pool-ui-acento); }
.tz-pool-vigencia.vencida, .tz-pool-vigencia.sin { color: var(--pool-ui-texto-2); }
.tz-pool-literal { margin: 0; padding: 0 10px 8px 28px; display: flex; flex-direction: column; gap: 4px; font: 400 12.5px/1.55 var(--font-app); }
.tz-pool-inline { display: inline; }
.tz-pool-inline summary { display: inline; cursor: pointer; color: var(--pool-ui-acento); }
.tz-pool-condicion { padding: 8px 10px 10px; border-top: 1px solid var(--pool-ui-borde); }
.tz-pool-condicion:first-of-type { border-top: 0; }
.tz-pool-condicion strong { font: 650 12px/1.4 var(--font-app); letter-spacing: .02em; color: var(--pool-ui-acento); }
.tz-pool-condicion p { margin: 4px 0 0; font: 400 13px/1.6 var(--font-app); }
.tz-pool-prosa { margin: 0 0 9px; font: 400 13.5px/1.65 var(--font-app); }
.tz-pool-ref { margin: 0 1px; padding: 0 5px; min-width: 18px; border: 1px solid var(--pool-ui-borde); border-radius: 6px; background: transparent; color: var(--pool-ui-acento); font: 650 10.5px/1.5 var(--font-app); cursor: pointer; }
.tz-pool-ref:hover, .tz-pool-ref:focus-visible { border-color: var(--pool-ui-acento); outline: none; }
.tz-pool-afina { margin: 4px 0 10px; padding: 9px 11px; border-left: 3px solid var(--pool-ui-acento); background: color-mix(in srgb, var(--pool-ui-acento) 9%, transparent); border-radius: 0 8px 8px 0; font: 400 13px/1.55 var(--font-app); }
.tz-pool-fuentes { margin-top: 6px; }
.tz-pool-fuente-viva { outline: 2px solid var(--pool-ui-acento); outline-offset: 2px; }
.tz-cir-hoja-destacada { outline: 3px solid var(--pool-ui-acento, #f5b942); outline-offset: 3px; }
.tz-pool-tabla:focus-visible { outline: 2px solid var(--pool-ui-acento); outline-offset: 2px; }

.tz-pool-chip {
  padding: 4px 9px; border: 1px solid var(--pool-ui-borde); border-radius: 999px;
  background: transparent; color: var(--pool-ui-texto);
  font: 500 11.5px/1.4 var(--font-app); cursor: pointer;
}
.tz-pool-chip:hover { border-color: var(--pool-ui-acento); }

/* Aviso dentro de una respuesta: una circular continuada por otra más nueva, o
   una demasiado antigua. No es un error, es un dato que cambia la lectura. */
.tz-pool-aviso {
  margin: 0 10px 10px;
  padding: 7px 9px;
  border-left: 3px solid var(--pool-ambar);
  background: color-mix(in srgb, var(--pool-ambar) 10%, transparent);
  font: 400 12px/1.45 var(--font-app);
  color: var(--pool-ui-texto);
}

/* Informes: marcas de estado dentro de la cabecera de cada fila */
.tz-pool-marca {
  padding: 2px 7px; border-radius: 999px;
  background: var(--pool-ambar); color: var(--pool-ojos);
  font: 600 10.5px/1.5 var(--font-app);
}
.tz-pool-marca-suave {
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--pool-ui-borde); color: var(--pool-ui-texto-2);
  font: 600 10.5px/1.5 var(--font-app);
}

/* «¿Qué tengo pendiente?» */
.tz-pool-pendientes {
  margin: 0 0 10px; padding-left: 20px;
  font: 400 13px/1.7 var(--font-app); color: var(--pool-ui-texto);
}
.tz-pool-pendientes strong { font-weight: 600; }

/* Guiar: los pasos para hacer algo en TRAZA */
.tz-pool-pasos-titulo { margin: 0 0 6px; font: 600 13.5px/1.4 var(--font-app); }
.tz-pool-pasos {
  margin: 0 0 10px; padding-left: 20px;
  font: 400 13px/1.6 var(--font-app); color: var(--pool-ui-texto);
}
.tz-pool-pasos li { margin-bottom: 4px; }

/* El control del que habla el último paso, señalado al llegar. Solo marca: no
   cambia el estado de nada. */
.tz-pool-resaltado {
  outline: 3px solid var(--pool-ui-acento);
  outline-offset: 3px;
  border-radius: 8px;
  animation: tz-pool-latir 1.3s ease-in-out 2;
}
@keyframes tz-pool-latir {
  0%, 100% { outline-color: var(--pool-ui-acento); }
  50% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-pool-resaltado { animation: none; }
}

/* --- La escena: el clon que sale a senalar (P2) --------------------------

   El clon vive en una capa fija POR DEBAJO del lanzador y del panel, y no
   recibe clics: nunca puede tapar un control de TRAZA. La unica parte que si
   los recibe es la burbuja, que trae su boton de cerrar.

   El movimiento es solo `transform`, como pide el ETC §7: no toca `top`/`left`,
   asi que el navegador no vuelve a calcular la maquetacion de la pantalla que
   hay debajo. Las animaciones del PERSONAJE (caminar, golpe, progreso) siguen
   viviendo en assets/pool/pool-estados.css -- aqui solo esta el desplazamiento.
   -------------------------------------------------------------------------- */

.tz-pool-escena {
  position: fixed;
  inset: 0;
  z-index: var(--pool-z-escena, 899);
  pointer-events: none;
}

.tz-pool-clon {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pool-asoma-dibujo);
  height: var(--pool-asoma-dibujo);
  display: grid;
  place-items: center;
  will-change: transform;
}
.tz-pool-clon .pool { width: 100%; height: 100%; }

/* Asomo (ronda espontanea, mejora Pool 2026-09-28): solo se ve la cara y los
   tentaculos de arriba, como si el resto siguiera detras/debajo de la
   tarjeta. Recorta el 38% inferior del dibujo -- no cambia la posicion, solo
   lo que se deja ver de ella. */
.tz-pool-clon--asomo { clip-path: inset(0 0 38% 0); }

/* Colores de TRAZA, no del kit propio de Pool (mejora 2026-09-28, Diego: el
   tono oscuro fijo de `--pool-ui-*` quedaba "matachinado" al aparecer sobre
   la pantalla de Modulos en modo dia -- una burbuja oscura de golpe sobre un
   fondo claro. `--tz-panel`/`--color-text`/`--color-divider` son los mismos
   tokens que ya usa cualquier tarjeta de TRAZA, y ya cambian solos entre
   modo dia y modo noche). */
.tz-pool-burbuja {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 250px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--tz-panel);
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  font: 400 12.5px/1.45 var(--font-app);
  pointer-events: auto;
}
.tz-pool-burbuja-x {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 2px;
}
.tz-pool-burbuja-x:hover { opacity: 1; }
.tz-pool-burbuja-x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* La preferencia del ETC §7: «Pool se mueve por la pantalla: si / no». */
.tz-pool-pie-opciones {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tz-pool-interruptor {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--pool-ui-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--pool-ui-texto-2);
  font: 500 11px var(--font-app);
  padding: 4px 9px 4px 6px;
  cursor: pointer;
}
.tz-pool-interruptor::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pool-ui-borde);
}
.tz-pool-interruptor[aria-pressed="true"] { color: var(--pool-ui-texto); }
.tz-pool-interruptor[aria-pressed="true"]::before { background: var(--pool-ui-acento); }
.tz-pool-interruptor:focus-visible { outline: 2px solid var(--pool-ui-acento); outline-offset: 1px; }

/* --- La ronda: la tarjeta que Pool esta señalando (P3) -------------------- */

/* Contorno en ámbar mientras Pool esta parado encima. Es una marca temporal:
   no cambia el estado de la tarjeta ni su color propio. */
.tz-pool-atencion {
  outline: 2px solid var(--pool-ambar);
  outline-offset: 3px;
  border-radius: 14px;
}

.tz-pool-burbuja-ver {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--color-accent);
  color: var(--color-bg);
  font: 600 11.5px/1.4 var(--font-app);
  cursor: pointer;
}
.tz-pool-burbuja-ver:focus-visible { outline: 2px solid var(--color-text); outline-offset: 1px; }

/* --- Movil: hoja inferior ------------------------------------------------ */

@media (max-width: 640px) {
  .tz-pool-panel {
    left: 0; right: 0; bottom: 0;
    width: auto;
    height: 55vh;
    max-height: 55vh;
    border-radius: var(--pool-radio-panel) var(--pool-radio-panel) 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .tz-pool-panel[data-tamano="expandido"],
  .tz-pool-panel[data-tamano="anclado"] { width: auto; height: 90vh; max-height: 90vh; }
  body.tz-pool-anclado .tz-app { padding-right: 0; }
  body.tz-pool-anclado .tz-pool-lanzador { right: var(--pool-margen); }
  /* En movil no hay modo anclado (lo dice el ETC): la hoja ya ocupa el ancho. */
  #pool-anclar { display: none; }
  /* Con la hoja abierta el lanzador quedaria encima de ella. */
  body.tz-pool-abierto .tz-pool-lanzador { display: none; }
}

/* --- Impresion y movimiento reducido ------------------------------------- */

@media print {
  .tz-pool-lanzador, .tz-pool-panel, .tz-pool-tooltip, .tz-pool-susurro { display: none !important; }
  body.tz-pool-anclado .tz-app { padding-right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-pool-lanzador, .tz-pool-panel, .tz-pool-tooltip { transition: none !important; }
  /* La escena no sale con movimiento reducido (lo impide la guarda de
     poolEscenaPermitida). Esto solo cubre el caso de cambiar la preferencia
     del sistema con Pool ya fuera: se queda quieto donde este. */
  .tz-pool-clon { transition: none !important; }
}

/* Espera de la respuesta: tres puntos que laten + tiempo transcurrido. */
.tz-pool-pensando { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 400 12.5px/1.5 var(--font-app); color: var(--pool-ui-texto-2); }
.tz-pool-puntos { display: inline-flex; gap: 4px; flex: none; }
.tz-pool-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--pool-cuerpo); opacity: .3; animation: tz-pool-latido 1.2s ease-in-out infinite; }
.tz-pool-puntos i:nth-child(2) { animation-delay: .2s; }
.tz-pool-puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes tz-pool-latido { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }

/* Valoracion de la respuesta ("¿Te sirvio?") */
.tz-pool-valoracion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pool-ui-borde); }
.tz-pool-voto { display: inline-flex; align-items: center; gap: 5px; }
.tz-pool-voto:disabled { opacity: .5; cursor: default; }
.tz-pool-voto-detalle { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tz-pool-voto-detalle textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 400 13px/1.5 var(--font-app); padding: 6px 8px;
  border: 1px solid var(--pool-ui-borde); border-radius: 8px; background: transparent; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .tz-pool-puntos i { animation: none; opacity: .7; }
}

/* --- La ronda: Pool sale de detras de la tarjeta (2026-10-02, a pedido de Diego) ----------------------------------------------
   Pool sigue turquesa: la urgencia la dicen la cuenta roja, el brillo de la tarjeta y el aviso encima de su cabeza. */

/* La cuenta de pendientes, pegada a la lupa. Roja si es urgente; en el acento si no. */
.tz-pool-clon-cuenta {
  position: absolute; top: 4%; right: -6%; z-index: 1;
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  font: 700 12px/1 var(--font-app); color: var(--tz-cir-tinta, #1c1608); background: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .35);
}
.tz-pool-clon--urgente .tz-pool-clon-cuenta { color: #fff; background: #e2503a; }

/* La tarjeta que Pool esta senalando: contorno ambar con un halo quieto (sin pulso). */
.tz-pool-atencion { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pool-ambar) 55%, transparent), 0 0 20px color-mix(in srgb, var(--pool-ambar) 24%, transparent); }
.tz-pool-atencion--urgente {
  outline-width: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pool-ambar) 70%, transparent), 0 0 30px color-mix(in srgb, var(--pool-ambar) 42%, transparent);
}

/* La burbuja del aviso encima de la cabeza de Pool, con una cola que apunta a ella. */
.tz-pool-burbuja--arriba {
  font-size: 13px;
  border-color: var(--pool-ambar);
  box-shadow: var(--shadow-md), 0 0 18px color-mix(in srgb, var(--pool-ambar) 28%, transparent);
}
.tz-pool-burbuja--arriba::after {
  content: ""; position: absolute; left: var(--cola, 40px); bottom: -7px; width: 12px; height: 12px;
  background: var(--tz-panel); border-right: 1px solid var(--pool-ambar); border-bottom: 1px solid var(--pool-ambar);
  transform: translateX(-50%) rotate(45deg);
}


/* ===== Guías de Pool (pool_guias.js): atenuado con foco en un elemento + tarjeta de paso ===== */
.tz-guia{position:fixed;inset:0;z-index:90;pointer-events:none}
.tz-guia[hidden]{display:none}
.tz-guia-hueco{position:fixed;border-radius:10px;box-shadow:0 0 0 100vmax rgba(8,8,16,.62),0 0 0 2px var(--color-accent);pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease,opacity .2s ease}
.tz-guia--sola{background:rgba(8,8,16,.62)}
.tz-guia-tarjeta{position:fixed;pointer-events:auto;padding:14px 16px;background:var(--tz-panel);color:var(--color-text);border:1px solid var(--color-accent);border-radius:12px;box-shadow:var(--shadow-lg)}
.tz-guia-cab{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tz-guia-avatar{flex:none;width:44px;height:44px;display:block}
.tz-guia-avatar svg{width:100%;height:100%}
.tz-guia-paso{font-size:12px;opacity:.75}
.tz-guia-texto{font-size:14px;line-height:1.45;margin:0}
.tz-guia-pista{font-size:12px;opacity:.7;margin:8px 0 0}
.tz-guia-acciones{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.tz-guia-oferta-acciones{display:flex;gap:8px;margin-top:10px}
@media (prefers-reduced-motion:reduce){.tz-guia-hueco{transition:none}}


/* Con una guia en pantalla (pool_guias.js) no hay otro Pool ni burbujas: solo la tarjeta de la guia. */
body.tz-guia-activa #pool-lanzador { visibility: hidden !important; }
body.tz-guia-activa #pool-escena,
body.tz-guia-activa .tz-pool-burbuja,
body.tz-guia-activa #pool-raiz .tz-pool-panel,
body.tz-guia-activa #gj-tip { display: none !important; }

/* ===== Ajustes de Pool (pool_disfraces.js) ===== */
.tz-pool-ajustes-grupo { border: 1px solid var(--color-divider); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.tz-pool-ajustes-grupo legend { font-size: 12px; opacity: .75; padding: 0 4px; }
.tz-pool-ajustes-grupo label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.tz-pool-ajustes-fila { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.tz-pool-ajustes-fila select { flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 6px; color: var(--color-text); }
.tz-pool-ajustes-fila select:disabled { opacity: .5; }
.tz-pool-ajustes-vista { flex: none; width: 64px; height: 64px; display: block; }
.tz-pool-ajustes-vista[hidden] { display: none; }
.tz-pool-ajustes-vista svg { width: 100%; height: 100%; }

/* --- La mordedura de la arana (octubre; la dibuja pool_disfraces.js > poolMordedura) ------------------------------------------------------ */
.tz-arana { position: fixed; width: 22px; height: 0; z-index: calc(var(--pool-z-lanzador, 900) + 2); pointer-events: none; }
.tz-arana-hilo { position: absolute; left: 10.5px; top: 0; bottom: 4px; width: 1px; background: var(--tz-bat, #3a2468); opacity: .6; }
.tz-arana-cuerpo {
  position: absolute; left: 0; bottom: -6px; width: 22px; height: 22px; background: var(--tz-bat, #3a2468);
  -webkit-mask: var(--tz-arana-forma) center / contain no-repeat; mask: var(--tz-arana-forma) center / contain no-repeat;
}
.tz-arana-destello {
  position: fixed; z-index: calc(var(--pool-z-lanzador, 900) + 2); width: 90px; height: 90px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(209, 25, 43, .45) 35%, rgba(209, 25, 43, 0) 70%);
}

/* --- Pool escondido mientras se trabaja (pool_esconde.js, 2026-10-07) -------
   Bajo el borde y sin recibir clics; al llamarlo (cursor quieto pegado a la esquina) sale con rebote; al irse el cursor corre a esconderse. */
body.tz-pool-esconde:not(.tz-pool-abierto):not(.tz-pool-anclado) .tz-pool-lanzador:not(.tz-pool-llamado) {
  transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none;
  transition: transform .18s ease-in, opacity .18s ease-in;
}
body.tz-pool-esconde:not(.tz-pool-abierto):not(.tz-pool-anclado) .tz-pool-lanzador.tz-pool-llamado {
  transform: translateY(calc(var(--pool-asoma-sube) * -1)); opacity: 1; pointer-events: auto;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease-out;
}
body.tz-pool-esconde:not(.tz-pool-abierto):not(.tz-pool-anclado) .tz-pool-lanzador:not(.tz-pool-llamado) ~ .tz-pool-tooltip { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.tz-pool-esconde .tz-pool-lanzador, body.tz-pool-esconde .tz-pool-lanzador.tz-pool-llamado { transition: none !important; }
}