/* ============================================================
   Escena interactiva AIOP · aiop.html
   Se apoya en assets/v4.css (tokens, panel, botones).
   Estado: #escenaAiop.conectada activa el nodo, la red verde,
   el orden de las tarjetas y la vista de dirección.
   ============================================================ */

.escena{position:relative}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.escena .ic{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---- Lienzo: zona del nodo + rejilla de puestos ---- */
.escena-lienzo{position:relative}

/* Altura reservada para el nodo AIOP: su aparición no desplaza nada */
.zona-nodo{height:92px;display:flex;align-items:flex-start;justify-content:center}
.nodo-aiop{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--ivory);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h4);letter-spacing:.06em;border-radius:16px;padding:13px 26px;box-shadow:0 18px 40px rgba(16,45,37,.28);opacity:0;transform:translateY(-26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.nodo-aiop i{width:8px;height:8px;border-radius:50%;background:var(--accent);font-style:normal}
.conectada .nodo-aiop{opacity:1;transform:none}

/* Red de conexiones (la dibuja aiop-escena.js) */
.red-aiop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.red-aiop path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;opacity:.8}

/* ---- Rejilla de puestos ---- */
.escena-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* Las apps van apareciendo con calma al entrar la sección (reveal de v4.js) */
.escena.reveal.ready .puesto{opacity:0;transform:translateY(18px)}
.escena.reveal.ready.visible .puesto{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.escena.reveal.ready.visible .puesto:nth-child(2){transition-delay:.1s}
.escena.reveal.ready.visible .puesto:nth-child(3){transition-delay:.2s}
.escena.reveal.ready.visible .puesto:nth-child(4){transition-delay:.3s}
.puesto{display:flex;flex-direction:column;align-items:center;min-width:0}
.puesto-nombre{font-size:var(--fs-small);color:var(--muted);margin-top:6px}

/* ---- Tarjeta de aplicación con giro ---- */
.app-card{position:relative;width:100%;max-width:252px;height:218px;border:0;background:none;padding:0;cursor:pointer;perspective:1000px;-webkit-tap-highlight-color:transparent;transition:transform .8s var(--ease)}
.puesto:nth-child(1) .app-card{transform:rotate(-2.4deg) translateY(7px)}
.puesto:nth-child(2) .app-card{transform:rotate(1.8deg) translateY(-4px)}
.puesto:nth-child(3) .app-card{transform:rotate(-1.5deg) translateY(9px)}
.puesto:nth-child(4) .app-card{transform:rotate(2.5deg) translateY(-2px)}
.conectada .app-card,.conectada .puesto .app-card{transform:none}

.app-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s var(--ease)}
.app-card[aria-pressed="true"] .app-inner,.app-card:focus-visible .app-inner{transform:rotateY(180deg)}
@media(hover:hover){.app-card:hover .app-inner{transform:rotateY(180deg)}}

.app-cara{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:18px 17px;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.app-frente{background:var(--white);border:1px solid var(--line);box-shadow:0 16px 34px rgba(16,45,37,.09)}
.app-dorso{background:var(--deep);color:var(--ivory);transform:rotateY(180deg);box-shadow:0 16px 34px rgba(16,45,37,.18)}
.dorso-texto{font-size:var(--fs-body-s);line-height:1.55;text-align:center;text-wrap:balance}
.app-titulo{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-h4);font-weight:600;letter-spacing:-.01em;color:var(--graphite);text-align:center;line-height:1.2;text-wrap:balance}

/* Ventanita de app (alámbrica) */
.mini-app{width:86px;border-radius:9px;border:1px solid var(--line);background:var(--ivory);padding:6px 8px 8px;display:flex;flex-direction:column;gap:4px}
.mini-app .mb{display:flex;gap:3px;margin-bottom:2px}
.mini-app .mb i{width:4px;height:4px;border-radius:50%;background:#C6D1C5;font-style:normal}
.mini-app .ml{height:5px;border-radius:3px;background:#DDE7DC}
.mini-app .ml.v{background:#BFD8C9}
.mini-app .w5{width:50%}.mini-app .w7{width:72%}.mini-app .w9{width:92%}

/* Chips de situación en el frente */
.app-chips{display:flex;flex-direction:column;align-items:center;gap:6px}
.chip-sit{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:600;color:var(--muted);background:var(--ivory);border:1px solid var(--line);border-radius:20px;padding:5px 11px;white-space:nowrap}
.chip-sit .ic{width:14px;height:14px;color:var(--green)}
.chip-sit.alerta .ic{color:var(--error)}

/* Visitantes llegando a la app abierta */
.visitas{position:absolute;top:10px;right:-14px;width:46px;height:14px;pointer-events:none}
.visitas i{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--muted);opacity:0;animation:llegar 7s linear infinite}
.visitas i:nth-child(2){animation-delay:2.3s}
.visitas i:nth-child(3){animation-delay:4.6s}
@keyframes llegar{0%{right:-4px;opacity:0}12%{opacity:.7}42%{right:40px;opacity:.7}52%{right:44px;opacity:0}100%{right:44px;opacity:0}}

/* Chip «En AIOP» tras conectar */
.chip-aiop{position:absolute;top:-11px;right:-7px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--green);color:var(--ivory);font-size:var(--fs-label);font-weight:600;border-radius:20px;padding:5px 11px;opacity:0;transform:scale(.55);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.chip-aiop .ic{width:13px;height:13px}
.conectada .puesto:nth-child(1) .chip-aiop{transition-delay:.9s}
.conectada .puesto:nth-child(2) .chip-aiop{transition-delay:1.02s}
.conectada .puesto:nth-child(3) .chip-aiop{transition-delay:1.14s}
.conectada .puesto:nth-child(4) .chip-aiop{transition-delay:1.26s}
.conectada .chip-aiop{opacity:1;transform:scale(1)}

/* Hilo pantalla → aplicación */
.hilo{position:relative;width:2px;height:30px;margin:4px 0 2px;background:repeating-linear-gradient(to bottom,#9BB7A4 0 3px,transparent 3px 8px)}
.hilo::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--green);opacity:0;animation:emerger 7s linear infinite}
.puesto:nth-child(2) .hilo::after{animation-delay:1.7s}
.puesto:nth-child(3) .hilo::after{animation-delay:3.4s}
.puesto:nth-child(4) .hilo::after{animation-delay:5.1s}
@keyframes emerger{0%{top:100%;opacity:0}8%{opacity:.9}38%{top:-6px;opacity:0}100%{top:-6px;opacity:0}}

/* ---- Personitas en su puesto ---- */
.persona{width:100%;max-width:196px;height:auto}
.persona .mano{transform-box:fill-box;transform-origin:center;animation:teclear 1.05s ease-in-out infinite alternate}
@keyframes teclear{from{transform:translateY(0)}to{transform:translateY(-2.4px)}}
.persona .pl{animation:parpadeo 4.5s ease-in-out infinite}
.persona .pl.p2{animation-delay:1.4s}
.persona .pl.p3{animation-delay:2.7s}
@keyframes parpadeo{0%,100%{opacity:.45}50%{opacity:1}}
.puesto:nth-child(1) .persona{--ropa:#146C43}
.puesto:nth-child(2) .persona{--ropa:#33413A}
.puesto:nth-child(3) .persona{--ropa:#6B7D70}
.puesto:nth-child(4) .persona{--ropa:#1E4A38}
.persona.invertida{transform:scaleX(-1)}

/* ---- Acción: conectar / reiniciar ---- */
.escena-accion{display:grid;place-items:center;margin-top:clamp(26px,4vw,38px);min-height:56px}
.escena-accion>*{grid-area:1/1}
.btn-conectar{visibility:visible;opacity:1;transition:opacity .4s var(--ease),visibility 0s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.conectada .btn-conectar{opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.reiniciar{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:10px;cursor:pointer;font-size:var(--fs-small);font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease) 1.4s,visibility 0s 1.9s}
.reiniciar .ic{width:14px;height:14px}
.reiniciar:hover{color:var(--green)}
.conectada .reiniciar{opacity:1;visibility:visible;transition:opacity .5s var(--ease) 1.4s,visibility 0s}

/* ---- Vista de dirección (se expande al conectar) ---- */
.direccion-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease) .5s}
.conectada .direccion-wrap{grid-template-rows:1fr}
.direccion{overflow:hidden;min-height:0;visibility:hidden;opacity:0;transition:opacity .6s var(--ease),visibility 0s .9s}
.conectada .direccion{visibility:visible;opacity:1;transition:opacity .7s var(--ease) .8s,visibility 0s .5s}
.direccion-inner{display:grid;grid-template-columns:.8fr 1.6fr;gap:clamp(20px,3vw,36px);align-items:center;margin-top:clamp(26px,4vw,40px);padding-top:clamp(26px,4vw,40px);border-top:1px solid var(--line)}
.direccion-figura{display:flex;flex-direction:column;align-items:center;gap:8px}
.direccion-figura svg{width:100%;max-width:230px;height:auto}
.direccion-figura figcaption{font-size:var(--fs-small);color:var(--muted);text-align:center}

/* Tablero de dirección */
.tablero{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:20px 22px 10px;box-shadow:0 16px 34px rgba(16,45,37,.08)}
.tablero:focus-visible{outline:3px solid var(--deep);outline-offset:4px}
.tablero-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tablero-cab strong{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-h4);font-weight:600;color:var(--graphite);letter-spacing:-.01em}
.tablero-cab .cuenta{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:600;color:var(--green);background:#EDF4EA;border-radius:20px;padding:5px 11px}
.tablero-filas .cab,.fila{display:grid;grid-template-columns:1.1fr .9fr 1fr 1.35fr;gap:12px;align-items:center}
.tablero-filas .cab{padding:12px 0 6px;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.fila{padding:12px 0;border-top:1px solid var(--line)}
.fila:first-of-type{border-top:0}
.celda{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-s);color:var(--muted);min-width:0}
.celda .ic{width:15px;height:15px;flex-shrink:0;color:var(--green)}
.celda strong{font-weight:600;color:var(--graphite)}
.celda i{width:7px;height:7px;border-radius:50%;flex-shrink:0;font-style:normal}
.celda.ok i{background:var(--green)}
.celda.pendiente i{background:var(--error)}
.celda.pendiente{color:var(--graphite)}
.celda.vacia{color:#9AA69E}
.tablero-nota{font-size:var(--fs-small);color:var(--muted);margin:10px 0 12px}

/* Cierre y reinicio */
.cierre{font-family:Georgia,serif;font-style:italic;font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.3;color:var(--graphite);text-align:center;max-width:620px;margin:clamp(30px,4.5vw,48px) auto 0;text-wrap:balance}

/* ---- Responsive ---- */
@media(max-width:960px){
  .escena-grid{grid-template-columns:1fr 1fr;gap:18px;row-gap:30px}
  .zona-nodo{height:80px}
  .direccion-inner{grid-template-columns:1fr}
  .direccion-figura{order:2}
}
@media(max-width:700px){
  .tablero-filas .cab{display:none}
  .fila{grid-template-columns:1fr 1fr;row-gap:8px}
}
@media(max-width:620px){
  .escena.panel-pad{padding-left:18px;padding-right:18px}
  .escena-grid{grid-template-columns:1fr;row-gap:22px}
  .puesto{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:12px}
  .puesto .hilo{display:none}
  .persona{max-width:112px;flex-shrink:0}
  .persona.invertida{transform:none}
  .puesto-nombre{display:none}
  .app-card{height:208px;max-width:none;flex:1;min-width:0}
  .mini-app{display:none}
  .chip-sit{white-space:normal}
  .visitas{right:auto;left:-10px;transform:scaleX(-1)}
  .red-aiop{display:none}
  .zona-nodo{height:72px}
  .tablero{padding:16px 16px 8px}
}
@media(max-width:420px){
  .persona{max-width:86px}
}

/* ---- Movimiento reducido ---- */
@media(prefers-reduced-motion:reduce){
  .app-card,.app-inner,.nodo-aiop,.chip-aiop,.btn-conectar,.reiniciar,.direccion-wrap,.direccion{transition:none}
  .hilo::after,.visitas i,.persona .mano,.persona .pl{animation:none}
  .visitas i{opacity:.55;right:12px}
  .visitas i:nth-child(2){right:24px}
  .visitas i:nth-child(3){right:36px}
}