/* Livechat v2 — CSS v22. = v21 + los avisos de mensaje nuevo YA NO quedan
 * detrás del panel del chat.
 *
 * 🔴 El bug (Diego, 2026-08-04): el panel está en `z-index: 70` y la pila de
 * avisos en `56`. Con el chat abierto, el aviso de un mensaje nuevo se pintaba
 * LITERALMENTE detrás del panel. Si alguien está hablando con un vendedor y le
 * escribe otro, no se entera nunca. «eso es algo terrible de UX».
 *
 * El arreglo tiene dos partes:
 *  1. Los avisos suben por encima del panel.
 *  2. Con el chat ABIERTO se mueven ARRIBA: si se quedaran abajo a la derecha
 *     taparían el redactor, que es justo donde está escribiendo la persona.
 */
@import url('/styles/livechat-v21.css');

/* ── 1. Por encima del panel (70) y de la burbuja (55) ── */
.lc-toast-stack { z-index: 90; }

/* ── 2. Con el chat abierto, el aviso se va arriba ── */
body.lc-open .lc-toast-stack {
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  bottom: auto;
  right: 16px;
}
/* En escritorio el panel es una ventana flotante abajo-derecha: el aviso se
   alinea con su borde superior para que se lea como parte del mismo sistema. */
@media (min-width: 900px) {
  body.lc-open .lc-toast-stack { top: 26px; }
}

/* El aviso encima del panel necesita separarse del fondo del propio panel. */
body.lc-open .lc-toast {
  box-shadow: 0 10px 34px rgba(15, 15, 15, 0.28), 0 0 0 1px rgba(15, 15, 15, 0.06);
}

/* ── Moderación en contexto ────────────────────────────────────────────────
 * Diego: la advertencia va DENTRO de la conversación (si no, no hay contexto)
 * y solo la ve el sancionado; el mensaje se censura EN SU LUGAR, no se oculta.
 */

/* Mensaje retirado por Textti — lo ven las dos partes, en su posición. */
.lc-msg__bubble--retirado {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--lc-s2, #f4f4f5) !important;
  color: var(--lc-ink3, #7A7A82) !important;
  border: 1px dashed var(--lc-line-s, #ececef);
  font-style: italic;
}
.lc-msg__bubble--retirado em { font-style: italic; font-size: 13px; }
.lc-msg__bubble--retirado svg { flex-shrink: 0; opacity: 0.7; }

/* Aviso de moderación — SOLO lo ve la persona sancionada. */
.lc-modnote {
  margin: 10px 0;
  padding: 11px 13px;
  border-radius: 13px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
}
.lc-modnote__head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: #C2410C;
  margin-bottom: 5px;
}
.lc-modnote p {
  margin: 0;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
  color: #7C2D12;
}

/* ── Contacto de respaldo (nombre + WhatsApp antes de la 1ª conversación) ──
 * Diego: «para iniciar la conversación necesitamos el nombre de la persona y el
 * whatsapp, por si se pierde la comunicación».
 */
.lc-field__label {
  display: block; margin: 14px 0 6px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--lc-ink3, #7A7A82);
}
.lc-field__input {
  width: 100%; min-height: 48px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--lc-line, #e4e4e7); background: #fff;
  font-family: var(--font-sans); font-size: 16px; color: var(--lc-ink, #18181b);
  outline: none; transition: border-color .15s;
}
.lc-field__input:focus { border-color: var(--lc-accent, #0071e3); }
.lc-field__input::placeholder { color: var(--lc-ink-4, #b3b3b3); }
.lc-field__row { display: flex; align-items: stretch; gap: 0; }
.lc-field__row .lc-field__input { border-radius: 0 12px 12px 0; border-left: 0; }
.lc-field__pre {
  display: flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--lc-line, #e4e4e7); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--lc-s2, #fafafa);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px;
  color: var(--lc-ink-2, #444);
}
.lc-field__err { margin-top: 8px; font-family: var(--font-sans); font-size: 12.5px; color: #C0392B; }
.lc-gate__cta {
  width: 100%; min-height: 50px; margin-top: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 13px;
  background: var(--lc-navy, #1b357e); color: #fff;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: filter .15s, transform .15s;
}
.lc-gate__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lc-gate__cta:disabled { opacity: .6; cursor: default; transform: none; }

/* Botón del aviso de moderación — si se invita a explicarse, tiene que haber por dónde. */
.lc-modnote__cta {
  margin-top: 9px; width: 100%; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #FDBA74; border-radius: 10px;
  background: #fff; color: #C2410C;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.lc-modnote__cta:hover { background: #FFF7ED; }