/* =========================================================
   POOL · estados, objetos y movimiento del SVG maestro
   Requiere pool-temas.css. Uso: <svg class="pool" data-state="…" data-prop="…">
   ========================================================= */
.pool{ overflow: visible; }
.pool *{ transform-box: view-box; }
.pool .v, .pool .pool-insignia, .pool .pool-progreso{ display: none; }

/* --- Ojos por estado --- */
.pool[data-state="reposo"] .ojos-reposo,
.pool[data-state="escucha"] .ojos-escucha,
.pool[data-state="analiza"] .ojos-analiza,
.pool[data-state="revisa"] .ojos-revisa,
.pool[data-state="alerta"] .ojos-alerta,
.pool[data-state="confirma"] .ojos-confirma,
.pool[data-state="desconectado"] .ojos-desconectado{ display: inline; }

/* --- Brazo izquierdo y anillo: abajo siempre, arriba en alerta --- */
.pool .izq-normal, .pool .anillo-normal{ display: inline; }
.pool[data-state="alerta"] .izq-normal, .pool[data-state="alerta"] .anillo-normal{ display: none; }
.pool[data-state="alerta"] .izq-arriba, .pool[data-state="alerta"] .anillo-arriba{ display: inline; }
.pool.pool--sin-anillo .anillo{ display: none !important; }   /* < 48 px */

/* --- Brazo derecho + objeto según data-prop --- */
.pool[data-prop="lupa"] .der-lupa, .pool[data-prop="lupa"] .obj-lupa{ display: inline; }
.pool[data-prop="circular"] .der-objeto, .pool[data-prop="circular"] .obj-circular,
.pool[data-prop="carpeta"]  .der-objeto, .pool[data-prop="carpeta"]  .obj-carpeta,
.pool[data-prop="grafica"]  .der-objeto, .pool[data-prop="grafica"]  .obj-grafica,
.pool[data-prop="caja"]     .der-objeto, .pool[data-prop="caja"]     .obj-caja{ display: inline; }
.pool[data-prop="sello"] .der-arriba, .pool[data-prop="sello"] .obj-sello{ display: inline; }
.pool[data-prop="ninguno"] .der-reposo{ display: inline; }

/* Analiza = mira más de cerca: fuerza la lupa delante del ojo (va después para ganar) */
.pool[data-state="analiza"] .der-lupa, .pool[data-state="analiza"] .der-objeto,
.pool[data-state="analiza"] .der-arriba, .pool[data-state="analiza"] .der-reposo,
.pool[data-state="analiza"] .obj{ display: none; }
.pool[data-state="analiza"] .der-ojo, .pool[data-state="analiza"] .obj-ojo{ display: inline; }

/* Confirma: check dibujado (salvo si está sellando, el sello ya lo dice) */
.pool[data-state="confirma"] .obj-check{ display: inline; }
.pool[data-state="confirma"][data-prop="sello"] .obj-check{ display: none; }
.pool[data-state="confirma"] .pool-check{ stroke-dasharray: 100; animation: pool-dibuja 420ms var(--pool-curva) both; }
@keyframes pool-dibuja{ from{ stroke-dashoffset: 100; } to{ stroke-dashoffset: 0; } }

/* --- Parpadeo (JS añade .pool--parpadeo cada 6–11 s en reposo/escucha) --- */
.pool .ojos{ transform-origin: 100px 86px; }
.pool.pool--parpadeo .ojos-reposo, .pool.pool--parpadeo .ojos-escucha{ animation: pool-parpadeo 180ms ease-in-out 1; }
@keyframes pool-parpadeo{ 0%,100%{ transform: scaleY(1); } 50%{ transform: scaleY(0.1); } }

/* --- Escucha: los tentáculos se mecen muy poco --- */
.pool .pool-traseros, .pool .pool-centro, .pool .izq-normal{ transform-origin: 100px 124px; }
.pool[data-state="escucha"] .pool-traseros{ animation: pool-mece 2.8s ease-in-out infinite; }
.pool[data-state="escucha"] .pool-centro{ animation: pool-mece 2.8s ease-in-out infinite reverse; }
@keyframes pool-mece{ 0%,100%{ transform: rotate(0deg); } 50%{ transform: rotate(2.5deg); } }

/* --- Analiza: la lupa se acerca y aleja levemente --- */
.pool .obj-ojo{ transform-origin: 116px 86px; }
.pool[data-state="analiza"] .obj-ojo{ animation: pool-enfoca 1.6s ease-in-out infinite; }
@keyframes pool-enfoca{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }

/* --- Alerta: dos pulsos y quieto --- */
.pool .pool-cuerpo-g{ transform-origin: 100px 120px; }
.pool[data-state="alerta"] .pool-cuerpo-g{ animation: pool-pulso 420ms ease-out 2; }
@keyframes pool-pulso{ 50%{ transform: scale(1.05); } }

/* --- Sello: un golpe --- */
.pool .obj-sello, .pool .der-arriba{ transform-origin: 150px 90px; }
.pool[data-prop="sello"].pool--golpe .obj-sello,
.pool[data-prop="sello"].pool--golpe .der-arriba{ animation: pool-golpe 360ms var(--pool-curva) 1; }
@keyframes pool-golpe{ 40%{ transform: translateY(10px); } 100%{ transform: translateY(0); } }

/* --- Urgente (mejora Pool, 2026-09-28): el mismo cuerpo, en rojo. Se combina
   con data-state="alerta" (brazo/anillo arriba, ojos ambar) para la ronda de
   avisos -- no es un estado nuevo, es un tinte que se le monta encima a
   cualquier estado. Va DESPUES de pool-temas.css a proposito, para ganarle a
   las variables de dia/noche. --- */
.pool[data-urgente="true"]{ --pool-cuerpo: #C0392B; --pool-cuerpo2: #922B21; }

/* --- Toca (asomo de la ronda): un golpecito con el tentaculo que este visible
   -- reusa la animacion del sello, ninguna nueva. --- */
.pool .izq-normal, .pool .izq-arriba{ transform-origin: 60px 130px; }
.pool .der-lupa, .pool .der-ojo{ transform-origin: 145px 100px; }
.pool.pool--toca .izq-normal, .pool.pool--toca .izq-arriba,
.pool.pool--toca .der-lupa, .pool.pool--toca .der-arriba,
.pool.pool--toca .der-ojo{ animation: pool-golpe 420ms var(--pool-curva) 2; }

/* --- Caminar (ronda): inclinación y tentáculos alternados; JS mueve el SVG con transform --- */
.pool.pool--camina .pool-cuerpo-g{ animation: pool-inclina 900ms ease-in-out infinite; }
.pool.pool--camina .pool-traseros{ animation: pool-mece 450ms ease-in-out infinite; }
.pool.pool--camina .pool-centro, .pool.pool--camina .izq-normal{ animation: pool-mece 450ms ease-in-out infinite reverse; }
@keyframes pool-inclina{ 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(-1deg); } }

/* --- Progreso de carga en el aro de la lupa --- */
.pool.pool--progreso .pool-progreso{ display: inline; stroke-dasharray: calc(var(--pool-avance, 0) * 100) 100;
  transition: stroke-dasharray var(--pool-t-base) linear; }

/* --- Insignia (el número va en HTML fuera del SVG) --- */
.pool.pool--insignia .pool-insignia{ display: inline; }

@media (prefers-reduced-motion: reduce){ .pool, .pool *{ animation: none !important; transition: none !important; } }