/* =====================================================================
   CHAT DE LA WEB  -  entrega 316 (333: marco de la ventana)
   Para cambiar colores o tamaños, toca SOLO estas variables.
   ===================================================================== */
#chat316{
  --c316-azul: #3f6fa8;        /* burbuja, cabecera y mensajes del cliente   */
  --c316-verde: #2e8b57;       /* punto de "en línea"                        */
  --c316-gris: #8a94a3;        /* punto de "fuera de línea"                  */
  --c316-fondo: #eef2f7;       /* fondo de la conversación                   */
  --c316-tinta: #26303d;
  --c316-ancho: 360px;         /* ancho de la ventana desplegada             */
  --c316-alto: 520px;          /* alto máximo de la ventana desplegada       */
  --c316-margen: 20px;         /* separación del borde de la pantalla        */
  --c316-marco: #3f6fa8;       /* entrega 333: color del marco de la ventana  */
  --c316-marco-grosor: 3px;    /* entrega 333: grosor del marco (0 = sin marco) */
}

/* ---------------- a partir de aquí no hace falta tocar ---------------- */
#chat316{ position:fixed; right:var(--c316-margen); bottom:var(--c316-margen); z-index:9000; display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.45; color:var(--c316-tinta); }
#chat316[hidden], #chat316 [hidden]{ display:none !important; }
#chat316 *, #chat316 *::before, #chat316 *::after{ box-sizing:border-box; }
#chat316 svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* burbuja */
button.chat316-burbuja{ position:relative; display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0; padding:0; border:0; border-radius:50%; background:var(--c316-azul); color:#fff; box-shadow:0 8px 24px rgba(20,40,70,.32); cursor:pointer; transition:transform .15s, background .15s; }
button.chat316-burbuja:hover{ transform:scale(1.05); background:#355f91; }
button.chat316-burbuja:focus-visible, #chat316 button:focus-visible, #chat316 textarea:focus-visible, #chat316 input:focus-visible{ outline:3px solid #1f98a9; outline-offset:2px; }
button.chat316-burbuja svg{ width:28px; height:28px; }
svg.chat316-ico-cerrar{ display:none; }
#chat316.chat316-abierto svg.chat316-ico-abrir{ display:none; }
#chat316.chat316-abierto svg.chat316-ico-cerrar{ display:block; }
span.chat316-globo{ position:absolute; top:-3px; right:-3px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#c0392b; color:#fff; font-size:12px; font-weight:bold; line-height:22px; text-align:center; box-shadow:0 0 0 2px #fff; }

/* ventana */
section.chat316-ventana{ display:flex; flex-direction:column; width:var(--c316-ancho); max-width:calc(100vw - 2 * var(--c316-margen)); height:var(--c316-alto); max-height:calc(100vh - 110px); border:var(--c316-marco-grosor) solid var(--c316-marco); border-radius:14px; background:#fff; box-shadow:0 0 0 4px rgba(63,111,168,.18), 0 18px 48px rgba(20,40,70,.32); overflow:hidden; animation:chat316-sale .18s ease-out; }
@keyframes chat316-sale{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ section.chat316-ventana{ animation:none; } button.chat316-burbuja{ transition:none; } }

header.chat316-cab{ display:flex; align-items:center; gap:12px; padding:14px 12px 14px 16px; background:var(--c316-azul); color:#fff; }
span.chat316-avatar{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); }
span.chat316-avatar svg{ width:20px; height:20px; }
div.chat316-cab-texto{ flex:1 1 auto; min-width:0; }
div.chat316-cab-texto b{ display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.chat316-estado{ display:flex; align-items:center; gap:6px; font-size:12px; opacity:.92; }
span.chat316-estado i{ width:8px; height:8px; border-radius:50%; background:var(--c316-gris); box-shadow:0 0 0 2px rgba(255,255,255,.35); }
#chat316.chat316-online span.chat316-estado i{ background:#48c27f; }
span.chat316-estado em{ font-style:normal; }
button.chat316-plegar{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:#fff; cursor:pointer; }
button.chat316-plegar:hover{ background:rgba(255,255,255,.16); }
button.chat316-plegar svg{ width:22px; height:22px; }

/* mensajes */
div.chat316-mensajes{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:16px 14px; background:var(--c316-fondo); overflow-y:auto; overscroll-behavior:contain; }
div.chat316-msg{ max-width:82%; }
div.chat316-msg p{ margin:0; padding:9px 12px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
div.chat316-msg span{ display:block; margin-top:3px; padding:0 4px; font-size:11px; color:#7b8594; }
div.chat316-empresa{ align-self:flex-start; }
div.chat316-empresa p{ background:#fff; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(20,40,70,.08); }
div.chat316-cliente{ align-self:flex-end; text-align:right; }
div.chat316-cliente p{ background:var(--c316-azul); color:#fff; border-bottom-right-radius:4px; text-align:left; }
div.chat316-aviso{ align-self:stretch; padding:10px 12px; border-radius:10px; border:1px solid #f0dcb4; background:#fff6e5; color:#5c4410; font-size:13px; }

/* escribir */
form.chat316-pie{ flex:0 0 auto; margin:0; padding:10px 12px 12px; border-top:1px solid #e1e7ef; background:#fff; }
div.chat316-datos{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
div.chat316-datos p{ margin:0 0 2px; font-size:12.5px; color:#5d6878; }
#chat316 input, #chat316 textarea{ width:100%; margin:0; padding:9px 11px; border:1px solid #c9d4e3; border-radius:10px; background:#fff; color:var(--c316-tinta); font-family:inherit; font-size:14px; }
#chat316 input:focus, #chat316 textarea:focus{ outline:none; border-color:var(--c316-azul); box-shadow:0 0 0 3px rgba(63,111,168,.15); }
div.chat316-error{ margin-bottom:8px; padding:7px 10px; border-radius:8px; background:#fdf1f0; color:#8f2a1f; font-size:12.5px; font-weight:bold; }
div.chat316-escribir{ display:flex; align-items:flex-end; gap:8px; }
#chat316 textarea{ flex:1 1 auto; min-height:40px; max-height:120px; resize:none; line-height:1.4; }
button.chat316-enviar{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:42px; height:40px; margin:0; padding:0; border:0; border-radius:10px; background:var(--c316-azul); color:#fff; cursor:pointer; }
button.chat316-enviar:hover{ background:#355f91; }
button.chat316-enviar:disabled{ opacity:.55; cursor:default; }
button.chat316-enviar svg{ width:20px; height:20px; }

@media (max-width:480px){
  #chat316{ --c316-margen:12px; }
  section.chat316-ventana{ height:calc(100vh - 100px); }
}