/* ANI · EL INGE · hoja de estilo · Rev 11.3 · MMXXVI
   Todo cuelga de .ingew y del prefijo .inge-: ni un selector toca el resto del
   sitio. Reglas de la casa: radio 0 (filetes), oro para el filete vivo, cian
   solo para dato, sombra solo en lo que de verdad flota. */

.ingew{
  /* medidas: el panel se cuelga de la altura del personaje, sin números mágicos */
  --iw:clamp(66px,6.2vw,94px);      /* ancho del personaje                      */
  --ib:clamp(16px,3.2vh,26px);      /* separación al borde inferior             */
  --il:clamp(12px,2.2vw,34px);      /* separación al borde izquierdo            */
  --ih:calc(var(--iw) * 1.25);      /* alto del personaje (viewBox 96×120)      */

  --i-abismo:#070F1C;
  --i-navy:#0A1628;
  --i-navy2:#101E33;
  --i-navy3:#152238;
  --i-oro:#C9A96A;
  --i-oro-h:#C79A3B;
  --i-oro-c:#E3CE9C;
  --i-cian:#2AA9C9;
  --i-crema:#F4F1E9;
  --i-tinta:#E9EEF5;
  --i-tinta2:#A6B7CA;
  --i-tinta3:#8CA0B6;
  --i-linea:rgba(138,172,206,.20);
  --i-linea-f:rgba(138,172,206,.36);
  --i-texto:'Archivo','Segoe UI',system-ui,sans-serif;
  --i-dato:'JetBrains Mono','Consolas',monospace;
  --i-suave:cubic-bezier(.33,.71,.32,1);

  position:fixed;left:0;top:0;width:0;height:0;z-index:120;
  font-family:var(--i-texto);
  /* el navegador pinta en oscuro sus propios controles: el calendario del
     campo de fecha y la barra de desplazamiento dejan de verse negros */
  color-scheme:dark;
}
.ingew *{box-sizing:border-box}
.ingew ::selection{background:var(--i-oro);color:var(--i-navy)}

/* ------------------------------------------------------------ el personaje */
.inge-b{
  position:fixed;left:var(--il);bottom:var(--ib);
  width:var(--iw);padding:0;margin:0;
  background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  filter:drop-shadow(0 10px 18px rgba(2,6,12,.6));
  transition:filter 150ms var(--i-suave),transform 150ms var(--i-suave);
}
.inge-b:hover,.inge-b:focus-visible{filter:drop-shadow(0 12px 22px rgba(201,169,106,.34))}
.inge-b:focus-visible{outline:2px solid var(--i-oro-c);outline-offset:6px}
.inge-b:active{transform:translateY(1px)}

.inge-fig{width:100%;height:auto;display:block;overflow:visible}
.inge-b:not(.inge-b--quieto) .inge-fig{animation:ingeResp 4.8s ease-in-out infinite}
@keyframes ingeResp{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

/* piel de la figura */
.inge-losa{fill:rgba(21,34,56,.82);stroke:rgba(150,178,208,.34);stroke-width:.9}
.inge-losa-c{fill:#0B1524;stroke:rgba(150,178,208,.22);stroke-width:.8}
.inge-som{fill:rgba(3,8,16,.42)}
.inge-uni{fill:var(--i-navy3);stroke:rgba(150,178,208,.45);stroke-width:.9;stroke-linejoin:round}
.inge-uni2{fill:#0E1B2E;stroke:rgba(150,178,208,.34);stroke-width:.8}
.inge-bota{fill:#060D18;stroke:rgba(150,178,208,.26);stroke-width:.7}
.inge-vis{fill:rgba(214,229,243,.44)}
.inge-cint{fill:#0B1626;stroke:rgba(150,178,208,.30);stroke-width:.7}
.inge-hebilla{fill:var(--i-oro-h)}
.inge-hex{fill:none;stroke:var(--i-oro);stroke-width:1.05}
.inge-brazo{fill:none;stroke:#182942;stroke-width:6.4;stroke-linecap:round;stroke-linejoin:round}
.inge-piel{fill:#C6B49B;stroke:rgba(10,22,40,.55);stroke-width:.7}
.inge-dedo{fill:none;stroke:rgba(10,22,40,.34);stroke-width:.7;stroke-linecap:round}
.inge-cara{fill:#C6B49B;stroke:rgba(10,22,40,.7);stroke-width:1}
.inge-ojo{fill:var(--i-crema);stroke:rgba(10,22,40,.5);stroke-width:.6}
.inge-pupila{fill:#0A1628}
.inge-bri{fill:rgba(244,241,233,.9)}
.inge-parp{fill:#B09B80}
.inge-lente{fill:none;stroke:rgba(10,22,40,.5);stroke-width:1.2;stroke-linecap:round}
.inge-boca{fill:none;stroke:rgba(10,22,40,.62);stroke-width:1.2;stroke-linecap:round}
.inge-casco-i{fill:#A9812C}
.inge-casco-d{fill:var(--i-oro-h)}
.inge-casco-b{fill:#8E6C22;stroke:rgba(7,15,28,.75);stroke-width:.9;stroke-linejoin:round}
.inge-casco-l{fill:none;stroke:var(--i-oro-c);stroke-width:.9;stroke-linecap:round}
.inge-casco-c{fill:none;stroke:rgba(7,15,28,.45);stroke-width:.7}
.inge-tabm{fill:#0B1626;stroke:rgba(201,169,106,.55);stroke-width:.9}
.inge-tabp{fill:#0A2436}
.inge-dato{fill:none;stroke:var(--i-cian);stroke-width:1.1;stroke-linecap:round;opacity:.92}

/* --------------------------------------------------------------- el globo */
.inge-glo{
  position:fixed;left:calc(var(--il) + var(--iw) * .62);
  bottom:calc(var(--ib) + var(--ih) * .70);
  max-width:min(230px,58vw);
  padding:9px 13px 10px;
  background:var(--i-navy2);border:1px solid rgba(201,169,106,.42);
  color:var(--i-tinta);font-size:.9rem;line-height:1.45;
  box-shadow:0 14px 28px rgba(2,6,12,.55);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity 240ms var(--i-suave),transform 240ms var(--i-suave);
}
.inge-glo[hidden]{display:none}
.inge-glo.inge-on{opacity:1;transform:none;pointer-events:auto}
.inge-glo::before{
  content:'';position:absolute;left:-7px;bottom:11px;width:12px;height:12px;
  background:var(--i-navy2);border-left:1px solid rgba(201,169,106,.42);
  border-bottom:1px solid rgba(201,169,106,.42);transform:rotate(45deg);
}
.inge-glo__x{
  position:absolute;top:-1px;right:1px;width:22px;height:22px;line-height:20px;
  background:none;border:0;color:var(--i-tinta3);font-size:.95rem;cursor:pointer;
}
.inge-glo__x:hover{color:var(--i-oro-c)}

/* --------------------------------------------------------------- el panel */
.inge-p{
  position:fixed;left:var(--il);
  bottom:calc(var(--ib) + var(--ih) + 14px);
  width:min(374px,calc(100vw - var(--il) * 2));
  max-height:calc(100vh - var(--ib) - var(--ih) - 44px);
  display:flex;flex-direction:column;
  background:var(--i-navy);border:1px solid var(--i-linea-f);
  box-shadow:0 26px 60px rgba(2,6,12,.7);
  color:var(--i-tinta);
  opacity:0;transform:translateY(10px);
  transition:opacity 220ms var(--i-suave),transform 220ms var(--i-suave);
}
.inge-p[hidden]{display:none}
.inge-p.inge-on{opacity:1;transform:none}

.inge-p__cab{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px 12px 14px;
  background:var(--i-abismo);border-bottom:1px solid rgba(201,169,106,.24);
}
.inge-pmini{width:34px;height:34px;flex:0 0 34px;overflow:visible}
.inge-p__id{flex:1 1 auto;min-width:0}
.inge-p__k{
  margin:0;font-family:var(--i-dato);font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--i-oro);
}
.inge-p__t{margin:2px 0 0;font-size:.95rem;font-weight:600;letter-spacing:.01em;color:var(--i-tinta)}
.inge-p__t span{color:var(--i-tinta3);font-weight:400}
.inge-p__x{
  flex:0 0 30px;width:30px;height:30px;background:none;border:1px solid var(--i-linea);
  color:var(--i-tinta2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color 150ms var(--i-suave),color 150ms var(--i-suave);
}
.inge-p__x:hover{border-color:var(--i-oro);color:var(--i-oro-c)}
.inge-p__x svg{width:11px;height:11px}
.inge-p__x path{stroke:currentColor;stroke-width:1.5}

.inge-p__paso{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 14px;background:var(--i-navy2);border-bottom:1px solid var(--i-linea);
  font-family:var(--i-dato);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--i-tinta3);
}
.inge-pr{width:74px;height:2px;background:rgba(138,172,206,.18);flex:0 0 74px}
/* la barra crece con transform, no con width: una propiedad que no relaya */
.inge-pr i{
  display:block;height:2px;width:100%;background:var(--i-oro);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 280ms var(--i-suave);
}

.inge-p__hilo{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:14px;display:flex;flex-direction:column;gap:9px;
  background:var(--i-navy);
}
/* separador elástico: con la charla corta empuja los mensajes abajo (en móvil
   el panel es alto) y se encoge a cero cuando el hilo desborda */
.inge-p__hilo::before{content:'';flex:1 1 auto;min-height:0}
.inge-p__hilo::-webkit-scrollbar{width:8px}
.inge-p__hilo::-webkit-scrollbar-thumb{background:rgba(138,172,206,.22)}
.inge-p__hilo::-webkit-scrollbar-track{background:transparent}

.inge-m{max-width:88%;padding:9px 12px;font-size:.9rem;line-height:1.5}
.inge-m--i{
  align-self:flex-start;background:var(--i-navy2);
  border:1px solid var(--i-linea);color:var(--i-tinta);
}
.inge-m--y{
  align-self:flex-end;background:var(--i-navy3);
  border:1px solid rgba(201,169,106,.38);color:var(--i-crema);
}
.inge-m p{margin:0}
.inge-m p + p{margin-top:6px}
.inge-m b{font-weight:600;color:var(--i-oro-c)}
/* Soporte de equipo. Lo que sí se puede hacer va en numerales; lo que no se
   toca va en el ámbar con el que un panel avisa falla, con filete de 2px a la
   izquierda: el único sitio del módulo donde esa barra significa algo. */
.inge-m.inge-bloq,.inge-m.inge-veda{max-width:100%;align-self:stretch}
.inge-bloq__t,.inge-veda__t{
  margin:0 0 6px;font-family:var(--i-dato);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;
}
.inge-bloq__t{color:var(--i-oro)}
.inge-pasos{margin:0;padding-left:19px;font-size:.88rem;line-height:1.5}
.inge-pasos li{margin-bottom:6px}
.inge-pasos li:last-child{margin-bottom:0}
.inge-pasos li::marker{color:var(--i-oro);font-family:var(--i-dato);font-size:.78rem}

.inge-m.inge-veda{
  background:rgba(214,148,58,.08);
  border-color:rgba(214,148,58,.42);
  border-left:2px solid #D6943A;
}
.inge-veda__t{color:#E9B76A}
.inge-veda__l{margin:0;padding-left:17px;font-size:.85rem;line-height:1.5;color:var(--i-tinta)}
.inge-veda__l li{margin-bottom:6px}
.inge-veda__l li:last-child{margin-bottom:0}
.inge-veda__l li::marker{color:#D6943A}

.inge-a{
  display:inline-block;margin-top:7px;font-family:var(--i-dato);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--i-oro);
  text-decoration:none;border-bottom:1px solid rgba(201,169,106,.45);padding-bottom:2px;
  transition:color 150ms var(--i-suave),border-color 150ms var(--i-suave);
}
.inge-a:hover{color:var(--i-oro-c);border-color:var(--i-oro-c)}

/* resumen: las mismas filas clave/valor del cierre del sitio */
.inge-res{border:1px solid rgba(201,169,106,.34);background:var(--i-navy2);align-self:stretch}
.inge-res__f{
  margin:0;padding:9px 12px;background:rgba(201,169,106,.10);
  border-bottom:1px solid rgba(201,169,106,.24);
}
.inge-res__f span{
  display:block;font-family:var(--i-dato);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--i-tinta3);margin-bottom:3px;
}
.inge-res__f b{font-family:var(--i-dato);font-size:.86rem;letter-spacing:.06em;color:var(--i-oro-c);font-weight:500}
.inge-res dl{margin:0;padding:4px 12px 10px}
.inge-res__r{
  display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--i-linea);
  font-size:.85rem;line-height:1.4;
}
.inge-res__r:last-child{border-bottom:0}
.inge-res dt{
  flex:0 0 82px;font-family:var(--i-dato);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--i-tinta3);padding-top:2px;
}
.inge-res dd{margin:0;flex:1 1 auto;color:var(--i-tinta);word-break:break-word}

/* ------------------------------------------------------------- pie de opciones */
.inge-p__pie{
  flex:0 0 auto;padding:11px 14px 12px;border-top:1px solid var(--i-linea);
  background:var(--i-navy2);display:flex;flex-direction:column;gap:7px;
  max-height:52vh;overflow-y:auto;
}
/* los chips van en fila y envuelven; el resto del pie sigue en columna */
.inge-chipsfila{display:flex;flex-wrap:wrap;gap:6px}
.inge-o{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 11px;background:var(--i-navy);border:1px solid var(--i-linea);
  color:var(--i-tinta);font-size:.88rem;line-height:1.35;cursor:pointer;
  transition:border-color 150ms var(--i-suave),background-color 150ms var(--i-suave);
}
.inge-o:hover,.inge-o:focus-visible{border-color:rgba(201,169,106,.6);background:var(--i-navy3)}
.inge-o:focus-visible{outline:1px solid var(--i-oro-c);outline-offset:1px}
.inge-o__t{flex:1 1 auto}
.inge-o__s{display:block;font-size:.74rem;color:var(--i-tinta3);margin-top:2px}
.inge-o__c{flex:0 0 auto;color:var(--i-oro);font-family:var(--i-dato);font-size:.8rem}

.inge-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px 12px;font-family:var(--i-dato);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;
  border:1px solid var(--i-oro);background:var(--i-oro);color:var(--i-navy);
  font-weight:500;transition:background-color 150ms var(--i-suave),color 150ms var(--i-suave);
}
.inge-cta:hover{background:var(--i-oro-c);border-color:var(--i-oro-c)}
.inge-cta--2{background:none;color:var(--i-oro);border-color:rgba(201,169,106,.45)}
.inge-cta--2:hover{background:rgba(201,169,106,.12);color:var(--i-oro-c)}
.inge-cta--2[data-ok="si"]{color:var(--i-cian);border-color:rgba(42,169,201,.55)}

/* chips de atajo: los flujos guiados dejaron de ser el plato fuerte y ahora
   viven aquí abajo, del tamaño que les toca */
.inge-acc{
  display:inline-flex;align-items:center;
  padding:7px 11px;background:var(--i-navy);border:1px solid var(--i-linea);
  color:var(--i-tinta2);font-size:.8rem;line-height:1.25;cursor:pointer;
  transition:border-color 150ms var(--i-suave),color 150ms var(--i-suave);
}
.inge-acc:hover,.inge-acc:focus-visible{border-color:rgba(201,169,106,.55);color:var(--i-tinta)}
.inge-acc:focus-visible{outline:1px solid var(--i-oro-c);outline-offset:1px}

/* barra de escritura: la puerta principal del asistente */
.inge-comp{
  flex:0 0 auto;display:flex;gap:0;align-items:stretch;
  border-top:1px solid var(--i-linea);background:var(--i-navy2);
}
.inge-comp__c{
  flex:1 1 auto;min-width:0;padding:13px 14px;
  background:transparent;border:0;color:var(--i-tinta);
  font-family:var(--i-texto);font-size:.92rem;line-height:1.4;
}
.inge-comp__c:focus{outline:0}
.inge-comp__c::placeholder{color:#6C8098}
.inge-comp:focus-within{background:var(--i-navy3)}
.inge-comp__b{
  flex:0 0 46px;width:46px;background:none;border:0;border-left:1px solid var(--i-linea);
  color:var(--i-oro);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background-color 150ms var(--i-suave),color 150ms var(--i-suave);
}
.inge-comp__b:hover{background:rgba(201,169,106,.14);color:var(--i-oro-c)}
.inge-comp__b:focus-visible{outline:1px solid var(--i-oro-c);outline-offset:-2px}
.inge-comp__b svg{width:17px;height:17px}
.inge-comp__b path{stroke:currentColor;stroke-width:1.5}

/* «está escribiendo»: tres puntos, medio segundo, y a otra cosa */
.inge-esc{display:flex;gap:5px;align-items:center;padding:13px 12px}
.inge-esc i{
  width:5px;height:5px;background:var(--i-tinta3);display:block;
  animation:ingePunto 1.05s ease-in-out infinite;
}
.inge-esc i:nth-child(2){animation-delay:.16s}
.inge-esc i:nth-child(3){animation-delay:.32s}
@keyframes ingePunto{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:.95;transform:translateY(-3px)}}
.inge-oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.inge-menor{
  align-self:flex-start;padding:7px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--i-dato);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--i-tinta3);transition:color 150ms var(--i-suave);
}
.inge-menor:hover{color:var(--i-oro-c)}
.inge-fila{display:flex;gap:8px;align-items:center;justify-content:space-between}

/* campos */
.inge-cmp{display:flex;flex-direction:column;gap:7px}
.inge-cmp label{
  font-family:var(--i-dato);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--i-tinta3);
}
.inge-in,.inge-ta{
  width:100%;padding:9px 10px;background:var(--i-navy);color:var(--i-tinta);
  border:1px solid var(--i-linea);font-family:var(--i-texto);font-size:.9rem;
  line-height:1.45;transition:border-color 150ms var(--i-suave);
  color-scheme:dark;   /* el calendario del campo de fecha, en oscuro */
}
.inge-ta{resize:vertical;min-height:66px}
.inge-in:focus,.inge-ta:focus{outline:0;border-color:rgba(201,169,106,.65)}
.inge-in::placeholder,.inge-ta::placeholder{color:#61748A}
.inge-tel{display:flex;gap:0;align-items:stretch}
.inge-tel__p{
  flex:0 0 auto;display:flex;align-items:center;padding:0 10px;
  background:var(--i-navy3);border:1px solid var(--i-linea);border-right:0;
  font-family:var(--i-dato);font-size:.82rem;color:var(--i-oro-c);
}
.inge-tel .inge-in{flex:1 1 auto}
/* el icono del calendario lo pone el navegador y sale negro sobre navy: se
   sustituye por uno a la línea, sin depender del tema del sistema */
.inge-in::-webkit-calendar-picker-indicator{
  width:15px;height:15px;cursor:pointer;opacity:.85;
  background-position:center;background-repeat:no-repeat;background-size:15px 15px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A6B7CA' stroke-width='1.3'%3E%3Crect x='2' y='3.5' width='12' height='10.5'/%3E%3Cpath d='M2 6.6h12M5.4 1.8v3M10.6 1.8v3'/%3E%3C/svg%3E");
}
.inge-in::-webkit-calendar-picker-indicator:hover{opacity:1}
.inge-fecha{display:flex;gap:8px;flex-wrap:wrap}
.inge-fecha .inge-in{flex:1 1 130px;min-width:120px}
/* aviso de campo. La franja de color al costado es el callout de libreria de
   documentacion —tell de plantilla—: aqui el aviso se marca como se marca todo
   en esta casa, con un rotulo en caps espaciadas del mismo palo que la etiqueta
   del campo, y el texto debajo. Cero icono, cero globo, cero rojo de alarma. */
.inge-aviso{margin:7px 0 0;font-size:.79rem;line-height:1.45;color:var(--i-tinta2)}
.inge-aviso::before{
  content:'REVISE';display:block;margin-bottom:2px;
  font-family:var(--i-dato);font-size:.64rem;letter-spacing:.15em;color:var(--i-oro)
}
.inge-chips{display:flex;gap:7px;flex-wrap:wrap}
.inge-chip{
  padding:7px 11px;background:var(--i-navy);border:1px solid var(--i-linea);
  color:var(--i-tinta2);font-size:.8rem;cursor:pointer;
  transition:border-color 150ms var(--i-suave),color 150ms var(--i-suave);
}
.inge-chip:hover{border-color:rgba(201,169,106,.5);color:var(--i-tinta)}
.inge-chip[aria-pressed="true"]{border-color:var(--i-oro);color:var(--i-oro-c);background:rgba(201,169,106,.10)}

.inge-p__nota{
  margin:0;padding:8px 14px 10px;background:var(--i-abismo);
  border-top:1px solid var(--i-linea);
  font-size:.72rem;line-height:1.45;color:var(--i-tinta3);
}
.inge-copia{
  width:100%;margin-top:7px;padding:8px;background:var(--i-navy);color:var(--i-tinta2);
  border:1px solid var(--i-linea);font-family:var(--i-dato);font-size:.72rem;
  line-height:1.5;min-height:96px;resize:vertical;
}

/* ---------------------------------------------------------------- móvil */
@media(max-width:767px){
  .ingew{--iw:56px;--ib:14px;--il:12px}
  .inge-p{
    left:0;right:0;bottom:0;width:auto;max-width:none;
    height:94vh;max-height:none;border-left:0;border-right:0;border-bottom:0;
  }
  .inge-p__hilo{padding:12px}
  .inge-glo{max-width:min(200px,64vw);font-size:.85rem}
  .ingew.inge-abierto .inge-b,.ingew.inge-abierto .inge-glo{display:none}
}

@media(prefers-reduced-motion:reduce){
  .inge-b .inge-fig{animation:none}
  .inge-p,.inge-glo{transition:none}
  .inge-pr i{transition:none}
}

@media print{.ingew{display:none}}