/* ==========================================================================
   LOCKER SANTA JUSTA — chat de atención al cliente (asistente Hermes)
   Usa las variables de marca de styles.css (--navy, --naranja, --font…)
   ========================================================================== */

.lsjc{
  --lsjc-w:380px;
  position:fixed;right:20px;bottom:20px;z-index:80;
  font-family:var(--font);color:var(--navy);
}

/* ---------- botón lanzador ---------- */
.lsjc__lanzar{
  position:relative;display:flex;align-items:center;gap:10px;margin-left:auto;
  height:60px;padding:0 22px 0 18px;border:0;border-radius:var(--radio-pill);
  background:var(--naranja);color:var(--navy);cursor:pointer;
  font:700 .98rem/1 var(--font);
  box-shadow:0 14px 34px -12px rgba(255,103,31,.8),0 4px 12px -4px rgba(19,30,41,.35);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.lsjc__lanzar:hover{transform:translateY(-2px);background:var(--naranja-osc)}
.lsjc__lanzar:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.lsjc__lanzar svg{width:26px;height:26px;flex:none}
.lsjc__lanzar .lsjc__punto{
  position:absolute;top:10px;left:38px;width:11px;height:11px;border-radius:50%;
  background:#3ad07a;border:2px solid var(--naranja);
}
.lsjc.is-abierto .lsjc__lanzar{display:none}

/* ---------- panel ---------- */
.lsjc__panel{
  position:absolute;right:0;bottom:0;width:var(--lsjc-w);
  height:min(620px,calc(100vh - 120px));height:min(620px,calc(100dvh - 120px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--navy-12);border-radius:var(--radio);
  box-shadow:var(--sombra-alta);
  transform-origin:bottom right;
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.lsjc.is-abierto .lsjc__panel{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .2s ease,transform .2s ease;
}

/* cabecera */
.lsjc__cab{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:16px 14px 16px 18px;background:var(--navy);color:#fff;overflow:hidden;
}
.lsjc__cab::after{ /* trama corporativa, igual que heroe/llamada */
  content:"";position:absolute;inset:0;background:url(../assets/trama.svg) right center/220px auto no-repeat;
  opacity:.12;pointer-events:none;
}
.lsjc__avatar{
  position:relative;z-index:1;flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--naranja);color:var(--navy);
}
.lsjc__avatar svg{width:24px;height:24px}
.lsjc__tit{position:relative;z-index:1;flex:1;min-width:0}
.lsjc__tit strong{display:block;font:800 1.05rem/1.15 var(--font-display);letter-spacing:-.01em}
.lsjc__tit span{display:flex;align-items:center;gap:6px;font-size:.8rem;color:rgba(255,255,255,.78)}
.lsjc__tit span::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ad07a;flex:none}
.lsjc__cab button{
  position:relative;z-index:1;flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;border:0;background:transparent;color:#fff;cursor:pointer;
}
.lsjc__cab button:hover{background:rgba(255,255,255,.12)}
.lsjc__cab button:focus-visible{outline:2px solid var(--naranja);outline-offset:1px}
.lsjc__cab button svg{width:20px;height:20px}

/* mensajes */
.lsjc__log{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px 8px;background:var(--gris-claro);
  display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;
}
.lsjc__msg{
  max-width:86%;padding:11px 14px;border-radius:16px;
  font-size:.94rem;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;
}
.lsjc__msg p{margin:0 0 .5em}
.lsjc__msg p:last-child{margin:0}
.lsjc__msg ul{margin:.3em 0 .5em;padding-left:1.1em;list-style:disc}
.lsjc__msg a{color:var(--naranja-texto);font-weight:600}
.lsjc__msg--bot{align-self:flex-start;background:#fff;border:1px solid var(--navy-12);border-bottom-left-radius:5px}
.lsjc__msg--yo{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.lsjc__msg--yo a{color:var(--naranja)}
.lsjc__msg--error{align-self:center;max-width:100%;background:var(--naranja-12);color:var(--navy);font-size:.86rem;text-align:center}
.lsjc__msg--error a{color:var(--navy)}

/* escribiendo… */
.lsjc__tecleo{display:inline-flex;gap:4px;padding:4px 0}
.lsjc__tecleo i{width:7px;height:7px;border-radius:50%;background:var(--navy-60);animation:lsjc-bote 1.2s infinite ease-in-out}
.lsjc__tecleo i:nth-child(2){animation-delay:.15s}
.lsjc__tecleo i:nth-child(3){animation-delay:.3s}
@keyframes lsjc-bote{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* sugerencias rápidas */
.lsjc__sug{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 6px}
.lsjc__sug button{
  border:1.5px solid var(--navy-12);background:#fff;color:var(--navy);cursor:pointer;
  border-radius:var(--radio-pill);padding:8px 13px;font:600 .84rem/1.2 var(--font);
  transition:border-color .15s,background .15s;
}
.lsjc__sug button:hover{border-color:var(--naranja);background:var(--naranja-12)}
.lsjc__sug button:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}

/* entrada */
.lsjc__form{
  display:flex;align-items:flex-end;gap:8px;padding:10px 12px;
  border-top:1px solid var(--navy-12);background:#fff;
}
.lsjc__form textarea{
  flex:1;resize:none;max-height:120px;min-height:44px;overflow-y:hidden;
  border:1.5px solid var(--navy-12);border-radius:22px;padding:11px 16px;
  font:400 .95rem/1.4 var(--font);color:var(--navy);background:#fff;
}
.lsjc__form textarea:focus{outline:none;border-color:var(--naranja)}
.lsjc__form textarea::placeholder{color:var(--navy-60)}
.lsjc__enviar{
  flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--naranja);color:var(--navy);
  box-shadow:0 8px 18px -10px rgba(255,103,31,.8);transition:background .15s,transform .15s;
}
.lsjc__enviar:hover{background:var(--naranja-osc)}
.lsjc__enviar:disabled{background:var(--gris);box-shadow:none;cursor:default}
.lsjc__enviar:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.lsjc__enviar svg{width:20px;height:20px}
.lsjc__legal{margin:0;padding:0 16px 10px;background:#fff;font-size:.72rem;color:var(--navy-60);text-align:center}
.lsjc__legal a{color:inherit}

/* ---------- móvil ---------- */
@media (max-width:760px){
  /* la barra-movil ocupa el pie: el lanzador va encima, compacto */
  .lsjc{right:14px;bottom:calc(84px + env(safe-area-inset-bottom))}
  .lsjc__lanzar{width:56px;height:56px;padding:0;justify-content:center}
  .lsjc__lanzar .lsjc__txt{display:none}
  .lsjc__lanzar .lsjc__punto{top:9px;left:auto;right:9px}
  .lsjc.is-abierto{inset:0;right:0;bottom:0;z-index:100}
  .lsjc__panel{position:fixed;inset:0;width:auto;height:100%;border-radius:0;border:0}
  .lsjc__form{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .lsjc__form textarea{font-size:16px} /* evita el zoom automático de iOS */
}
@media (prefers-reduced-motion:reduce){
  .lsjc__panel,.lsjc__lanzar{transition:none}
  .lsjc__tecleo i{animation:none}
  .lsjc__log{scroll-behavior:auto}
}
@media print{.lsjc{display:none!important}}
/* cuando el aviso de cookies está a la vista, el chat no lo tapa */
.cookies.is-visible ~ .lsjc:not(.is-abierto){display:none}