/* Estilos del chat de soporte. Los usan las dos pantallas: la del cliente
   (/soporte) y la bandeja (/soporte-panel).

   La paleta es la misma del resto de stellatvplay.com para que el chat no
   parezca un widget pegado de otro lado. */

:root{
  --negro:#070710; --oscuro:#0e0e1f; --card:#12122a;
  --rosa:#ff2d78; --violeta:#b820ff; --cyan:#00d4ff;
  --verde:#00e676; --dorado:#ffb800; --rojo:#ff3d3d;
  --texto:#e8e8ff; --suave:#9090b8;
  --linea:rgba(255,255,255,.08);
  --burbuja-mia:#2a1030;
  --burbuja-otra:#171732;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}

/* El atributo hidden lo pone el navegador como display:none, pero cualquier
   regla de este archivo que diga display:flex le gana. Sin esto, el chat se
   dibuja encima de la pantalla de entrada. */
[hidden]{display:none !important}
body{
  background:var(--negro); color:var(--texto);
  font-family:'Rajdhani',sans-serif; font-size:16px;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--cyan)}

/* ================= pantalla de entrada ================= */
.entrada{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  align-items:center; padding:28px 22px; text-align:center; overflow-y:auto;
  background:
    radial-gradient(800px 500px at 20% 0%, rgba(184,32,255,.14), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(0,212,255,.10), transparent 60%);
}
.entrada .marca{
  width:72px; height:72px; flex:0 0 auto;   /* sin esto la columna flex lo achata */
  border-radius:50%; display:grid; place-items:center;
  font-family:'Bebas Neue',sans-serif; font-size:32px; color:#fff; margin-bottom:18px;
  background:linear-gradient(135deg,var(--rosa),var(--violeta));
  box-shadow:0 0 34px rgba(255,45,120,.4);
}
.entrada h1{
  font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:40px;
  letter-spacing:.02em; line-height:1; margin-bottom:10px;
}
.entrada p{color:var(--suave); font-size:17px; line-height:1.45; max-width:420px; margin-bottom:26px}
.entrada form{width:100%; max-width:400px; display:flex; flex-direction:column; gap:12px}
.entrada label{text-align:left; font-size:14px; color:var(--suave)}
.entrada input{
  width:100%; min-height:56px; border-radius:14px; padding:14px 18px;
  background:rgba(255,255,255,.06); border:1px solid var(--linea);
  color:var(--texto); font-family:inherit; font-size:18px;
}
.entrada input:focus{outline:none; border-color:var(--rosa)}
.entrada input::placeholder{color:#5a5a80}
.entrada button{
  min-height:56px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg,var(--rosa),var(--violeta)); color:#fff;
  font-family:inherit; font-size:19px; font-weight:700;
}
.entrada button:disabled{opacity:.5; cursor:default}
.entrada .error{color:var(--rojo); font-size:15px; min-height:20px}
.entrada .volver{margin-top:22px; color:var(--suave); font-size:14px}

/* ================= encabezado ================= */
.head{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:11px 14px; background:var(--card); border-bottom:1px solid var(--linea);
}
.head .atras{
  width:38px; height:38px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--suave); font-size:22px; display:none;
  place-items:center; text-decoration:none;
}
.avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-family:'Bebas Neue',sans-serif;
  font-size:19px; color:#fff; background:linear-gradient(135deg,var(--rosa),var(--violeta));
}
.avatar.cli{background:linear-gradient(135deg,var(--cyan),#2b6cff)}
.head .quien{font-weight:600; font-size:17px; line-height:1.2; overflow-wrap:anywhere}
.head .estado{font-size:13px; color:var(--verde); display:flex; align-items:center; gap:5px}
.head .estado.gris{color:var(--suave)}
.punto{width:7px; height:7px; border-radius:50%; background:var(--verde); box-shadow:0 0 8px var(--verde)}
.head .acciones{margin-left:auto; display:flex; gap:7px}
.head .acciones button{
  min-height:36px; padding:0 13px; border-radius:18px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--linea);
  color:var(--suave); font-family:inherit; font-size:13.5px; font-weight:600;
}
.head .acciones button:hover{color:var(--texto)}

/* Contratacion no es un boton mas: es el paso previo al cierre, el momento en
   que una consulta resuelta se convierte en una venta. Por eso sale del gris
   de los demas y se ve desde el otro lado de la pantalla. */
.head .acciones .destacado{
  background:linear-gradient(135deg,#00c853,#00e676);
  border:0; color:#04200f; font-weight:700; font-size:14.5px;
  min-height:40px; padding:0 18px; border-radius:20px;
  box-shadow:0 0 18px rgba(0,230,118,.35);
  display:inline-flex; align-items:center; gap:7px;
}
.head .acciones .destacado:hover{
  color:#04200f; transform:translateY(-1px);
  box-shadow:0 0 26px rgba(0,230,118,.55);
}
.head .acciones .destacado .ico{font-size:16px}

@media (max-width:820px){
  /* En el celular el encabezado se queda sin lugar: el destacado mantiene el
     color pero se achica, y los otros pasan a ser solo texto corto. */
  .head .acciones .destacado{padding:0 13px; font-size:13.5px}
  .head .acciones .destacado .ico{display:none}
}

/* ================= cartel de avisos ================= */
.avisos{
  flex:0 0 auto; display:none; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px 12px 0; padding:11px 13px; border-radius:10px;
  background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.32);
  font-size:14.5px; line-height:1.35;
}
.avisos.on{display:flex}
/* Icono y texto van juntos en un bloque. Antes eran hermanos sueltos del
   mismo flex y al angostarse la pantalla el icono se separaba a una linea
   propia, o peor, quedaba debajo del texto. */
.avisos .linea{flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:10px}
.avisos .campana{flex:0 0 auto; font-size:19px}
.avisos p{flex:1 1 auto; min-width:0}
.avisos button{
  flex:0 0 auto; border:0; border-radius:20px; cursor:pointer; min-height:40px;
  padding:0 18px; font-family:inherit; font-size:14.5px; font-weight:600;
}
.avisos .si{background:var(--cyan); color:#04121a}
.avisos .no{background:transparent; color:var(--suave); border:1px solid var(--linea)}
.avisos b{color:#fff; font-weight:700}

/* El de instalar va en rosa y no en celeste: son dos ofrecimientos distintos
   y si fueran iguales, el segundo parece el mismo cartel que no se cerro. */
.avisos.instalar{background:rgba(255,45,120,.09); border-color:rgba(255,45,120,.34)}
.avisos.instalar .si{background:linear-gradient(135deg,var(--rosa),var(--violeta)); color:#fff}

/* Queda en el encabezado mientras se pueda instalar, por si cierran el cartel
   y despues se arrepienten. */
.instalar-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,45,120,.12) !important;
  border-color:rgba(255,45,120,.4) !important;
  color:#ffb3cd !important; font-weight:700 !important;
}
.instalar-chip:hover{color:#fff !important}
.instalar-chip .ico{font-size:15px}

/* ================= hilo ================= */
.hilo{
  flex:1 1 auto; overflow-y:auto; padding:16px 14px 8px;
  display:flex; flex-direction:column; gap:3px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(184,32,255,.10), transparent 60%),
    radial-gradient(700px 400px at 90% 110%, rgba(0,212,255,.08), transparent 60%),
    var(--oscuro);
  scrollbar-width:thin; scrollbar-color:#2a2a4a transparent;
  -webkit-overflow-scrolling:touch;
}
.hilo::-webkit-scrollbar{width:8px}
.hilo::-webkit-scrollbar-thumb{background:#2a2a4a; border-radius:4px}

/* En un monitor ancho el hilo se estiraba de punta a punta y leer una
   conversacion obligaba a barrer la cabeza de izquierda a derecha.
   Se centra con padding y no limitando el ancho de los hijos: las burbujas
   se alinean con align-self, y ponerles un ancho fijo las rompe. */
@media (min-width:1060px){
  .hilo{
    padding-left:  max(14px, calc((100% - 860px) / 2));
    padding-right: max(14px, calc((100% - 860px) / 2));
  }
}
.dia{
  align-self:center; margin:6px 0 10px; padding:3px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); color:var(--suave); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase;
}
.msg{
  max-width:80%; padding:8px 11px 6px; border-radius:12px; position:relative;
  background:var(--burbuja-otra); align-self:flex-start;
  border-top-left-radius:4px; animation:entra .18s ease-out;
  word-wrap:break-word; overflow-wrap:anywhere;
}
.msg.mia{
  align-self:flex-end; background:var(--burbuja-mia);
  border-top-left-radius:12px; border-top-right-radius:4px;
}
.msg + .msg{margin-top:2px}
.msg.mia + .msg:not(.mia), .msg:not(.mia) + .msg.mia{margin-top:10px}
@keyframes entra{from{opacity:0; transform:translateY(6px) scale(.98)}to{opacity:1; transform:none}}
.msg .txt{font-size:16.5px; line-height:1.42; white-space:pre-wrap}
.msg .txt strong{font-weight:700; color:#fff}
.msg .txt .enlace{color:var(--cyan); text-decoration:underline; text-underline-offset:2px}
.msg .pie{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  font-size:11px; color:var(--suave); margin-top:3px; user-select:none;
}
.tic{font-size:12px; letter-spacing:-2px; color:var(--suave)}
.tic.leido{color:var(--cyan)}
.auto{
  display:inline-flex; align-items:center; gap:4px; margin-bottom:5px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dorado); border:1px solid rgba(255,184,0,.35);
  border-radius:4px; padding:1px 5px;
}
/* Quien mando el mensaje. Con dos personas atendiendo a la vez, es lo que
   evita que se pisen sin darse cuenta. */
.firma{
  display:block; font-size:11.5px; font-weight:700; color:var(--cyan);
  margin-bottom:3px; letter-spacing:.02em;
}
.msg.mia .firma{color:var(--rosa)}

/* Quien tiene tomada la conversacion, arriba de la bandeja */
.atendiendo{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  padding:3px 10px; border-radius:12px; margin-top:3px;
  background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.3); color:var(--cyan);
}
.atendiendo.otro{background:rgba(255,184,0,.1); border-color:rgba(255,184,0,.35); color:var(--dorado)}
.atendiendo.libre{background:rgba(255,255,255,.05); border-color:var(--linea); color:var(--suave)}
/* Lo que hay que ver de un vistazo en la bandeja: a quien todavia no le
   contesto nadie. Un aviso automatico no cuenta como respuesta. */
.sin-responder{
  display:inline-block; margin-left:8px; padding:1px 7px; border-radius:9px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,184,0,.15); border:1px solid rgba(255,184,0,.4); color:var(--dorado);
  vertical-align:middle;
}

/* Un archivo que ya se borro por antiguedad */
.vencido{
  display:flex; align-items:center; gap:7px; width:250px; max-width:100%;
  margin-bottom:4px; padding:12px 13px; border-radius:8px; font-size:13.5px;
  background:rgba(255,255,255,.04); border:1px dashed var(--linea); color:var(--suave);
}
.vencido::before{content:'\01F512'; font-size:15px}

/* A quien se le puede llegar: "app" si lo usa instalado, "avisos" si tiene
   permiso de notificaciones. Sin ninguna de las dos, solo se entera si vuelve
   a entrar por su cuenta. */
.conv .alcance{display:flex; gap:5px; margin-top:3px}
.conv .marca{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:1px 6px; border-radius:8px;
}
.conv .marca.app{background:rgba(184,32,255,.16); border:1px solid rgba(184,32,255,.4); color:#d79bff}
.conv .marca.avisos{background:rgba(0,230,118,.14); border:1px solid rgba(0,230,118,.38); color:#7bf0ae}

.conv .marca-atiende{
  font-size:11px; color:var(--cyan); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:120px;
}
.msg img, .msg video{
  display:block; max-width:100%; width:250px; border-radius:8px;
  margin-bottom:4px; background:#000;
}
.msg img{cursor:zoom-in}
.msg .cargando{
  width:250px; max-width:100%; height:130px; border-radius:8px; margin-bottom:4px;
  background:rgba(255,255,255,.05); display:grid; place-items:center;
  color:var(--suave); font-size:13.5px;
}

/* ---- audio ---- */
.audio{display:flex; align-items:center; gap:9px; width:225px; max-width:100%; padding:2px 0 4px}
.audio .play{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--rosa),var(--violeta)); color:#fff;
  font-size:14px; display:grid; place-items:center;
}
.onda{flex:1 1 auto; height:24px; display:flex; align-items:center; gap:2px; cursor:pointer}
.onda i{flex:1; background:#4a4a70; border-radius:1px; transition:background .1s}
.onda i.pasada{background:var(--cyan)}
.audio .dur{font-size:12px; color:var(--suave); font-variant-numeric:tabular-nums; min-width:34px}

/* ---- escribiendo ---- */
.puntitos{
  align-self:flex-start; display:none; gap:4px; padding:11px 13px; margin-top:6px;
  background:var(--burbuja-otra); border-radius:12px; border-top-left-radius:4px;
}
.puntitos.on{display:flex}
.puntitos i{width:6px; height:6px; border-radius:50%; background:var(--suave); animation:saltar 1.2s infinite}
.puntitos i:nth-child(2){animation-delay:.18s}
.puntitos i:nth-child(3){animation-delay:.36s}
@keyframes saltar{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

/* ---- tarjeta para contratar ---- */
.pago{width:300px; max-width:100%; padding:2px 0 4px}
.pago .titular{font-size:13.5px; color:var(--suave); margin-bottom:9px; line-height:1.3}
.pago .dato{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  border-radius:10px; padding:8px 10px;
}
.pago .dato .col{flex:1 1 auto; min-width:0}
.pago .dato .et{
  display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--suave); margin-bottom:1px;
}
.pago .dato .vl{display:block; font-size:14.5px; font-weight:600; overflow-wrap:anywhere; line-height:1.25}
.pago .dato button{
  flex:0 0 auto; min-height:38px; padding:0 14px; border-radius:19px; border:0;
  cursor:pointer; background:rgba(0,212,255,.15); color:var(--cyan);
  font-family:inherit; font-size:13.5px; font-weight:700;
}
.pago .dato button.copiado{background:var(--verde); color:#04200f}
.pago .wpp{
  display:block; text-align:center; margin-top:10px; padding:14px;
  border-radius:12px; background:#25d366; color:#06240f;
  font-size:15.5px; font-weight:700; text-decoration:none;
}
.pago .nota{font-size:13px; color:var(--suave); margin-top:9px; line-height:1.35}

/* ================= accesos rapidos ================= */
.rapidas{
  flex:0 0 auto; display:flex; gap:8px; padding:10px 12px; overflow-x:auto;
  border-top:1px solid var(--linea); background:#0a0a16; scrollbar-width:none;
}
.rapidas::-webkit-scrollbar{display:none}
.rapidas button{
  flex:0 0 auto; white-space:nowrap; cursor:pointer; min-height:42px;
  background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.3);
  color:var(--cyan); border-radius:21px; padding:0 16px;
  font-family:inherit; font-size:15px; font-weight:600;
}
.rapidas button.resuelto{background:rgba(0,230,118,.09); border-color:rgba(0,230,118,.4); color:var(--verde)}

/* ---- la fila de preguntas y su indicador de que hay mas ---- */

.fila-preguntas{flex:0 0 auto; position:relative; border-top:1px solid var(--linea)}
.fila-preguntas .rapidas{border-top:0}

/* El degrade avisa que el contenido sigue; el boton ademas deja avanzar sin
   tener que adivinar que se puede deslizar. Los dos aparecen solo cuando
   sobra contenido a la derecha. */
.fila-preguntas::after{
  content:''; position:absolute; top:0; right:0; bottom:0; width:62px;
  pointer-events:none; opacity:0; transition:opacity .2s;
  background:linear-gradient(90deg, rgba(10,10,22,0), rgba(10,10,22,.96));
}
.fila-preguntas.con-mas::after{opacity:1}

.fila-preguntas .hay-mas{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .2s;
  background:var(--card); border:1px solid rgba(0,212,255,.45); color:var(--cyan);
  font-family:inherit; font-size:20px; line-height:1; padding-bottom:3px;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.fila-preguntas.con-mas .hay-mas{opacity:1; pointer-events:auto}

/* ---- las dos acciones: nunca se deslizan ---- */

.acciones-rapidas{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; padding:0 12px 10px;
  background:#0a0a16;
}
.acciones-rapidas button{
  flex:1 1 150px; min-height:44px; cursor:pointer; border-radius:22px;
  padding:0 14px; font-family:inherit; font-size:15px; font-weight:600;
  background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.3); color:var(--cyan);
}
.acciones-rapidas button.resuelto{
  background:rgba(0,230,118,.1); border-color:rgba(0,230,118,.45); color:var(--verde);
}
.acciones-rapidas button.humano{
  background:rgba(255,45,120,.1); border-color:rgba(255,45,120,.45); color:#ff8ab4;
}
.rapidas button.gestion{background:rgba(255,255,255,.05); border-color:var(--linea); color:var(--suave)}

/* ================= adjuntos y escritura ================= */
.adjuntos{flex:0 0 auto; display:flex; gap:8px; padding:0 12px 4px; background:var(--card)}
.adjuntos button{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; cursor:pointer; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  color:var(--texto); font-family:inherit; font-size:15px; font-weight:600;
}
.adjuntos button:hover{background:rgba(255,255,255,.1)}
.adjuntos button .ico{font-size:19px; line-height:1}
.adjuntos button.grabando{background:var(--rosa); border-color:var(--rosa); color:#fff; animation:latir 1s infinite}
@keyframes latir{50%{box-shadow:0 0 0 7px rgba(255,45,120,.18)}}

.barra{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:9px;
  padding:8px 12px 12px; background:var(--card);
}
.barra .enviar{
  width:48px; height:48px; flex:0 0 auto; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--rosa),var(--violeta)); color:#fff;
  font-size:19px; display:grid; place-items:center;
}
.barra .enviar:disabled{opacity:.45}
.campo{
  flex:1 1 auto; min-height:48px; max-height:120px; overflow-y:auto; resize:none;
  background:rgba(255,255,255,.05); border:1px solid var(--linea); border-radius:24px;
  color:var(--texto); font-family:inherit; font-size:16.5px; line-height:1.35;
  padding:12px 17px;
}
.campo:focus{outline:none; border-color:rgba(255,45,120,.5)}
.campo::placeholder{color:#5a5a80}

.grabador{
  display:none; flex:0 0 auto; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 12px 8px; padding:10px 14px; border-radius:12px;
  background:rgba(255,45,120,.1); border:1px solid rgba(255,45,120,.4);
}
.grabador.on{display:flex}
.grabador .rec{width:11px; height:11px; border-radius:50%; background:var(--rosa); animation:parpadeo 1s infinite}
@keyframes parpadeo{50%{opacity:.2}}
.grabador .t{font-variant-numeric:tabular-nums; font-weight:700; color:var(--rosa); font-size:17px}
.grabador .leyenda{font-size:14.5px; color:var(--suave); flex:1 1 90px}
.grabador button{
  min-height:42px; padding:0 18px; border-radius:21px; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700;
}
.grabador .mandar{background:var(--verde); color:#04200f}
.grabador .tirar{background:transparent; color:var(--suave); border:1px solid var(--linea)}

/* ================= avisos flotantes ================= */
.globo-aviso{
  position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:40;
  background:var(--card); border:1px solid var(--linea); border-radius:22px;
  padding:10px 18px; font-size:15px; box-shadow:0 8px 28px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:88vw;
  text-align:center;
}
.globo-aviso.on{opacity:1; transform:translateX(-50%) translateY(-6px)}
.globo-aviso.malo{border-color:rgba(255,61,61,.5); color:#ffb4b4}

/* ================= visor y ventanitas ================= */
.visor{
  position:fixed; inset:0; z-index:50; display:none; place-items:center;
  background:rgba(4,4,12,.93); padding:24px; cursor:zoom-out;
}
.visor.on{display:grid}
.visor img{max-width:100%; max-height:100%; border-radius:8px}

.modal{position:fixed; inset:0; z-index:60; display:none; place-items:center; background:rgba(4,4,12,.85); padding:20px}
.modal.on{display:grid}
.modal .caja{
  width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--linea); border-radius:14px; padding:20px;
}
.modal h3{font-family:'Bebas Neue',sans-serif; font-size:25px; letter-spacing:.03em; font-weight:400; margin-bottom:4px}
.modal .ayuda{font-size:13.5px; color:var(--suave); margin-bottom:14px; line-height:1.4}
.modal label{display:block; font-size:13px; color:var(--suave); margin:12px 0 5px}
.modal input, .modal textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--linea);
  border-radius:10px; color:var(--texto); font-family:inherit; font-size:16px;
  padding:11px 13px; resize:vertical;
}
.modal textarea{min-height:130px; line-height:1.4}
.modal input:focus, .modal textarea:focus{outline:none; border-color:rgba(255,45,120,.5)}
/* Control de volumen del aviso */
.volumen{display:flex; align-items:center; gap:11px; margin:14px 0 12px}
.volumen .ico{font-size:15px; opacity:.7}
.volumen .valor{
  min-width:44px; text-align:right; font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; color:var(--cyan);
}
.volumen input[type=range]{
  flex:1 1 auto; min-width:0; height:30px; -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer;
}
.volumen input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px; background:rgba(255,255,255,.12);
}
.volumen input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-7px;
  width:20px; height:20px; border-radius:50%; border:0;
  background:linear-gradient(135deg,var(--rosa),var(--violeta));
  box-shadow:0 0 10px rgba(255,45,120,.5);
}
.volumen input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:rgba(255,255,255,.12)}
.volumen input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:0;
  background:linear-gradient(135deg,var(--rosa),var(--violeta));
}
.modal .probar{
  width:100%; min-height:42px; border-radius:21px; cursor:pointer;
  background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.35);
  color:var(--cyan); font-family:inherit; font-size:15px; font-weight:600;
}
.modal .probar:hover{background:rgba(0,212,255,.18)}

.modal .pie{display:flex; gap:9px; margin-top:18px; flex-wrap:wrap}
.modal .pie button{
  min-height:44px; padding:0 18px; border-radius:22px; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700;
}
.modal .guardar{flex:1; background:linear-gradient(135deg,var(--rosa),var(--violeta)); color:#fff}
.modal .cerrar{background:transparent; color:var(--suave); border:1px solid var(--linea)}
.modal .borrar{background:transparent; color:var(--rosa); border:1px solid rgba(255,45,120,.4)}

.lista{max-height:44vh; overflow-y:auto; margin-top:4px}
.lista .vacio{color:var(--suave); font-size:14px; padding:10px 2px}
.lista .fila{display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--linea)}
.lista .fila .nombre{flex:1 1 auto; font-size:15.5px; overflow-wrap:anywhere}
.lista .fila button{
  flex:0 0 auto; min-height:36px; padding:0 13px; border-radius:18px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--linea); color:var(--texto);
  font-family:inherit; font-size:13.5px; font-weight:600;
}
.lista .fila button.x{color:var(--rosa); border-color:rgba(255,45,120,.35)}

/* ================= bandeja (solo el panel) ================= */
/* minmax(0,1fr) y no 1fr a secas: con 1fr el ancho minimo de la columna es el
   de su contenido, y una vista previa larga con nowrap estira la bandeja mas
   alla de la pantalla. Lo mismo el min-width:0 de los dos hijos. */
.panel{flex:1 1 auto; display:grid; grid-template-columns:320px minmax(0,1fr); min-height:0}
.bandeja{
  display:flex; flex-direction:column; min-height:0; min-width:0; background:#0a0a16;
  border-right:1px solid var(--linea);
}
.bandeja .titulo{
  flex:0 0 auto; padding:13px 15px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:10px;
}
.bandeja .titulo h2{font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:23px; letter-spacing:.03em}
.bandeja .titulo .contador{margin-left:auto; font-size:13px; color:var(--suave)}
/* Pie de la barra lateral: quien esta conectado, con que nombre firma, y las
   dos acciones que se tocan una vez por turno.

   Antes estaba todo arriba junto al titulo y no entraba: el chip de la firma
   se partia en tres lineas y "Salir" se salia del borde hacia el chat. Abajo
   hay lugar y es donde uno lo busca. */
.perfil{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-top:1px solid var(--linea); background:#07070f;
}
.perfil .avatar{width:36px; height:36px; font-size:15px}
.perfil .quienSoy{flex:1 1 auto; min-width:0}
.perfil .nom{
  font-size:14px; font-weight:600; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.perfil .firma-link{
  display:block; max-width:100%; padding:0; border:0; background:none; cursor:pointer;
  color:var(--suave); font-family:inherit; font-size:12px; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
}
.perfil .firma-link:hover{color:var(--cyan)}
.perfil .icono{
  width:36px; height:36px; flex:0 0 auto; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--linea);
  color:var(--suave); font-size:15px; display:grid; place-items:center;
}
.perfil .icono:hover{color:var(--texto); border-color:var(--cyan)}

/* Con miles de conversaciones, filtrar y buscar no es un lujo: es la unica
   forma de encontrar algo. */
.filtros{flex:0 0 auto; padding:10px 12px; border-bottom:1px solid var(--linea)}
.filtros input[type=search]{
  width:100%; min-height:42px; border-radius:21px; padding:0 16px;
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  color:var(--texto); font-family:inherit; font-size:15px;
}
.filtros input[type=search]:focus{outline:none; border-color:rgba(255,45,120,.5)}
.pestanas{display:flex; gap:6px; margin-top:9px}
.pestanas button{
  flex:1; min-height:34px; border-radius:17px; cursor:pointer;
  background:transparent; border:1px solid var(--linea); color:var(--suave);
  font-family:inherit; font-size:13.5px; font-weight:600;
}
.pestanas button.on{background:rgba(255,45,120,.12); border-color:var(--rosa); color:var(--texto)}

.bandeja .mas{
  flex:0 0 auto; margin:10px 12px; min-height:40px; border-radius:20px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--linea); color:var(--suave);
  font-family:inherit; font-size:14px; font-weight:600;
}
.bandeja .mas:hover{color:var(--texto)}

.bandeja .convs{flex:1 1 auto; overflow-y:auto}
.conv{
  display:flex; align-items:center; gap:11px; padding:12px 14px; cursor:pointer;
  border-bottom:1px solid var(--linea);
}
.conv:hover{background:rgba(255,255,255,.03)}
.conv.activa{background:rgba(255,45,120,.1); box-shadow:inset 3px 0 0 var(--rosa)}
/* min-width:0 es lo que deja que el texto se corte con puntos suspensivos.
   Sin eso, una vista previa larga estira la fila y empuja la hora y el globo
   de no leidos fuera de la pantalla. */
.conv .datos{flex:1 1 auto; min-width:0; overflow:hidden}
.conv .nom{font-weight:600; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv .prev{font-size:13.5px; color:var(--suave); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv .der{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto}
.conv .cuando{font-size:11px; color:var(--suave)}
.conv .globo{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--rosa);
  color:#fff; font-size:11.5px; font-weight:700; display:grid; place-items:center;
}
.conv .globo.oculto{visibility:hidden}
.charla{display:flex; flex-direction:column; min-height:0; min-width:0}
.sin-charla{
  flex:1 1 auto; display:grid; place-items:center; text-align:center;
  color:var(--suave); font-size:16px; padding:30px; line-height:1.5;
}

/* ================= responsive ================= */
/* En el celular los carteles se comian un tercio de la pantalla porque los
   botones se apilaban uno debajo del otro. Texto arriba, los dos botones
   compartiendo una fila abajo. */
@media (max-width:560px){
  .avisos{gap:9px; padding:11px 12px; margin:8px 10px 0}
  .avisos .linea{flex:1 1 100%}    /* el texto ocupa la primera fila entera */
  .avisos p{font-size:14px}
  .avisos button{flex:1 1 0; min-width:0; padding:0 12px; font-size:14px}
  .avisos .campana{font-size:17px}

  /* El encabezado con dos botones queda justo: se achican los dos. */
  .head{padding:9px 11px; gap:9px}
  .head .acciones{gap:6px}
  .head .acciones button{min-height:34px; padding:0 11px; font-size:13px}
  .instalar-chip .ico{display:none}
}

@media (max-width:820px){
  .panel{grid-template-columns:minmax(0,1fr)}
  .bandeja{border-right:0}
  .panel.en-charla .bandeja{display:none}
  .panel:not(.en-charla) .charla{display:none}
  .head .atras{display:grid}
  .msg{max-width:88%}
  .barra{padding-bottom:max(12px, env(safe-area-inset-bottom))}
}

@media (max-height:640px){
  .head{padding:8px 14px}
  .avatar{width:36px; height:36px; font-size:17px}
  .rapidas{padding:7px 12px}
  .rapidas button{min-height:36px; font-size:14px; padding:0 13px}
  .adjuntos button{min-height:38px; font-size:14px}
  .adjuntos button .ico{font-size:16px}
  .barra{padding:6px 12px 9px}
  .barra .enviar{width:42px; height:42px; font-size:17px}
  .campo{min-height:42px; padding:9px 15px}
  .hilo{padding:10px 14px 6px}
  .entrada h1{font-size:32px}
  .entrada .marca{width:56px; height:56px; font-size:25px; margin-bottom:12px}
  .entrada p{margin-bottom:18px; font-size:16px}
}