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

   La paleta y las fuentes son las mismas del resto de stellatvplay.com (ver
   .claude/DESIGN.md) para que el chat no parezca un widget pegado de otro
   lado. Los tamanos de letra van en rem: asi respetan la letra grande que
   cada uno tenga elegida en el celular. */

@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/fuentes/inter-latin-var.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:optional;
  src:url(/fuentes/bebas-neue-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --negro:#070710; --oscuro:#0e0e1f; --card:#12122a;
  --rosa:#ff2d78; --violeta:#b820ff; --cyan:#00d4ff;
  --verde:#00e676; --dorado:#ffb800; --rojo:#ff3d3d;
  --texto:#e8e8ff; --suave:#9090b8; --tinta:#06240f;
  --linea:rgba(255,255,255,.08);
  --burbuja-mia:#2a1030;
  --burbuja-otra:#171732;
  color-scheme:dark;            /* controles nativos (buscador, fechas, scroll) en oscuro */
  /* Botón con texto blanco: el mismo degradé que --grad-boton del sitio
     (4,8:1). El rosa puro con blanco da 3,6:1 y no llega a AA. */
  --boton:linear-gradient(135deg,#e0115f,#a010e0);
  --rosa-fuerte:#e0115f;        /* fondo lleno con texto blanco (4,8:1) */
  --violeta-fuerte:#a010e0;     /* idem (5,8:1) */
  --rosa-texto:#ff8ab4;         /* rosa para texto chico sobre fondo oscuro */
  --linea-fuerte:rgba(255,255,255,.2);
  /* Colores del chat: se pintan por QUIEN habla, no por de qué lado está.
     Cliente: magenta. Equipo: índigo con firma cyan. Automático: cyan
     punteado con 🤖. Nota interna: dorado punteado. Tarjeta de pago: verde.
     El cliente ve lo mismo que el equipo, cada uno de su lado. */
  --burbuja-cliente:#3a1035;  --borde-cliente:rgba(255,45,120,.32);
  --burbuja-equipo:#1b1b3d;   --borde-equipo:rgba(150,150,255,.16);
  --burbuja-auto:#0c2130;     --borde-auto:rgba(0,212,255,.45);
  --burbuja-nota:#2a2310;     --borde-nota:rgba(255,184,0,.6);
  --borde-pago:rgba(0,230,118,.45);

  /* Los mismos tokens que estilos.css (DESIGN.md). El chat no carga
     estilos.css, asi que se repiten aca: si cambian alla, cambian aca. */
  --card-alto:#14142c; --violeta-texto:#c05cff; --naranja:#ff6b00; --blanco:#fff; --wa:#25d366;
  --linea-suave:rgba(255,255,255,.05);
  --texto-rojo:#ffb4b4; --texto-verde:#7bf0ae; --texto-dorado:#fff3d6;
  /* Avisos de color: fondo al 8 % y borde al 35 % (DESIGN.md, "Avisos de color"). */
  --rosa-fondo: rgba(255,45,120,0.08);   --rosa-borde: rgba(255,45,120,0.35);
  --violeta-fondo: rgba(184,32,255,0.08); --violeta-borde: rgba(184,32,255,0.35);
  --cyan-fondo: rgba(0,212,255,0.08);    --cyan-borde: rgba(0,212,255,0.35);
  --dorado-fondo: rgba(255,184,0,0.08);  --dorado-borde: rgba(255,184,0,0.35);
  --verde-fondo: rgba(0,230,118,0.08);   --verde-borde: rgba(0,230,118,0.35);
  --rojo-fondo: rgba(255,61,61,0.08);    --rojo-borde: rgba(255,61,61,0.35);
  --naranja-fondo: rgba(255,107,0,0.08); --naranja-borde: rgba(255,107,0,0.35);
  --sombra-elev:0 12px 34px rgba(0,0,0,.45);
  --glow-rosa:0 0 30px rgba(255,45,120,.45);
  --f-titulo:'Bebas Neue','Arial Narrow','Roboto Condensed',sans-serif-condensed,sans-serif;
  --f-texto:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.35rem;
  /* Titulos del chat (Bebas): mas chicos que los del sitio, que es una pantalla de app. */
  --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.3rem;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
/* iPhone: Safari no achica la pagina al abrir el teclado (solo Chrome
   respeta interactive-widget). soporte.html mide el alto visible y lo deja
   en --alto-real para que el chat entre entero arriba del teclado. */
body{height:var(--alto-real,100%); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}

/* 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:var(--f-texto); font-size:var(--fs-base);
  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{
  /* Centrado con margenes automaticos y no con justify-content:center: con el
     teclado abierto, lo que no entraba quedaba cortado ARRIBA (logo, titulo,
     "Probar gratis") y no se podia scrollear hasta ahi. */
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center; padding:var(--e5) var(--e5); 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:not(.demo) > :first-child{margin-top:auto}
.entrada:not(.demo) > :last-child{margin-bottom:auto}
.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:var(--f-titulo); font-size:var(--fs-2xl); color:var(--blanco); margin-bottom:var(--e4);
  background:var(--boton);
  box-shadow:0 0 34px rgba(255,45,120,.4);
}
.entrada h1{
  font-family:var(--f-titulo); font-weight:400; font-size:var(--fs-3xl);
  letter-spacing:.02em; line-height:1; margin-bottom:var(--e2);
}
.entrada p{color:var(--suave); font-size:var(--fs-base); line-height:1.45; max-width:420px; margin-bottom:var(--e5)}
.entrada form{width:100%; max-width:400px; display:flex; flex-direction:column; gap:var(--e3)}
.entrada label{text-align:left; font-size:var(--fs-base); color:var(--suave)}
.entrada input{
  width:100%; min-height:48px; border-radius:var(--r-md); padding:var(--e3) var(--e4);
  background:rgba(255,255,255,.06); border:1px solid var(--linea);
  color:var(--texto); font-family:inherit; font-size:var(--fs-base);
}
.entrada input:focus{border-color:var(--cyan)}
.entrada input::placeholder{color:var(--suave)}
.entrada button{
  min-height:48px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:var(--boton); color:var(--blanco);
  font-family:inherit; font-size:var(--fs-md); font-weight:800;
}
.entrada button:disabled{opacity:.5; cursor:default}

/* Las dos opciones de entrada. Van en una grilla de dos columnas iguales con
   minmax(0,1fr): con 1fr a secas, el boton del texto largo ensancha su columna
   y quedan de distinto tamano, que es justo lo que hace dudar de cual esta
   elegido. Y envuelven texto, porque "Todavia no tengo cuenta" no entra en una
   linea en un telefono angosto. */
.soy{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e2)}
.soy button{
  min-height:52px; padding:var(--e2) var(--e2); cursor:pointer;
  border:1px solid var(--linea); border-radius:var(--r-md);
  background:rgba(255,255,255,.05); color:var(--suave);
  font-family:inherit; font-size:var(--fs-sm); font-weight:600; line-height:1.2;
}
.soy button.on{
  background:var(--rosa-fondo); border-color:var(--rosa); color:var(--texto);
}
.entrada .ayuda{text-align:left; font-size:var(--fs-sm); color:var(--suave)}
.entrada .acepta{margin-top:var(--e2); font-size:var(--fs-xs); line-height:1.5; color:var(--suave); text-align:center}
.entrada .acepta a{color:var(--cyan); text-decoration:underline}
.entrada .error{color:var(--rojo); font-size:var(--fs-sm); min-height:20px}
.entrada .volver{margin-top:var(--e5); color:var(--suave); font-size:var(--fs-sm)}
.entrada .volver a{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--e2)}

/* ================= pedir la demo ================= */
/* La oferta de demo cuando elige "Todavia no tengo cuenta". */
.oferta-demo{display:flex; flex-direction:column; gap:var(--e2); padding:var(--e3); border-radius:var(--r-md);
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde)}
.entrada .oferta-demo p{margin:0; max-width:none; font-size:var(--fs-sm); text-align:left}

.demo{justify-content:flex-start}
.demo .marca{margin-top:var(--e1)}
.demo .paso{width:100%; max-width:400px; display:flex; flex-direction:column; gap:var(--e3)}
.demo .paso h1{margin-bottom:0}
.demo .paso p{margin:0 auto var(--e1)}
.demo .paso p b{color:var(--texto)}

/* Por donde va: cuatro rayitas, la actual en rosa. */
.pasos-demo{display:flex; gap:var(--e1); list-style:none; margin:0 0 var(--e4)}
.pasos-demo li{width:26px; height:4px; border-radius:2px; background:var(--linea)}
.pasos-demo li.hecho{background:var(--rosa-borde)}
.pasos-demo li.actual{background:var(--rosa)}

/* Los equipos van en una columna de botones grandes: en la tele se elige
   uno solo y tiene que leerse entero, sin cortar "Google TV o Android TV". */
.equipos{display:grid; gap:var(--e2)}
.entrada .equipos button{
  min-height:52px; padding:var(--e2) var(--e4); text-align:left;
  background:rgba(255,255,255,.05); border:1px solid var(--linea); border-radius:var(--r-md);
  color:var(--texto); font-size:var(--fs-base); font-weight:600; line-height:1.25;
}
.entrada .equipos button:hover{border-color:var(--rosa-borde)}
.entrada .equipos.otros{grid-template-columns:repeat(2,minmax(0,1fr))}
.entrada .equipos.otros button{min-height:46px; font-size:var(--fs-sm); color:var(--suave); font-weight:600}
.demo .otros-titulo{margin:var(--e2) 0 0; text-align:left; font-size:var(--fs-sm)}

/* Botones de segundo orden dentro de la demo: link de texto y contorno. */
.entrada button.link{
  min-height:44px; padding:0 var(--e2); background:none; color:var(--suave);
  font-size:var(--fs-sm); font-weight:500; text-decoration:underline;
}
.entrada .boton-sec{
  display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 var(--e4);
  border-radius:var(--r-md); background:transparent; border:1px solid var(--cyan-borde);
  color:var(--cyan); font-size:var(--fs-base); font-weight:700; text-decoration:none;
}
.demo .sub{text-align:left; margin-top:var(--e2)}
.demo .alternativa{
  display:flex; flex-direction:column; gap:var(--e2); text-align:left;
  padding:var(--e3) var(--e4); border-radius:var(--r-md); background:rgba(255,255,255,.04); border:1px solid var(--linea);
}
.demo .alternativa p{margin:0; max-width:none; color:var(--texto); font-size:var(--fs-sm)}
.demo .alternativa .nota{color:var(--suave); font-size:var(--fs-xs)}
.demo #formSinEquipo{max-width:none; padding-bottom:var(--e3)}

/* ================= encabezado ================= */
.head{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--e3);
  padding:var(--e3) var(--e3); background:var(--card); border-bottom:1px solid var(--linea);
}
.head .atras{
  width:44px; height:44px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--suave); font-size:var(--fs-lg); 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:var(--f-titulo);
  font-size:var(--fs-md); color:var(--blanco); background:var(--boton);
}
/* El cliente, en cyan suave: con letras blancas sobre cyan daba 1,8:1. */
.avatar.cli{background:var(--cyan-fondo); border:1px solid var(--cyan-borde); color:var(--cyan)}
.head .quien{font-weight:600; font-size:var(--fs-base); line-height:1.2; overflow-wrap:anywhere}
.head .estado{font-size:var(--fs-xs); color:var(--verde); display:flex; align-items:center; gap:var(--e1)}
.head .estado.gris{color:var(--suave)}
.head .estado.gris .punto{background:var(--suave); box-shadow:none}
.punto{width:7px; height:7px; border-radius:50%; background:var(--verde); box-shadow:0 0 8px var(--verde)}
.head > div:has(.quien){flex:1 1 auto; min-width:0}
/* Panel: el nombre con su lapiz para cambiar el usuario. */
.fila-nombre{display:flex; align-items:center; gap:var(--e2); min-width:0}
.editar-usuario{
  position:relative; flex:0 0 auto; width:28px; height:28px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0;
  background:rgba(255,255,255,.06); border:1px solid var(--linea); color:var(--suave); font-size:var(--fs-sm);
}
.editar-usuario::after{content:''; position:absolute; inset:-8px}   /* zona tactil de 44px */
@media (hover:hover){ .editar-usuario:hover{color:var(--texto); border-color:var(--cyan)} }
.head .estado{flex-wrap:wrap}
.head .acciones{margin-left:auto; display:flex; gap:var(--e2); flex:0 0 auto}
.head .acciones button{
  min-height:44px; padding:0 var(--e3); border-radius:var(--r-lg); cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--linea);
  color:var(--suave); font-family:inherit; font-size:var(--fs-xs); 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:var(--tinta); font-weight:700; font-size:var(--fs-sm);
  min-height:44px; padding:0 var(--e4); border-radius:var(--r-pill);
  box-shadow:0 0 18px rgba(0,230,118,.35);
  display:inline-flex; align-items:center; gap:var(--e2);
}
.head .acciones .destacado:hover{
  color:var(--tinta); transform:translateY(-1px);
  box-shadow:0 0 26px rgba(0,230,118,.55);
}
.head .acciones .destacado .ico{font-size:var(--fs-base)}
.head .acciones .acreditar{background:linear-gradient(135deg,var(--verde),#00b894); color:var(--tinta); border:0}
.head .acciones .acreditar:hover{filter:brightness(1.07)}

@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 var(--e3); font-size:var(--fs-xs)}
  .head .acciones .destacado .ico{display:none}
}

/* ================= cartel de avisos ================= */
.avisos{
  flex:0 0 auto; display:none; align-items:center; gap:var(--e2); flex-wrap:wrap;
  margin:var(--e2) var(--e3) 0; padding:var(--e3) var(--e3); border-radius:var(--r-md);
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde);
  font-size:var(--fs-sm); 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:var(--e2)}
.avisos .campana{flex:0 0 auto; font-size:var(--fs-md)}
.avisos p{flex:1 1 auto; min-width:0}
.avisos button{
  flex:0 0 auto; border:0; border-radius:var(--r-pill); cursor:pointer; min-height:44px;
  padding:0 var(--e4); font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}
.avisos .si{background:var(--cyan); color:var(--tinta)}
.avisos .no{background:transparent; color:var(--suave); border:1px solid var(--linea)}
.avisos b{color:var(--blanco); 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:var(--rosa-fondo); border-color:var(--rosa-borde)}
.avisos.instalar .si{background:var(--boton); color:var(--blanco)}

/* Esperando la demo: dorado, el color de "espera" del panel. Sin botones:
   solo dice donde le llega el usuario. El reloj de arena se da vuelta. */
.avisos.espera{background:var(--dorado-fondo); border-color:var(--dorado-borde); color:var(--texto-dorado)}
@media (prefers-reduced-motion:no-preference){
  .avisos.espera .campana{animation:arena 3s ease-in-out infinite}
  @keyframes arena{0%,70%{transform:none} 85%,100%{transform:rotate(180deg)}}
}

/* 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:var(--e1);
  background:var(--rosa-fondo) !important;
  border-color:var(--rosa-borde) !important;
  color:var(--rosa-texto) !important; font-weight:700 !important;
}
.instalar-chip:hover{color:var(--blanco) !important}
.instalar-chip .ico{font-size:var(--fs-sm)}

/* ================= hilo ================= */
.hilo{
  flex:1 1 auto; overflow-y:auto; padding:var(--e4) var(--e3) var(--e2);
  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));
  }
  /* En la PC del cliente, el encabezado, los botones y la barra de escribir
     siguen la misma columna que el hilo: si no, el avatar quedaba pegado al
     borde izquierdo y la conversacion flotando en el medio. */
  .vista-cliente .head, .vista-cliente .avisos, .vista-cliente .rapidas,
  .vista-cliente .acciones-rapidas, .vista-cliente .barra{
    padding-left:  max(14px, calc((100% - 860px) / 2));
    padding-right: max(14px, calc((100% - 860px) / 2));
  }
}
.dia{
  align-self:center; margin:var(--e1) 0 var(--e2); padding:3px var(--e3); border-radius:var(--r-md);
  background:rgba(255,255,255,.05); color:var(--suave); font-size:var(--fs-xs);
  letter-spacing:.06em; text-transform:uppercase;
}
.msg{
  max-width:80%; padding:var(--e2) var(--e3) var(--e1); border-radius:var(--r-md); 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:var(--e2)}
@keyframes entra{from{opacity:0; transform:translateY(6px) scale(.98)}to{opacity:1; transform:none}}
.msg .txt{font-size:var(--fs-base); line-height:1.42; white-space:pre-wrap}
.msg .txt strong{font-weight:700; color:var(--blanco)}
.msg .txt .enlace{color:var(--cyan); text-decoration:underline; text-underline-offset:2px}
/* El paso principal de la entrega de la demo: un solo boton, grande. */
.msg .txt .boton-chat{
  display:flex; align-items:center; justify-content:center; min-height:52px; margin:var(--e3) 0;
  padding:var(--e2) var(--e4); border-radius:var(--r-md); background:var(--boton); color:var(--blanco);
  font-size:var(--fs-md); font-weight:800; line-height:1.25; text-align:center; text-decoration:none;
  white-space:normal;
}
.msg .txt .boton-chat:active{transform:scale(.98)}
.msg .pie{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--e1);
  font-size:var(--fs-xs); color:var(--suave); margin-top:3px; user-select:none;
}
.tic{font-size:var(--fs-xs); letter-spacing:-2px; color:var(--suave)}
.tic.leido{color:var(--cyan)}
/* Etiqueta de la respuesta automática: cyan, con el robot, y la burbuja
   entera cambia (ver "quién habla" más abajo). Antes era una etiqueta dorada
   de 9px que no se distinguía de una respuesta del equipo. */
.auto{
  display:inline-flex; align-items:center; gap:var(--e1); margin-bottom:var(--e1);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cyan); border:1px solid var(--cyan-borde);
  border-radius:var(--r-sm); padding:2px var(--e2); background:var(--cyan-fondo);
}
.auto::before{content:'\01F916'; letter-spacing:0}
/* 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:var(--fs-xs); font-weight:700; color:var(--cyan);
  margin-bottom:3px; letter-spacing:.02em;
}

/* ---- quién habla ----
   La pantalla del cliente lleva body.vista-cliente y el panel
   body.vista-equipo: así cada burbuja se pinta por quien la manda y no por
   el lado en que cae. Las reglas de abajo (automática, nota, pago) van
   después y con la misma especificidad, para ganarles. */
.vista-cliente .msg.mia, .vista-equipo .msg:not(.mia){
  background:var(--burbuja-cliente); border:1px solid var(--borde-cliente);
}
.vista-cliente .msg:not(.mia), .vista-equipo .msg.mia{
  background:var(--burbuja-equipo); border:1px solid var(--borde-equipo);
}
.vista-cliente .msg:has(> .auto), .vista-equipo .msg:has(> .auto){
  background:var(--burbuja-auto); border:1px dashed var(--borde-auto);
}
.vista-cliente .msg.nota-interna, .vista-equipo .msg.nota-interna{
  background:var(--burbuja-nota); border:1px dashed var(--borde-nota);
}
.vista-cliente .msg:has(> .pago), .vista-equipo .msg:has(> .pago){
  background:var(--card); border:1px solid var(--borde-pago);
  box-shadow:inset 0 3px 0 var(--verde); padding:var(--e3) var(--e3) var(--e2);
}
/* Invitacion del equipo: rosa la de la app y cyan la de los avisos, como
   los carteles de abajo del chat. */
.vista-cliente .msg:has(> .invitar), .vista-equipo .msg:has(> .invitar){
  background:var(--card); border:1px solid var(--rosa-borde);
  box-shadow:inset 0 3px 0 var(--rosa); padding:var(--e3) var(--e3) var(--e2);
}
.vista-cliente .msg:has(> .invitar.push), .vista-equipo .msg:has(> .invitar.push){
  border-color:var(--cyan-borde); box-shadow:inset 0 3px 0 var(--cyan);
}
.vista-cliente .msg.fallido, .vista-equipo .msg.fallido{border-color:rgba(255,61,61,.6)}

/* El que todavia no tiene cuenta. En verde y no en amarillo a proposito: no
   es una alarma sino una venta posible, y tiene que leerse distinto del
   "sin responder" que suele estar al lado. */
.conv .pago-pendiente{
  display:inline-block; margin-top:var(--e1); padding:2px var(--e2); border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,45,120,.15); border:1px solid var(--rosa-borde); color:var(--rosa-texto);
}
.conv.con-pago{box-shadow:inset 3px 0 0 var(--rosa)}
/* La demo por crear, en cyan: tambien es una venta en camino, pero se tiene
   que distinguir del pago de un vistazo. */
.conv .demo-pendiente{
  display:inline-block; margin-top:var(--e1); padding:2px var(--e2); border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde); color:var(--cyan);
}
.conv.con-demo{box-shadow:inset 3px 0 0 var(--cyan)}
.head .acciones .demo-boton{
  background:linear-gradient(135deg,#00b4d8,var(--cyan)); color:var(--tinta);
  box-shadow:0 0 18px rgba(0,212,255,.35);
}
.head .acciones .demo-boton:hover{color:var(--tinta); box-shadow:0 0 26px rgba(0,212,255,.55)}
.modal .ficha-demo{
  display:grid; grid-template-columns:auto 1fr; gap:var(--e1) var(--e3); margin:var(--e1) 0 var(--e3);
  padding:var(--e3) var(--e3); border-radius:var(--r-md); background:var(--card); border:1px solid var(--linea);
  font-size:var(--fs-sm);
}
.modal .ficha-demo:empty{display:none}
.modal .ficha-demo dt{color:var(--suave)}
.modal .ficha-demo dd{margin:0; color:var(--texto); overflow-wrap:anywhere}
.modal .aviso-repetida{
  margin:0 0 var(--e3); padding:var(--e2) var(--e3); border-radius:var(--r-md); font-size:var(--fs-sm); line-height:1.4;
  background:var(--dorado-fondo); border:1px solid var(--dorado-borde); color:var(--dorado);
}
.sin-cuenta{
  display:inline-block; margin-left:var(--e2); padding:1px var(--e2); border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--verde);
  vertical-align:middle;
}

/* Un archivo que ya se borro por antiguedad */
.vencido{
  display:flex; align-items:center; gap:var(--e2); width:250px; max-width:100%;
  margin-bottom:var(--e1); padding:var(--e3) var(--e3); border-radius:var(--r-sm); font-size:var(--fs-xs);
  background:rgba(255,255,255,.04); border:1px dashed var(--linea); color:var(--suave);
}
.vencido::before{content:'\01F512'; font-size:var(--fs-sm)}

/* 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:var(--e1); margin-top:3px}
.conv .marca{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:1px var(--e1); border-radius:var(--r-sm);
}
.conv .marca.app{background:rgba(184,32,255,.16); border:1px solid var(--violeta-borde); color:var(--violeta-texto)}
.conv .marca.avisos{background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--texto-verde)}

.conv .marca-viendo{
  margin-top:3px; font-size:var(--fs-xs); font-weight:600; color:var(--dorado);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg img, .msg video{
  display:block; max-width:100%; width:250px; border-radius:var(--r-sm);
  margin-bottom:var(--e1); background:#000;
}
/* Gris medio: los comprobantes que ya se subieron con fondo transparente
   pueden tener letras negras o blancas, y en gris se leen las dos. Los nuevos
   ya se suben con el fondo que contrasta (soporte-chat.js, fondoPara). */
.msg img{cursor:zoom-in; background:#808080}
.msg .cargando{
  width:250px; max-width:100%; height:130px; border-radius:var(--r-sm); margin-bottom:var(--e1);
  background:rgba(255,255,255,.05); display:grid; place-items:center;
  color:var(--suave); font-size:var(--fs-xs);
}

/* ---- audio ---- */
.audio{display:flex; align-items:center; gap:var(--e2); width:225px; max-width:100%; padding:2px 0 var(--e1)}
.audio .play{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:0; cursor:pointer;
  background:var(--boton); color:var(--blanco);
  font-size:var(--fs-sm); 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:var(--fs-xs); color:var(--suave); font-variant-numeric:tabular-nums; min-width:34px}

/* ---- escribiendo ---- */
.puntitos{
  align-self:flex-start; display:none; gap:var(--e1); padding:var(--e3) var(--e3); margin-top:var(--e1);
  background:var(--burbuja-otra); border-radius:var(--r-md); 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 var(--e1)}
.pago .titular{font-size:var(--fs-xs); color:var(--suave); margin-bottom:var(--e2); line-height:1.3}
/* El titular, bien a la vista: es el nombre que el cliente ve en su banco. */
.pago .titular-cuenta{
  display:flex; flex-direction:column; gap:1px; margin-bottom:var(--e2); padding:var(--e2);
  border-radius:var(--r-md); background:var(--cyan-fondo); border:1px solid var(--cyan-borde);
}
.pago .titular-cuenta .et{font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--suave)}
.pago .titular-cuenta .nombre{font-size:var(--fs-base); font-weight:800; color:var(--blanco); line-height:1.25; overflow-wrap:anywhere}
/* El CVU cambia: que lo pidan antes de cada pago. */
.pago .titular.cambia{
  color:var(--texto-dorado); background:var(--dorado-fondo); border:1px solid var(--dorado-borde);
  border-radius:var(--r-md); padding:var(--e2); font-weight:600;
}
.pago .titular.confianza{color:var(--verde); background:var(--verde-fondo); border:1px solid var(--verde-borde); border-radius:var(--r-md); padding:var(--e2) var(--e2); margin-top:var(--e1)}
.pago .dato{
  display:flex; align-items:center; gap:var(--e2); margin-bottom:var(--e2);
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  border-radius:var(--r-md); padding:var(--e2) var(--e2);
}
.pago .dato .col{flex:1 1 auto; min-width:0}
.pago .dato .et{
  display:block; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--suave); margin-bottom:1px;
}
.pago .dato .vl{display:block; font-size:var(--fs-sm); font-weight:600; overflow-wrap:anywhere; line-height:1.25}
.pago .dato button{
  flex:0 0 auto; min-height:44px; padding:0 var(--e3); border-radius:var(--r-pill); border:0;
  cursor:pointer; background:rgba(0,212,255,.15); color:var(--cyan);
  font-family:inherit; font-size:var(--fs-xs); font-weight:700;
}
.pago .dato button.copiado{background:var(--verde); color:var(--tinta)}
.pago .adjuntar{
  display:block; width:100%; text-align:center; margin-top:var(--e2); padding:var(--e3);
  border-radius:var(--r-md); border:0; cursor:pointer;
  background:var(--boton); color:var(--blanco);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}
.pago .nota{font-size:var(--fs-xs); color:var(--suave); margin-top:var(--e2); line-height:1.35}

/* ---- invitacion: guardar el chat como app o activar los avisos ---- */
.invitar{width:280px; max-width:100%; padding:2px 0 var(--e1)}
.invitar .titulo{
  display:flex; align-items:center; gap:var(--e2); margin-bottom:var(--e1);
  font-size:var(--fs-base); font-weight:700; line-height:1.3; color:var(--blanco);
}
.invitar .ico{flex:0 0 auto; font-size:var(--fs-md)}
.msg .invitar .txt{font-size:var(--fs-sm); line-height:1.45}
.invitar .si{
  display:block; width:100%; min-height:44px; margin-top:var(--e3); border:0; border-radius:var(--r-md);
  cursor:pointer; background:var(--boton); color:var(--blanco);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}
.invitar.push .si{background:var(--cyan); color:var(--tinta)}
.invitar .listo{
  margin-top:var(--e2); padding:var(--e2) var(--e3); border-radius:var(--r-md);
  background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--texto-verde);
  font-size:var(--fs-sm); font-weight:600;
}
.invitar .nota{font-size:var(--fs-xs); color:var(--suave); margin-top:var(--e2); line-height:1.35}

/* ================= accesos rapidos ================= */
.rapidas{
  flex:0 0 auto; display:flex; gap:var(--e2); padding:var(--e2) var(--e3); overflow-x:auto;
  border-top:1px solid var(--linea); background:var(--negro); scrollbar-width:none;
}
.rapidas::-webkit-scrollbar{display:none}
.rapidas button{
  flex:0 0 auto; white-space:nowrap; cursor:pointer; min-height:44px;
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde);
  color:var(--cyan); border-radius:var(--r-pill); padding:0 var(--e4);
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}
.rapidas button.resuelto{background:var(--verde-fondo); border-color:var(--verde-borde); 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:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .2s;
  background:var(--card); border:1px solid var(--cyan-borde); color:var(--cyan);
  font-family:inherit; font-size:var(--fs-md); 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:var(--e2); padding:0 var(--e3) var(--e2);
  background:var(--negro);
}
.acciones-rapidas button{
  /* min-width:0 y el texto que puede cortarse: sin eso, un boton con una
     etiqueta larga se niega a achicarse por debajo de su contenido y
     desborda la pantalla en un celular angosto. */
  flex:1 1 0; min-width:0; min-height:44px; cursor:pointer; border-radius:var(--r-pill);
  padding:var(--e2) var(--e2); text-align:center; font-family:inherit; font-size:var(--fs-sm); font-weight:600;
  line-height:1.2; white-space:normal;
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde); color:var(--cyan);
}
.acciones-rapidas button.resuelto{
  background:var(--verde-fondo); border-color:var(--verde-borde); color:var(--verde);
}
/* El de contratar va en dorado: no es una consulta mas, es el unico boton
   del chat que termina en una venta. */
.acciones-rapidas button.contratar{
  background:var(--dorado-fondo); border-color:var(--dorado-borde); color:var(--dorado);
  font-weight:700;
}
@media (hover:hover){ .acciones-rapidas button.contratar:hover{background:rgba(255,184,0,.2)} }
.rapidas button.rapida-reco{background:var(--dorado-fondo); border-color:var(--dorado-borde); color:var(--dorado)}

.acciones-rapidas button.humano{
  background:var(--rosa-fondo); border-color:var(--rosa-borde); color:var(--rosa-texto);
}
.rapidas button.gestion{background:rgba(255,255,255,.05); border-color:var(--linea); color:var(--suave)}

/* ================= adjuntos y escritura ================= */
/* Archivo (PDF, Word, ZIP...) en el hilo: una tarjeta que se toca para bajarlo. */
.msg .archivo{display:flex; align-items:center; gap:var(--e2); min-height:44px; max-width:100%;
  padding:var(--e2) var(--e3); border:1px solid var(--linea-fuerte); border-radius:var(--r-md);
  background:rgba(255,255,255,.04); color:var(--texto); text-decoration:none}
.msg .archivo .ico{flex:0 0 auto; font-size:var(--fs-lg); line-height:1}
.msg .archivo .nombre{flex:1 1 auto; min-width:0; overflow-wrap:anywhere; font-size:var(--fs-sm)}
.msg .archivo .bajar{flex:0 0 auto; font-size:var(--fs-xs); font-weight:700; color:var(--cyan)}
.msg .archivo:hover .bajar, .msg .archivo:focus-visible .bajar{text-decoration:underline}
@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:var(--e2);
  padding:var(--e2) var(--e3) var(--e3); background:var(--card);
}
.barra .enviar{
  width:48px; height:48px; flex:0 0 auto; border-radius:50%; border:0; cursor:pointer;
  background:var(--boton); color:var(--blanco);
  font-size:var(--fs-md); 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:var(--r-pill);
  color:var(--texto); font-family:inherit; font-size:var(--fs-base); line-height:1.35;
  padding:var(--e3) var(--e4);
}
.campo:focus{border-color:var(--cyan)}
.campo::placeholder{color:var(--suave)}

/* La barra como la de WhatsApp (cliente y bandeja). El campo, con el clip y
   la camara adentro (la bandeja no tiene camara), es una sola pastilla; a la derecha, un boton redondo
   que es el microfono y pasa a ser "Enviar" cuando hay texto (.con-texto). */
.caja-escribir{
  position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:flex-end;
  padding-right:var(--e1); border-radius:var(--r-xl);
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
}
.caja-escribir:focus-within{border-color:var(--cyan)}
.caja-escribir .campo{
  flex:1 1 auto; min-width:0; min-height:46px; background:transparent; border:0; border-radius:0;
  padding:var(--e3) var(--e1) var(--e3) var(--e4);
}
/* El foco del campo es el borde cyan de la pastilla. */
.caja-escribir .campo:focus-visible{outline:none}
.ico-barra{
  flex:0 0 auto; width:44px; height:46px; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:var(--r-pill); background:none; color:var(--suave);
}
@media (hover:hover){ .ico-barra:hover{color:var(--texto)} }
.ico-barra[aria-expanded="true"]{color:var(--cyan)}
.ico-barra svg, .menu-adjuntar svg{
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.barra .enviar svg{width:22px; height:22px; fill:currentColor}
.barra.con-texto .microfono, .barra:not(.con-texto) .mandar-texto{display:none}
.barra .microfono.grabando{background:var(--rosa-fuerte); animation:latir 1s infinite}

/* Lo que se pega con Ctrl+V: se ve arriba de la barra antes de mandarlo. */
.pegado{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap;
  margin:0 var(--e3) var(--e2); padding:var(--e2) var(--e3); border-radius:var(--r-md);
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde);
}
.pegado .miniaturas{display:flex; flex-wrap:wrap; gap:var(--e1)}
.pegado .miniaturas:empty{display:none}
.pegado img{display:block; width:56px; height:56px; object-fit:cover; border-radius:var(--r-sm)}
.pegado .leyenda{flex:1 1 120px; font-size:var(--fs-sm); color:var(--texto)}
.pegado button{
  min-height:44px; padding:0 var(--e4); border-radius:var(--r-pill); cursor:pointer;
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}
.pegado .mandar{background:var(--boton); color:var(--blanco); border:0}
.pegado .tirar{background:transparent; color:var(--suave); border:1px solid var(--linea)}

/* Menu del clip: flota arriba de la barra, del ancho de la pastilla. */
.menu-adjuntar{
  position:absolute; left:0; right:0; bottom:calc(100% + var(--e2)); z-index:20; max-width:320px;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--e1);
  padding:var(--e4) var(--e2) var(--e3); border-radius:var(--r-lg);
  background:var(--card-alto); border:1px solid var(--linea); box-shadow:var(--sombra-elev);
  animation:aparecer .15s ease-out;
}
.menu-adjuntar button{
  min-width:0; min-height:44px; display:flex; flex-direction:column; align-items:center; gap:var(--e2);
  padding:var(--e1) 0; cursor:pointer; border:0; border-radius:var(--r-md); background:none;
  color:var(--texto); font-family:inherit; font-size:var(--fs-xs); font-weight:600; overflow-wrap:anywhere;
}
.menu-adjuntar .bola{
  width:52px; height:52px; display:grid; place-items:center; border-radius:50%; border:1px solid;
}
.menu-adjuntar .bola svg{width:24px; height:24px}
.bola.violeta{background:var(--violeta-fondo); border-color:var(--violeta-borde); color:var(--violeta-texto)}
.bola.rosa{background:var(--rosa-fondo); border-color:var(--rosa-borde); color:var(--rosa-texto)}
.bola.dorado{background:var(--dorado-fondo); border-color:var(--dorado-borde); color:var(--dorado)}
.bola.cyan{background:var(--cyan-fondo); border-color:var(--cyan-borde); color:var(--cyan)}
@media (hover:hover){ .menu-adjuntar button:hover .bola{filter:brightness(1.4)} }

.grabador{
  display:none; flex:0 0 auto; align-items:center; gap:var(--e2); flex-wrap:wrap;
  margin:0 var(--e3) var(--e2); padding:var(--e2) var(--e3); border-radius:var(--r-md);
  background:var(--rosa-fondo); border:1px solid var(--rosa-borde);
}
.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:var(--fs-base)}
.grabador .leyenda{font-size:var(--fs-sm); color:var(--suave); flex:1 1 90px}
.grabador button{
  min-height:44px; padding:0 var(--e4); border-radius:var(--r-pill); border:0; cursor:pointer;
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}
.grabador .mandar{background:var(--verde); color:var(--tinta)}
.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:var(--r-pill);
  padding:var(--e2) var(--e4); font-size:var(--fs-sm); 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:var(--rojo-borde); color:var(--texto-rojo)}

/* ================= visor y ventanitas ================= */
.visor{
  /* Arriba de las ventanitas (60): un chat anterior abre sus fotos con la
     ventana abierta. */
  position:fixed; inset:0; z-index:65; display:grid; place-items:center;
  background:rgba(4,4,12,.93); padding:var(--e5); cursor:zoom-out;
  /* visible al instante al abrir (para poder darle el foco) y oculto recien
     cuando termina de desvanecerse al cerrar */
  opacity:0; visibility:hidden; transition:opacity .18s, visibility 0s linear .18s;
}
.visor.on{opacity:1; visibility:visible; transition:opacity .18s, visibility 0s}
.visor .cerrar-visor{
  position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--linea); background:rgba(255,255,255,.08); color:var(--blanco);
  font-size:var(--fs-xl); line-height:1; cursor:pointer;
}
.visor .cerrar-visor:hover{background:rgba(255,255,255,.16)}
.visor img{
  /* Entra entera en la pantalla (antes las capturas largas se veian enormes).
     Tocarla la muestra en tamaño real, con scroll; tocar afuera cierra. */
  max-width:100%; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  width:auto; height:auto; object-fit:contain; border-radius:var(--r-sm);
  background:#808080; cursor:zoom-in;
}
.visor.real{overflow:auto; place-items:start center}
.visor.real img{max-width:none; max-height:none; cursor:zoom-out}

.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(4,4,12,.85); padding:var(--e4);
  opacity:0; visibility:hidden; transition:opacity .18s, visibility 0s linear .18s}
.modal.on{opacity:1; visibility:visible; transition:opacity .18s, visibility 0s}
.modal .caja{transform:translateY(8px); transition:transform .18s}
.modal.on .caja{transform:none}
.modal .caja{
  width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--linea); border-radius:var(--r-md); padding:var(--e4);
}
.modal h3{font-family:var(--f-titulo); font-size:var(--fs-xl); letter-spacing:.03em; font-weight:400; margin-bottom:var(--e1)}
.modal .ayuda{font-size:var(--fs-xs); color:var(--suave); margin-bottom:var(--e3); line-height:1.4}
.modal label{display:block; font-size:var(--fs-xs); color:var(--suave); margin:var(--e3) 0 var(--e1)}
.modal input, .modal textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--linea);
  border-radius:var(--r-md); color:var(--texto); font-family:inherit; font-size:var(--fs-base);
  padding:var(--e3) var(--e3); resize:vertical;
}
.modal textarea{min-height:130px; line-height:1.4}
.modal input:focus, .modal textarea:focus{border-color:var(--cyan)}
/* Control de volumen del aviso */
.volumen{display:flex; align-items:center; gap:var(--e3); margin:var(--e3) 0 var(--e3)}
.volumen .ico{font-size:var(--fs-sm); opacity:.7}
.volumen .valor{
  min-width:44px; text-align:right; font-variant-numeric:tabular-nums;
  font-size:var(--fs-sm); 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:calc(-1 * var(--e2));
  width:20px; height:20px; border-radius:50%; border:0;
  background:var(--boton);
  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:var(--boton);
}
.modal .probar{
  width:100%; min-height:44px; border-radius:var(--r-pill); cursor:pointer;
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde);
  color:var(--cyan); font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}
.modal .probar:hover{background:rgba(0,212,255,.18)}

.modal .error-pago{color:var(--rojo); font-size:var(--fs-sm); min-height:18px; margin-top:var(--e2); line-height:1.35}
.modal .planes{display:grid; gap:var(--e2); margin-top:var(--e3)}
.modal .plan-op{
  text-align:left; padding:var(--e3) var(--e3); border-radius:var(--r-md); cursor:pointer;
  background:var(--card); border:1px solid var(--linea); color:var(--texto);
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}
.modal .plan-op.sel{border-color:var(--verde); background:var(--verde-fondo); color:var(--blanco)}
.modal .paso2{margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--linea)}
.modal .guardar.ok{background:linear-gradient(135deg,var(--verde),#00b894); color:var(--tinta)}
.modal .pie{display:flex; gap:var(--e2); margin-top:var(--e4); flex-wrap:wrap}
.modal .pie button{
  min-height:44px; padding:0 var(--e4); border-radius:var(--r-pill); border:0; cursor:pointer;
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}
.modal .guardar{flex:1; background:var(--boton); color:var(--blanco)}
.modal .cerrar{background:transparent; color:var(--suave); border:1px solid var(--linea)}
.modal .borrar{background:transparent; color:var(--rosa); border:1px solid var(--rosa-borde)}

.lista{max-height:44vh; overflow-y:auto; margin-top:var(--e1)}
.lista .vacio{color:var(--suave); font-size:var(--fs-sm); padding:var(--e2) 2px}
.lista .fila{display:flex; align-items:center; gap:var(--e2); padding:var(--e2) 0; border-bottom:1px solid var(--linea)}
.lista .fila .nombre{flex:1 1 auto; font-size:var(--fs-sm); overflow-wrap:anywhere}
.lista .fila button{
  flex:0 0 auto; min-height:44px; padding:0 var(--e3); border-radius:var(--r-pill); cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--linea); color:var(--texto);
  font-family:inherit; font-size:var(--fs-xs); font-weight:600;
}
.lista .fila button.x{color:var(--rosa); border-color:var(--rosa-borde)}

/* ================= 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:var(--negro);
  border-right:1px solid var(--linea);
}
.bandeja .titulo{
  flex:0 0 auto; padding:var(--e3) var(--e4); border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:var(--e2);
}
.bandeja .titulo h2{font-family:var(--f-titulo); font-weight:400; font-size:var(--fs-lg); letter-spacing:.03em}
/* 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. */
/* Nombre y firma van en su propia fila y se leen enteros; los iconos, en la
   fila de abajo. Con todo en una sola fila la firma quedaba en "Fir..."
   (auditoria ST13). */
.perfil{
  flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2);
  padding:var(--e2) var(--e3); border-top:1px solid var(--linea); background:var(--negro);
}
.perfil .avatar{width:36px; height:36px; font-size:var(--fs-sm)}
.perfil .quienSoy{flex:1 1 calc(100% - 36px - var(--e2)); min-width:0}
.perfil .nom{
  font-size:var(--fs-sm); font-weight:600; line-height:1.2; overflow-wrap:anywhere;
}
.perfil .firma-link{
  display:block; max-width:100%; padding:0; border:0; background:none; cursor:pointer;
  color:var(--suave); font-family:inherit; font-size:var(--fs-sm); text-align:left; overflow-wrap:anywhere;
  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:var(--fs-sm); display:grid; place-items:center;
}
.perfil .icono:hover{color:var(--texto); border-color:var(--cyan)}
.perfil a.icono{text-decoration:none}

/* Con miles de conversaciones, filtrar y buscar no es un lujo: es la unica
   forma de encontrar algo. */
.filtros{flex:0 0 auto; padding:var(--e2) var(--e3); border-bottom:1px solid var(--linea)}
.filtros input[type=search]{
  width:100%; min-height:42px; border-radius:var(--r-pill); padding:0 var(--e4);
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  color:var(--texto); font-family:inherit; font-size:var(--fs-base);
}
.filtros input[type=search]:focus{border-color:var(--cyan)}
.pestanas{display:flex; gap:var(--e1); margin-top:var(--e2)}
.pestanas button{
  flex:1; min-height:34px; border-radius:var(--r-lg); cursor:pointer;
  background:transparent; border:1px solid var(--linea); color:var(--suave);
  font-family:inherit; font-size:var(--fs-xs); font-weight:600;
}
.pestanas button.on{background:var(--rosa-fondo); border-color:var(--rosa); color:var(--texto)}
.filtros-mas{display:flex; flex-wrap:wrap; gap:var(--e1); margin-top:var(--e2); align-items:center}
.filtros-mas select, .filtros-mas input[type=date], .filtros-mas button{
  min-height:32px; border-radius:var(--r-lg); padding:0 var(--e2); cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--linea); color:var(--texto);
  font-family:inherit; font-size:var(--fs-xs); color-scheme:dark;
}
.filtros-mas select{flex:1 1 100%}
.filtros-mas label{display:flex; flex-direction:column; align-items:stretch; gap:2px; flex:1 1 calc(50% - var(--e1)); min-width:0; font-size:var(--fs-sm); color:var(--suave)}
.filtros-mas input[type=date]{width:100%; min-height:36px; font-size:var(--fs-sm)}
.filtros-mas #fLimpiar{flex:1 1 100%}
.filtros-mas input[aria-invalid="true"]{border-color:var(--rojo)}
.error-fechas{margin-top:var(--e1); font-size:var(--fs-sm); color:var(--texto-rojo)}
.filtros-mas button{color:var(--suave)}
.filtros-mas option{background:var(--oscuro)}
.total-filtro{margin-top:var(--e2); font-size:var(--fs-xs); color:var(--cyan)}

.bandeja .mas{
  flex:0 0 auto; margin:var(--e2) var(--e3); min-height:44px; border-radius:var(--r-pill); cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--linea); color:var(--suave);
  font-family:inherit; font-size:var(--fs-sm); 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:var(--e3); padding:var(--e3) var(--e3); cursor:pointer;
  border-bottom:1px solid var(--linea);
}
.conv:hover{background:rgba(255,255,255,.03)}
.conv.activa{background:var(--rosa-fondo); 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:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv .prev{font-size:var(--fs-xs); color:var(--suave); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv .der{display:flex; flex-direction:column; align-items:flex-end; gap:var(--e1); flex:0 0 auto}
.conv .cuando{font-size:var(--fs-xs); color:var(--suave)}
.conv .globo{
  min-width:20px; height:20px; padding:0 var(--e1); border-radius:var(--r-md); background:var(--rosa-fuerte);
  color:var(--blanco); font-size:var(--fs-xs); 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:var(--fs-base); padding:var(--e6); line-height:1.5;
}
.vacio-lista{padding:var(--e5) var(--e3); align-content:center; gap:var(--e3)}
.vacio-lista .salidas{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e2)}
.vacio-lista button{
  min-height:44px; padding:0 var(--e4); border-radius:var(--r-pill); cursor:pointer;
  background:transparent; border:1px solid var(--cyan-borde); color:var(--cyan);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}

/* ================= 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:var(--e2); padding:var(--e3) var(--e3); margin:var(--e2) var(--e2) 0}
  .avisos .linea{flex:1 1 100%}    /* el texto ocupa la primera fila entera */
  .avisos p{font-size:var(--fs-sm)}
  .avisos button{flex:1 1 0; min-width:0; padding:0 var(--e3); font-size:var(--fs-sm)}
  .avisos .campana{font-size:var(--fs-base)}

  /* El encabezado con dos botones queda justo: se achican los dos. */
  .head{padding:var(--e2) var(--e3); gap:var(--e2)}
  .head .acciones{gap:var(--e1)}
  .head .acciones button{min-height:44px; padding:0 var(--e3); font-size:var(--fs-xs)}
  .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:var(--e2) var(--e3)}
  .avatar{width:36px; height:36px; font-size:var(--fs-base)}
  .rapidas{padding:var(--e2) var(--e3)}
  .rapidas button{min-height:44px; font-size:var(--fs-sm); padding:0 var(--e3)}
  .barra{padding:var(--e1) var(--e3) var(--e2)}
  .barra .enviar{width:44px; height:44px; font-size:var(--fs-base)}
  .campo{min-height:44px; padding:var(--e2) var(--e4)}
  .caja-escribir .campo{min-height:42px; padding:var(--e2) var(--e1) var(--e2) var(--e4)}
  .ico-barra{height:42px}
  .hilo{padding:var(--e2) var(--e3) var(--e1)}
  .entrada h1{font-size:var(--fs-2xl)}
  .entrada .marca{width:56px; height:56px; font-size:var(--fs-xl); margin-bottom:var(--e3)}
  .entrada p{margin-bottom:var(--e4); font-size:var(--fs-base)}
}

/* ================= estados (carga, error, conexion) ================= */

/* Pantalla de "conectando": se ve apenas abre la pagina. */
.cargando-pantalla{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--e4); text-align:center; color:var(--suave); padding:var(--e5);
}
.cargando-pantalla[hidden]{display:none}
.cargando-pantalla .marca{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-titulo); font-size:var(--fs-2xl); color:var(--blanco);
  background:var(--boton);
}
.spinner{
  width:30px; height:30px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12); border-top-color:var(--rosa);
}
@media (prefers-reduced-motion:no-preference){
  .spinner{animation:girar .8s linear infinite}
}
@keyframes girar{to{transform:rotate(360deg)}}

/* Sin conexion con la base, en la pantalla de entrada. */
.sin-conexion{
  width:100%; max-width:400px; margin:0 0 var(--e4); padding:var(--e3) var(--e4); border-radius:var(--r-md); text-align:left;
  background:var(--rojo-fondo); border:1px solid var(--rojo-borde); font-size:var(--fs-sm); line-height:1.45;
}
.sin-conexion p{color:var(--texto); font-size:var(--fs-sm); margin:0 0 var(--e3); max-width:none}
.sin-conexion b{color:var(--blanco)}
.sin-conexion .botones{display:flex; flex-wrap:wrap; gap:var(--e2)}
.entrada .sin-conexion button{
  min-height:44px; padding:0 var(--e4); border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:700;
  display:inline-flex; align-items:center; text-decoration:none;
}
.entrada .sin-conexion button{background:var(--boton); color:var(--blanco)}

/* Error del campo: pegado al campo y con el borde en rojo. */
.entrada input[aria-invalid="true"]{border-color:var(--rojo)}

/* Mientras sube un archivo: miniatura y una barra que se mueve. */
.msg .cargando{position:relative; overflow:hidden; gap:var(--e2)}
.msg .cargando img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; margin:0; border-radius:0}
.msg .cargando .que{position:relative}
.msg .cargando .progreso{
  position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.08); overflow:hidden;
}
.msg .cargando .progreso::after{
  content:''; position:absolute; top:0; bottom:0; width:40%; left:0;
  background:linear-gradient(90deg,var(--rosa),var(--violeta));
}
@media (prefers-reduced-motion:no-preference){
  .msg .cargando .progreso::after{animation:avanzar 1.1s ease-in-out infinite}
}
@keyframes avanzar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* Mientras llega la direccion firmada, la foto reserva su lugar. */
.msg img:not([src]){min-height:120px; background:rgba(255,255,255,.05)}

/* Mensaje que no salio: queda a la vista, con su boton para reintentar. */
.msg.fallido{opacity:.8; box-shadow:inset 0 0 0 1px rgba(255,61,61,.5)}
.msg.fallido .tic{color:var(--rojo); letter-spacing:0; font-weight:700}
.msg .reintentar{
  display:block; margin-top:var(--e1); min-height:44px; padding:0 var(--e3); border-radius:var(--r-pill); cursor:pointer;
  background:var(--rojo-fondo); border:1px solid var(--rojo-borde); color:var(--texto-rojo);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}
.msg .reintentar:hover{background:rgba(255,61,61,.2)}

/* La foto va dentro de un boton para poder ampliarla con el teclado. */
.msg .foto{display:block; padding:0; border:0; background:none; cursor:zoom-in; border-radius:var(--r-sm); max-width:100%}

/* ================= feedback de los botones ================= */

:where(a, button, input, textarea, [role="button"]):focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}
.entrada input:focus-visible, .campo:focus-visible, .modal input:focus-visible,
.modal textarea:focus-visible, .filtros input:focus-visible{outline-offset:1px}
button:not(:disabled):active{transform:scale(.97)}
@media (hover:hover){
  .soy button:hover, .rapidas button:hover, .acciones-rapidas button:hover,
  .pago .dato button:hover, .pago .wpp:hover, .avisos button:hover,
  .grabador button:hover, .pegado button:hover, .audio .play:hover, .barra .enviar:not(:disabled):hover,
  .pestanas button:hover, .entrada button:not(:disabled):hover{filter:brightness(1.15)}
}
/* Cualquier boton bloqueado (Chat.conBloqueo, planes elegidos, enviando) se
   ve bloqueado: antes "Salir" o "Adjuntar comprobante" no cambiaban. */
button:disabled, button[aria-busy="true"]{opacity:.5; cursor:progress}
.barra .enviar:disabled{opacity:.45}
.barra .enviar:disabled{cursor:default}
.entrada button:disabled{cursor:progress}

/* En la bandeja, cada conversacion se elige tambien con el teclado. */
.conv:focus-visible{outline-offset:-2px}

/* Aviso de la bandeja cuando se corta el tiempo real. */
.sin-tiempo-real{
  flex:0 0 auto; padding:var(--e2) var(--e3); font-size:var(--fs-sm); line-height:1.35;
  background:var(--dorado-fondo); border-bottom:1px solid var(--dorado-borde); color:var(--dorado);
}
/* Bandeja: la demora del turno en curso, del equipo. Discreta: un color de
   fondo suave segun la meta, y al tocarla explica como se mide. */
.turno-demora{
  flex:0 0 auto; display:block; width:100%; text-align:left; cursor:pointer;
  padding:var(--e2) var(--e4); border:0; border-bottom:1px solid var(--linea);
  background:transparent; color:var(--texto); font-family:inherit; font-size:var(--fs-xs); line-height:1.5;
}
.turno-demora .cab{color:var(--suave); font-weight:600}
.turno-demora b{color:var(--blanco); font-weight:700}
.turno-demora[data-estado="bien"]{background:var(--verde-fondo)}
.turno-demora[data-estado="bien"] b:first-of-type{color:var(--texto-verde)}
.turno-demora[data-estado="cerca"]{background:var(--dorado-fondo)}
.turno-demora[data-estado="cerca"] b:first-of-type{color:var(--texto-dorado)}
.turno-demora[data-estado="lejos"]{background:var(--rojo-fondo)}
.turno-demora[data-estado="lejos"] b:first-of-type{color:var(--texto-rojo)}
.turno-ayuda{
  flex:0 0 auto; padding:var(--e2) var(--e4); border-bottom:1px solid var(--linea);
  font-size:var(--fs-xs); line-height:1.5; color:var(--suave);
}
/* Bandeja: el pool de demos de la publicidad. Rojo con 5 o menos (se pasan
   a mano), dorado si falta cargar para la meta del turno. */
.pool-demos{
  flex:0 0 auto; display:block; width:100%; text-align:left; cursor:pointer;
  padding:var(--e2) var(--e4); border:0; border-bottom:1px solid var(--linea);
  background:transparent; color:var(--texto); font-family:inherit; font-size:var(--fs-xs); line-height:1.5; font-weight:600;
}
.pool-demos[data-estado="bien"]{background:var(--verde-fondo); color:var(--texto-verde)}
.pool-demos[data-estado="falta"]{background:var(--dorado-fondo); color:var(--texto-dorado)}
.pool-demos[data-estado="pocas"]{background:var(--rojo-fondo); color:var(--texto-rojo)}
.pool-demos[data-estado="apagada"]{color:var(--suave)}
.modal .pool-numeros{font-size:var(--fs-sm); color:var(--texto); margin-bottom:var(--e2)}
.modal .pool-resultado{font-size:var(--fs-sm); color:var(--texto-verde); min-height:1em; margin-top:var(--e2)}
.modal .pool-activa{display:flex; align-items:center; gap:var(--e2); margin-top:var(--e4); color:var(--texto); font-size:var(--fs-sm)}
.modal .pool-activa input{width:auto; min-height:0}
.modal .pool-lista{margin-top:var(--e3); font-size:var(--fs-xs); color:var(--suave)}
.modal .pool-lista summary{cursor:pointer; min-height:36px; display:flex; align-items:center}
.modal .pool-lista ul{list-style:none; max-height:220px; overflow-y:auto}
.modal .pool-lista li{display:flex; justify-content:space-between; align-items:center; gap:var(--e2);
  padding:var(--e1) 0; border-bottom:1px solid var(--linea)}

/* ================= celular escribiendo ================= */
/* Con el teclado abierto, las filas de botones le dejaban al hilo un par de
   renglones. Mientras se escribe se esconden y vuelven al terminar. */
@media (pointer:coarse){
  body.escribiendo .fila-preguntas,
  body.escribiendo .acciones-rapidas{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ================= planes y enlaces de recomendacion ================= */
/* Hoja que sube desde abajo: elegir plan y guardar el link del chat. */
.hoja{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.6); animation:aparecer .2s ease-out}
.hoja .caja-hoja{animation:subir .22s ease-out}
.demo .paso:not([hidden]){animation:aparecer .2s ease-out}
@keyframes aparecer{from{opacity:0}}
@keyframes subir{from{transform:translateY(24px); opacity:.6}}
.caja-hoja{position:relative; width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  padding:22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--oscuro); border:1px solid var(--linea); border-bottom:0}
.caja-hoja h2{font-family:var(--f-titulo); font-weight:400; font-size:var(--fs-2xl); letter-spacing:.02em; margin:0 40px var(--e1) 0}
.caja-hoja p{color:var(--suave); font-size:var(--fs-sm); line-height:1.45; margin:0 0 var(--e3)}
.cerrar-hoja{position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--texto); font-size:var(--fs-xl); cursor:pointer}
.monedas{display:grid; grid-template-columns:1fr 1fr; gap:var(--e2); margin-bottom:var(--e3)}
.monedas button{min-height:44px; border-radius:var(--r-md); cursor:pointer; font-family:inherit; font-size:var(--fs-sm); font-weight:700;
  background:rgba(255,255,255,.05); border:1px solid var(--linea); color:var(--suave)}
.monedas button.on{background:var(--cyan-fondo); border-color:var(--cyan); color:var(--texto)}
.lista-planes{display:grid; gap:var(--e2)}
.op-plan{display:grid; grid-template-columns:1fr auto; grid-template-areas:"np pp" "dp pp"; align-items:center; gap:2px var(--e3);
  width:100%; padding:var(--e3) var(--e4); text-align:left; cursor:pointer; font-family:inherit;
  border-radius:var(--r-md); background:var(--card); border:1px solid var(--linea); color:var(--texto)}
.op-plan:hover{border-color:rgba(255,45,120,.6)}
.op-plan.recomendado{border-color:var(--dorado-borde)}
.op-plan .np{grid-area:np; font-weight:800; font-size:var(--fs-base)}
.op-plan .dp{grid-area:dp; color:var(--suave); font-size:var(--fs-xs)}
.op-plan .pp{grid-area:pp; font-weight:800; color:var(--cyan); font-size:var(--fs-base); white-space:nowrap}
.pago .plan-elegido{font-weight:800; font-size:var(--fs-base); color:var(--blanco); margin-bottom:var(--e2)}
.rapidas .rapida-precios{border-color:var(--cyan-borde); color:var(--cyan)}
.link-reco{margin:var(--e1) 0 var(--e3); padding:var(--e4); border-radius:var(--r-md); text-align:center; font-size:var(--fs-xl); font-weight:800;
  letter-spacing:.12em; background:var(--cyan-fondo); border:1px solid var(--cyan-borde); color:var(--blanco)}
.caja-hoja > button:not(.cerrar-hoja){width:100%; min-height:52px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:var(--boton); color:var(--blanco); font-family:inherit; font-size:var(--fs-base); font-weight:700}
/* El rescate (#hojaRescate): lo unico del chat que abre WhatsApp. */
.boton-wa{display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; border-radius:var(--r-md);
  background:var(--wa); color:var(--tinta); font-size:var(--fs-base); font-weight:800; text-decoration:none}

/* Marca: el logo y StellaTV, como en el sitio (antes era un circulo "ST"). */
.marca-sitio{
  display:inline-flex; align-items:center; gap:var(--e2); flex:0 0 auto; margin-bottom:var(--e4);
  font-family:var(--f-titulo); font-size:var(--fs-2xl); letter-spacing:1px; line-height:1;
  text-transform:uppercase; color:var(--blanco);
}
.marca-sitio img{height:30px; width:auto; display:block}
.marca-sitio em{font-style:normal; color:var(--rosa)}
.demo .marca-sitio{margin-top:var(--e1)}

/* Entrada: la opcion elegida, con "Cambiar opcion". */
.tarea{display:flex; align-items:center; justify-content:space-between; gap:var(--e2); padding:var(--e2) var(--e2) var(--e2) var(--e4);
  border-radius:var(--r-md); background:rgba(255,255,255,.05); border:1px solid var(--linea); text-align:left; font-weight:700; color:var(--texto)}
.entrada .tarea button.link{flex:0 0 auto; min-height:44px; padding:0 var(--e2); background:none; color:var(--cyan); font-size:var(--fs-sm); font-weight:700; text-decoration:underline}

/* Demo, paso 1: donde la va a mirar. */
.demo .donde button{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:68px; padding:var(--e3) var(--e4)}
.demo .donde .dt{font-size:var(--fs-md); font-weight:800}
.demo .donde small{font-size:var(--fs-sm); color:var(--suave); font-weight:500; line-height:1.35}

/* Demo, paso 2: el equipo elegido, la preparacion y lo esencial. */
.equipo-elegido{display:flex; align-items:center; justify-content:space-between; gap:var(--e2); padding:var(--e1) var(--e1) var(--e1) var(--e4);
  border-radius:var(--r-md); background:var(--cyan-fondo); border:1px solid var(--cyan-borde); text-align:left; color:var(--texto)}
.entrada .equipo-elegido button.link{min-height:44px; color:var(--cyan); font-weight:700}
.demo .paso p.prep{margin:0; padding:var(--e3) var(--e4); border-radius:var(--r-md); text-align:left; font-size:var(--fs-sm); color:var(--texto);
  background:var(--dorado-fondo); border:1px solid var(--dorado-borde)}
.demo .prep a{color:var(--cyan)}
.demo details.como-funciona, .demo details.plegable{text-align:left; border:1px solid var(--linea); border-radius:var(--r-md); padding:0 var(--e4)}
.demo details.como-funciona summary, .demo details.plegable summary{cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--texto); font-weight:700}
.demo details.como-funciona ul{margin:0 0 var(--e3); padding-left:var(--e5); color:var(--texto); font-size:var(--fs-sm); line-height:1.5}
.demo details.como-funciona li + li{margin-top:var(--e1)}

/* WhatsApp: el pais arriba del numero. */
.entrada select.pais, .modal select.pais{
  width:100%; min-height:48px; border-radius:var(--r-md); padding:0 var(--e3);
  background:rgba(255,255,255,.06); border:1px solid var(--linea); color:var(--texto);
  font-family:inherit; font-size:var(--fs-base);
}
.entrada select.pais:focus, .modal select.pais:focus{border-color:var(--cyan)}
/* Demo: pais y numero en una fila, menos espacio entre campos y "Pedir mi
   prueba" a la vista mientras completa (en 360x640 quedaba hasta 235 px abajo). */
.entrada .fila-wpp{display:flex; gap:var(--e2)}
.entrada .fila-wpp select.pais{flex:0 0 7.5rem; width:7.5rem; min-width:0; padding:0 var(--e2)}
.entrada .fila-wpp input{flex:1 1 auto; min-width:0}
.demo #formDemo{gap:var(--e2)}
.demo #formDemo #btnPedirDemo{position:sticky; bottom:var(--e2); z-index:1; box-shadow:0 -12px 20px var(--oscuro)}
.entrada select.pais option, .modal select.pais option{background:var(--oscuro)}
/* Corregir el WhatsApp en la bandeja y el panel: el pais arriba del numero. */
.modal select.pais + input{margin-top:var(--e2)}

/* Resumen del plan elegido (ST05). */
.resumen-plan{
  width:100%; max-width:400px; display:flex; flex-direction:column; gap:var(--e1); text-align:left;
  margin-bottom:var(--e4); padding:var(--e3) var(--e4); border-radius:var(--r-md);
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde);
}
.entrada .resumen-plan p{margin:0; max-width:none; color:var(--texto); font-size:var(--fs-base)}
.entrada .resumen-plan .rp-titulo{font-weight:800; color:var(--blanco)}
.entrada .resumen-plan .rp-total b{color:var(--blanco)}
.resumen-plan .rp-cambiar{align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; color:var(--cyan); font-weight:700}
.demo .paso-n{margin:calc(-1 * var(--e3)) 0 var(--e3); font-size:var(--fs-sm); color:var(--suave)}

/* ================= panel: pendientes, cuenta, notas ================= */
.conv .demo-pendiente.sin-equipo{background:var(--dorado-fondo); border-color:var(--dorado-borde); color:var(--dorado)}
.conv .marca-origen{
  display:inline-block; margin-top:var(--e1); margin-right:var(--e1); padding:2px var(--e2); border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--violeta-fuerte); color:var(--blanco);
}
.conv .marca-origen.og-web{background:transparent; border:1px solid var(--linea); color:var(--suave)}
.conv .marca-origen.og-reco{background:var(--rosa-fuerte)}
.conv .marca-origen.og-sin{background:transparent; border:1px dashed var(--dorado-borde); color:var(--dorado)}
.conv.con-origen.og-campania:not(.con-pago):not(.activa){box-shadow:inset 3px 0 0 var(--violeta)}
.conv.con-origen.og-reco:not(.con-pago):not(.activa){box-shadow:inset 3px 0 0 var(--rosa)}
/* Origen en el encabezado: se toca para corregirlo. Las clases van como
   og-* y nunca "publicidad" ni "publi": los bloqueadores de anuncios
   esconden esos elementos (se escondia la fila entera del cliente). */
.fila-origen{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1); margin-top:var(--e1)}
.chip-origen, .chip-premio{
  padding:2px var(--e2); border-radius:var(--r-sm); cursor:pointer; font-family:inherit;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.03em;
  background:transparent; border:1px solid var(--linea); color:var(--suave);
}
.chip-origen.og-campania{background:var(--violeta-fuerte); border-color:var(--violeta-fuerte); color:var(--blanco)}
.chip-origen.og-reco{background:var(--rosa-fuerte); border-color:var(--rosa-fuerte); color:var(--blanco)}
.chip-origen.og-sin{border-style:dashed; border-color:var(--dorado-borde); color:var(--dorado)}
.chip-premio{background:var(--verde-fondo); border-color:var(--verde-borde); color:var(--verde)}
.fila-origen .recomendo{font-size:var(--fs-xs); color:var(--verde)}
.conv .espera{margin-top:3px; font-size:var(--fs-xs); color:var(--suave)}
/* Bandeja: el candado de la nota interna va adentro de la pastilla, a la
   izquierda (donde WhatsApp tiene los stickers). Prendido, en dorado. */
.caja-escribir .modo-nota{margin-left:var(--e1)}
.caja-escribir .modo-nota + .campo{padding-left:var(--e1)}
.modo-nota.on{background:var(--dorado-fondo); color:var(--dorado)}
.caja-escribir:has(.modo-nota.on){border-color:var(--dorado-borde)}
.msg.nota-interna .txt{color:var(--texto-dorado)}
.msg .et-nota{display:block; font-size:var(--fs-xs); font-weight:700; color:var(--dorado); margin-bottom:3px}
.msg .marcar-comprobante{display:block; margin-top:var(--e1); min-height:44px; padding:0 var(--e3); border-radius:var(--r-lg); cursor:pointer;
  font-family:inherit; font-size:var(--fs-xs); font-weight:700; background:var(--rosa-fondo); border:1px solid var(--rosa-borde); color:var(--rosa)}
.msg .marcar-comprobante:disabled{opacity:.7; cursor:default}
/* Si las pestañas no entran en una fila, bajan a la segunda. */
.pestanas{flex-wrap:wrap}
.pestanas button{flex:1 1 auto; padding:0 var(--e2)}
.ficha-wpp{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap; font-size:var(--fs-xs); color:var(--suave); margin-top:2px}
/* El WhatsApp que dejo al entrar contra el de Kommo de su cuenta. */
.ficha-wpp .tel-ok{color:var(--texto-verde)}
.ficha-wpp .tel-mal{color:var(--texto-rojo); font-weight:700}
.ficha-wpp button{position:relative; padding:2px var(--e2); border-radius:var(--r-pill); border:1px solid var(--linea); background:transparent;
  color:var(--cyan); font-family:inherit; font-size:var(--fs-xs); font-weight:600; cursor:pointer}
.ficha-wpp button::after{content:""; position:absolute; inset:-10px -4px}

/* Entrada con tres caminos, uno debajo del otro. La demo, destacada. */
.soy.soy3{grid-template-columns:1fr}
/* Los tres caminos tienen que leerse como botones: antes los dos de abajo
   eran casi del color del fondo (borde al 8 %) y parecían texto. Ahora tienen
   borde visible, ícono a la izquierda y una flecha que dice "tocá acá". La
   demo sigue siendo la única con relleno. */
.entrada .soy.soy3 button{
  min-height:56px; padding:var(--e2) 40px var(--e2) var(--e4); position:relative;
  display:flex; align-items:center; gap:var(--e3); text-align:left;
  font-size:var(--fs-base); font-weight:600; color:var(--texto);
  background:rgba(255,255,255,.06); border:1px solid var(--linea-fuerte);
}
.entrada .soy.soy3 button::after{
  content:'\203A'; position:absolute; right:16px; top:50%; transform:translateY(-52%);
  font-size:var(--fs-xl); line-height:1; color:var(--suave);
}
.entrada .soy.soy3 button:hover{border-color:var(--cyan)}
.entrada .soy.soy3 button.on{background:var(--rosa-fondo); border-color:var(--rosa)}
.entrada .soy .ico{flex:0 0 auto; font-size:var(--fs-lg); line-height:1}
.entrada .soy.soy3 .soy-demo{border:0; background:var(--boton); color:var(--blanco); font-weight:800; box-shadow:0 0 26px rgba(255,45,120,.35)}
.entrada .soy.soy3 .soy-demo::after{color:var(--blanco)}
.entrada #campos{display:flex; flex-direction:column; gap:var(--e3); margin-top:var(--e1)}
.entrada #campos[hidden]{display:none}

/* ================= ajustes de diseño (2026-10) ================= */

/* El encabezado baja las acciones a un segundo renglón si no entran. En el
   panel, con cuatro botones, se salían de la pantalla en 360 px. */
.head{flex-wrap:wrap}
.head > div:not(.acciones):not(.avatar){min-width:0; flex:1 1 140px}
.head .acciones{flex-wrap:wrap; justify-content:flex-end; max-width:100%}
.head .acciones button{min-width:44px}

/* Chips chicos que se tocan: se ven chicos, pero la zona que responde mide
   44 px de alto. */
.chip-origen, .chip-premio, .perfil .firma-link{position:relative}
.chip-origen::after, .chip-premio::after, .perfil .firma-link::after{
  content:''; position:absolute; left:-4px; right:-4px; top:50%; height:44px; transform:translateY(-50%);
}

/* En pantallas táctiles, los controles compactos del panel también llegan
   a 44 px. Con mouse quedan compactos para que entre la bandeja. */
@media (pointer:coarse){
  .perfil .icono{width:44px; height:44px}
  .pestanas button, .filtros-mas select, .filtros-mas input[type=date], .filtros-mas button,
  .filtros input[type=search]{min-height:44px}
}

/* ================= recomendados ================= */
.cartel-reco{
  width:100%; max-width:400px; margin:0 auto var(--e3) !important; padding:var(--e2) var(--e3); border-radius:var(--r-md);
  background:var(--dorado-fondo); border:1px solid var(--dorado-borde); color:var(--dorado) !important;
  font-size:var(--fs-sm); font-weight:600;
}
.cartel-reco b{color:var(--blanco)}
.link-reco{font-size:var(--fs-sm); letter-spacing:0; overflow-wrap:anywhere; text-transform:none}
.caja-hoja .nota{font-size:var(--fs-sm)}
/* Mi link de referido: el contador (cada 2 clientes, 1 mes gratis). */
.reco-contador{margin:var(--e3) 0 var(--e4); padding:var(--e4); border-radius:var(--r-md);
  background:var(--dorado-fondo); border:1px solid var(--dorado-borde)}
.reco-progreso{display:grid; grid-template-columns:1fr 1fr; gap:var(--e2)}
.reco-progreso span{height:10px; border-radius:var(--r-pill); background:rgba(255,255,255,.1)}
.reco-progreso span.lleno{background:var(--dorado)}
.caja-hoja .reco-falta{margin:var(--e2) 0 var(--e3); color:var(--texto-dorado); font-size:var(--fs-sm); font-weight:600}
.reco-numeros{display:grid; grid-template-columns:1fr 1fr; gap:var(--e2); margin:0}
.reco-numeros div{padding:var(--e2) var(--e3); border-radius:var(--r-sm); background:rgba(0,0,0,.25); text-align:center}
.reco-numeros dt{color:var(--suave); font-size:var(--fs-xs); line-height:1.3}
.reco-numeros dd{margin:var(--e1) 0 0; color:var(--blanco); font-size:var(--fs-xl); font-weight:800; line-height:1.1}
.caja-hoja .reco-probando{margin:var(--e3) 0 0; color:var(--suave); font-size:var(--fs-sm)}
.reco-premio{margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--dorado-borde)}
.caja-hoja .reco-premio p{margin:0 0 var(--e2); color:var(--blanco); font-size:var(--fs-sm); font-weight:700}
.reco-premio button{width:100%; min-height:48px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:var(--dorado); color:var(--tinta); font-family:inherit; font-size:var(--fs-base); font-weight:800}
.caja-hoja > button.link{display:block; width:auto; min-height:44px; margin:var(--e2) auto 0; padding:0 var(--e3);
  background:none; color:var(--cyan); font-size:var(--fs-sm); text-decoration:underline}
/* El acceso de abajo, al lado de Ver precios y Dudas, en dorado. */
.vista-cliente .rapidas:has(#miReferido:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
.vista-cliente .rapidas #miReferido{color:var(--dorado); font-weight:700}

/* ================= seguir en la app (requisito de la app) ================= */
.mi-app-identidad{display:flex; align-items:center; gap:var(--e3); margin:var(--e3) 0 var(--e4); text-align:left}
.mi-app-identidad img{width:72px; height:72px; flex:0 0 72px; border-radius:var(--r-lg)}
.mi-app-identidad strong{display:block; font-size:var(--fs-md); color:var(--blanco)}
.mi-app-identidad span{display:block; font-size:var(--fs-sm); color:var(--texto)}
.vista-cliente .head > .avatar img{display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit}
/* "Continuá desde la app": el plan, los pasos de su equipo y el QR. */
.hoja-app .ha-plan{display:inline-block; margin:var(--e1) 0 var(--e3); padding:var(--e1) var(--e3); border-radius:var(--r-pill);
  background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--blanco); font-size:var(--fs-sm); font-weight:700}
.ha-pasos p{color:var(--texto)}
.ha-pasos b, #textoTramite b, #haAvisosTexto b{color:var(--blanco); font-weight:700}
.ha-lista{margin:0 0 var(--e3); padding:0; list-style:none; counter-reset:paso; display:grid; gap:var(--e2)}
.ha-lista li{counter-increment:paso; display:flex; gap:var(--e3); align-items:baseline; color:var(--texto); font-size:var(--fs-sm); line-height:1.45}
.ha-lista li > span{flex:1 1 auto; min-width:0}
.ha-lista li::before{content:counter(paso); flex:0 0 26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--rosa-fondo); border:1px solid var(--rosa-borde); color:var(--rosa-texto); font-weight:800; font-size:var(--fs-xs)}
.caja-hoja .ha-boton, .caja-hoja .ha-sec{width:100%; min-height:52px; margin-bottom:var(--e2); border-radius:var(--r-md); cursor:pointer;
  font-family:inherit; font-size:var(--fs-base); font-weight:700}
.caja-hoja .ha-boton{border:0; background:var(--boton); color:var(--blanco)}
.caja-hoja .ha-sec{background:transparent; border:1px solid var(--cyan-borde); color:var(--cyan)}
.caja-hoja .ha-boton:disabled, .caja-hoja .ha-sec:disabled{opacity:.5; cursor:default}
/* El QR va oscuro sobre blanco y con su margen: con los colores del chat
   (claro sobre oscuro) muchas camaras no lo leen. */
.ha-qr{width:min(220px, 70vw); margin:0 auto var(--e3); border-radius:var(--r-md); overflow:hidden; background:var(--blanco)}
.ha-qr svg{display:block; width:100%; height:auto}
.ha-qr .qr-fondo{fill:var(--blanco)}
.ha-qr .qr-modulos{fill:var(--negro)}
.ha-otra{display:flex; justify-content:center; margin-top:var(--e2)}
.ha-otra button.link{min-height:44px; padding:0 var(--e3); border:0; background:none; cursor:pointer; color:var(--suave);
  font-family:inherit; font-size:var(--fs-sm); text-decoration:underline; text-underline-offset:4px}

/* Bandeja: app, avisos, pago y excepcion en la ficha, y la ventanita que sale
   si "Pasar datos de pago" choca con el requisito. */
.ficha .ficha-app{margin-top:var(--e3)}
.ficha .ficha-app dd{text-align:left}
.ficha-excepcion{width:100%; min-height:44px; margin-top:var(--e2); padding:0 var(--e3); border-radius:var(--r-md); cursor:pointer;
  background:transparent; border:1px solid var(--rosa-borde); color:var(--rosa-texto); font-family:inherit; font-size:var(--fs-sm); font-weight:700}
.sin-app-excepcion{margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--linea)}
.sin-app-excepcion h4{margin:0 0 var(--e1); font-size:var(--fs-sm); color:var(--blanco)}
.modal .sin-app-excepcion textarea{min-height:72px}

/* Panel: mientras carga, la lista se atenua. */
#convs[aria-busy="true"]{opacity:.55; transition:opacity .2s}

/* Panel, pasar la demo: otros usuarios posibles debajo del campo. */
.opciones-usuario{display:flex; flex-wrap:wrap; gap:var(--e2); margin:calc(-1 * var(--e1)) 0 var(--e3)}
.opciones-usuario:empty{display:none}
.opciones-usuario .op-usuario{
  min-height:44px; padding:0 var(--e3); border-radius:var(--r-pill); cursor:pointer;
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde); color:var(--cyan);
  font-family:ui-monospace,'SFMono-Regular',Consolas,monospace; font-size:var(--fs-sm); font-weight:700;
}
@media (hover:hover){ .opciones-usuario .op-usuario:hover{filter:brightness(1.15)} }

/* Panel, respuestas automaticas: una tarjeta por texto. */
.modal .caja-ancha{max-width:720px; max-height:88vh; overflow-y:auto}
.lista-textos{display:grid; gap:var(--e4); margin-bottom:var(--e3)}
.texto-auto{background:var(--card); border:1px solid var(--linea); border-radius:var(--r-lg); padding:var(--e3) var(--e4)}
.texto-auto h4{font-size:var(--fs-base); font-weight:700; color:var(--blanco); margin:0 0 var(--e1)}
.texto-auto .ayuda{margin-bottom:var(--e2)}
.texto-auto .variables{font-family:ui-monospace,'SFMono-Regular',Consolas,monospace; font-size:var(--fs-xs); color:var(--cyan); margin:0 0 var(--e2)}
.texto-auto textarea{min-height:120px}
.texto-auto .pie{margin-top:var(--e2)}


/* Solo para lectores de pantalla. */
.solo-lector{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ================= bandeja: tema propio =================
   Solo la bandeja del equipo (soporte-panel.html, body.tema-bandeja). El chat
   del cliente y el panel de clientes siguen con la paleta del sitio. Va al
   final del archivo para ganarle a las reglas generales de arriba.

   Es una pantalla para trabajar horas: grises con un toque violeta de la
   marca, texto blanco roto, sin brillos ni degradés y sin mayusculas en las
   etiquetas. El rosa suave marca lo elegido y la accion principal. Los
   estados que piden hacer algo tienen su color:
     coral    sin responder
     azul     demo por crear
     ambar    pago esperando que se acredite la cuenta
     rojo     errores
   Lo informativo va tenue: sin cuenta en verde, origen en violeta o gris,
   app y avisos en gris.
   Contraste sobre #1a1820: texto 14:1, secundario 7:1, rosa 6,6:1, coral
   8:1, azul 9:1, ambar 10:1, borde de los controles 3,4:1; blanco sobre el
   boton 6,6:1. */
body.tema-bandeja{
  --negro:#131219; --oscuro:#16151d; --card:#1a1820; --card-alto:#22202b; --elegido:#2b2836;
  --texto:#e6e4ec; --blanco:#f2f0f6; --suave:#a5a1b3; --tinta:#131219;
  --linea:rgba(255,255,255,.07); --linea-suave:rgba(255,255,255,.04); --linea-fuerte:#6e6a7c;
  --boton:#9b3a64; --boton-hover:#87325a; --rosa-fuerte:#9b3a64;
  --rosa:#d886a8; --rosa-texto:#d886a8; --rosa-fondo:rgba(216,134,168,.12); --rosa-borde:rgba(216,134,168,.45);
  --violeta:#b8a8e4; --violeta-texto:#b8a8e4; --violeta-fuerte:#2f2a40;
  --violeta-fondo:rgba(184,168,228,.10); --violeta-borde:rgba(184,168,228,.35);
  --cyan:#a3bfdc; --cyan-fondo:rgba(163,191,220,.10); --cyan-borde:rgba(163,191,220,.35);
  --verde:#8ed3b4; --texto-verde:#8ed3b4; --verde-fondo:rgba(142,211,180,.10); --verde-borde:rgba(142,211,180,.35);
  --rojo:#ef97a8; --texto-rojo:#ef97a8; --rojo-fondo:rgba(239,151,168,.12); --rojo-borde:rgba(239,151,168,.45);
  --dorado:#e3c17a; --texto-dorado:#e3c17a; --dorado-fondo:rgba(227,193,122,.12); --dorado-borde:rgba(227,193,122,.4);
  /* Los estados que piden hacer algo. */
  --estado-responder:#ff6b6b; --estado-responder-fondo:rgba(255,107,107,.13);
  --estado-demo:#9cc0e0; --estado-demo-fondo:rgba(156,192,224,.14);
  --estado-pago:#e3c17a; --estado-pago-fondo:rgba(227,193,122,.14);
  --burbuja-cliente:#201e28; --borde-cliente:rgba(255,255,255,.06);
  --burbuja-equipo:#2d2433;  --borde-equipo:rgba(216,134,168,.16);
  --burbuja-otra:#201e28;    --burbuja-mia:#2d2433;
  --burbuja-auto:#1d1b25;    --borde-auto:rgba(163,191,220,.35);
  --burbuja-nota:#2a2519;    --borde-nota:rgba(227,193,122,.5);
  --borde-pago:rgba(142,211,180,.35);
  --glow-rosa:none;
  --f-titulo:var(--f-texto);
  --r-md:10px; --r-lg:12px; --r-xl:12px;
  font-size:.9375rem;   /* 15 px de base para el trabajo diario */
}
.tema-bandeja :focus-visible{outline:2px solid var(--rosa); outline-offset:2px}
.tema-bandeja .conv:focus-visible{outline-offset:-2px}
.tema-bandeja button{font-family:inherit}
.tema-bandeja .avatar{font-weight:600}
.tema-bandeja .avatar.cli{background:var(--card-alto); border:1px solid var(--linea); color:var(--suave)}
.tema-bandeja .modal h3, .tema-bandeja .bandeja .titulo h2{font-weight:600; letter-spacing:0}
.tema-bandeja .modal h3{font-size:var(--fs-md)}
.tema-bandeja .bandeja .titulo h2{font-size:var(--fs-base)}
.tema-bandeja .modal .ayuda, .tema-bandeja .modal label{font-size:var(--fs-sm)}
.tema-bandeja .modal .guardar:hover, .tema-bandeja .barra .enviar:hover{background:var(--boton-hover)}
.tema-bandeja .modal .caja{background:var(--card-alto); border-color:var(--linea-fuerte)}
.tema-bandeja .punto{box-shadow:none}

/* Etiquetas: sin mayusculas ni rellenos fuertes. */
.tema-bandeja .sin-cuenta, .tema-bandeja .conv .pago-pendiente,
.tema-bandeja .conv .demo-pendiente, .tema-bandeja .conv .marca, .tema-bandeja .conv .marca-origen,
.tema-bandeja .chip-origen, .tema-bandeja .chip-premio, .tema-bandeja .auto, .tema-bandeja .pago .dato .et, .tema-bandeja .pago .titular-cuenta .et{
  text-transform:none; letter-spacing:0; font-weight:600;
}
/* Lo que pide hacer algo: fondo suave de su color. */
.tema-bandeja .conv .demo-pendiente{background:var(--estado-demo-fondo); border:0; color:var(--estado-demo)}
.tema-bandeja .conv .pago-pendiente{background:var(--estado-pago-fondo); border:0; color:var(--estado-pago)}
/* Lo informativo: solo el texto con color, sin fondo. */
.tema-bandeja .sin-cuenta{background:transparent; border:1px solid var(--verde-borde); color:var(--verde)}
.tema-bandeja .conv .marca, .tema-bandeja .auto, .tema-bandeja .conv .demo-pendiente.sin-equipo{
  background:transparent; border:1px solid var(--linea); color:var(--suave);
}
.tema-bandeja .conv .marca-origen, .tema-bandeja .chip-origen{background:transparent; border:1px solid var(--linea); color:var(--suave)}
.tema-bandeja .conv .marca-origen.og-campania, .tema-bandeja .chip-origen.og-campania{color:var(--violeta); border-color:var(--violeta-borde); background:transparent}
.tema-bandeja .conv .marca-origen.og-reco, .tema-bandeja .chip-origen.og-reco{color:var(--verde); border-color:var(--verde-borde); background:transparent}
.tema-bandeja .chip-premio{background:transparent}
/* La rayita de la izquierda: demo y pago (el origen ya no la usa). */
.tema-bandeja .conv.con-origen:not(.con-pago):not(.activa){box-shadow:none}
.tema-bandeja .conv.con-demo:not(.con-pago):not(.activa){box-shadow:inset 3px 0 0 var(--estado-demo)}

/* Sin responder: toda la fila en rojo hasta que alguien le conteste a mano o
   la marque leida (clic derecho). La barra gana sobre la de pago, demo u
   origen: es lo primero que hay que ver. */
.conv.sin-resp{position:relative; background:var(--estado-responder-fondo, var(--rojo-fondo))}
.conv.sin-resp.activa{background:var(--rosa-fondo)}
.conv.sin-resp::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--estado-responder, var(--rojo))}
.conv.sin-resp .nom-txt{font-weight:800; color:var(--blanco)}
.conv.sin-resp .cuando{color:var(--estado-responder, var(--rojo)); font-weight:700}
/* Clientes (con cuenta): el nombre sobre fondo violeta, distinto de las demos
   y de los que todavia no compraron. Tambien arriba, en la conversacion. */
.conv.es-cli .nom-txt, .head .quien.es-cli{
  padding:1px var(--e2); border-radius:var(--r-sm); color:var(--blanco);
  background:var(--violeta-fuerte); box-shadow:inset 0 0 0 1px var(--violeta-borde);
}
.head .quien.es-cli{display:inline-block}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Menu del clic derecho en la lista de conversaciones. */
.menu-conv{position:fixed; z-index:70; min-width:220px; padding:var(--e1); border-radius:var(--r-md);
  background:var(--card-alto, var(--card)); border:1px solid var(--linea-fuerte); box-shadow:0 8px 24px rgba(0,0,0,.45)}
.menu-conv[hidden], .menu-conv button[hidden]{display:none}
.menu-conv button{display:block; width:100%; min-height:44px; padding:0 var(--e3); text-align:left; border:0;
  border-radius:var(--r-sm); background:transparent; color:var(--texto); font-family:inherit; font-size:var(--fs-sm); cursor:pointer}
.menu-conv button:hover, .menu-conv button:focus-visible{background:rgba(255,255,255,.06)}
/* Datos de pago, segundo paso: el plan. */
.menu-conv .menu-tit{padding:var(--e2) var(--e3) var(--e1); font-size:var(--fs-xs); font-weight:600; color:var(--suave)}
.menu-conv button.plan{display:flex; align-items:center; gap:var(--e2)}
.menu-conv button.plan .nom{font-weight:600}
.menu-conv button.plan .pp{margin-left:auto; padding-left:var(--e3); font-size:var(--fs-xs); color:var(--suave); white-space:nowrap}
.menu-conv button.plan .pidio{font-size:var(--fs-xs); padding:1px var(--e2); border-radius:var(--r-pill);
  background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--texto-verde); white-space:nowrap}
.menu-conv button.plan.sin{color:var(--suave)}
.menu-conv button.volver{min-height:38px; color:var(--suave); font-size:var(--fs-xs); border-top:1px solid var(--linea); border-radius:0}
.tema-bandeja .conv.con-pago:not(.activa){box-shadow:inset 3px 0 0 var(--estado-pago)}

/* Encabezado de la conversacion: botones planos. Contratar/acreditar en
   verde suave, crear la demo en el azul de la demo. */
.tema-bandeja .head .acciones button{background:var(--card); border-color:var(--linea-fuerte); color:var(--texto); font-size:var(--fs-sm)}
.tema-bandeja .head .acciones .destacado, .tema-bandeja .head .acciones .acreditar{
  background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--verde); box-shadow:none; transform:none;
}
.tema-bandeja .head .acciones .demo-boton{background:var(--estado-demo-fondo); border:1px solid var(--cyan-borde); color:var(--estado-demo); box-shadow:none}
.tema-bandeja .head .acciones .destacado:hover, .tema-bandeja .head .acciones .demo-boton:hover{box-shadow:none; transform:none}
.tema-bandeja .opciones-usuario .op-usuario{background:var(--card); border-color:var(--linea-fuerte); color:var(--texto)}
.tema-bandeja .texto-auto .variables{color:var(--cyan)}
.tema-bandeja .modal .guardar.ok{background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--verde)}
.tema-bandeja .volumen input[type=range]::-webkit-slider-thumb{box-shadow:none}
.tema-bandeja .msg .cargando .progreso::after{background:var(--rosa)}

/* Separador de dia dentro del chat, como en WhatsApp. */
.tema-bandeja .dia{
  position:sticky; top:var(--e2); z-index:1; margin:var(--e3) 0;
  padding:4px var(--e3); border-radius:var(--r-md);
  background:var(--card-alto); border:1px solid var(--linea); color:var(--suave);
  font-size:.8125rem; font-weight:600; letter-spacing:0; text-transform:none;
}
/* El de un dia anterior, con el siguiente pegado encima (taparDias). */
.tema-bandeja .dia.tapado{visibility:hidden}

/* Lista de 360 px y la conversacion. Abajo de la lista, como siempre, quien
   esta conectado, la firma y los iconos de las opciones. */
.tema-bandeja .panel{grid-template-columns:360px minmax(0,1fr)}
.tema-bandeja .perfil .icono{background:var(--card); border-color:var(--linea-fuerte); color:var(--texto)}
.tema-bandeja .perfil .icono:hover{background:var(--card-alto); border-color:var(--rosa)}
.tema-bandeja .perfil .firma-link:hover{color:var(--rosa)}

/* Filtros: busqueda y "Filtros" en una fila; origen y fechas, plegados. */
.fila-busca{display:flex; gap:var(--e2)}
.tema-bandeja .filtros input[type=search]{flex:1 1 auto; min-width:0; min-height:44px; border-color:var(--linea-fuerte); background:var(--card)}
.btn-filtros{
  flex:0 0 auto; min-height:44px; padding:0 var(--e4); border-radius:var(--r-pill); cursor:pointer;
  background:var(--card); border:1px solid var(--linea-fuerte); color:var(--texto); font-size:var(--fs-sm); font-weight:600;
}
.btn-filtros.activos{background:var(--rosa-fondo); border-color:var(--rosa-borde); color:var(--texto)}
.tema-bandeja .pestanas button{min-height:44px; padding:0 var(--e1); font-size:var(--fs-sm); border-color:var(--linea-fuerte); border-radius:var(--r-md)}
.tema-bandeja .pestanas button{background:transparent; color:var(--suave)}
.tema-bandeja .pestanas button.on{background:var(--rosa-fondo); border-color:var(--rosa-borde); color:var(--texto); font-weight:600}
.tema-bandeja .filtros-mas select, .tema-bandeja .filtros-mas input[type=date], .tema-bandeja .filtros-mas button{
  min-height:44px; font-size:var(--fs-sm); border-color:var(--linea-fuerte); background:var(--card); border-radius:var(--r-md);
}
.tema-bandeja .total-filtro{font-size:var(--fs-sm); color:var(--suave)}

/* Filas: nombre 15 px, ultimo mensaje 14, datos chicos 13. */
.tema-bandeja .conv{padding:var(--e3) var(--e4)}
.tema-bandeja .conv .nom{font-size:var(--fs-base)}
.tema-bandeja .conv .prev{font-size:var(--fs-sm)}
.tema-bandeja .conv .cuando{font-size:.8125rem}
.tema-bandeja .conv:hover{background:var(--card)}
.tema-bandeja .conv.activa{background:var(--elegido); box-shadow:inset 3px 0 0 var(--rosa)}

/* En el celular: una vista por vez. */
@media (max-width:820px){
  .tema-bandeja .panel{grid-template-columns:minmax(0,1fr)}
}

/* ================= bandeja: quien esta viendo, pestañas y ficha (2026-10) =================
   "Tomar" ya no existe: arriba de la conversacion y en la lista, un 👁️ con
   quien mas del equipo la tiene abierta. Tres pestañas (Sin responder,
   Pendientes, Todas). Y la ficha del cliente: tercera columna en la PC,
   panel encima del chat con "Ficha" en pantallas mas chicas. */

/* Pestaña "Sin responder": cuantas hay en toda la bandeja. */
.pestanas .num-pestana{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 var(--e1); margin-left:var(--e1);
  border-radius:var(--r-pill); background:var(--estado-responder, var(--rojo)); color:var(--tinta);
  font-size:var(--fs-xs); font-weight:700; line-height:1;
}
.pestanas .num-pestana:empty{display:none}

/* Fila de la lista: quien mas la tiene abierta, y si esta cerrada (en "Todas"). */
.conv .cerrada{
  display:inline-block; margin-left:var(--e1); padding:0 var(--e1); border-radius:var(--r-sm);
  border:1px solid var(--linea-fuerte); color:var(--suave); font-size:var(--fs-xs); font-weight:600; vertical-align:1px;
}

/* Encabezado: nombre con el estado del caso, y una linea con los datos. */
.fila-nombre{flex-wrap:wrap}
.estado-caso{
  display:inline-flex; align-items:center; padding:2px var(--e2); border-radius:var(--r-pill); white-space:nowrap;
  border:1px solid var(--linea-fuerte); color:var(--suave); font-size:var(--fs-xs); font-weight:600;
}
.estado-caso.pago{background:var(--estado-pago-fondo, var(--dorado-fondo)); border-color:var(--dorado-borde); color:var(--estado-pago, var(--dorado))}
.estado-caso.demo{background:var(--estado-demo-fondo, var(--cyan-fondo)); border-color:var(--cyan-borde); color:var(--estado-demo, var(--cyan))}
.head-meta{display:flex; flex-wrap:wrap; align-items:center; row-gap:var(--e1); margin-top:var(--e1); font-size:var(--fs-sm); color:var(--suave)}
.head-meta:empty{display:none}
.head-meta > span{white-space:nowrap}
.head-meta > span + span::before{
  content:''; display:inline-block; width:1px; height:.9em; margin:0 var(--e3); vertical-align:-.1em; background:var(--linea-fuerte);
}
.head-meta .viendo.otros, .head-meta .vencida{color:var(--dorado); font-weight:600}
.pais-cliente{font-size:var(--fs-xs); color:var(--suave); line-height:1.5; margin:4px 0 0; overflow-wrap:anywhere}
.head-meta .sin-cuenta-meta{color:var(--verde)}

/* Chats anteriores del mismo cliente, entre el encabezado y el hilo. */
.anteriores{
  display:flex; align-items:center; gap:var(--e2); padding:var(--e2) var(--e3);
  border-bottom:1px solid var(--linea); background:var(--card-alto);
  font-size:var(--fs-xs); color:var(--suave); white-space:nowrap;
  overflow-x:auto; scrollbar-width:thin; scrollbar-color:#2a2a4a transparent;
}
.anteriores button{
  position:relative; flex:0 0 auto; padding:2px var(--e2); border-radius:var(--r-sm);
  border:1px solid var(--linea-fuerte); background:transparent; color:var(--texto);
  font-family:inherit; font-size:var(--fs-xs); font-weight:700; cursor:pointer;
}
.anteriores button::after{content:""; position:absolute; inset:-10px -4px}
.anteriores button:hover, .anteriores button:focus-visible{border-color:var(--cyan); color:var(--blanco)}
.anteriores details{width:100%; min-width:0}
.anteriores summary{cursor:pointer; min-height:44px; padding:12px 0; white-space:normal}
.anteriores .lista-historial{display:flex; gap:var(--e2); padding:var(--e2) 0; overflow-x:auto}
.anteriores .lista-historial button{min-height:44px; padding:var(--e2); white-space:nowrap}
.modal .caja-anterior{display:flex; flex-direction:column}
.hilo-anterior{flex:1 1 auto; min-height:240px; max-height:60vh; border:1px solid var(--linea); border-radius:var(--r-md)}
/* La accion que toca (acreditar un pago, crear una demo), resaltada. */
.tema-bandeja .head .acciones button.principal{background:var(--boton); border-color:transparent; color:var(--blanco)}
.tema-bandeja .head .acciones button.principal:hover{background:var(--boton-hover, var(--boton)); color:var(--blanco)}

/* La ficha. */
.ficha{
  display:flex; flex-direction:column; gap:var(--e3); min-width:0; min-height:0; overflow-y:auto;
  padding:var(--e3); background:var(--negro); border-left:1px solid var(--linea);
}
.ficha-top{display:flex; align-items:center; justify-content:space-between; gap:var(--e2); min-height:44px; padding:0 var(--e1)}
.ficha-top h2{font-size:var(--fs-base); font-weight:600; color:var(--blanco)}
.cerrar-ficha{
  width:44px; height:44px; flex:0 0 auto; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--linea-fuerte); color:var(--texto); font-family:inherit; font-size:var(--fs-lg);
}
.ficha .tarjeta{background:var(--card); border:1px solid var(--linea); border-radius:var(--r-lg); padding:var(--e4)}
.ficha .tarjeta h3{margin-bottom:var(--e3); font-size:var(--fs-base); font-weight:600; color:var(--blanco)}
.ficha-quien{display:flex; align-items:center; gap:var(--e3); margin-bottom:var(--e3)}
.ficha-quien .avatar{width:56px; height:56px; font-size:var(--fs-lg)}
.ficha-quien-datos{min-width:0}
.ficha-nombre{font-size:var(--fs-md); font-weight:700; line-height:1.25; color:var(--blanco); overflow-wrap:anywhere}
.ficha-desde{margin-top:2px; font-size:var(--fs-sm); color:var(--suave)}
.ficha-datos{display:grid; grid-template-columns:auto minmax(0,1fr); font-size:var(--fs-sm)}
.ficha-datos dt, .ficha-datos dd{padding:var(--e2) 0; border-top:1px solid var(--linea)}
.ficha-datos dt{padding-right:var(--e3); color:var(--suave)}
.ficha-datos dd{margin:0; text-align:right; color:var(--texto); overflow-wrap:anywhere}
.ficha-datos dd.vencida{color:var(--dorado); font-weight:600}
.ficha-datos .reintentar{min-height:32px; padding:0 var(--e3); border-radius:var(--r-pill); cursor:pointer; position:relative;
  background:transparent; border:1px solid var(--linea-fuerte); color:var(--texto); font-family:inherit; font-size:var(--fs-sm)}
.ficha .ficha-wpp{margin-top:0; padding:var(--e2) 0; border-top:1px solid var(--linea); font-size:var(--fs-sm)}
.ficha .fila-origen{margin-top:0; padding-top:var(--e2); border-top:1px solid var(--linea)}
/* Invitar app / push: uno debajo del otro; el ✓ verde es que ya lo tiene. */
.ficha-invitar{display:flex; flex-direction:column; gap:var(--e2); margin-top:var(--e3)}
.ficha-invitar button{
  display:flex; align-items:center; justify-content:center; gap:var(--e2); width:100%; min-height:44px;
  padding:0 var(--e3); border-radius:var(--r-md); cursor:pointer;
  background:var(--card-alto); border:1px solid var(--linea-fuerte); color:var(--blanco);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
}
.ficha-invitar button.tiene{border-color:var(--verde-borde)}
.ficha-invitar .tilde{color:var(--verde); font-weight:800}

/* Pago o demo esperando. */
.ficha .caso.pago{background:var(--estado-pago-fondo, var(--dorado-fondo)); border-color:var(--dorado-borde)}
.ficha .caso.demo{background:var(--estado-demo-fondo, var(--cyan-fondo)); border-color:var(--cyan-borde)}
.ficha .caso h3{margin-bottom:var(--e1)}
.ficha .caso.pago h3{color:var(--estado-pago, var(--dorado))}
.ficha .caso.demo h3{color:var(--estado-demo, var(--cyan))}
.ficha .caso p{font-size:var(--fs-sm); line-height:1.5; color:var(--texto)}
.ficha .ver-comprobante{
  width:100%; min-height:44px; margin-top:var(--e3); border-radius:var(--r-md); cursor:pointer;
  background:var(--card-alto); border:1px solid var(--linea-fuerte); color:var(--texto);
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}

/* Acciones dentro de la ficha (en la PC): una lista, la que toca arriba. */
.ficha .acciones{display:flex; flex-direction:column; gap:var(--e2)}
.ficha .acciones button{
  position:relative; display:flex; align-items:center; gap:var(--e2); width:100%; min-height:44px;
  padding:0 var(--e6) 0 var(--e3); border-radius:var(--r-md); cursor:pointer; text-align:left;
  background:var(--card-alto); border:1px solid var(--linea-fuerte); color:var(--texto);
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}
.ficha .acciones button::after{
  content:'\203A'; position:absolute; right:var(--e3); top:50%; transform:translateY(-55%);
  font-size:var(--fs-lg); line-height:1; color:var(--suave);
}
.ficha .acciones .ico{font-size:var(--fs-base)}
.ficha .acciones button.principal{order:-1; background:var(--boton); border-color:transparent; color:var(--blanco)}
.ficha .acciones button.principal::after{color:var(--blanco)}
.ficha .cerrar-caso{
  flex:0 0 auto; width:100%; min-height:44px; border-radius:var(--r-md); cursor:pointer;
  background:transparent; border:1px solid var(--linea-fuerte); color:var(--texto);
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}
@media (hover:hover){
  .ficha .acciones button:hover, .ficha .ver-comprobante:hover, .cerrar-ficha:hover, .ficha .cerrar-caso:hover,
  .ficha-invitar button:hover{border-color:var(--rosa)}
  .invitar .si:hover{filter:brightness(1.15)}
  .ficha .acciones button.principal:hover{background:var(--boton-hover, var(--boton))}
}

/* Notas internas: las ultimas, y una linea para sumar otra. */
.lista-notas{list-style:none; display:flex; flex-direction:column; gap:var(--e2); margin-bottom:var(--e3)}
.lista-notas li{padding:var(--e2) var(--e3); border-radius:var(--r-md); background:var(--burbuja-nota); border:1px dashed var(--borde-nota)}
.lista-notas .txt{font-size:var(--fs-sm); line-height:1.45; color:var(--texto-dorado); white-space:pre-wrap; overflow-wrap:anywhere}
.lista-notas .de{display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--suave)}
.lista-notas li.vacia{padding:0; background:none; border:0; font-size:var(--fs-sm); color:var(--suave)}
.nueva-nota{display:flex; gap:var(--e2)}
.nueva-nota input{
  flex:1 1 auto; min-width:0; min-height:44px; padding:0 var(--e3); border-radius:var(--r-md);
  background:var(--negro); border:1px solid var(--linea-fuerte); color:var(--texto); font-family:inherit; font-size:var(--fs-sm);
}
.nueva-nota button{
  flex:0 0 auto; min-height:44px; padding:0 var(--e4); border-radius:var(--r-md); cursor:pointer;
  background:var(--card-alto); border:1px solid var(--linea-fuerte); color:var(--texto);
  font-family:inherit; font-size:var(--fs-sm); font-weight:600;
}

/* PC (desde 1280 px): la ficha es la tercera columna. Mas chico: se abre
   encima del chat con el boton "Ficha" y se cierra con ×, Escape o tocando
   afuera. */
.btn-ficha{display:none}
@media (max-width:1279.98px){
  .btn-ficha{
    display:inline-flex; align-items:center; flex:0 0 auto; min-height:44px; padding:0 var(--e4);
    border-radius:var(--r-pill); cursor:pointer; background:var(--card); border:1px solid var(--linea-fuerte);
    color:var(--texto); font-family:inherit; font-size:var(--fs-sm); font-weight:600;
  }
  .btn-ficha[aria-expanded="true"]{background:var(--rosa-fondo); border-color:var(--rosa-borde)}
  .ficha{
    position:fixed; top:0; right:0; bottom:0; z-index:35; width:min(380px, 100%);
    border-left:1px solid var(--linea-fuerte); box-shadow:var(--sombra-elev);
    transform:translateX(100%); visibility:hidden;
  }
  .ficha.abierta{transform:none; visibility:visible}
}
@media (min-width:1280px){
  .cerrar-ficha{display:none}
  .tema-bandeja .panel.con-ficha{grid-template-columns:360px minmax(0,1fr) 340px}
}
@media (prefers-reduced-motion:no-preference){
  .ficha{transition:transform .2s ease, visibility .2s}
}
/* Celular: el encabezado sin el avatar (ya esta la flecha) y los datos mas
   chicos, para que no se coma media pantalla; la ficha, de lado a lado. */
@media (max-width:560px){
  .head #inicial{display:none}
  .tema-bandeja .head > div.head-datos{flex:1 1 calc(100% - 56px)}   /* "Ficha" baja a la fila de los botones */
  .head-meta{font-size:var(--fs-xs)}
  .head-meta > span + span::before{margin:0 var(--e2)}
  .tema-bandeja .head .acciones button{font-size:var(--fs-xs)}
  .ficha{width:100%; border-left:0}
}


/* Pago del plan elegido: misma fuente PLANES, sin checkout externo. */
.pago.pago-v2{width:340px;padding:0;color:#e8e8ff}
.pago-v2 .pago-cabecera{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pago-v2 .pago-plan{font-size:13px;font-weight:800;letter-spacing:.03em}
.pago-v2 .pago-cambiar{min-height:44px;padding:4px 0 4px 8px;border:0;background:none;color:#00d4ff;font:600 12px 'Inter',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pago-v2 .pago-regalo{display:inline-block;margin:0 0 10px;padding:5px 9px;border:1px solid rgba(0,230,118,.24);border-radius:20px;background:rgba(0,230,118,.08);color:#00e676;font-size:12px;font-weight:700}
.pago-v2 .pago-importe{font-size:31px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.18;letter-spacing:-.035em;overflow-wrap:anywhere}
.pago-v2 .pago-incluye{margin-top:8px;font-size:13px;line-height:1.45;font-weight:600}
.pago-v2 .pago-aclara{font-size:12px;line-height:1.45;color:#a5a5c8;margin-top:7px}
.pago-v2 .pago-guia a{color:#00d4ff;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.pago-v2 .pago-catalogo{padding:12px 0;font-size:12px;line-height:1.45;color:#a5a5c8;border-bottom:1px solid rgba(255,255,255,.08)}
.pago-v2 .pago-pasos{display:flex;justify-content:space-between;gap:6px;margin:14px 0;padding:0;list-style:none}
.pago-v2 .pago-pasos li{display:flex;align-items:center;gap:5px;font-size:12px;color:#a5a5c8}
.pago-v2 .pago-pasos .actual{color:#00e676;font-weight:700}
.pago-v2 .pago-numero{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border:1px solid rgba(255,255,255,.2);border-radius:50%;font-size:12px}
.pago-v2 .actual .pago-numero{border-color:rgba(0,230,118,.4);background:rgba(0,230,118,.08)}
.pago-v2 .titular-cuenta{padding:12px 0;margin:0;border:0;border-top:1px solid rgba(255,255,255,.08);background:transparent;border-radius:0}
.pago-v2 .titular-cuenta .et,.pago-v2 .pago-etiqueta{font-size:12px;color:#a5a5c8;letter-spacing:.07em}
.pago-v2 .titular-cuenta .nombre{font-size:15px;font-weight:800;margin-top:4px}
.pago-v2 .pago-cuenta{padding:12px 10px;background:#0a0a16;border:1px solid rgba(255,255,255,.08);border-radius:12px}
.pago-v2 .dato{padding:8px 0;gap:6px;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;margin:0;background:none}
.pago-v2 .dato .et{font-size:12px;letter-spacing:0;color:#a5a5c8}
.pago-v2 .dato .vl{font-size:13px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:400;line-height:1.5}
.pago-v2 .pago-cvu .vl{white-space:nowrap;overflow-wrap:normal;word-break:normal;overflow-x:auto}
.pago-v2 .dato button{padding:0 8px;min-width:54px;min-height:44px;border-radius:8px;font-size:12px}
.pago-v2 .pago-exacto{margin-top:14px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pago-v2 .adjuntar{min-height:48px;margin-top:14px;padding:12px 8px;background:linear-gradient(135deg,#e0115f,#a010e0);color:white;font-size:13px;line-height:1.4}
.pago-v2 .pago-confianza{margin-top:12px;color:#a5a5c8;font-size:12px;line-height:1.45}
.pago-v2 .pago-vigencia{font-size:12px}
.vista-cliente .msg:has(> .pago-v2){max-width:100%;border-color:rgba(0,230,118,.24);border-radius:16px}

/* Pantalla completa del cliente: columna legible y acciones secundarias discretas. */
body.vista-cliente{max-width:860px;margin:0 auto;background:#0a0a16;border-left:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06);--suave:#a5a5c8}
.vista-cliente .head{min-height:66px;gap:10px;padding:8px 16px;background:#101020;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:nowrap}
.vista-cliente .head>.avatar{width:36px;height:36px;min-width:36px;flex:0 0 36px}
.vista-cliente .head .quien{font:800 13px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.1em}
.vista-cliente .head .estado{font-size:12px;margin-top:4px;line-height:1.35}
.vista-cliente .cliente-guia{display:flex;align-items:center;min-height:44px;margin-left:auto;padding:0 10px;border:1px solid rgba(0,212,255,.18);border-radius:10px;color:#00d4ff;text-decoration:none;font-size:12px;font-weight:600;line-height:1.35;max-width:140px}
.vista-cliente .cliente-opciones{position:relative;flex:0 0 44px}
.vista-cliente .cliente-opciones summary{display:grid;place-items:center;width:44px;min-height:44px;list-style:none;cursor:pointer;border:1px solid rgba(255,255,255,.1);border-radius:10px;letter-spacing:2px;font-size:16px}
.vista-cliente .cliente-opciones summary::-webkit-details-marker{display:none}
.vista-cliente .cliente-opciones .acciones{position:absolute;right:0;top:52px;z-index:30;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px;width:205px;max-width:calc(100vw - 24px);padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#12122a;box-shadow:0 14px 40px #0008}
.vista-cliente .cliente-opciones button{min-height:44px;padding:10px 12px;justify-content:flex-start;font-size:13px;border-radius:8px;text-align:left}
.vista-cliente .hilo{padding:22px 24px 16px;background:#0a0a16;gap:6px;overscroll-behavior:contain}
.vista-cliente .dia{background:none;padding:8px 14px;color:#a5a5c8;font-size:12px;letter-spacing:.12em;margin:2px 0 12px}
.vista-cliente .msg{max-width:min(88%,580px);padding:12px 14px 8px;border-radius:14px 14px 14px 4px;box-shadow:none}
.vista-cliente .msg.mia{border-radius:14px 14px 4px 14px;background:#30132f;border-color:rgba(255,45,120,.22)}
.vista-cliente .msg:not(.mia){background:#17172f;border-color:rgba(150,150,255,.13)}
.vista-cliente .msg .txt{font-size:15px;line-height:1.55}
.vista-cliente .msg .firma{font-size:12px;font-weight:600;margin-bottom:6px}
.vista-cliente .msg .pie{font-size:12px;margin-top:6px}
.vista-cliente .msg:has(>.auto){background:#0e1c2b;border-style:solid;border-color:rgba(0,212,255,.16)}
.vista-cliente .auto{padding:0;margin-bottom:7px;border:0;background:none;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#a5a5c8}
.vista-cliente .auto::before{content:none}
.vista-cliente .msg:has(>.pago-v2){max-width:100%;background:#12122a;border-color:rgba(0,230,118,.24);box-shadow:none;padding:12px 14px}
.vista-cliente .msg:has(>.invitar){background:#12122a;border-color:rgba(255,255,255,.12);box-shadow:none}
.vista-cliente .invitar .titulo{font-family:inherit;font-size:15px;line-height:1.4}
.vista-cliente .invitar .si{background:transparent;color:#00d4ff;border:1px solid rgba(0,212,255,.3);min-height:44px}
.vista-cliente .avisos{margin:10px 16px 0;padding:12px;box-shadow:none;border-style:solid}
.vista-cliente .avisos .campana{animation:none}
.vista-cliente .rapidas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;background:#0a0a16;padding:4px 16px 0;gap:8px}
.vista-cliente .rapidas button{min-width:0;min-height:44px;white-space:normal;line-height:1.3;padding:8px;font-size:var(--fs-sm);border:0;border-radius:var(--r-sm);background:transparent;color:var(--texto)}
.vista-cliente .acciones-rapidas{background:#0a0a16;padding:6px 16px 8px;gap:8px;border-top:0}
.vista-cliente .acciones-rapidas button{border-radius:var(--r-md);min-height:48px;font-size:var(--fs-sm);background:var(--card);border-color:var(--linea-fuerte);color:var(--texto)}
.vista-cliente .acciones-rapidas .contratar{background:var(--boton);color:var(--blanco);border-color:transparent}
.vista-cliente .acciones-rapidas .humano{color:var(--cyan);border-color:var(--cyan-borde)}
.vista-cliente .dudas-lista{margin:var(--e4) 0}
.vista-cliente .dudas-lista details{border-bottom:1px solid var(--linea-fuerte)}
.vista-cliente .dudas-lista summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);min-height:52px;padding:var(--e3) 0;cursor:pointer;list-style:none;font-size:var(--fs-base);font-weight:600;line-height:1.4}
.vista-cliente .dudas-lista summary::-webkit-details-marker{display:none}
.vista-cliente .dudas-lista summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.vista-cliente .dudas-lista summary::after{content:'+';flex-shrink:0;color:var(--cyan);font-size:var(--fs-lg);font-weight:400}
.vista-cliente .dudas-lista details[open] summary::after{content:'−'}
.vista-cliente .dudas-lista .txt{padding-bottom:var(--e4);color:var(--suave);font-size:var(--fs-base);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.vista-cliente .dudas-lista a{color:var(--cyan)}
@media(hover:hover){
 .vista-cliente .rapidas button:hover{background:var(--card)}
 .vista-cliente .acciones-rapidas .contratar:hover{background:var(--boton);filter:brightness(1.12)}
}
.vista-cliente .barra{padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#101020;border-top:1px solid rgba(255,255,255,.08)}
.vista-cliente .caja-escribir{background:#17172f;border-color:rgba(255,255,255,.16)}
.vista-cliente .entrada h1{font-family:'Inter',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.04em}
@media(max-width:600px){
 .vista-cliente .head{padding:6px 10px;gap:8px}
 .vista-cliente .cliente-guia{max-width:100px;padding:0 8px}
 .vista-cliente .head .estado{max-width:145px}
 .vista-cliente .hilo{padding:16px 10px 12px}
 .vista-cliente .msg{max-width:94%;padding:10px 12px 7px}
 .vista-cliente .msg:has(>.pago-v2){padding:10px}
 .vista-cliente .rapidas{padding:4px 10px 0}
 .vista-cliente .acciones-rapidas{padding:6px 10px 8px}
 .vista-cliente .barra{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
}

/* Acceso permanente a Mi STELLA: acompaña el hilo sin exigir instalar. */
.vista-cliente .head .quien{font-size:var(--fs-base);letter-spacing:-.02em;text-transform:none}
.vista-cliente .head>div:not(.avatar){min-width:0}
.vista-cliente .cliente-guia{font-size:var(--fs-xs);gap:var(--e2)}
.vista-cliente .cliente-guia svg{width:16px;height:16px;flex-shrink:0}
.vista-cliente .cliente-app{display:flex;align-items:center;gap:var(--e3);flex-shrink:0;padding:var(--e3) var(--e4);background:var(--cyan-fondo);border-bottom:1px solid var(--cyan-borde)}
.cliente-app img{flex:0 0 40px;width:40px;height:40px;object-fit:contain;border-radius:var(--r-sm)}
.cliente-app-texto{flex:1;min-width:0}
.cliente-app-texto strong{display:block;font-size:var(--fs-sm);line-height:1.35;color:var(--blanco)}
.cliente-app-texto p{margin-top:var(--e1);font-size:var(--fs-xs);line-height:1.4;color:var(--suave);overflow-wrap:anywhere}
.cliente-app button{display:flex;align-items:center;justify-content:center;gap:var(--e2);min-height:44px;max-width:100%;padding:var(--e2) var(--e3);border:1px solid var(--cyan-borde);border-radius:var(--r-md);background:var(--card);color:var(--cyan);font:700 var(--fs-sm)/1.3 var(--f-texto);cursor:pointer}
.cliente-app button svg{width:18px;height:18px;flex-shrink:0}
.vista-cliente .cliente-app-lista{background:var(--verde-fondo);border-bottom-color:var(--verde-borde)}
.vista-cliente .hilo{scroll-padding-block:var(--e4)}
.vista-cliente .msg .txt{font-size:var(--fs-base);line-height:1.6}
@media(max-width:480px){
 .vista-cliente .cliente-app{padding:var(--e2) var(--e3);gap:var(--e2);flex-wrap:wrap}
 .cliente-app img{flex-basis:32px;width:32px;height:32px}
 .cliente-app-texto{flex-basis:8rem}
 .cliente-app button{margin-left:auto}
}
@media(max-height:540px){
 .cliente-app img,.cliente-app-texto p{display:none}
 .vista-cliente .cliente-app{padding-block:var(--e1)}
}

/* Mi STELLATV, la app de Play Store (.tienda en <html>, ver TIENDA en
   soporte.html): solo soporte para clientes. */
.dudas-entrada{display:none}
.tienda .dudas-entrada{display:block; margin:var(--e3) auto 0}
.tienda .soy, .tienda #tarea, .tienda #cambiarOpcion, .tienda .cartel-reco, .tienda #resumenPlan,
.tienda .volver, .tienda .cliente-guia, .tienda #contratarPlan, .tienda #renovarPlan,
.tienda #btnInstalar, .tienda #btnRecomendar, .tienda #miReferido, .tienda #verPrecios,
.tienda #planesDesdeDudas, .tienda #accesoApp, .tienda #pedirDemo{display:none !important}

/* ================= citar, escribiendo y letra grande (24/10/2026) =================
   Todo en rem/em: con la letra grande de Android (Tamaño de fuente 130-200 %)
   los px fijos dejaban el texto enorme con 2 px entre burbujas, la hora y la
   firma diminutas y el relleno apretado ("todo demasiado junto"). */

/* Separación entre burbujas y relleno que crecen con la letra. */
.hilo, .vista-cliente .hilo{gap:.25rem}
.msg{padding:.55em .8em .35em}
.msg + .msg{margin-top:.125rem}
.msg.mia + .msg:not(.mia), .msg:not(.mia) + .msg.mia{margin-top:.75rem}
.vista-cliente .msg{padding:.7em .85em .45em}
.vista-cliente .msg .firma, .vista-equipo .msg .firma{font-size:var(--fs-xs); margin-bottom:.35em}
.vista-cliente .msg .pie, .vista-equipo .msg .pie{font-size:var(--fs-xs); margin-top:.4em; flex-wrap:wrap}
.vista-cliente .auto{font-size:var(--fs-xs); margin-bottom:.45em}
.vista-cliente .dia{font-size:var(--fs-xs); padding:.5em 1em; margin:.15rem 0 .75rem}
.msg .txt{overflow-wrap:anywhere; word-break:normal}
.msg .txt .enlace{word-break:break-all}
@media(max-width:600px){
  .vista-cliente .hilo{padding:1rem .65rem .75rem}
  .vista-cliente .msg{padding:.65em .8em .4em}
}

/* Cita dentro de la burbuja (el mensaje al que responde). */
.msg .cita{
  display:flex; flex-direction:column; gap:.1em; width:100%; min-width:8rem; margin:0 0 .45em;
  padding:.4em .65em; border:0; border-left:3px solid var(--cyan); border-radius:var(--r-sm);
  background:rgba(0,0,0,.25); color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.msg.mia .cita{border-left-color:var(--rosa)}
.msg .cita.sin-original{cursor:default; opacity:.75}
.msg .cita-quien, .citando .cita-quien{font-size:var(--fs-xs); font-weight:700; color:var(--cyan); line-height:1.3}
.msg.mia .cita-quien{color:var(--rosa-texto)}
.msg .cita-txt, .citando .cita-txt{
  font-size:var(--fs-sm); line-height:1.4; color:var(--suave); white-space:normal; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.msg.resaltada{animation:resaltar 1.6s ease-out}
@keyframes resaltar{0%,40%{box-shadow:0 0 0 3px var(--cyan)}100%{box-shadow:0 0 0 0 transparent}}

/* Botón de responder: arriba a la derecha de la burbuja. Con mouse, al pasar
   por encima; en el celular, al tocar la burbuja (.elegida) o deslizándola. */
.msg .btn-citar{
  position:absolute; top:.25rem; right:.25rem; width:2rem; height:2rem; min-width:32px; min-height:32px;
  display:grid; place-items:center; padding:0; border:1px solid var(--linea-fuerte); border-radius:50%;
  background:rgba(7,7,16,.8); color:var(--texto); font-size:var(--fs-sm); line-height:1; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.msg:hover .btn-citar, .msg:focus-within .btn-citar, .msg.elegida .btn-citar{opacity:1; pointer-events:auto}
.msg .btn-citar:focus-visible{opacity:1; pointer-events:auto; outline:2px solid var(--cyan); outline-offset:2px}
.msg.deslizando{transition:none; animation:none}
.msg:not(.deslizando){transition:transform .15s ease-out}

/* "Respondiendo a ..." arriba de la barra. */
.citando{
  flex:0 0 auto; display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem .5rem 1rem; background:var(--card); border-top:1px solid var(--linea);
  border-left:3px solid var(--cyan);
}
.citando-cuerpo{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.1em}
.citando-quitar{
  flex:0 0 auto; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--suave); font-size:var(--fs-lg); line-height:1;
}
.citando-quitar:hover{color:var(--texto)}

/* "Está escribiendo..." al pie del hilo: un renglón chico y gris, sin globo
   (pedido de Axel: «más chico, menos invasivo»). Un solo renglón también con
   letra grande: si no entra, se corta con "…". */
.puntitos{align-items:center; flex-wrap:nowrap; gap:.4em; max-width:100%; min-width:0;
  margin:.125rem 0 0; padding:0 .3em; background:none; border:0; border-radius:0;
  font-size:.8em; line-height:1.3; color:var(--suave); opacity:.85}
.puntitos .bolitas{display:flex; flex:0 0 auto; gap:.18em}
.puntitos i{width:.32em; height:.32em; min-width:3px; min-height:3px; animation:saltar-chico 1.2s infinite}
.puntitos .quien{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-style:italic; font-size:inherit; line-height:inherit; color:inherit}
@keyframes saltar-chico{0%,60%,100%{opacity:.35; transform:none}30%{opacity:1; transform:translateY(-.15em)}}
@media (prefers-reduced-motion:reduce){.puntitos i{animation:none; opacity:.6}}
/* El renglón queda siempre en su lugar y solo se prende o se apaga: sin
   display:none el hilo no cambia de alto y no salta al aparecer o irse
   (Android con letra grande: 22 a 46 px por vez). Las bolitas quietas
   cuando no se ve, para no gastar batería. */
.puntitos, .puntitos.on{display:flex}
.puntitos{min-height:1.3em; box-sizing:content-box; visibility:hidden; opacity:0; transition:opacity .15s ease-out, visibility 0s linear .15s; pointer-events:none}
.puntitos.on{visibility:visible; opacity:.85; transition:opacity .15s ease-out}
.puntitos:not(.on) i{animation:none}
@media (prefers-reduced-motion:reduce){.puntitos, .puntitos.on{transition:none}}

/* Letra grande o zoom de pantalla (html.letra-grande lo pone soporte-chat.js
   cuando 1rem pasa de ~19 px o la pantalla queda de menos de 340 px): el hilo
   es lo importante, así que las dos filas de botones pasan a una sola fila
   que se desliza, sin cortar palabras, y el encabezado va en un renglón. */
.letra-grande .vista-cliente .rapidas,
.letra-grande .vista-cliente .acciones-rapidas{
  display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:.5rem;
}
.letra-grande .vista-cliente .rapidas::-webkit-scrollbar,
.letra-grande .vista-cliente .acciones-rapidas::-webkit-scrollbar{display:none}
.letra-grande .vista-cliente .rapidas button,
.letra-grande .vista-cliente .acciones-rapidas button{
  flex:0 0 auto; min-width:0; white-space:nowrap; min-height:44px; padding:.4em .9em; font-size:var(--fs-sm);
}
.letra-grande .vista-cliente .acciones-rapidas{padding-top:.25rem}
.letra-grande .vista-cliente .head .quien,
.letra-grande .vista-cliente .head .estado{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.letra-grande .vista-cliente .head .estado .punto{display:inline-block; vertical-align:middle; margin-right:.3em}
/* Sin el logo (ya está en el título de la pestaña y en la app): con la
   pantalla agrandada "Mi STELLA" quedaba una letra por renglón. */
.letra-grande .vista-cliente .head .avatar{display:none}
.letra-grande .vista-cliente .head > div:has(.quien){flex:1 1 5.5rem; min-width:5.5rem}
.letra-grande .vista-cliente .cliente-guia{max-width:7.5rem; white-space:normal; line-height:1.2; padding:.3em .6em}
.letra-grande .msg{max-width:94%}
.letra-grande .campo::placeholder{white-space:nowrap}
/* Bandeja en el celular con letra grande: los botones de la ficha (Pasar
   datos de pago, Acreditar...) en una sola fila que se desliza, no uno por renglón. */
.letra-grande .vista-equipo .head .acciones{flex:1 1 100%; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin-left:0}
.letra-grande .vista-equipo .head .acciones::-webkit-scrollbar{display:none}
.letra-grande .vista-equipo .head .acciones button{flex:0 0 auto; white-space:nowrap}
/* El campo crece hasta 6 renglones también con letra grande (120 px eran 2). */
.campo{max-height:max(120px, 9rem)}
/* Encabezado angosto: la guía se achica antes que empujar el menú afuera. */
.letra-grande .vista-cliente .cliente-guia{flex:0 1 auto; min-width:0; overflow:hidden}
.letra-grande .vista-cliente .cliente-guia svg{display:none}
.letra-grande .vista-cliente .cliente-opciones{flex:0 0 auto}
/* Con texto escrito, la cámara se esconde (como en WhatsApp): el campo gana ancho. */
.letra-grande .barra.con-texto .camara{display:none}
/* La franja de la cita, en un renglón cada cosa. */
.letra-grande .citando .cita-quien{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.letra-grande .citando .cita-txt{-webkit-line-clamp:1}
.letra-grande .citando{padding-block:.35rem}
/* Muy angosto (zoom de pantalla al máximo, menos de 260 px, o letra de 160 % o más): la guía baja a
   su propio renglón y la cámara se esconde (la foto sale desde el clip → Galería). */
.muy-angosto .vista-cliente .head{flex-wrap:wrap; row-gap:.35rem}
.muy-angosto .vista-cliente .cliente-guia{order:3; flex:1 1 100%; max-width:none; min-height:36px; justify-content:center; white-space:nowrap}
.muy-angosto .vista-cliente .barra .camara{display:none}
/* Las tres acciones (Contratar, Renovar, Hablar con soporte) no se esconden
   deslizando: si no entran en un renglón, la que sobra baja entera al otro. */
.letra-grande .vista-cliente .acciones-rapidas{flex-wrap:wrap; overflow:visible}
.letra-grande .vista-cliente .acciones-rapidas button{flex:1 1 auto; padding:.4em .55em}
/* Bandera del pais en los paneles: imagen propia (/banderas/), porque Windows
   no dibuja las banderas emoji. Del alto de la letra, como el emoji. */
img.bandera{display:inline-block; width:1.2em; height:.9em; vertical-align:-.1em; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); object-fit:cover}