/* ============================================================
   Chat flotante de la Comunidad (chatc)
   ------------------------------------------------------------
   Acompaña a assets/chatc.js e includes/chat_widget.php.
   Clases propias a propósito: .chat-widget es el Adiabot del
   sitio público y el panel lo oculta por CSS; reutilizar sus
   clases habría heredado ese display:none.
   ============================================================ */
.chatc{position:fixed;bottom:96px;right:18px;z-index:1130;font-family:inherit}
body.panel-layout .chatc{bottom:18px}
body.panel-layout.has-ctx-fab .chatc{bottom:96px} /* no tapar el botón de vista simulada */
body.adm-layout .chatc, body.auth-layout .chatc{display:none!important}

.chatc-fab{position:relative;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--acc,#0a4ec2);color:#fff;font-size:1.35rem;line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease}
.chatc-fab:hover{transform:scale(1.06)}
.chatc-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:#e5484d;color:#fff;font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}

.chatc-win{position:fixed;bottom:158px;right:18px;width:min(360px,calc(100vw - 24px));
  height:min(520px,calc(100vh - 190px));min-height:320px;z-index:1135;
  background:var(--card,#fff);color:var(--ink,#16233b);border:1px solid var(--line,#dbe2ee);
  border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
body.panel-layout .chatc-win{bottom:80px}
body.panel-layout.has-ctx-fab .chatc-win{bottom:158px}

.chatc-head{display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--acc,#0a4ec2);color:#fff}
.chatc-head b{flex:1;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatc-head small{display:block;font-weight:400;font-size:.7rem;opacity:.85}
.chatc-back,.chatc-close{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer;padding:2px 6px;border-radius:8px}
.chatc-back:hover,.chatc-close:hover{background:rgba(255,255,255,.18)}
.chatc-full{color:#fff;text-decoration:none;font-size:1rem;padding:2px 6px;border-radius:8px}
.chatc-full:hover{background:rgba(255,255,255,.18)}

.chatc-lista{flex:1;overflow-y:auto;padding:6px}
.chatc-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border:0;background:none;border-radius:12px;cursor:pointer;color:inherit}
.chatc-item:hover{background:var(--soft,rgba(10,78,194,.08))}
.chatc-ava{position:relative;width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  background:var(--soft,#e8eefb);display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--acc,#0a4ec2)}
.chatc-ava.on::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;
  border-radius:50%;background:#2fbf71;border:2px solid var(--card,#fff)}
.chatc-item > div{flex:1;min-width:0}
.chatc-item b{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatc-item small{display:block;color:var(--dim,#6b7a94);font-size:.75rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatc-of{font-size:.6rem;background:var(--acc,#0a4ec2);color:#fff;border-radius:6px;padding:1px 5px;margin-left:4px;vertical-align:middle}
.chatc-n{min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#e5484d;color:#fff;
  font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.chatc-nota{padding:14px 12px;color:var(--dim,#6b7a94);font-size:.8rem;text-align:center}
.chatc-nota a{color:var(--acc,#0a4ec2);font-weight:700;text-decoration:none}

.chatc-hilo{flex:1;display:flex;flex-direction:column;min-height:0}
.chatc-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;
  background:var(--bg,#f4f7fc)}
.chatc-m{max-width:82%;padding:8px 11px;border-radius:14px;font-size:.85rem;line-height:1.35;
  word-wrap:break-word;white-space:pre-wrap}
.chatc-m small{display:block;font-size:.62rem;opacity:.65;margin-top:3px;text-align:right}
.chatc-m.mio{align-self:flex-end;background:var(--acc,#0a4ec2);color:#fff;border-bottom-right-radius:4px}
.chatc-m.suyo{align-self:flex-start;background:var(--card,#fff);border:1px solid var(--line,#dbe2ee);border-bottom-left-radius:4px}
.chatc-m .chatc-check{margin-left:4px}
.chatc-m .chatc-check.leido{color:#8fd3ff}
.chatc-bot{font-size:.62rem;opacity:.7;display:block;margin-bottom:2px}

.chatc-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line,#dbe2ee);background:var(--card,#fff)}
.chatc-form input{flex:1;border:1px solid var(--line,#dbe2ee);border-radius:22px;padding:9px 14px;
  font-size:.85rem;background:var(--bg,#f4f7fc);color:inherit;outline:none}
.chatc-form input:focus{border-color:var(--acc,#0a4ec2)}
.chatc-form button{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:var(--acc,#0a4ec2);color:#fff;font-size:1rem}

/* Toast de mensaje nuevo: flota, no empuja nada, y se va solo. */
.chatc-toasts{position:fixed;bottom:160px;right:18px;z-index:1190;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end}
.chatc-toast{display:flex;align-items:center;gap:10px;max-width:300px;padding:10px 14px;
  border-radius:14px;background:rgba(22,35,59,.94);color:#fff;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(8px);
  animation:chatcIn .25s ease}
.chatc-toast b{display:block;font-size:.8rem}
.chatc-toast small{display:block;font-size:.72rem;opacity:.8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
@keyframes chatcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:520px){
  .chatc-win{right:8px;left:8px;width:auto;bottom:76px;height:min(520px,calc(100vh - 120px))}
  .chatc-toasts{bottom:84px;right:8px;left:8px;align-items:stretch}
  .chatc-toast{max-width:none}
}
[dir="rtl"] .chatc, [dir="rtl"] .chatc-win, [dir="rtl"] .chatc-toasts{right:auto;left:18px}

/* ============================================================
   Tarjeta «te avisamos cuando haya un asesor»
   ------------------------------------------------------------
   Sale para cualquiera —también sin sesión— cuando el Adiabot
   escala a una persona. Se coloca sobre el chat del bot, no
   dentro: el widget del bot es de otro archivo y meterle nada
   por CSS habría sido pisarlo.
   ============================================================ */
.chatc-ases{position:fixed;inset:0;z-index:1180;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(10,16,28,.42)}
.chatc-ases[hidden]{display:none}
.chatc-ases-caja{position:relative;width:min(380px,100%);background:var(--card,#fff);
  color:var(--ink,#16233b);border:1px solid var(--line,#dbe2ee);border-radius:16px;
  padding:20px 18px 16px;box-shadow:0 18px 48px rgba(0,0,0,.3)}
.chatc-ases-caja>b{display:block;font-size:1.02rem;margin-bottom:.35rem}
.chatc-ases-caja>small{display:block;color:var(--muted,#61708c);line-height:1.5;margin-bottom:.9rem}
.chatc-ases-x{position:absolute;top:8px;right:10px;border:0;background:none;cursor:pointer;
  font-size:1.4rem;line-height:1;color:var(--muted,#61708c)}
.chatc-ases form{display:flex;flex-direction:column;gap:.5rem}
.chatc-ases input{width:100%;padding:.62rem .7rem;border:1px solid var(--line,#dbe2ee);
  border-radius:10px;font:inherit;background:var(--bg,#fff);color:inherit}
.chatc-ases input:focus{outline:2px solid var(--acc,#0a4ec2);outline-offset:1px}
.chatc-ases button[type=submit]{padding:.66rem .8rem;border:0;border-radius:10px;cursor:pointer;
  background:var(--acc,#0a4ec2);color:#fff;font-weight:700;font-size:.95rem}
.chatc-ases-msg{margin:.7rem 0 0;font-size:.88rem;color:var(--muted,#61708c)}
/* Un error se queda a la vista: no se desvanece solo. */
.chatc-ases-msg.err{color:#b02a2a;background:#fdecec;border:1px solid #f3c9c9;
  border-radius:8px;padding:.5rem .6rem}
@media (max-width:480px){
  .chatc-ases-caja{padding:18px 14px 14px}
}

/* ── Esquina inferior derecha compartida (2026-08-24) ──
   En el panel conviven ahí la franja de demo (bottom:0), el flotante de
   contexto del SPAG (.ctx-fab, bottom:16) y este chat (bottom:18 en el panel).
   El chat tapaba «Volver a mi empresa» y el botón «Regresar al SPAG». Cada uno
   sube lo que mide el de abajo. `body.has-ctx-fab` lo pone app.js; `:has()`
   cubre el demo (y `es-demo-body`, que pone platform_shell.php, los
   navegadores sin :has). */
body.has-ctx-fab .chatc{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.has-ctx-fab .chatc-toasts{bottom:calc(218px + env(safe-area-inset-bottom,0px))}
body:has(.demo-aviso) .chatc,body.es-demo-body .chatc{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
body:has(.demo-aviso) .chatc-toasts,body.es-demo-body .chatc-toasts{bottom:calc(206px + env(safe-area-inset-bottom,0px))}
body.has-ctx-fab:has(.demo-aviso) .chatc,body.has-ctx-fab.es-demo-body .chatc{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
body.has-ctx-fab:has(.demo-aviso) .chatc-toasts,body.has-ctx-fab.es-demo-body .chatc-toasts{bottom:calc(254px + env(safe-area-inset-bottom,0px))}

/* ============================================================
   92.ª (30/08) · EL TELÉFONO — P0 de docs/TANDA92/UX-MOVIL-grok.txt
   ------------------------------------------------------------
   La queja, tal cual: «el globo del chat se sienta sobre el
   buscador de Producto en Vender a 390 px y sobre el DNI en
   landscape; en el teléfono no hay margen».

   Por qué pasaba: en el móvil el panel convierte los accesos
   rápidos (.platform-quickbar) en la barra inferior tipo app
   —assets/style.css, «Panel en el CELULAR», @media(max-width:740px)—
   y el globo se quedó en `bottom:18px`, es decir DENTRO de esa
   barra, tapando la primera fila útil del formulario.

   Se arregla SOLO desde aquí a propósito: #uxArriba (ux.js) e
   #iaErp se recolocan midiendo `.chatc` con getBoundingClientRect,
   así que en cuanto el globo se mueve, ellos lo siguen. Y se usa
   `visibility` —no `display`— justamente para que esa medida siga
   dando un rectángulo real y nadie salte de sitio.

   La altura de la barra viaja en `--quickbar-h` con respaldo de
   56 px (5+4+20+3+11+4+5 ≈ 52 px de la tira, más el safe-area del
   iPhone, que se suma aparte). Si algún día se define de verdad en
   el shell, esto la sigue sin tocar una línea.
   ============================================================ */

/* 1 · El badge NO cobra toques: el dedo casi siempre cae en esa esquina
       y un toque que no abre nada se lee como «el chat está roto». */
.chatc-badge{pointer-events:none}

/* 2 · Con un <dialog> abierto, el chat se aparta ENTERO (globo, ventana y
       avisos). La clase la pone chatc.js · MÓDULO 3 mirando `dialog[open]`.
       `visibility` y no `display`: el hueco sigue existiendo y ux.js no
       recoloca el «↑ Arriba» a mitad de una alta rápida. */
html.chatc-dialog-abierto .chatc,
html.chatc-dialog-abierto .chatc-toasts{visibility:hidden}

@media (max-width:740px){
  /* Justo el ancho al que la quickbar baja al borde inferior. */
  body.panel-layout .chatc,
  body.panel-layout.es-demo-body .chatc,
  body.panel-layout:has(.demo-aviso) .chatc{
    bottom:calc(var(--quickbar-h,56px) + env(safe-area-inset-bottom,0px) + 12px);
    right:12px}
  /* Con la franja de contexto del SPAG delante (.ctx-fab sube a bottom:80px
     en el móvil, style.css:6931) el globo se pone por encima de ELLA. */
  body.panel-layout.has-ctx-fab .chatc,
  body.panel-layout.has-ctx-fab.es-demo-body .chatc,
  body.panel-layout.has-ctx-fab:has(.demo-aviso) .chatc{
    bottom:calc(124px + env(safe-area-inset-bottom,0px))}

  /* Más pequeño: 52 px de escritorio se comen media caja de texto en 390. */
  .chatc-fab{width:48px;height:48px;font-size:1.2rem}
  .chatc-badge{min-width:18px;height:18px;font-size:.66rem;top:-3px;right:-3px}

  /* Los avisos, encima del globo ya subido, nunca sobre la quickbar. */
  body.panel-layout .chatc-toasts{
    bottom:calc(var(--quickbar-h,56px) + env(safe-area-inset-bottom,0px) + 72px);
    right:12px;left:12px;align-items:stretch}
  body.panel-layout .chatc-toast{max-width:none}
  /* La ventana del chat arranca por encima de la barra inferior. */
  body.panel-layout .chatc-win,
  body.panel-layout.has-ctx-fab .chatc-win{
    bottom:calc(var(--quickbar-h,56px) + env(safe-area-inset-bottom,0px) + 68px);
    height:min(520px,calc(100vh - var(--quickbar-h,56px) - 130px))}
}

/* 3 · TELÉFONO TUMBADO. Aquí no hay barra inferior (la quickbar solo baja
       bajo 740 px de ANCHO) y la pantalla mide 390 px de alto: la esquina
       inferior derecha cae justo sobre «Documento / Número». No hay sitio al
       que mover el globo —lo que se libere lo tapará otro campo—, así que se
       hace pequeño y translúcido, y mientras se ESCRIBE desaparece del todo,
       sin cazar toques. Al soltar el teclado vuelve solo. */
@media (max-height:520px) and (orientation:landscape){
  .chatc-fab{width:44px;height:44px;font-size:1.05rem;opacity:.62}
  .chatc-fab:hover,.chatc-fab:focus-visible,.chatc:focus-within .chatc-fab{opacity:1}
  /* El `:not(.chatc *)` excluye los campos del PROPIO chat: escribiendo un
     mensaje, el globo no tiene por qué desaparecer. */
  body:has(input:focus:not(.chatc *),select:focus:not(.chatc *),textarea:focus:not(.chatc *)) .chatc-fab{
    opacity:0;pointer-events:none}
  .chatc-win{height:min(420px,calc(100vh - 24px));bottom:12px}
}
/* 🔴 El `min-width:741px` NO sobra: un iPhone SE tumbado mide 667 px de ancho
   y ahí la quickbar SIGUE abajo, así que manda el bloque de arriba y este no
   debe bajar el globo hasta ella. Por encima de 741 px tumbado no hay barra
   inferior y el sitio del globo es el borde, lo más pequeño posible. */
@media (max-height:520px) and (orientation:landscape) and (min-width:741px){
  .chatc,
  body.panel-layout .chatc{bottom:calc(10px + env(safe-area-inset-bottom,0px));right:10px}
  body.has-ctx-fab .chatc,
  body.panel-layout.has-ctx-fab .chatc{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  body.es-demo-body .chatc,
  body:has(.demo-aviso) .chatc{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body.has-ctx-fab.es-demo-body .chatc,
  body.has-ctx-fab:has(.demo-aviso) .chatc{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}