/* Web ANLOK 2026 · chat-auto.css — «Una automatización, por dentro» (#que-cambia), 25/10/2026.
   Sustituye a las tres columnas y la carrera (carrera.*, en archivo/): una conversación por ejemplo y, al lado
   (debajo en móvil), lo que ya ha quedado hecho. Lo monta chat-auto.js; sin JS o con movimiento reducido se ve el
   ejemplo entero y quieto. */
.chat-sec .chat__h-suave{color:var(--acento-texto)}
.chat{display:flex;flex-direction:column;align-items:center;gap:22px}

/* Selector de ejemplo: píldoras como las pestañas del resto de la web */
.chat__chips{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--hundido);box-shadow:inset 0 0 0 1px var(--linea)}
.chat__chip{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--texto-sec);font:600 15px/1 var(--sans);cursor:pointer;transition:background var(--rapido),color var(--rapido),box-shadow var(--rapido)}
.chat__chip:hover{color:var(--texto)}
.chat__chip[aria-selected="true"]{background:var(--blanco);color:var(--acento-texto);box-shadow:var(--sombra-linea)}
.chat__chip:focus-visible{outline:none;box-shadow:var(--anillo)}

/* Escena: la conversación y lo hecho, dos mitades iguales en PC; una debajo de otra en móvil */
.chat__escena{width:100%;max-width:1000px}
.chat__panel{display:grid;grid-template-columns:1fr;gap:var(--hueco)}
.chat__panel[hidden]{display:none}
@media (min-width:760px){.chat__panel{grid-template-columns:1fr 1fr}}

/* La conversación */
.chat__movil{display:flex;flex-direction:column;border-radius:var(--radio-tarjeta-g);background:var(--noche-panel);color:var(--texto-oscuro);box-shadow:var(--sombra-alta);overflow:hidden}
.chat__cab{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--noche-linea)}
.chat__avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--acento);color:#fff;font:700 14px/1 var(--sans)}
.chat__quien{display:flex;flex-direction:column;gap:3px;min-width:0}
.chat__quien strong{font:600 15px/1.2 var(--sans)}
.chat__quien small{font:500 12px/1.2 var(--sans);color:var(--texto-oscuro-sec)}
.chat__hilo{display:flex;flex-direction:column;gap:12px;margin:0;padding:18px;list-style:none;flex:1}
.chat__msg{max-width:86%;padding:10px 14px 8px;border-radius:18px;font:400 15px/1.45 var(--sans)}
.chat__msg p{margin:0}
.chat__de{display:block;margin-bottom:3px;font:600 12px/1.3 var(--sans);color:var(--acento-oscuro-texto)}
.chat__msg--entra{align-self:flex-start;border-bottom-left-radius:6px;background:#23232E}
.chat__msg--sale{align-self:flex-end;border-bottom-right-radius:6px;background:var(--boton);color:#fff}
.chat__msg--sale .chat__de{color:rgba(255,255,255,.75)}
.chat__hora{display:block;margin-top:4px;text-align:right;font:500 11px/1 var(--sans);color:var(--texto-oscuro-sec)}
.chat__msg--sale .chat__hora{color:rgba(255,255,255,.75)}
.chat__adjunto{display:flex;align-items:center;gap:10px;margin-top:8px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.14);font:600 14px/1.3 var(--sans)}
.chat__adjunto svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat__trabaja{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(140,133,255,.16);color:var(--acento-oscuro-texto);font:600 13px/1.2 var(--sans)}
.chat__trabaja svg{width:10px;height:22px;fill:var(--acento-oscuro)}
.chat__trabaja-uno{display:none}
.chat__puntos{display:inline-flex;gap:3px}
.chat__puntos i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:chat-punto 1.2s ease-in-out infinite}
.chat__puntos i:nth-child(2){animation-delay:.2s}
.chat__puntos i:nth-child(3){animation-delay:.4s}
@keyframes chat-punto{0%,100%{opacity:.25}50%{opacity:1}}

/* Lo que ya está hecho */
.chat__hecho{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.4vw,30px);border-radius:var(--radio-tarjeta-g);background:var(--blanco);box-shadow:var(--sombra-marco)}
.chat__hecho-tit{margin:0 0 8px;font:600 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-ter)}
.chat__lista{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.chat__lista li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--linea);font:500 16px/1.45 var(--sans);color:var(--texto)}
.chat__lista li:first-child{border-top:0}
.chat__ok{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-top:-1px;border-radius:50%;background:var(--ok-tinte);color:var(--ok-texto)}
.chat__ok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chat__tiempo{margin-top:auto;padding-top:14px;font:500 14px/1.5 var(--sans);color:var(--texto-sec)}
.chat__tiempo strong{color:var(--acento-texto)}

.chat__nota{margin:0;font:500 14px/1.5 var(--sans);color:var(--texto-sec);text-align:center}
.chat__ejemplo{display:inline-block;margin-right:8px;padding:3px 8px;border-radius:var(--radio-chip);background:var(--neutro-tinte);color:var(--neutro-texto);font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* Animación (solo con JS: .chat.anima). Cada [data-paso] aparece al encenderse (.on); sin vibraciones */
.chat.anima [data-paso]{opacity:0;transform:translateY(8px);transition:opacity .45s var(--suave),transform .45s var(--suave)}
.chat.anima [data-paso].on{opacity:1;transform:none}
.chat.anima .chat__panel:not(.hecho) .chat__trabaja-uno{display:inline}
.chat.anima .chat__panel:not(.hecho) .chat__trabaja-dos{display:none}
.chat.anima .chat__panel:not(.hecho) .chat__trabaja svg{opacity:.7}

@media (max-width:759px){
  .chat__chip{padding:0 16px;font-size:14px}
  .chat__msg{max-width:90%;font-size:15px}
  .chat__lista li{font-size:15px;padding:10px 0}
}
@media (prefers-reduced-motion:reduce){
  .chat.anima [data-paso]{transition:none}
  .chat__puntos i{animation:none;opacity:.6}
}