/* Estilos del chat interno de Agendaxic (panel y mini-web) */

.chat-toggle {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.18);
  border-radius: 10px; padding: 11px 12px; font-size: 13px; margin-bottom: 8px;
}
/* Es un <button> de verdad (se puede usar con el teclado y un lector de
   pantalla lo anuncia), asi que hay que quitarle el aspecto de boton. */
.chat-sw { width: 40px; height: 22px; border-radius: 999px; position: relative; flex: 0 0 auto; cursor: pointer; border: none; padding: 0; appearance: none; -webkit-appearance: none; }
.chat-sw:focus-visible { outline: 2px solid #d9b845; outline-offset: 2px; }
.chat-sw.on { background: #67c08a; }
.chat-sw.off { background: #3a352d; }
.chat-sw::after { content: ""; position: absolute; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.chat-sw.on::after { left: 20px; }
.chat-sw.off::after { left: 2px; }

/* Buzon de conversaciones */
.chat-conv {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.18);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; cursor: pointer;
}
.chat-conv:hover { border-color: rgba(212,175,55,0.4); }
.chat-conv .cv-nombre { font-size: 13px; font-weight: 600; color: #f5efe6; }
.chat-conv .cv-ultimo { font-size: 11.5px; color: #b9ab97; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.chat-conv .cv-tipo { font-size: 9.5px; color: #b9ab97; text-transform: uppercase; letter-spacing: .5px; }
.chat-conv .cv-badge { background: #d4af37; color: #1a1509; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 8px; flex: 0 0 auto; }
/* La conversacion con una pregunta esperando la respuesta de la profesional. */
.chat-conv .cv-espera {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #d4af37;
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 999px;
  padding: 1px 8px;
  margin: 2px 0;
}

/* Vista de la conversacion */
.chat-mensajes {
  height: 300px; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column;
  background: rgba(0,0,0,0.2); border-radius: 10px; margin-bottom: 8px;
}
.chat-msg {
  max-width: 80%; padding: 8px 11px; border-radius: 13px; font-size: 13px;
  margin: 4px 6px; line-height: 1.4; word-wrap: break-word;
  /* Los saltos de linea se respetan tal cual se escribieron. */
  white-space: pre-line;
}
.chat-msg.suyo { background: #221e19; border: 1px solid rgba(212,175,55,0.18); align-self: flex-start; border-top-left-radius: 4px; color: #f5efe6; }
.chat-msg.mio { background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.25); align-self: flex-end; border-top-right-radius: 4px; color: #f5efe6; }
.chat-hora { display: block; font-size: 9px; color: #b9ab97; margin-top: 3px; text-align: right; }

/* ── RESPONDER CITANDO ── */
/* La mini-caja gris de la cita, arriba dentro de la burbuja. Pulsarla lleva
   al mensaje original. */
.chat-cita {
  display: block; background: rgba(255,255,255,0.07);
  border-left: 3px solid #d4af37; border-radius: 7px;
  padding: 5px 9px; margin-bottom: 6px; cursor: pointer;
}
.chat-cita-autor { display: block; font-size: 10px; font-weight: 700; color: #d4af37; margin-bottom: 1px; white-space: nowrap; }
.chat-cita-texto {
  display: block; font-size: 12px; color: #cfc2ab;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* El mensaje original, iluminado un momento al llegar desde su cita. */
.chat-msg { transition: background-color .35s ease, box-shadow .35s ease; }
.chat-msg.chat-iluminado {
  background: rgba(212,175,55,0.38);
  box-shadow: 0 0 0 2px rgba(212,175,55,0.55);
}

/* El botoncito "Responder" que sale al tocar una burbuja (uno a la vez). */
.chat-responder-btn {
  display: block; margin-top: 6px; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(212,175,55,0.45); color: #e8c56a; border-radius: 999px;
  padding: 3px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.chat-responder-btn:hover { background: rgba(212,175,55,0.15); }

/* La tirita "Respondiendo a: «...»" encima de la caja de escribir. */
.chat-respondiendo {
  display: flex; align-items: center; gap: 8px;
  background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3);
  border-left: 3px solid #d4af37; border-radius: 9px;
  padding: 7px 10px; margin-bottom: 7px; font-size: 12px; color: #cfc2ab;
}
/* Sin esto, el display:flex gana al atributo hidden (como en .chat-elegidas). */
.chat-respondiendo[hidden] { display: none; }
.chat-respondiendo-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-respondiendo-titulo { color: #d4af37; font-weight: 600; }
.chat-cita-cancelar {
  flex: 0 0 auto; background: transparent; border: none; color: #b9ab97;
  font-size: 14px; cursor: pointer; padding: 2px 4px; font-family: inherit;
}
.chat-cita-cancelar:hover { color: #f5efe6; }

/* El recuadro "Preguntas sin contestar", arriba del chat del panel. */
.chat-preguntas {
  margin-bottom: 8px; padding: 10px 12px;
  background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.35);
  border-radius: 10px;
}
.chat-preguntas[hidden] { display: none; }
.chat-preguntas-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #d4af37; margin-bottom: 6px;
}
.chat-pregunta {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #f5efe6; padding: 5px 0;
  border-top: 1px solid rgba(212,175,55,0.15);
}
.chat-pregunta:first-of-type { border-top: none; }
.chat-pregunta-texto { flex: 1 1 auto; min-width: 0; }
.chat-pregunta-responder {
  flex: 0 0 auto; background: transparent; border: 1px solid rgba(212,175,55,0.45);
  color: #e8c56a; border-radius: 999px; padding: 4px 12px; font-size: 11.5px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.chat-pregunta-responder:hover { background: rgba(212,175,55,0.12); }

/* El recuadro "Pendiente de ti" de la profesional: las preguntas que su
   asistente le paso y siguen sin respuesta, encima de la caja de escribir. */
.chat-pendientes {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 10px;
}
.chat-pendientes-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #d4af37;
  margin-bottom: 6px;
}
.chat-pendiente {
  font-size: 13.5px;
  color: #f5efe6;
  padding: 4px 0;
  border-top: 1px solid rgba(212,175,55,0.15);
}
.chat-pendiente:first-of-type { border-top: none; }
.chat-pendiente-hora {
  display: block;
  font-size: 10.5px;
  color: #b9ab97;
  margin-top: 2px;
}

/* La barra de escribir. Ojo con dos cosas, que aqui se rompio una vez:
   - min-width: 0 en el campo. Sin eso, un <input> se niega a encogerse por
     debajo de su ancho "natural" (unos 170 px) y empuja al boton fuera de la
     pantalla. En un movil estrecho el boton Enviar se salia por la derecha.
   - box-sizing en los dos, porque este archivo se usa tambien en la mini-web,
     que no tiene la regla general del panel. */
.chat-barra {
  display: flex; gap: 7px; align-items: stretch; width: 100%;
}
.chat-input {
  flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 999px; padding: 10px 14px; font-size: 16px; color: #f5efe6; font-family: inherit;
}
.chat-input:focus { outline: none; border-color: rgba(212,175,55,0.55); }
.chat-enviar {
  flex: 0 0 auto; white-space: nowrap; box-sizing: border-box;
  background: linear-gradient(135deg,#d4af37,#b7902c); color: #1a1509; font-weight: 700;
  border: none; border-radius: 999px; padding: 10px 18px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.chat-enviar:disabled { opacity: .6; cursor: default; }

/* En pantallas muy estrechas (los Samsung pequenos y los moviles plegados) el
   boton se aprieta un poco mas, pero nunca se sale. */
@media (max-width: 380px) {
  .chat-barra { gap: 5px; }
  .chat-input { padding: 9px 12px; }
  .chat-enviar { padding: 9px 13px; font-size: 12.5px; }
}

.chat-volver {
  background: transparent; border: none; color: #d4af37; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 4px 0; margin-bottom: 8px; font-family: inherit;
}
.chat-vacio { font-size: 12.5px; color: #b9ab97; text-align: center; padding: 18px 0; }

/* Boton "Escribeme una duda" en la mini-web */
.btn-consulta {
  width: 100%; background: transparent; border: 1px solid #d4af37; color: #e8c56a;
  font-weight: 600; font-size: 14px; border-radius: 12px; padding: 12px; cursor: pointer;
  font-family: inherit;
}
.btn-consulta:hover { background: rgba(212,175,55,0.12); }

.acx-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.72); align-items: center; justify-content: center; padding: 16px;
}
.acx-modal {
  width: 100%; max-width: 380px; box-sizing: border-box; overflow: hidden;
  background: #1b1815; border: 1px solid rgba(212,175,55,0.25);
  border-radius: 16px; padding: 20px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
/* Nada de lo que va dentro de la ventana del chat puede salirse de ella. */
.acx-modal * { max-width: 100%; box-sizing: border-box; }
.acx-x { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: #b9ab97; font-size: 18px; cursor: pointer; }
.acx-tit { color: #f5efe6; font-size: 17px; margin: 0 0 12px; }
.acx-input {
  width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 9px; padding: 11px 12px; font-size: 14px; color: #f5efe6; margin-bottom: 9px; font-family: inherit;
}
.acx-input:focus { outline: none; border-color: rgba(212,175,55,0.55); }
.acx-btn {
  width: 100%; background: linear-gradient(135deg,#d4af37,#b7902c); color: #1a1509; font-weight: 700;
  border: none; border-radius: 9px; padding: 11px; font-size: 14px; cursor: pointer; margin-bottom: 9px; font-family: inherit;
}
.acx-btn.sec { background: transparent; border: 1px solid rgba(212,175,55,0.5); color: #e8c56a; font-weight: 600; }
.acx-cambio { font-size: 12.5px; color: #b9ab97; text-align: center; margin: 4px 0 0; }
/* Texto legal pequeno bajo el nombre, igual que en la reserva y el bono. */
.acx-legal { font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,0.65); margin: 6px 0 0; }
.acx-legal a { color: inherit; text-decoration: underline; }
/* En el movil el campo del nombre va a 16px: con menos, Safari en iPhone
   hace zoom al tocarlo y descoloca la ventana. */
@media (max-width: 850px), (pointer: coarse) {
  .acx-input { font-size: 16px; }
}
.acx-cambio a { color: #e8c56a; cursor: pointer; text-decoration: underline; }
.acx-msg { font-size: 12.5px; margin-bottom: 8px; min-height: 16px; }
.acx-msg.ok { color: #67c08a; }
.acx-msg.err { color: #e08585; }
.chat-acciones { display: flex; gap: 8px; margin-top: 10px; }
.chat-accion {
  flex: 1; background: transparent; border: 1px solid rgba(212,175,55,0.4); color: #e8c56a;
  border-radius: 9px; padding: 9px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.chat-accion:hover { background: rgba(212,175,55,0.12); }
.chat-accion.borrar { border-color: rgba(224,133,133,0.5); color: #e08585; }
.chat-accion.borrar:hover { background: rgba(224,133,133,0.12); }

/* ── LAS FOTOS DEL CHAT ── */
/* Las miniaturas dentro de un mensaje. Nunca mas de 220 px, para que una foto
   apaisada no ensanche la ventana del chat en un movil. */
.chat-fotos { display: block; margin-bottom: 5px; }
.chat-foto {
  display: block; max-width: 220px; max-height: 220px; width: auto; height: auto;
  border-radius: 9px; margin-bottom: 4px; cursor: zoom-in;
}
/* Una foto que ya caduco (a los 90 dias se borran solas). */
.chat-foto-ida {
  display: inline-block; background: rgba(255,255,255,0.06); color: #b9ab97;
  border: 1px dashed rgba(212,175,55,0.25); border-radius: 9px;
  padding: 14px 16px; font-size: 11.5px; margin-bottom: 4px;
}

/* Las fotos elegidas pero todavia sin mandar. */
.chat-elegidas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
/* Sin esto, el display:flex de arriba gana al atributo hidden y la caja de las
   fotos elegidas se veria vacia todo el rato. */
.chat-elegidas[hidden] { display: none; }
.chat-elegida { position: relative; display: inline-block; }
.chat-elegida img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.chat-quitar {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; line-height: 1;
  background: #1b1815; color: #e8c56a; border: 1px solid rgba(212,175,55,0.5);
  border-radius: 50%; font-size: 11px; cursor: pointer; padding: 0; font-family: inherit;
}

/* El boton de la camara, al lado del campo de escribir. */
.chat-foto-btn {
  flex: 0 0 auto; white-space: nowrap; box-sizing: border-box;
  background: transparent; border: 1px solid rgba(212,175,55,0.4); color: #e8c56a;
  border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.chat-foto-btn:hover { background: rgba(212,175,55,0.12); }
.chat-foto-btn:disabled { opacity: .6; cursor: default; }

/* La foto a tamano grande al pulsarla. Sin librerias de fuera. */
.chat-lupa {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out;
}
.chat-lupa img { max-width: 100%; max-height: 100%; border-radius: 10px; }

@media (max-width: 380px) {
  .chat-foto-btn { padding: 9px 11px; font-size: 12.5px; }
}

/* ── EL ASISTENTE DEL CHAT ── */
/* Sus mensajes van en otro color y con etiqueta, siempre: la clienta tiene
   derecho a saber que no le esta escribiendo una persona, y ella distingue de
   un vistazo lo suyo de lo del asistente. */
.chat-msg.asistente {
  background: rgba(90, 140, 190, 0.14);
  border: 1px solid rgba(120, 170, 220, 0.3);
}
.chat-marca {
  display: block; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: #9fc4e8; margin-bottom: 4px;
}

/* El borrador que le deja el asistente, en el panel de ella. */
.asis-caja {
  border: 1px solid rgba(120, 170, 220, 0.32);
  background: rgba(90, 140, 190, 0.09);
  border-radius: 12px; padding: 13px; margin-bottom: 12px;
}
.asis-caja .asis-cab {
  font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: #9fc4e8; margin-bottom: 7px;
}
.asis-caja textarea {
  width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.2);
  border-radius: 9px; padding: 10px 12px; font-size: 13.5px; color: #f5efe6;
  font-family: inherit; resize: vertical;
}
.asis-caja .asis-botonera { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.asis-caja .asis-botonera button {
  flex: 1 1 auto; background: transparent; border: 1px solid rgba(212,175,55,0.4);
  color: #e8c56a; border-radius: 9px; padding: 9px; font-size: 12.5px; cursor: pointer;
  font-family: inherit;
}
.asis-caja .asis-botonera button.principal {
  background: linear-gradient(135deg,#d4af37,#b7902c); color: #1a1509; font-weight: 700; border: none;
}
.asis-caja .asis-botonera button:disabled { opacity: 0.5; cursor: default; }
.asis-pendientes {
  border: 1px solid rgba(232,164,74,0.35); background: rgba(232,164,74,0.08);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 12px; font-size: 13px; color: #e8c56a;
}

/* En moviles el cajetin del borrador sube a 16px: con letra mas pequena,
   Safari en iPhone amplia la pantalla al tocarlo. */
@media (max-width: 850px), (pointer: coarse) {
  .asis-caja textarea { font-size: 16px; }
}

/* ── Los avisos "avisame cuando conteste" del cliente (avisos-chat.js) ── */

/* El cartelito que sale una vez, tras el primer mensaje del cliente. */
.acx-aviso-card {
  background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.4);
  border-radius: 12px; padding: 13px 14px; margin-bottom: 10px;
}
.acx-aviso-card h4 { color: #f5efe6; font-size: 14px; margin: 0 0 4px; }
.acx-aviso-card p { color: #cfc2ab; font-size: 12px; line-height: 1.45; margin: 0 0 10px; }
.acx-aviso-botones { display: flex; gap: 8px; }
.acx-aviso-botones .acx-btn { margin-bottom: 0; }
.acx-aviso-botones .acx-btn.sec {
  background: transparent; border: 1px solid rgba(212,175,55,0.5); color: #e8c56a; font-weight: 600;
}

/* La fila del interruptor con su texto, encima de los mensajes. */
.acx-aviso-fila { gap: 10px; }
.acx-aviso-campana { flex: 0 0 auto; display: flex; align-items: center; }
.acx-aviso-texto { flex: 1; line-height: 1.35; color: #e9dfcc; }
.acx-aviso-texto small { display: block; color: #b9ab97; font-size: 11px; margin-top: 1px; }

/* El caso raro: bloqueo las notificaciones en el propio navegador. */
.acx-aviso-bloqueado {
  font-size: 11.5px; color: #e0b24c; background: rgba(212,175,55,0.08);
  border: 1px dashed rgba(212,175,55,0.4); border-radius: 9px;
  padding: 9px 11px; margin-bottom: 8px; line-height: 1.5;
}