/* ============================================================================
   SinergIA 180 — Agente en acción (agente-demo.css)
   ----------------------------------------------------------------------------
   Territorio CLARO, escala monocroma NARANJA — a tono con las capturas del
   prototipo (Extraceite One). La escala --azul-* del sistema se sobreescribe
   localmente dentro de .ag, así que el resto de la presentación no cambia.

   La pieza llena el 100% de la pantalla del MacBook y nunca scrollea la
   página: lo que sobra scrollea dentro de su columna.
   Solo se animan transform y opacity. Sin backdrop-filter.
   ========================================================================== */

/* ------------------------------------------------------------------- raíz -- */
.ag{
  --ag-ease:cubic-bezier(.22,.61,.36,1);
  --ag-r:14px;

  /* Escala naranja local: reemplaza la escala azul solo dentro de esta pieza */
  --azul-900:#4A2508;
  --azul-800:#6B360D;
  --azul-700:#8F4712;
  --azul-ia :#C2701C;
  --azul-500:#DB8F42;
  --azul-400:#E6AC6C;
  --azul-300:#EFC69A;
  --azul-200:#F6DFC2;
  --azul-100:#FBEEDE;
  --azul-50 :#FDF6EE;

  container-type:inline-size;
  container-name:ag;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--f-body);
  -webkit-text-size-adjust:100%;
}
/* La escala tipográfica se mide contra el ANCHO DE LA PIEZA, no del viewport:
   dentro de la pantalla del MacBook el deck puede ser 1440 y la pieza 860.
   Va en los hijos porque un contenedor no puede consultarse a sí mismo. */
.ag > .ag-top,
.ag > .ag-cuerpo{ font-size:clamp(12px, 1.6cqi, 19px); line-height:1.5; }

.ag *{ box-sizing:border-box; }
.ag .ico{ display:block; flex:none; }

/* --------------------------------------------------------------- cabecera -- */
.ag-top{
  flex:none;
  display:flex; align-items:center; gap:.75em;
  padding:.85em 1.25em;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.ag-marca{
  flex:none; display:grid; place-items:center;
  width:2.1em; height:2.1em; border-radius:.62em;
  color:var(--azul-ia); background:var(--azul-100);
  box-shadow:inset 0 0 0 1px var(--azul-200);
}
.ag-marca .ico{ width:1.2em; height:1.2em; }
.ag-id{ display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.ag-id-n{ font-size:.94em; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-id-s{ font-style:normal; font-size:.72em; color:var(--texto-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* estado: el punto cambia de tono con la fase, nunca de matiz */
.ag-estado{
  flex:none; display:inline-flex; align-items:center; gap:.5em;
  padding:.34em .72em .34em .6em; border-radius:999px;
  font-size:.72em; font-weight:600; letter-spacing:.01em;
  color:var(--texto-2); background:var(--fondo);
  box-shadow:inset 0 0 0 1px var(--linea-2);
  white-space:nowrap;
}
.ag-pt{
  position:relative; flex:none;
  width:.5em; height:.5em; border-radius:50%;
  background:var(--texto-3);
}
.ag-pt::after{
  content:''; position:absolute; inset:-.34em;
  border-radius:50%; border:1px solid var(--azul-300);
  opacity:0; transform:scale(.5);
}
.ag[data-corre] .ag-pt{ background:var(--azul-ia); }
.ag[data-corre] .ag-pt::after{ animation:ag-late 2.2s var(--ag-ease) infinite; }
.ag[data-corre] .ag-estado{ color:var(--azul-800); box-shadow:inset 0 0 0 1px var(--azul-200); background:var(--azul-50); }
.ag[data-fase="listo"] .ag-pt{ background:var(--azul-500); }
.ag[data-fase="listo"] .ag-pt::after{ animation:none; }
@keyframes ag-late{
  0%  { opacity:.85; transform:scale(.5); }
  70% { opacity:0;   transform:scale(1.45); }
  100%{ opacity:0;   transform:scale(1.45); }
}
.ag-crono{
  flex:none;
  font-family:var(--f-mono); font-size:.74em;
  color:var(--texto-3); font-variant-numeric:tabular-nums;
  min-width:3.4em; text-align:right;
}
.ag[data-corre] .ag-crono{ color:var(--azul-700); }

/* ----------------------------------------------------------------- cuerpo -- */
.ag-cuerpo{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
}
.ag-col{
  min-width:0; min-height:0;
  display:flex; flex-direction:column;
  padding:1.05em 1.25em 1.1em;
}
.ag-hilo{ border-right:1px solid var(--linea); background:var(--fondo); }
.ag-panel{ background:var(--papel); position:relative; }

.ag-rot{
  flex:none; display:flex; align-items:center; gap:.45em;
  margin:0 0 .9em;
  font-family:var(--f-mono); font-size:.66em; letter-spacing:.15em;
  text-transform:uppercase; color:var(--texto-3);
}
.ag-rot-ico{ width:1.3em; height:1.3em; color:var(--azul-400); }
.ag-rot span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Lo que no cabe scrollea DENTRO de su columna: la página nunca se mueve. */
.ag-msgs, .ag-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none;
}
.ag-msgs::-webkit-scrollbar, .ag-scroll::-webkit-scrollbar{ width:0; height:0; }
.ag-msgs{ display:flex; flex-direction:column; gap:.75em; padding-bottom:.2em; }
/* la conversación se apoya en el campo de texto, no flota arriba */
.ag-msgs > .ag-msg:first-child{ margin-top:auto; }

/* ------------------------------------------------------------- el hilo ---- */
.ag-msg{ display:flex; align-items:flex-end; gap:.5em; max-width:100%; }
.ag-msg--bot{ justify-content:flex-start; }
.ag-msg--yo { justify-content:flex-end; }
.ag-av{
  flex:none; display:grid; place-items:center;
  width:1.75em; height:1.75em; border-radius:50%;
  font-size:.7em; font-weight:700; letter-spacing:.02em;
}
.ag-msg--yo .ag-av{ color:var(--azul-800); background:var(--azul-100); box-shadow:inset 0 0 0 1px var(--azul-200); }
.ag-msg--bot .ag-av{ color:var(--azul-ia); background:var(--fondo); box-shadow:inset 0 0 0 1px var(--linea-2); }
.ag-msg--bot .ag-av .ico{ width:1.05em; height:1.05em; }

.ag-bocadillo{
  display:block; max-width:min(88%, 34em);
  padding:.62em .85em;
  font-size:.86em; line-height:1.5;
  border-radius:1.05em;
  overflow-wrap:anywhere;
}
.ag-msg--yo .ag-bocadillo{
  color:var(--fondo); background:var(--azul-ia);
  border-bottom-right-radius:.28em;
  box-shadow:0 6px 16px -10px rgba(194,112,28,.75);
}
.ag-msg--yo .ph{
  color:var(--fondo); background:rgba(255,255,255,.18);
  border-bottom-color:rgba(255,255,255,.55);
}
/* Mientras se escribe, una copia invisible del texto fija el ANCHO final del
   globo (alto 0: la altura sí crece línea a línea, como en un chat de verdad).
   Sin ella el bocadillo daría un salto de layout por cada letra. */
.ag-fantasma{ display:block; height:0; overflow:hidden; visibility:hidden; }
.ag-msg--bot .ag-bocadillo{
  color:var(--texto); background:var(--azul-50);
  border:1px solid var(--linea);
  border-bottom-left-radius:.28em;
}
.ag-txt{ display:inline; }

/* "escribiendo…" */
.ag-puntos{ display:inline-flex; align-items:center; gap:.3em; padding:.15em 0; vertical-align:middle; }
.ag-puntos i{
  width:.42em; height:.42em; border-radius:50%;
  background:var(--azul-400);
  animation:ag-pt 1.1s var(--ag-ease) infinite;
}
.ag-puntos i:nth-child(2){ animation-delay:.14s; }
.ag-puntos i:nth-child(3){ animation-delay:.28s; }
@keyframes ag-pt{
  0%,100%{ opacity:.35; transform:translateY(0); }
  40%    { opacity:1;   transform:translateY(-.22em); }
}

/* cursor de tecleo */
.ag-tipea::after{
  content:''; display:inline-block; vertical-align:-.12em;
  width:.09em; height:1.05em; margin-left:.12em;
  background:currentColor; border-radius:1px;
  animation:ag-cur 1s steps(1,end) infinite;
}
@keyframes ag-cur{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

/* --------------------------------------------------------- campo de texto -- */
.ag-comp{
  flex:none; display:flex; align-items:center; gap:.55em;
  margin-top:.85em; padding:.5em .5em .5em .55em;
  border:1px solid var(--linea-2); border-radius:999px;
  background:var(--fondo);
  transition:box-shadow .28s var(--ag-ease);
}
.ag-comp[data-lleno]{ box-shadow:0 0 0 3px rgba(194,112,28,.10); border-color:var(--azul-300); }
.ag-comp-av{
  flex:none; display:grid; place-items:center;
  width:1.7em; height:1.7em; border-radius:50%;
  font-size:.68em; font-weight:700;
  color:var(--azul-800); background:var(--azul-100);
}
.ag-comp-txt{
  flex:1 1 auto; min-width:0;
  font-size:.82em; line-height:1.35; color:var(--texto);
  white-space:nowrap; overflow:hidden; text-overflow:clip;
}
.ag-comp:not([data-lleno]) .ag-comp-txt::before{
  content:attr(data-vacio); color:var(--texto-3);
}
.ag-comp-env{
  flex:none; display:grid; place-items:center;
  width:1.85em; height:1.85em; border-radius:50%;
  color:var(--texto-3); background:var(--papel);
  transition:transform .3s var(--ag-ease);
}
.ag-comp[data-lleno] .ag-comp-env{ color:var(--fondo); background:var(--azul-ia); }
.ag-comp--envia .ag-comp-env{ transform:scale(.86); }
.ag-comp-env .ico{ width:1em; height:1em; }

/* ----------------------------------------------------- pasos de análisis --- */
.ag-pasos{ list-style:none; margin:0; padding:0; }
.ag-paso{
  position:relative;
  display:flex; align-items:flex-start; gap:.6em;
  padding:0 0 .78em;
}
/* hilo vertical que cose los pasos */
.ag-paso:not(:last-child)::before{
  content:''; position:absolute; left:.62em; top:1.5em; bottom:.1em;
  width:1px; background:var(--azul-200);
}
.ag-paso-ico{
  position:relative; flex:none;
  width:1.25em; height:1.25em; margin-top:.06em;
  display:grid; place-items:center;
}
.ag-aro{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--azul-200);
  border-top-color:var(--azul-ia);
  animation:ag-gira .85s linear infinite;
}
.ag-paso-ok{
  width:1.25em; height:1.25em;
  color:var(--fondo);
  border-radius:50%; background:var(--azul-ia);
  padding:.16em;
  opacity:0; transform:scale(.6);
  transition:opacity .26s var(--ag-ease), transform .26s var(--ag-ease);
}
.ag-paso--hecho .ag-aro{ opacity:0; animation:none; }
.ag-paso--hecho .ag-paso-ok{ opacity:1; transform:none; }
@keyframes ag-gira{ to{ transform:rotate(360deg); } }

.ag-paso-txt{
  font-size:.82em; line-height:1.45;
  color:var(--texto-2);
  overflow-wrap:anywhere;
}
.ag-paso--vivo .ag-paso-txt{ color:var(--texto); }
.ag-paso--hecho .ag-paso-txt{ color:var(--texto-3); }

/* ---------------------------------------------------------------- salida --- */
.ag-salida{ display:flex; flex-direction:column; gap:.7em; padding-top:.1em; }

.ag-rotulo{
  display:block;
  font-family:var(--f-mono); font-size:.62em; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul-700);
}

/* hallazgo: la conclusión, destacada sobre lavado azul */
.ag-hallazgo{
  display:flex; gap:.6em;
  padding:.7em .85em;
  border-radius:var(--ag-r);
  background:var(--azul-100);
  box-shadow:inset 3px 0 0 var(--azul-ia);
}
.ag-hallazgo-ico{ flex:none; color:var(--azul-ia); margin-top:.15em; }
.ag-hallazgo-ico .ico{ width:1.15em; height:1.15em; }
.ag-hallazgo-cuerpo{ min-width:0; display:flex; flex-direction:column; gap:.2em; }
.ag-hallazgo-txt{
  font-size:.84em; line-height:1.45; font-weight:500;
  color:var(--azul-900); overflow-wrap:anywhere;
}
.ag-hallazgo .ph{ background:var(--azul-200); }

/* alerta: la tarjeta que sale hacia el equipo, con su orden de trabajo */
.ag-alerta{
  position:relative;
  border:1px solid var(--linea-2);
  border-radius:var(--ag-r);
  background:var(--fondo);
  padding:.8em .85em .7em;
  box-shadow:0 1px 2px rgba(13,20,36,.04), 0 16px 34px -24px rgba(13,20,36,.28);
}
/* Al entregarse, la tarjeta se "enciende" con una capa que solo cambia de
   opacidad: nada de transicionar la sombra de una tarjeta grande. */
.ag-alerta::after{
  content:''; position:absolute; inset:-1px;
  border:1px solid var(--azul-300); border-radius:inherit;
  box-shadow:0 18px 36px -22px rgba(194,112,28,.55);
  opacity:0; transition:opacity .45s var(--ag-ease);
  pointer-events:none;
}
.ag-alerta--ok::after{ opacity:1; }
.ag-alerta-cab{ display:flex; align-items:flex-start; gap:.55em; }
.ag-alerta-ico{
  flex:none; display:grid; place-items:center;
  width:1.7em; height:1.7em; border-radius:.5em;
  color:var(--fondo); background:var(--azul-ia);
}
.ag-alerta-ico .ico{ width:1em; height:1em; }
.ag-alerta-tit{ min-width:0; margin-right:auto; display:flex; flex-direction:column; gap:.12em; }
.ag-alerta-t{ font-size:.87em; font-weight:600; letter-spacing:-.005em; color:var(--texto); }
.ag-ot{
  flex:none; display:inline-flex; align-items:center; gap:.28em;
  padding:.3em .55em; border-radius:.5em;
  font-family:var(--f-mono); font-size:.68em; font-weight:600; letter-spacing:.02em;
  color:var(--azul-800); background:var(--azul-100);
  box-shadow:inset 0 0 0 1px var(--azul-200);
  white-space:nowrap;
}
.ag-ot .ico{ width:1.05em; height:1.05em; opacity:.85; }
.ag-alerta-txt{
  margin:.55em 0 0;
  font-size:.8em; line-height:1.45; color:var(--texto-2);
  overflow-wrap:anywhere;
}

/* el viaje: origen → riel → destino. Solo transform. */
.ag-envio{
  display:flex; align-items:center; gap:.55em;
  margin-top:.75em; padding-top:.65em;
  border-top:1px dashed var(--linea);
}
.ag-envio-org{
  flex:none; display:grid; place-items:center;
  width:1.55em; height:1.55em; border-radius:50%;
  color:var(--azul-ia); background:var(--azul-50);
  box-shadow:inset 0 0 0 1px var(--azul-200);
}
.ag-envio-org .ico, .ag-dest .ico{ width:.95em; height:.95em; }
.ag-rail{ position:relative; flex:1 1 auto; height:.7em; min-width:1.5em; }
.ag-rail::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:2px; margin-top:-1px; border-radius:2px;
  background:var(--azul-200);
}
.ag-rail-fill{
  position:absolute; left:0; right:0; top:50%;
  height:2px; margin-top:-1px; border-radius:2px;
  background:var(--azul-ia);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s var(--ag-ease);
}
.ag-rail-pkg{
  position:absolute; inset:0;
  transform:translateX(-100%);
  transition:transform .9s var(--ag-ease);
}
.ag-rail-pkg::after{
  content:''; position:absolute; right:-.2em; top:50%;
  width:.55em; height:.55em; margin-top:-.275em;
  border-radius:50%; background:var(--azul-ia);
  box-shadow:0 0 0 .22em rgba(194,112,28,.14);
}
.ag-alerta--va .ag-rail-fill{ transform:scaleX(1); }
.ag-alerta--va .ag-rail-pkg{ transform:translateX(0); }

.ag-dest{
  flex:none; position:relative;
  display:inline-flex; align-items:center; gap:.35em;
  padding:.32em .6em; border-radius:999px;
  font-size:.72em; color:var(--texto-2);
  background:var(--fondo);
  box-shadow:inset 0 0 0 1px var(--linea-2);
  transition:color .3s var(--ag-ease), box-shadow .3s var(--ag-ease), background-color .3s var(--ag-ease);
}
.ag-dest b{ font-weight:600; white-space:nowrap; }
.ag-dest-ok{
  display:grid; place-items:center;
  width:1.15em; height:1.15em; margin-left:.1em;
  border-radius:50%; color:var(--fondo); background:var(--azul-ia);
  opacity:0; transform:scale(.5);
  transition:opacity .3s var(--ag-ease), transform .3s var(--ag-ease);
}
.ag-dest-ok .ico{ width:.85em; height:.85em; }
.ag-alerta--ok .ag-dest{ color:var(--azul-800); background:var(--azul-50); box-shadow:inset 0 0 0 1px var(--azul-300); }
.ag-alerta--ok .ag-dest-ok{ opacity:1; transform:none; }

/* ---------------------------------------------------------- panel en reposo */
.ag-vacio{
  position:absolute; inset:3.2em 1.25em 4.2em;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35em; text-align:center;
  opacity:0; transform:scale(.98);
  transition:opacity .4s var(--ag-ease), transform .4s var(--ag-ease);
  pointer-events:none;
}
.ag[data-fase="espera"] .ag-vacio,
.ag[data-fase="escucha"] .ag-vacio{ opacity:1; transform:none; }
.ag-vacio-ico{
  display:grid; place-items:center;
  width:2.6em; height:2.6em; margin-bottom:.35em;
  border-radius:50%; color:var(--azul-400);
  background:var(--fondo); box-shadow:inset 0 0 0 1px var(--linea-2);
}
.ag-vacio-ico .ico{ width:1.25em; height:1.25em; }
.ag-vacio b{ font-size:.82em; font-weight:600; color:var(--texto-3); }
.ag-vacio em{ font-style:normal; font-size:.72em; color:var(--texto-3); opacity:.75; max-width:22em; text-wrap:balance; }

/* ------------------------------------------------------- pie de recorrido -- */
.ag-pie{
  flex:none;
  display:flex; align-items:center; gap:.5em;
  margin-top:.85em; padding-top:.75em;
  border-top:1px solid var(--linea);
}
.ag-hito{
  display:inline-flex; align-items:center; gap:.38em;
  min-width:0;
  font-size:.68em; color:var(--texto-3);
  transition:color .3s var(--ag-ease);
}
.ag-hito-t{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-hito-pt{
  position:relative; flex:none;
  display:grid; place-items:center;
  width:1.35em; height:1.35em; border-radius:50%;
  background:var(--fondo);
  box-shadow:inset 0 0 0 1.5px var(--linea-2);
  transition:box-shadow .3s var(--ag-ease), background-color .3s var(--ag-ease);
}
.ag-hito-ok{
  width:.85em; height:.85em; color:var(--fondo);
  opacity:0; transform:scale(.5);
  transition:opacity .28s var(--ag-ease), transform .28s var(--ag-ease);
}
.ag-hito--vivo{ color:var(--azul-800); }
.ag-hito--vivo .ag-hito-pt{ background:var(--azul-100); box-shadow:inset 0 0 0 1.5px var(--azul-400); }
.ag-hito--vivo .ag-hito-pt::after{
  content:''; position:absolute; inset:-.2em;
  border-radius:50%; border:1px solid var(--azul-300);
  animation:ag-late 2s var(--ag-ease) infinite;
}
.ag-hito--ok{ color:var(--azul-800); }
.ag-hito--ok .ag-hito-pt{ background:var(--azul-ia); box-shadow:inset 0 0 0 1.5px var(--azul-ia); }
.ag-hito--ok .ag-hito-ok{ opacity:1; transform:none; }
.ag-hito[data-h="ot"] .ag-hito-t{ font-family:var(--f-mono); letter-spacing:.01em; }
.ag-sep{
  flex:1 1 auto; min-width:.5em; height:1px;
  background:var(--linea-2);
}

/* --------------------------------------------------------------- entradas -- */
.ag-ent{ animation:ag-entra .42s var(--ag-ease) both; }
@keyframes ag-entra{
  from{ opacity:0; transform:translateY(.6em); }
  to  { opacity:1; transform:none; }
}
.ag-msg--yo.ag-ent{ animation-name:ag-entra-yo; }
@keyframes ag-entra-yo{
  from{ opacity:0; transform:translateY(.5em) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ------------------------------------------------------ pantallas estrechas */
@container ag (max-width:640px){
  .ag-cuerpo{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,40fr) minmax(0,60fr);
  }
  .ag-hilo{ border-right:0; border-bottom:1px solid var(--linea); }
  .ag-col{ padding:.85em 1em .9em; }
  .ag-id-s{ display:none; }
  .ag-estado{ display:none; }
  .ag-bocadillo{ max-width:92%; }
  .ag-pie{ gap:.35em; margin-top:.6em; padding-top:.6em; }
  .ag-hito{ font-size:.62em; }
}
/* Sin soporte de container queries: el viewport hace de sustituto. */
@supports not (container-type:inline-size){
  .ag > .ag-top, .ag > .ag-cuerpo{ font-size:clamp(12px,1.2vw,18px); }
  @media (max-width:640px){
    .ag-cuerpo{ grid-template-columns:1fr; grid-template-rows:minmax(0,40fr) minmax(0,60fr); }
    .ag-hilo{ border-right:0; border-bottom:1px solid var(--linea); }
    .ag-estado, .ag-id-s{ display:none; }
  }
}

/* ---------------------------------------------------- movimiento reducido -- */
@media (prefers-reduced-motion:reduce){
  .ag *, .ag *::before, .ag *::after{
    animation:none !important;
    transition:none !important;
  }
}
.ag--quieto *, .ag--quieto *::before, .ag--quieto *::after{
  animation:none !important;
  transition:none !important;
}