/* Chat de la empresa (portal). Lo cargan el portal y todas las plataformas conectadas; usa las variables
   de color del esqueleto común (--brand, --line, --bg, --muted, --rojo, --text). */
#chat [hidden] { display: none !important; }
#chat-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand, #2d35a4); color: #fff; box-shadow: 0 6px 20px rgba(16, 24, 40, .28);
  display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s;
}
#chat-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 24, 40, .34); }
#chat-btn.activo { background: #1f2937; }
#chat .chat-globo {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--rojo, #dc2626); color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
#chat-panel {
  position: fixed; right: 20px; bottom: 86px; z-index: 60;
  width: 340px; max-width: calc(100vw - 40px); height: min(560px, calc(100vh - 130px));
  background: #fff; border-radius: 14px; border: 1px solid var(--line, #e2e6ec);
  box-shadow: 0 16px 48px rgba(16, 24, 40, .24); display: flex; flex-direction: column; overflow: hidden;
  font-family: inherit; color: var(--text, #1f2937);
}
#chat .chat-cabecera { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; background: var(--brand, #2d35a4); color: #fff; }
#chat .chat-titulo-box { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
#chat .chat-titulo-box strong { display: block; font-size: .95rem; line-height: 1.2; }
#chat .chat-titulo-box small { display: block; font-size: .75rem; opacity: .85; }
#chat .chat-icono {
  background: rgba(255, 255, 255, .18); border: 0; color: #fff; cursor: pointer; width: 26px; height: 26px;
  border-radius: 6px; font-size: .82rem; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
#chat .chat-icono:hover { background: rgba(255, 255, 255, .32); }
#chat .chat-icono.apagado { opacity: .55; }
#chat-volver { visibility: hidden; }
#chat-volver.visible { visibility: visible; }
#chat .chat-punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .12); }
#chat .chat-punto.on { background: #22c55e; }
#chat .chat-punto.away { background: #f59e0b; }
#chat .chat-punto.off { background: transparent; border-color: #cbd5e1; }
/* Última conexión reservada: ni verde ni gris, sencillamente no se sabe. */
#chat .chat-punto.sin { background: transparent; border-style: dashed; border-color: #cbd5e1; }
#chat .chat-aviso { margin: 0; padding: .4rem .8rem; font-size: .72rem; color: var(--muted, #6b7280); background: #fffbeb; border-bottom: 1px solid var(--line, #e2e6ec); }
/* `overscroll-behavior: contain` en todo lo que se desplaza: al llegar al final, la rueda o el dedo no arrastran
   la página que está detrás (Pablo lo vio en el teléfono, 2026-09-12). */
#chat .chat-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
#chat .chat-contacto {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; font-family: inherit;
  padding: .65rem .8rem; background: none; border: 0; border-bottom: 1px solid var(--line, #e2e6ec); cursor: pointer;
}
#chat .chat-contacto:hover { background: var(--bg, #f4f6fa); }
#chat .chat-seccion {
  display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  padding: .45rem .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted, #6b7280); background: var(--bg, #f4f6fa); border: 0; border-bottom: 1px solid var(--line, #e2e6ec);
}
#chat .chat-seccion:hover { color: var(--text, #1f2937); }
#chat .chat-seccion-nombre { flex: 1; min-width: 0; }
#chat .chat-flecha { font-size: .7rem; line-height: 1; transition: transform .15s ease; }
#chat .chat-seccion.plegada .chat-flecha { transform: rotate(-90deg); }
#chat .chat-seccion-linea { color: #16a34a; font-size: .65rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
#chat .chat-seccion-linea.cero { color: var(--muted, #6b7280); }
#chat .chat-seccion-globo {
  background: #ef4444; color: #fff; border-radius: 999px; padding: .05rem .35rem; font-size: .65rem; letter-spacing: 0;
}
#chat .chat-nombre { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--text, #1f2937); }
#chat .chat-nombre small { display: block; font-weight: 400; font-size: .74rem; color: var(--muted, #6b7280); }
#chat .chat-contacto .chat-globo { position: static; border: 0; }
#chat .chat-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chat .chat-mensajes { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .8rem; background: var(--bg, #f4f6fa); display: flex; flex-direction: column; gap: .4rem; }
#chat .chat-msg { max-width: 82%; padding: .45rem .65rem; border-radius: 12px; font-size: .88rem; line-height: 1.35; word-wrap: break-word; }
#chat .chat-msg.suyo { align-self: flex-start; background: #fff; border: 1px solid var(--line, #e2e6ec); border-bottom-left-radius: 4px; }
#chat .chat-msg.mio { align-self: flex-end; background: #dbeafe; border-bottom-right-radius: 4px; }
#chat .chat-msg .meta { display: block; text-align: right; font-size: .68rem; color: var(--muted, #6b7280); margin-top: .15rem; }
#chat .chat-msg .check { font-weight: 700; letter-spacing: -1px; }
#chat .chat-msg.entregado .check { color: #6b7280; }
#chat .chat-msg.leido .check { color: #2563eb; }
#chat .chat-foto { display: block; margin-bottom: .3rem; }
#chat .chat-foto img { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; }
#chat .chat-audio { display: block; width: 220px; max-width: 100%; height: 36px; margin-bottom: .2rem; }
#chat .chat-escribir { display: flex; gap: .5rem; padding: .55rem .6rem; border-top: 1px solid var(--line, #e2e6ec); align-items: flex-end; background: #fff; }
#chat .chat-caja { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: .15rem; background: var(--bg, #f4f6fa); border: 1px solid var(--line, #e2e6ec); border-radius: 22px; padding: .2rem .35rem .2rem .3rem; }
#chat .chat-caja:focus-within { border-color: var(--brand, #2d35a4); background: #fff; }
#chat .chat-caja textarea {
  flex: 1; min-width: 0; width: auto; resize: none; border: 0; background: transparent; outline: none; box-shadow: none;
  min-height: 0; height: 36px; max-height: 96px; margin: 0; border-radius: 0;
  padding: .5rem .2rem; font-size: .92rem; line-height: 1.35; font-family: inherit; color: var(--text, #1f2937);
}
#chat .chat-caja textarea:focus { border: 0; box-shadow: none; outline: none; }
#chat .chat-ico { flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--muted, #6b7280); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#chat .chat-ico:hover, #chat .chat-ico.activo { color: var(--brand, #2d35a4); background: rgba(45, 53, 164, .08); }
#chat .chat-accion { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--brand, #2d35a4); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 12px rgba(16, 24, 40, .2); transition: transform .12s, background .15s; }
#chat .chat-accion:hover { transform: scale(1.06); }
#chat .chat-accion:active { transform: scale(.96); }
#chat .chat-accion:disabled { opacity: .6; cursor: default; transform: none; }
#chat .chat-accion.enviar { background: #16a34a; }
#chat .chat-accion svg { width: 22px; height: 22px; }
/* La cámara va **al lado** de la caja de escribir, no dentro (Pablo, 2026-09-12: "ha de estar separada, al lado
   del clip"): es un botón propio, redondo, entre la caja y el de enviar. Y es cosa de teléfono ("no tiene
   sentido si es en computador"), así que solo aparece con la clase que pone chat.js —que sabe si hay pantalla
   táctil, algo que el CSS no puede ver—. */
#chat .chat-camara-btn { display: none; }
#chat.con-camara .chat-camara-btn {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line, #e2e6ec); background: var(--bg, #f4f6fa); color: var(--brand, #2d35a4);
}
#chat .chat-camara-btn:hover { background: #fff; }

#chat .chat-emojis { display: flex; flex-wrap: wrap; gap: 2px; padding: .4rem; max-height: 156px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line, #e2e6ec); background: var(--bg, #f4f6fa); }
#chat .chat-emoji { background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: .2rem; border-radius: 6px; width: 30px; }
#chat .chat-emoji:hover { background: #fff; transform: scale(1.15); }
#chat .chat-adjunto { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-top: 1px solid var(--line, #e2e6ec); background: #eef2ff; font-size: .8rem; }
#chat .chat-adjunto img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
#chat .chat-adjunto span { flex: 1; color: #3730a3; font-weight: 600; }
#chat .chat-adjunto button { background: none; border: 0; cursor: pointer; color: var(--rojo, #dc2626); font-size: 1rem; padding: .2rem .4rem; }
/* grabación de audio: reemplaza la caja de texto */
#chat .chat-grabando { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; height: 44px; padding: 0 .6rem 0 .2rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 22px; font-size: .85rem; color: #7f1d1d; }
#chat .chat-grabando .chat-borrar { color: #b91c1c; }
#chat .chat-grabando .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo, #dc2626); animation: chat-parpadeo 1s ease-in-out infinite; flex: 0 0 auto; }
#chat .chat-grabando .tiempo { font-variant-numeric: tabular-nums; font-weight: 700; }
#chat .chat-grabando .chat-grab-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; opacity: .85; }
@keyframes chat-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#chat-panel.soltando { outline: 3px dashed var(--brand, #2d35a4); outline-offset: -4px; }
#chat-panel.soltando::after {
  content: "Suelta la foto para adjuntarla"; position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(255, 255, 255, .92); color: var(--brand, #2d35a4); font-weight: 700; font-size: .95rem; padding: 2rem; pointer-events: none;
}
@media (max-width: 640px) {
  #chat-panel { right: 10px; left: 10px; width: auto; bottom: 78px; height: min(70vh, calc(100vh - 110px)); }
  #chat-btn { right: 14px; bottom: 14px; }
  /* Con el teclado abierto el panel se apoya en el borde de lo que se ve y toma ese alto, en vez de quedar
     empujado fuera de la pantalla (Pablo, 2026-09-12). Las dos medidas las escribe chat.js con visualViewport;
     el boton flotante estorba mientras se escribe, asi que se esconde. */
  #chat.teclado #chat-panel { bottom: calc(8px + var(--chat-inset, 0px)); height: calc(var(--chat-visible, 70vh) - 16px); }
  #chat.teclado #chat-btn { display: none; }
  /* En un telefono angosto la camara al lado se lleva 40 px, asi que los iconos de dentro de la caja se achican un
     poco para que «Escribe un mensaje» siga cabiendo en una linea. */
  #chat .chat-escribir { gap: .35rem; padding: .55rem .5rem; }
  #chat .chat-ico { width: 32px; height: 32px; }
  #chat.con-camara .chat-camara-btn { width: 40px; height: 40px; }
}
@media print { #chat { display: none !important; } }

/* ---------- campana de notificaciones ---------- */
.notif { position: relative; display: inline-flex; align-items: center; margin-right: .4rem; }
.notif.flotante { position: fixed; top: 12px; right: 84px; z-index: 60; }
#notif-btn { position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted, #6b7280); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#notif-btn:hover, #notif-btn.activo { background: var(--bg, #f4f6fa); color: var(--brand, #2d35a4); }
#notif .notif-globo { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--rojo, #dc2626); color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
#notif [hidden] { display: none !important; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 620px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line, #e2e6ec); border-radius: 20px; box-shadow: 0 16px 48px rgba(16, 24, 40, .22); z-index: 70; text-align: left; }
.notif.flotante .notif-panel { right: 0; }
.notif-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.25rem; border-bottom: 1px solid var(--line, #e2e6ec); font-size: 1.1rem; }
.notif-cabecera button { background: none; border: 0; color: var(--brand, #2d35a4); cursor: pointer; font-size: .78rem; font-family: inherit; padding: .2rem .3rem; border-radius: 6px; }
.notif-cabecera button:hover { background: var(--bg, #f4f6fa); }
.notif-lista { display: flex; flex-direction: column; }
.notif-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 18px; align-items: center; gap: .85rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line, #e2e6ec); color: var(--text, #1f2937); text-decoration: none; font-size: .85rem; line-height: 1.45; }
.notif-item:hover { background: var(--bg, #f4f6fa); text-decoration: none; }
.notif-item.nueva { background: #fff; }
.notif-item.nueva:hover { background: var(--bg, #f3f5f8); }
.notif-icono { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eff6ff; color: var(--brand, #2d35a4); }
.notif-icono svg { width: 23px; height: 23px; }
.notif-contenido { min-width: 0; overflow-wrap: anywhere; }
.notif-estado { border-radius: 7px; padding: .3rem .5rem; font-size: .7rem; background: var(--bg, #f3f5f8); color: var(--muted, #6b7280); white-space: nowrap; }
.notif-item.nueva .notif-estado { background: #fef3c7; color: #b45309; }
.notif-flecha { color: var(--brand, #2d35a4); font-size: 1.2rem; }
.notif-pie { display: flex; justify-content: flex-end; padding: 1rem 1.25rem; }
.notif-pie button { font: inherit; font-size: .85rem; background: #fff; color: var(--brand, #2d35a4); border: 1px solid var(--line, #e2e6ec); border-radius: 10px; padding: .65rem 1rem; cursor: pointer; }
.notif-item strong { display: block; font-weight: 600; }
.notif-item .notif-mod { display: block; font-size: .72rem; color: var(--muted, #6b7280); }
.notif-item .notif-mod { margin-top: .25rem; }
.notif-item .notif-txt { display: block; color: var(--muted, #6b7280); font-size: .8rem; }
.notif-vacia { margin: 0; padding: 1rem .8rem; color: var(--muted, #6b7280); font-size: .85rem; }
/* En el teléfono la campana no queda pegada al borde derecho, así que colgar la lista de ella la sacaba de la
   pantalla. Acá se pega a la pantalla, de borde a borde, y el alto lo pone chat.js justo bajo el botón. */
@media (max-width: 700px) {
  .notif-panel { position: fixed; top: 64px; left: 10px; right: 10px; width: auto; max-width: none; max-height: 76vh; }
  .notif.flotante .notif-panel { right: 10px; }
}
@media (max-width: 460px) {
  .notif-item { grid-template-columns: 34px minmax(0,1fr) 16px; gap: .55rem; padding: .85rem; }
  .notif-icono { width: 34px; height: 38px; }
  .notif-estado { grid-column: 2; justify-self: start; }
  .notif-flecha { grid-column: 3; grid-row: 1; }
  .notif-cabecera { padding: 1rem; flex-wrap: wrap; }
}