/* El chat de Mon (etapa C, 2-nov noche). Botón flotante que respeta la barra fija del celular; hoja a pantalla completa
   en el celular y panel en escritorio. Tokens del sistema v3 "Azul y menta": tinta para la cabecera (la voz de la marca),
   azul para lo que escribe el visitante y para las acciones, menta para lo que dice una persona del equipo. */
#mon{--mon-sube:0px}
#mon.oculto .mon-lanzar{opacity:0;pointer-events:none;transform:scale(.9)}

.mon-lanzar{position:fixed;right:16px;bottom:calc(16px + var(--mon-sube) + env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 0;border:0;border-radius:var(--ma-radius-pill);background:var(--ma-tinta-900);color:#fff;font:600 15px/1 var(--ma-font-ui);cursor:pointer;box-shadow:0 10px 28px -10px rgba(6,20,28,.55),0 2px 6px rgba(6,20,28,.18);transition:transform var(--ma-motion-fast) var(--ma-motion-ease-out),opacity var(--ma-motion-fast) var(--ma-motion-ease-out),bottom var(--ma-motion-base) var(--ma-motion-ease-out)}
.mon-lanzar img{width:56px;height:56px;border-radius:50%;flex:none}
.mon-lanzar:hover{transform:translateY(-2px)}
.mon-lanzar:focus-visible{outline:none;box-shadow:var(--ma-shadow-focus)}
.mon-sinleer{position:absolute;top:-2px;left:40px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ma-azul-600);color:#fff;font:700 12px/20px var(--ma-font-ui);text-align:center;box-shadow:0 0 0 2px #fff}
#mon.abierto .mon-lanzar{opacity:0;pointer-events:none}

.mon-panel{position:fixed;right:20px;bottom:20px;z-index:50;width:400px;height:min(660px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;border-radius:var(--ma-radius-xl);background:var(--ma-surface);box-shadow:0 24px 64px -16px rgba(6,20,28,.45),0 0 0 1px rgba(6,20,28,.06);animation:mon-entra var(--ma-motion-base) var(--ma-motion-ease-out)}
.mon-panel[hidden]{display:none}
@keyframes mon-entra{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.mon-enc{display:flex;align-items:center;gap:12px;padding:14px 8px 14px 16px;background:var(--ma-tinta-900);color:#fff}
.mon-enc img{border-radius:50%;flex:none}
.mon-enc div{flex:1;min-width:0}
.mon-enc h2{font:700 17px/1.2 var(--ma-font-display);letter-spacing:-.01em;margin:0}
.mon-sub{margin:2px 0 0;font-size:13px;color:var(--ma-tx-ondark-muted)}
.mon-cerrar{width:44px;height:44px;border:0;border-radius:12px;background:none;color:#fff;font-size:22px;display:grid;place-items:center;cursor:pointer}
.mon-cerrar:hover{background:rgba(255,255,255,.08)}

.mon-aviso{padding:12px 16px;background:var(--ma-ok-bg);border-bottom:1px solid var(--ma-ok-border);color:var(--ma-ok-text);font-size:14px;line-height:1.45}
.mon-aviso p{display:flex;gap:8px;margin:0}
.mon-aviso i{font-size:18px;flex:none;margin-top:1px}
.mon-contacto{display:flex;gap:8px;margin-top:10px}
.mon-contacto input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--ma-ok-border);border-radius:var(--ma-radius-field);font:16px var(--ma-font-ui);background:#fff;color:var(--ma-fg)}
.mon-contacto button{height:44px;padding:0 16px;border:0;border-radius:var(--ma-radius-field);background:var(--ma-tinta-900);color:#fff;font:600 15px var(--ma-font-ui);cursor:pointer}

.mon-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;background:var(--ma-niebla-50);display:flex;flex-direction:column;gap:10px}
.mon-m{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.mon-m.yo{justify-content:flex-end}
.mon-av{border-radius:50%;flex:none}
.mon-b{max-width:84%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--ma-surface);box-shadow:inset 0 0 0 1px var(--ma-line);color:var(--ma-body);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.mon-m.yo .mon-b{border-radius:18px 18px 6px 18px;background:var(--ma-azul-600);color:#fff;box-shadow:none}
.mon-m.persona .mon-b{background:var(--ma-ok-bg);box-shadow:inset 0 0 0 1px var(--ma-ok-border);margin-left:36px}
.mon-quien{display:block;font-size:12.5px;font-weight:700;color:var(--ma-ok-text);margin-bottom:2px}
.mon-sis{align-self:center;max-width:90%;margin:2px 0;padding:6px 12px;border-radius:var(--ma-radius-pill);background:var(--ma-niebla-100);color:var(--ma-muted);font-size:13px;text-align:center}

.mon-autos{display:grid;gap:8px;margin-top:10px}
.mon-auto{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--ma-niebla-50);box-shadow:inset 0 0 0 1px var(--ma-line);color:var(--ma-fg);text-decoration:none;transition:box-shadow var(--ma-motion-fast) var(--ma-motion-ease-out)}
.mon-auto:hover{box-shadow:inset 0 0 0 1px var(--ma-azul-400)}
.mon-auto img{width:96px;height:72px;object-fit:cover;border-radius:8px;flex:none;background:var(--ma-niebla-200)}
.mon-auto>span{display:grid;gap:2px;min-width:0}
.mon-auto-t{font-size:14px;font-weight:600;line-height:1.3}
.mon-auto b{font-size:16px;color:var(--ma-fg)}
.mon-auto small{font-size:12.5px;color:var(--ma-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mon-enlaces{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mon-ir{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--ma-radius-pill);background:var(--ma-azul-50);color:var(--ma-azul-800);font-size:14px;font-weight:600;text-decoration:none}
.mon-ir:hover{background:var(--ma-azul-100)}

.mon-sug{display:flex;flex-wrap:wrap;gap:8px;padding-left:36px}
.mon-sug button{min-height:40px;padding:0 14px;border:1px solid var(--ma-azul-200);border-radius:var(--ma-radius-pill);background:var(--ma-surface);color:var(--ma-azul-800);font:500 14px var(--ma-font-ui);cursor:pointer;text-align:left}
.mon-sug button:hover{background:var(--ma-azul-50);border-color:var(--ma-azul-400)}

.mon-escribe{display:flex;gap:4px;align-items:center;padding:14px 16px}
.mon-escribe i{width:7px;height:7px;border-radius:50%;background:var(--ma-niebla-400);animation:mon-punto 1.1s infinite ease-in-out}
.mon-escribe i:nth-child(2){animation-delay:.15s}.mon-escribe i:nth-child(3){animation-delay:.3s}
@keyframes mon-punto{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}

.mon-forma{padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--ma-surface);border-top:1px solid var(--ma-line)}
.mon-caja{display:flex;align-items:flex-end;gap:8px;padding:4px 4px 4px 14px;border-radius:24px;background:var(--ma-niebla-50);box-shadow:inset 0 0 0 1px var(--ma-line-strong)}
.mon-caja:focus-within{box-shadow:inset 0 0 0 2px var(--ma-azul-600)}
.mon-caja textarea{flex:1;min-width:0;max-height:120px;padding:10px 0;border:0;background:none;resize:none;outline:none;font:16px/1.4 var(--ma-font-ui);color:var(--ma-fg)}
.mon-caja textarea:focus-visible{box-shadow:none;outline:none}
.mon-enviar{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--ma-azul-600);color:#fff;font-size:19px;display:grid;place-items:center;cursor:pointer}
.mon-enviar:hover{background:var(--ma-azul-700)}
.mon-pie{margin:8px 4px 0;font-size:12px;line-height:1.4;color:var(--ma-muted)}
.mon-pie a{color:inherit}

@media (max-width:640px){
  .mon-lanzar{padding:0;width:56px;justify-content:center}
  .mon-lanzar-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mon-panel{inset:0;right:0;bottom:0;width:auto;height:100vh;height:100dvh;border-radius:0;animation-name:mon-sube}
  html.mon-lleno,html.mon-lleno body{overflow:hidden}
}
@keyframes mon-sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mon-panel,.mon-lanzar,.mon-escribe i{animation:none;transition:none}
}
@media print{#mon{display:none}}