/* ============================================================
   WhatsApp API STK  -  Panel  (tema claro)
   Identidad Siteck: azul #0067AC, amarillo #FFCB08
   ============================================================ */

/* El atributo hidden lo aplica el navegador con display:none, pero esa regla
   es de la hoja del navegador y la pierde contra CUALQUIER display que
   pongamos nosotros. Cualquier elemento con display propio que ademas se
   oculte con hidden se quedaria visible para siempre. Se fija aqui, una sola
   vez, para que valga en todo el panel. */
[hidden]{display:none !important}

:root{
  /* --- Marca --- */
  --marca:#0067AC;
  --marca-claro:#1B84C9;
  --marca-hondo:#00538B;
  --marca-f:#E7F2FA;        /* tinte muy claro del azul */
  --marca-b:#C7E2F3;
  --oro:#FFCB08;
  --oro-f:#FEF6DC;
  --oro-t:#8A6A00;

  /* --- Superficies --- */
  --fondo:#F1F5F9;
  --panel:#FFFFFF;
  --panel2:#F8FAFC;
  --panel3:#EEF2F7;
  --borde:#E3E9F0;
  --borde2:#CBD5E1;

  --texto:#0F1D2E;
  --suave:#4A5C71;
  --tenue:#7488A0;

  /* --- Estados: aqui el color informa --- */
  --verde:#16A34A; --verde-f:#DCFCE7; --verde-t:#15803D; --verde-b:#FFFFFF;
  --rojo:#DC2626;  --rojo-f:#FEE7E7;  --rojo-t:#B42323;
  --ambar:#B45309; --ambar-f:#FEF3C7; --ambar-t:#92400E;
  --azul:var(--marca); --azul-f:var(--marca-f); --azul-t:#075E9E;

  --r:12px; --r-s:9px;
  --sombra:0 1px 2px rgba(15,29,46,.05), 0 4px 14px -8px rgba(15,29,46,.16);
  --sombra-alta:0 2px 6px rgba(15,29,46,.07), 0 14px 34px -16px rgba(15,29,46,.28);
  --curva:cubic-bezier(.4,0,.2,1);

  --lateral:232px;
  --barra:64px;
}
*{box-sizing:border-box}

/* ============================================================
   Armazon: la pagina no rueda; solo el contenido central.
   ============================================================ */
html,body{height:100%}
body{
  margin:0;display:flex;overflow:hidden;background:var(--fondo);color:var(--texto);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@supports (height:100dvh){ html,body{height:100dvh} }

/* ---------- Barra lateral ---------- */
.velo{display:none}
.lateral{
  width:var(--lateral);flex:0 0 var(--lateral);height:100%;
  background:var(--panel);border-right:1px solid var(--borde);
  display:flex;flex-direction:column;z-index:30;
}
.marca{
  display:flex;align-items:center;gap:11px;padding:0 16px;height:var(--barra);
  border-bottom:1px solid var(--borde);flex:none;
}
.marca .logo{
  /* Incrustado en esta hoja: no hay archivo que pueda faltar.
     aspect-ratio con la proporcion real, para que nunca se deforme. */
  width:74px;flex:none;aspect-ratio:460/199;
  background:url('data:image/png;base64,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') center/contain no-repeat;
}
.marca span{
  font-size:12.5px;font-weight:650;color:var(--texto);line-height:1.15;
  padding-left:11px;border-left:1px solid var(--borde);
}

.lateral nav{padding:14px 12px;flex:1;overflow-y:auto;min-height:0}
.grupo{
  margin:14px 0 6px 10px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue);
}
.grupo:first-child{margin-top:0}
.lateral nav a{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;text-decoration:none;
  color:var(--suave);font-size:14px;font-weight:500;margin-bottom:2px;
  transition:background .16s var(--curva), color .16s var(--curva);
}
.lateral nav a svg{width:19px;height:19px;flex:none;color:var(--marca);transition:color .16s}
.lateral nav a:hover{background:var(--panel3);color:var(--texto)}
.lateral nav a.on{
  background:linear-gradient(95deg,var(--marca) 0%,var(--marca-claro) 100%);
  color:#fff;font-weight:600;
  box-shadow:0 4px 12px -4px rgba(0,103,172,.55);
  border-left:3px solid var(--oro);padding-left:9px;
}
.lateral nav a.on svg{color:#fff}

.usuario{
  display:flex;align-items:center;gap:11px;padding:13px 16px 9px;
  border-top:1px solid var(--borde);flex:none;
}
.avatar{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--marca),var(--marca-claro));
  color:#fff;font-weight:700;font-size:14px;
}
.quien{min-width:0}
.quien strong{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quien small{display:block;font-size:11.5px;color:var(--tenue)}
.salir{
  display:flex;align-items:center;gap:8px;padding:8px 16px 14px;
  color:var(--marca);font-size:12.5px;font-weight:600;text-decoration:none;flex:none;
  transition:color .16s var(--curva);
}
.salir svg{width:16px;height:16px}
.salir:hover{color:var(--marca-hondo)}

/* ---------- Zona principal ---------- */
main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column}
.barra{
  flex:none;height:var(--barra);display:flex;align-items:center;gap:13px;padding:0 24px;
  background:var(--panel);border-bottom:1px solid var(--borde);
}
.barra div{flex:1;min-width:0}
.barra h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.barra p{margin:1px 0 0;color:var(--tenue);font-size:12.5px;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hamburguesa{display:none;font-size:21px;cursor:pointer;color:var(--suave);padding:0 3px}

.contenido{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px 28px;
  scrollbar-width:thin;scrollbar-color:var(--borde2) transparent;
}
.contenido::-webkit-scrollbar{width:10px}
.contenido::-webkit-scrollbar-thumb{background:var(--borde2);border-radius:9px;
  border:3px solid transparent;background-clip:content-box}
.contenido > *{animation:sube .3s var(--curva) both}
@keyframes sube{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.pantalla{display:flex;flex-direction:column;gap:15px;min-height:100%}
.crece{flex:1;min-height:0;display:flex;flex-direction:column}

/* ---------- Piezas ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:5px 12px;
  border-radius:999px;background:var(--panel2);color:var(--suave);white-space:nowrap;
  border:1px solid var(--borde);font-weight:500;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.chip.on{background:var(--verde-f);color:var(--verde-t);border-color:#A7E9C0}
.chip.on::before{animation:latido 1.9s ease-in-out infinite}
.chip.off{background:var(--rojo-f);color:var(--rojo-t);border-color:#F5B9B9}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}

.tarjeta{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:17px;box-shadow:var(--sombra);
  transition:border-color .2s var(--curva), box-shadow .2s var(--curva), transform .2s var(--curva);
}
.tarjeta h2{margin:0 0 3px;font-size:15px;font-weight:650;letter-spacing:-.01em}
.tarjeta .ayuda{margin:0 0 14px;color:var(--tenue);font-size:12.5px}
.rejilla > .tarjeta:hover{border-color:var(--marca-b);box-shadow:var(--sombra-alta);transform:translateY(-2px)}

.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.rejilla > *{animation:aparece .34s var(--curva) both}
.rejilla > *:nth-child(2){animation-delay:.04s}
.rejilla > *:nth-child(3){animation-delay:.08s}
.rejilla > *:nth-child(n+4){animation-delay:.12s}
@keyframes aparece{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}

.doble{display:grid;gap:15px;grid-template-columns:1fr}
@media (min-width:1180px){ .doble{grid-template-columns:1fr 1fr;align-items:start} }

h2.seccion{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--tenue);
  margin:4px 0 0;font-weight:700;display:flex;align-items:center;gap:11px;
}
h2.seccion::after{content:"";flex:1;height:1px;background:var(--borde)}

/* Estados de sesion */
.est{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 10px;
     border-radius:999px;font-weight:600;border:1px solid transparent}
.est::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.est.conectada{background:var(--verde-f);color:var(--verde-t);border-color:#A7E9C0}
.est.conectada::before{animation:latido 1.9s ease-in-out infinite}
.est.esperando_qr{background:var(--ambar-f);color:var(--ambar-t);border-color:#F5D98A}
.est.conectando{background:var(--marca-f);color:var(--azul-t);border-color:var(--marca-b)}
.est.conectando::before{animation:latido 1s ease-in-out infinite}
.est.desconectada,.est.error{background:var(--rojo-f);color:var(--rojo-t);border-color:#F5B9B9}

/* Contadores */
.cifras{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:13px 0 12px}
.cifras div{
  font-size:9px;color:var(--tenue);text-transform:uppercase;letter-spacing:.04em;
  background:var(--panel2);border:1px solid var(--borde);border-radius:9px;
  padding:8px 4px;text-align:center;font-weight:600;
  transition:border-color .2s var(--curva), background .2s var(--curva);
}
.cifras b{
  display:block;font-size:18px;color:var(--texto);font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-bottom:2px;
  transition:color .3s var(--curva);
}
.cifras div.cambio{border-color:var(--oro);background:var(--oro-f)}
.cifras div.cambio b{color:var(--ambar-t);animation:brinca .45s var(--curva)}
@keyframes brinca{0%{transform:scale(1)}35%{transform:scale(1.15)}100%{transform:scale(1)}}
.cifras div.alerta b{color:var(--ambar)}

/* Botones */
button,.boton{
  padding:8px 14px;border:0;border-radius:9px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:transform .12s var(--curva), filter .16s var(--curva),
             background .16s var(--curva), border-color .16s var(--curva);
}
button:active:not(:disabled){transform:scale(.97)}
.b1{background:var(--marca);color:#fff;box-shadow:0 2px 8px -2px rgba(0,103,172,.5)}
.b1:hover:not(:disabled){background:var(--marca-hondo);box-shadow:0 4px 14px -3px rgba(0,103,172,.6)}
.b2{background:var(--panel);color:var(--suave);border:1px solid var(--borde2)}
.b2:hover:not(:disabled){background:var(--panel2);border-color:var(--tenue);color:var(--texto)}
.b3{background:#fff;color:var(--rojo);border:1px solid #F1AFAF}
.b3:hover:not(:disabled){background:var(--rojo);color:#fff;border-color:var(--rojo)}
.b-oro{background:var(--oro);color:#5A4600}
.b-oro:hover:not(:disabled){filter:brightness(1.06)}
button:disabled{opacity:.45;cursor:not-allowed}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Formularios */
label{display:block;font-size:11.5px;color:var(--suave);margin:0 0 5px;font-weight:600}
input,select,textarea{
  width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--borde2);
  background:#fff;color:var(--texto);font-size:13.5px;font-family:inherit;
  transition:border-color .16s var(--curva), box-shadow .16s var(--curva);
}
input:hover,select:hover,textarea:hover{border-color:var(--tenue)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(0,103,172,.16);
}
input:disabled{background:var(--panel2);color:var(--tenue);cursor:not-allowed}
input::placeholder,textarea::placeholder{color:#9FB0C4}
textarea{resize:vertical;min-height:70px;line-height:1.5}
.campos{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(182px,1fr))}
.campo-ancho{grid-column:1/-1}

/* Tablas */
.tabla-envoltura{
  flex:1;min-height:0;overflow:auto;margin:0 -17px -17px;
  border-top:1px solid var(--borde);
  scrollbar-width:thin;scrollbar-color:var(--borde2) transparent;
}
.tabla-envoltura::-webkit-scrollbar{width:10px;height:10px}
.tabla-envoltura::-webkit-scrollbar-thumb{background:var(--borde2);border-radius:9px;
  border:3px solid transparent;background-clip:content-box}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 15px;border-bottom:1px solid var(--borde);vertical-align:middle}
th{
  color:var(--tenue);font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;white-space:nowrap;background:var(--panel2);position:sticky;top:0;z-index:2;
}
tbody tr{transition:background .13s var(--curva)}
tbody tr:hover{background:var(--marca-f)}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
code{
  background:var(--panel3);padding:1px 6px;border-radius:5px;font-size:11.5px;
  border:1px solid var(--borde);color:var(--marca-hondo);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.vacio{color:var(--tenue);text-align:center;padding:32px}

/* Etiquetas de estado de mensaje */
.mest{display:inline-block;font-size:10.5px;padding:2px 9px;border-radius:999px;
      white-space:nowrap;font-weight:700;border:1px solid transparent}
.mest.pendiente,.mest.procesando{background:var(--marca-f);color:var(--azul-t);border-color:var(--marca-b)}
.mest.enviado{background:var(--panel3);color:var(--suave);border-color:var(--borde2)}
.mest.entregado{background:var(--verde-f);color:var(--verde-t);border-color:#A7E9C0}
.mest.leido{background:#E0F2FE;color:#0369A1;border-color:#BAE6FD}
.mest.error{background:var(--rojo-f);color:var(--rojo-t);border-color:#F5B9B9}
.mest.cancelado{background:var(--panel3);color:var(--tenue);border-color:var(--borde2)}

.paginas{display:flex;gap:10px;align-items:center;justify-content:space-between;
         padding-top:12px;font-size:12.5px;color:var(--tenue);flex-wrap:wrap;flex:none}

/* Dialogos */
dialog{
  border:1px solid var(--borde);border-radius:var(--r);background:var(--panel);color:var(--texto);
  padding:24px;width:min(470px,94vw);max-height:88vh;overflow:auto;
  box-shadow:0 24px 60px rgba(15,29,46,.28);
}
dialog[open]{animation:entraDlg .22s var(--curva)}
@keyframes entraDlg{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
dialog::backdrop{background:rgba(15,29,46,.42);backdrop-filter:blur(2px)}
dialog h3{margin:0 0 3px;font-size:16.5px;font-weight:700}
dialog .ayuda{margin:0 0 15px;color:var(--tenue);font-size:12.5px}
#qrimg{width:100%;max-width:250px;border-radius:11px;background:#fff;padding:10px;
       display:block;margin:14px auto;border:1px solid var(--borde)}
#qrimg[src=""]{display:none}

/* Avisos flotantes */
.avisos{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;
        gap:8px;z-index:60;max-width:350px}
.aviso{padding:11px 15px;border-radius:10px;font-size:13px;font-weight:500;
       box-shadow:var(--sombra-alta);animation:entraAviso .24s var(--curva);border:1px solid transparent}
.aviso.ok{background:var(--verde-f);color:var(--verde-t);border-color:#A7E9C0}
.aviso.mal{background:var(--rojo-f);color:var(--rojo-t);border-color:#F5B9B9}
.aviso.info{background:var(--marca-f);color:var(--azul-t);border-color:var(--marca-b)}
@keyframes entraAviso{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

.nota{background:var(--ambar-f);color:var(--ambar-t);padding:11px 14px;border-radius:9px;
      font-size:12.5px;margin-top:13px;border:1px solid #F5D98A}

/* Esqueleto de carga */
.esqueleto{
  background:linear-gradient(90deg,var(--panel2) 25%,var(--panel3) 50%,var(--panel2) 75%);
  background-size:200% 100%;animation:brilla 1.3s linear infinite;
  border-radius:var(--r-s);color:transparent!important;
}
@keyframes brilla{from{background-position:200% 0}to{background-position:-200% 0}}
.tarjeta.esqueleto{height:206px;border-color:var(--borde)}

/* Distintivos de rol */
.rol{display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;
     border-radius:999px;letter-spacing:.05em;text-transform:uppercase}
.rol.admin{background:var(--marca-f);color:var(--azul-t);border:1px solid var(--marca-b)}
.rol.agente{background:var(--oro-f);color:var(--oro-t);border:1px solid #F5DC8A}

.alcance{
  display:flex;align-items:center;gap:11px;background:var(--marca-f);
  border:1px solid var(--marca-b);border-radius:var(--r);
  padding:12px 15px;font-size:12.5px;color:var(--azul-t);
}
.alcance strong{color:var(--marca-hondo)}

/* ---------- Tarjeta de sesion ---------- */
.tarjeta.sesion{display:flex;flex-direction:column}
.ses-cab{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.ses-id{min-width:0}
.ses-id h2{margin:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ses-id p{margin:4px 0 0;font-size:11.5px;color:var(--tenue);
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ses-cab .est{flex:none;margin-top:1px}
.ses-aviso{margin:0 0 12px;font-size:11.5px;color:var(--tenue)}
.tarjeta.sesion .acciones{margin-top:auto}

.tarjeta.nueva{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;border:1px dashed var(--borde2);text-align:center;
  background:var(--panel2);box-shadow:none;min-height:190px;
}
.tarjeta.nueva:hover{border-color:var(--marca);background:var(--marca-f);transform:none}
.tarjeta.nueva .mas{
  font-size:24px;line-height:1;color:#fff;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--marca),var(--marca-claro));
  transition:transform .2s var(--curva);
}
.tarjeta.nueva:hover .mas{transform:scale(1.08)}
.tarjeta.nueva strong{font-size:14px}
.tarjeta.nueva span{font-size:11.5px;color:var(--tenue);max-width:200px}

/* ============================================================
   Documentacion interactiva de la API
   ============================================================ */
.endpoint{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
          margin-bottom:9px;overflow:hidden;transition:border-color .2s var(--curva)}
.endpoint:hover{border-color:var(--borde2)}
.endpoint.abierto{border-color:var(--marca-b);box-shadow:var(--sombra)}
.ep-cabeza{display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer;
           user-select:none;transition:background .15s var(--curva)}
.ep-cabeza:hover{background:var(--panel2)}
.ep-metodo{font-size:10px;font-weight:800;padding:3px 8px;border-radius:5px;letter-spacing:.06em;
           min-width:54px;text-align:center;flex:none}
.ep-metodo.GET{background:var(--marca-f);color:var(--azul-t)}
.ep-metodo.POST{background:var(--verde-f);color:var(--verde-t)}
.ep-metodo.DELETE{background:var(--rojo-f);color:var(--rojo-t)}
.ep-ruta{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;flex:none}
.ep-titulo{color:var(--tenue);font-size:12.5px;flex:1;min-width:0;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-flecha{color:var(--tenue);transition:transform .22s var(--curva);flex:none}
.endpoint.abierto .ep-flecha{transform:rotate(90deg)}
.ep-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--curva)}
.endpoint.abierto .ep-cuerpo{grid-template-rows:1fr}
.ep-interior{overflow:hidden}
.ep-relleno{padding:2px 15px 15px;border-top:1px solid var(--borde)}
.ep-desc{color:var(--suave);font-size:13px;margin:12px 0 14px}

.pestanas{display:flex;gap:3px;border-bottom:1px solid var(--borde);margin:15px 0 0}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;color:var(--tenue);
                 padding:7px 12px;font-size:12px;border-radius:0;transition:all .16s var(--curva)}
.pestanas button:hover{color:var(--texto)}
.pestanas button.on{color:var(--marca);border-bottom-color:var(--marca)}

pre.codigo{background:#0F1D2E;border-radius:0 0 var(--r-s) var(--r-s);
  padding:14px 15px;margin:0;overflow-x:auto;max-height:270px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px;line-height:1.6;color:#D6E6F7;white-space:pre}
.caja-codigo{position:relative}
.caja-codigo .copiar{position:absolute;top:8px;right:8px;padding:4px 10px;font-size:11px;
  background:rgba(255,255,255,.1);color:#D6E6F7;border:1px solid rgba(255,255,255,.2);opacity:0;
  transition:opacity .18s var(--curva)}
.caja-codigo:hover .copiar{opacity:1}

.respuesta{margin-top:14px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--borde);
           animation:aparece .3s var(--curva)}
.respuesta-cabeza{display:flex;align-items:center;gap:10px;padding:9px 13px;
                  background:var(--panel2);font-size:12px}
.codigo-http{font-weight:800;padding:2px 8px;border-radius:5px;font-size:11px}
.codigo-http.bien{background:var(--verde-f);color:var(--verde-t)}
.codigo-http.mal{background:var(--rojo-f);color:var(--rojo-t)}
.codigo-http.medio{background:var(--ambar-f);color:var(--ambar-t)}
.respuesta pre{margin:0;padding:13px 15px;background:#0F1D2E;max-height:290px;overflow:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;color:#D6E6F7}

.barra-config{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
              padding:16px 18px;box-shadow:var(--sombra)}
.girando{display:inline-block;width:11px;height:11px;border:2px solid currentColor;
         border-right-color:transparent;border-radius:50%;animation:gira .7s linear infinite;
         vertical-align:-1px;margin-right:6px}
@keyframes gira{to{transform:rotate(360deg)}}

/* ============================================================
   Adaptacion a pantallas
   ============================================================ */
@media (max-height:780px){
  :root{--barra:56px}
  .contenido{padding:15px 18px 22px}
  .cifras b{font-size:16px}
  .cifras div{padding:6px 4px}
  .tarjeta{padding:15px}
  .lateral nav{padding:10px 10px}
  .grupo{margin:10px 0 5px 10px}
}
@media (max-width:1100px){
  :root{--lateral:212px}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
}
@media (max-width:860px){
  body{display:block;overflow:auto}
  .lateral{position:fixed;left:0;top:0;bottom:0;width:250px;transform:translateX(-100%);
           transition:transform .26s var(--curva);box-shadow:0 0 40px rgba(15,29,46,.18)}
  #menuAbierto:checked ~ .lateral{transform:none}
  #menuAbierto:checked ~ .velo{display:block;position:fixed;inset:0;z-index:25;
                               background:rgba(15,29,46,.4)}
  .hamburguesa{display:block}
  main{height:auto;min-height:100%}
  .barra{position:sticky;top:0;z-index:10;padding:0 16px}
  .contenido{overflow:visible;padding:15px 15px 40px}
  .pantalla{min-height:0}
  .crece{display:block}
  .tabla-envoltura{overflow-x:auto;margin:0 -15px -15px}
  .cifras{grid-template-columns:repeat(3,1fr)}
  .campos{grid-template-columns:1fr 1fr}
  .avisos{left:15px;right:15px;max-width:none}
}
@media (max-width:520px){
  .campos{grid-template-columns:1fr}
  .rejilla{grid-template-columns:1fr}
  .barra h1{font-size:17px}
  .barra p{display:none}
  th,td{padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* Logo de la pantalla de acceso */
.logo-grande{
  width:190px;aspect-ratio:460/199;margin:0 auto 22px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAADHCAMAAACjtZPDAAAAwFBMVEUAAAD+yAAAaK4AAAD//wAAVakAfr7+vgAAZqsAZqsAZqz/0AD+yQD/qgAAf3/9yAAAZ6sAZqsAAP/9yAD9yAD+yAAAZ6wAAAAAAAD9yAD9yAAAAAAAP38AZqsAAAD/fwAAAAAA//8Af///AAAAAAD/1AAAZpgAcLwAXp4AdMIAP7+/vwAAZszbtwCqqgAASJH/mQAAAH8AqqoAqv/UqgD/0AAAVX8AX58AX6cAVf8AcLcAmZnMzAD/4gAAAAAAAADk13JLAAAAQHRSTlMA9/z8AQMEBapxL/7RAwIvEk4BTq+O0S63FG6GBI9uAtEBAgFHCgb/DP8EBAUHAwcFAgMDBiMGICADRAUFCQAAd+1MhQAAF7dJREFUeNrtnXljqjjXwENvABVBRaTV6rVi9fZuM/Os7/79v9abBAgBsrG4YHP+uNNpATE/zpqTAICRmvjr2XK5WS5na/ob1/UhNCMzUEE8N6soilabgimEBunwJCcGZ8tVZFnWFDGd5Uwh0tL90QzSsIBCn/zgzjarqeV5lkXU1M0NLzRKOjCivpsSXS8JUC/V0uXazZTUEB2airpuDhTZXEIUI82VFPHem1EakuyRElINzYUhinXUjNKwbC4B9q9NlAMlZhdZ3VxFDdCBaWgWFBUKiomiaHedaqgBOiwNTYOi2TKyWEEqaoAO2OKmMS6rosjmnrLMxaSiQ7K4REGJwS14pkAzDTUx0cAUlBjcMk/0Mza5PgFuFHRAcoRcntiHrlKLazzowCIiyOeJLS7+kynPD5EnU1GgFndF0tCs6GBkKDzRP6flyqrzjAzPgfJco/yzam6xwSU8fxqeQ4pvfa65LXga/zkonnAvUk8rIgEu9E2+MjBzy1dPK/Wfrpk1G5K5hTgaing4pyucr5j60JBkn6onz9pa080Mq6fBOSTviWitNzxr6yFz62YKbGQw5hYpIBcnMbfGew4vGIJ855mpp9HOQVlb7Dy5OLH3XJtcZViC+/cEOD2LWFsT2w4JJxRrZ2ptTWw7sFhIiJNYW1O4fRCcXuo8Dc4HwWmtDM7hhbbLqcH5OJHtz83Uk+A0vnNIOAFYryypdpq8c0DGVhLYehYOhXwzSMOh6WLX6Uki272xtcMRBMvdWCKZLk0kNDTXKbS1lhXNiDU2MhA5YltreSKcKBIyyjksWyuMa3EkZGzt0OJaUQ0Bu86ZiWsHRdMHa7HnxLbWTF4PTDmFMD0c1xrlHJhyepYJhB5GOTdGOR8orJ1NpZ7TNYM0HHFlptZDYe3e9GQOR3yZqbVwztnV1D5/1ZN3A6O744SSqNbyoq6m9uWLtnw1NHowtTLHaS07pZyvXxrIs4FxWcdJTG17mgTS24tSyHEvhkUvjnPlSU0t7AJTy3y+GJj95SiSMAhHtW57mK96R74ZmFcJgyyrNU19T/hqYPZYDpLSXLa0tAbmjWjOLGnG2SqoNTBvlqJIYHqrVoX3O4B5SOytUxLbDkLR0SH95+6k0a1dguZtYQa2k4j+Zjt2+Il1M9o3p3lDmOGPA/6PM58sFuPxLpfxeLyYTOYpULt6UvLnL9v+ZW/vkM7Wxrf2p90XTb9xX+3tYOIvPV/sRvETV+LReOIg3Q3Yc/4Bxk8xkqcdsO8MpQ126a2N0V3q0lxKaTa2tLeCiRjNx6MnhewmoETNAeNv+PffRncHcwtG6a2N0V32kqEgv9kwpr0RzAD8e/ykI6MJiw3BzH59jzDTW2sAE/wFNp6UpjsAmAGYx0+asmC4PRpMpJsrGc1NM5o3gRkc9Fk+PU1A8rgwIYjk1QP33mHa4Uif5VNsBw8LE+zheiqv7O3vG2YAFiW3uBsvcDKSy2SyGO/ikqHdVgKgx4EJfHlhz5o1qNPeAmbIGNldllHWZFIESDEIHlYzVQmKNT3pJyg3gLktFHOHSQaOs7WTIDgcwjA8HILAth2sigXyCaUJcvW9v5JBW5iIpjQIivTd5g1g2vnXRvoFnCQUVfrAPIcpG58ATOJU5jct2baHCeFJ5jZRSAsvBPOV31XS6O7PucrNDzJjeQY7Cr0o3wVEQhZmdtTHQGFquM0/LgNT0OrVKPzJR38n/9r2YUKdps7lhqqZKkOL3KZmJej6MAuXOQmlUUwInNzO2uDwyDCh/39TxXzYRWB+fa3JSzOYNCJVjn5AnSsTAT0iTFUbCTK0/iVgcuS5Kcyd2niWj3yaiDORh4CJWEkLQVNfa+/h68OkwawyVyx0ePHoMCGUxkCaEe31YQatYG4fG6ai4m5Za50VYteHeQBxHsxulTDT4p1sjrAVzJBIw7qV/JSOMPdwbSnmNrVgvl8XJshhKjXTBousHrAAf88fBZtIGg8l6KezTWHaP+yy1KOmg+0wrUVhsnW2iQoqPidhihnoCkFDmEF+R2F71dSo6mkvOnj+cnWYmpIXigKlTXCyQ4IPUhLMT7C3B7E+brOjbBud4Zyp1UgawAx6UU0tmF9e1Ib2+f3tS99mVgdmag8Pxbnz/15gmRCTOiE/U8dakwmbnoZp09F4N4qzG4jj0Wi8IJV+m4+zdg6yEniSh5SUE12YCboE744aquZRSfOtyZK+116j2bi5EiIv+p32AAUg/iadCP3OlphscdPRaDwH3AcrEZ4TV7uTJDBt8B/ZWd/i+UEM8zhTqKay4P7eBCboJ5rNs0encfhZmgIragrCfrBiXG3wsZMd+cGhaYPzWNqdFOjAZFpk4rnM4iqaDiyNtX7v2ropssbPbStAEy1n0gtMG0xi/VYjzXPG7CkimKEdjJ7UtQ9coT3Ky0DLa2xH0tjM5rXZRehcCaZd7m3Qopmoz2FpimA6QJMl0jtXCjNSdpC88ya03pBwfv363k8AZNOZrXM3mPF3PZ+Z0FyU8Xr1xrGQDWmSsHpOHMseAAHMYh4PsXS6FQ6UHST8QOf164u+03x+fX0FjZxmUT//tQ1awzyA8YhI/mzUJB9rVofjHek3cs4fpNuIaTYqR9fsOSTmtc/nefWU+HyQwyx8CgKvskNQbmeVjZfPXOcoovzWi1l2Cvs1IcOWto3oVGS4PUB5nqlh2FHUUvuUyY7T01k+R3zKgrp9Lkzmq6pZIr1bd7Oz/FjnjR8VpTBf3zRFFDGF8+KZX0yY7xji9h+8pC8RLOmrwMQ1lfNWWQFKqJKN8TW2dnAIcQp7COytg34acybLA/acwCmdgrRxUdNmHsxtYd61iny+Mp5VOc2v2vLeODN9FpQxx6UVQqTVstqkFdpOPZPnaKa6NhtQ3R0Bpx6CJL9o4mtzKr68c4Jico5+KAem3ZAlsqIbTx7P9ixfmySmb4q6QTXCQH4Or+lDaJ1yAa4LTCYXCnjhpB1MarmS4pwkmFcj1DrMANgx1XmtUE+xON5b9Q2TREav70r5+iYuMwShenlCPEqrZknSFSZTcgrkBcbCryXFPF3A1/a4gq4GE/mMWK/ZiYF5kprZ6SVg6s2zvImn1xJlDp+HkeWqWSuYVEFEto4aTTroIbXMgnPqp9RgBkxH6d81S12wq9NsDlOzsfJdMldqg7nmcpPSmr42MAuXKepXoDEnvWrh7QTn0BsRwizc6uhvif5GBytFL1ALeRNv2/WivQvUs2ziOwFAb4Fmqc7SBmYBRlQ+pEfQ0v8PGq4Kqql1/hWYZ/r1Rmdxcb1pBLS5T5gAhfr2OG5Isw1MhwEjCncntKUzLFvR2JZP33yP89y0DLP40NhuUIH+qejSW90pzNQXTsYjDaC00NYOZnZOHAhLUnN6iUO5oBoL5h/Rp2bbaXBTkyLBRCwT/XFX9bZHdwsThGkPEC6RLcZ4vxGUmcScCmiBrh1MVWtnUS3ODbF+0xm30M4kmP/ZqJ0CDhcmSb9r39V20groqLR4OujgM3Mt2zpbrvzP1q4V9GjT2Q/hnaf7T3FgnosZzEmz1pi9oqA3vWuYeRHPzoYmYKzafPxULaC0i2aploktfnXsz3GzDJGF6dgMy2aTfHDwMGtw0woo0kWajI46aCYtCcQLoVSarYtVLuPmMJmpskXj1X0PB5NScArX08FnUpOpv7OJsmYghfnUmuUDw2Rn6TNndiWYh15gLhrPvWv4zNPxOFSY4aI8yq1gJo1hBr3AbLO2TxHNTkGLfYXvBGYBitbI2hTabwSTxLX9wozAataY5kVhhlsyc+yoCyM139VuPvO6MOMRrYM0pqlapxmBZdT4rUR3opkA/CinCJ185miilOwSnXzmmNknpanbdKWvl8LlPDjdNFXNN3ETdFeYIe3Vl7Tq10D0AlM/ju4E054XUXjDgFaxuQEutK+8E9zfC0wbLL7VFw8IR7W8LqVTnjmylSIy7w3Lec36uEq12UjRBw1mTTYGugJM/YHqADPBO8wk7eqsWkWDrJ6XcGCWGxD1aULwz6lyhULUdK/LZ770A3PS5KnvrpnMsnv9+YugQzkPn1JMZzYpzyozE5huzjbr6y24/cHUGaiwrc+084iGnTXRnlgMgQom+tgxkXwOoDI5XTQaoPuytV3mUtXQBaE79aYu3N8FzKQBzBB8PLWCSW35Amy1djfJCv0hvUmVaUZX/V7y/BWYYdGBGM91TYJifYK3zAPeqKc1RF1hsh2pqie2iCrbw3T09x0qocofgFBxhAAmCAK6q1x81rMJR+BPlS1AkGxQuwHwPmDOn6RdjH1UgOguYGSmeKHoAQrBeZcuTqnNm6r7N0Uw0ZU+6KTPx0GHpq8s5kGQ9wn1s76vhzyzeGAVwqz+axYA0ePGePOBiSIUCYH9RNKl73kv3lb5AKhhsg3toyA56LhMuZVNo1i4J3tHz/rQzR4qQLHuYlt2i66kFUxkZtVJY8g0Y24rjn0hbDWoNONylicwG+ui+1Wb+ONJZWUhU/NzewhpO8MsIgPlYlvaN56DUsA8cGBui9BU5KQPtc7asOqsecpc5s9bOMSkm8pNj5Qr+opFYGlpYbrurpv6TdBf+TALfzRShLPsHqV/A0qYjBV1wl3xu0K/nVDZWWvnV83L5vz5APaURAiTTTfVsbu6/OOW0tHpqTPNF933Gj9/EWnmhKmOiA3twSl0eCfuAeLWUemZuIe55nnFjxdteVZt21f0b/4Xt2hQdxTKKRTF9nns3jFpCuNF7nHfHeaXt1elvIiXWn88FRkYCLf4DYuHbCszvOlPgF/BuMX/W6uicBfb5ilADPI80T7MmR5mJuT6AOfa0xOiECmutjwzC+c/QP11gc7BjlVrTdKLMwveFDShVviTHuoT7+pFv4/ddLPRXjMv8rAGfcGJ8IPmCzoMcU6JB9NmlsXaDpkpBeVQk8nfJ2mBIC+sb9Pa6q5uCgt3Tc4hq7tTSdsrd1VdFuxpcCjSTfmEmGKHLrzf2r6axHhRV0v72nV5ZlDaLiLekTcs2vMPJwh+fXBfbELHhweT2TZgnD8Hu5KNZAz7025SdV3OgrcdCPvulRFZW8h9znbSldNZXq3VradSzPJ2azBdlOJF644x7fOrprwL08fdN+5a25jfE1AEITyYhRVFR+IHo9hBInYOFeVNF37ioya4jx5vpMY2zjNlt6DUbZK9SIf03jOnxMXLH4SbOrGPkpim2mOWyrHHbPEfptlJN5/1RVBytc9NXh/F9Jlzfabg2WCClyCYa31OGPBqyJIFwcwaMfF2a0yCIp4QU6zMrO0eTF87hTIU9xpWVrgM/qC9OrMST3Jhhgl/Hfa3HSd/0d/VSb0RVKmCLtkIsUzTblXJO1Vfc0vPmM7a03wTbUTxpr9DBaK51V2dqVpsC4QvcGTffpsoH5+4Nsyq7dZ2H6xZlm1Ryrh1/vZ5WXgqyzFhvfiXr+VsX6flMvv6/PzeYLsR8s70ucbqzOrmkYI32wa8XQ7HpVFDw76Q4IzHf9ZVBv1iEcteulvZCFH8ZlsmgI/nnNYn1SJbbkteUcpdtnl1PKnrNNg65u1FVkRXrM5EYS6OPJOA94hX3jl9wBstxZWnoKwBeN5C8Hlk5wTenGOQ3iNn8wwc39qVToOduALMppujeW2TI5WRtWa8fBIHQR5dhNtT70FLCdLvTN4Fv9vRLdJ22d4xaTawrQ7x2ea/2A2N7BnFseQ66CmYczaQJXs8oY8bj3f0s/BHOSkL/iOHx92ZFHe4w5mUnV+trH6Sd86F9JV05/oBKiMravqB8BTlb39bX2PLS6kkjmR6OnScpMmzUZ7d4O7JF/A/L5DdRsKrOMo2Am8uqgbLCED+ApM9oG9SxWEQBLeWMCEtG1umKIMrNIFoxkjy4oMku4zjiOebQrxhfv5pW7IkVDk3lZ6T13+42+2rbo3+lXOAovOnmmKW7XPxXtzWjtNIf6J0mEuJP2Rprv66uan97AKB28ph1ml6yNT6RjlvyRKu5aWfCLhHoEeTdLz7Zkxvx5KmF4LSj/LlND6r2qv1PcRBn5SlKpCduuo6OqJJHwhvapTzRnJUsdRbiIDcLnOZlWuU8zZ6uVGx1IpP95DZQNEo501Y+iqW2hV0fCl2Ta4L/L0Z4OvGPiuv6VSJpIrEVB6IcrpHM8bXyy/VLJvUAFyUojDXi2bG1l6x7uNGfbIke4KXdh7erI2tvY5U9Kh97FPWddZxprbWxLVXYDmTdxa06gVBXnhWekSwrTWu87Ky3yvmSby2XVpI4cubvKO4FhjlvHDoI2cZuW0JoJin9Jx41uY3TlyMXKpSsFaEPqsO2oRMbfnyxHXuDc4LqaViKrrrLHMlDsIOeAnMxPVFIp+TwsR2aYPNXDKKgyrTatESGGPbt1oeK+Emp9+nj84st67+OLA1xrZXb+lvFCZ200/dBinnumoBUu00iUpf3lKhln32fWDfXP00jNM4zz4GF086KtRy5ffYkYVc5KlmB6Klb6pCPVjYuqJU1XLZc36PuM1qz890szba2UXw2oJZpFLL/hsEji7vcwnOvWnja60ha4WFxd7yEjNWOH6tWQTPWuF921wzpdIcJQT/3CjyEWvz16VMH/r49cby6s7zhP5mYtumY4lUQ2FhLzuRDIlh8LjW1qhnvygv3+KBoy8OTg+pJ8TqabynTtiDUSriHs/auABeWj3wncw42pmrp8GpHj8lStKBfpVWHRFOrJ44VzHmVhJFYsum9JVX7QTYC3wnUs9Vuimx0U+uq8TJyEYL5TVHkODk3ZaHzO2MuHjDs2rQkKr9a6VGifvO99e+NwBOgqeMmFvDs+YqZ5HlaaC8xbjhyPYPkSuPlq7hWYwUUkpXbV9vOlecPm4rweOW6uenj4cg9pScyjbfV95ynviIrbvYp+c8/4CfliT+5hpBT1oXvXkHB1bP9VLoDSISD33KABf62NWs1UlllqTfRckFO08wEz99KL79TXKszwQ0JXlaqsPXrLp9N4NzxA/VSfgIonxlRQwu8D+HB82s60yHZDbvdFfP+d7NnIMw+EYGlzQ/uPCxge5dX59kNsEP7+9xTMO2qSVTUOJBj48KFBnXI/GTWiSt1RKAu92iB2Jr8Vv+TXKLizQUPtQcKIREJVH0oBHx4Er25gTufGYC6kRwFKjvPsas2RGmUHRVMiti+/79mxoIZOFQ+lwSk+uCLMqFD6CRa6KSnh5JNzNjg6l6kLjckwJFQVGuonA/QKLIRxKQcLaRfteyVbp781p/XvG3dJeK74j+FiEVPeVEh6OjSCFTIC4BaWla17QmNryOqZQnVAYEqYouMx1FY+TfuZJSjshHbiJNkF5BcqBOJa2DgNkyUhkhQpTq6L0ihXufcpyRYMfTJkm+Ghx2wJcFeiediB2PTLRCfhTm+Tc2vMc7w0g4RpaueLRA/Rih+z6L9/QC91RJEdITTXdc+Met9BRR/EmryqfZUt9BltMw94FaF5HBhcSDamZiWEkx0iVVU3wJFyLjex1NRSYBfR4l4GKMkbZdzWxrPmf0gE2LkFQUsjhea1Q8hmmxqg1bPDTM+wuEvhBdNb16/ht3nWNswDGzrQ+nkvxSCWwSPmRMU6iFpuaBJdZXTBa2VkGkhD9dt5wY5RAbUqQaecqSLfDYkgPNA/sGhoscOo0wVYz1VPdvBC4BDH3fhzXx8W/pMbWIGSGcLSnEhhRpISQ1QO5nafA/wp9pl28eGTZ8+NPDp4QrAYvIntrdirtOASKCGcLGDNn6B/xcIKtBEclbVtPWg5ifNcVso9UK4UV8lwQxR8if0CHowAjjm+aXafXpRamZqUx+2pYnWk05YR2dtiRagqvDxesCrxJ0U47w0ab1WqpoQbSDkl5V8prVOk+GzRo4no6mSImWevdJMUuX3DygMxxFVTNYVM2yBO9O9JTJen8XJWTDUZn6FVFEyvSWUNk0d00rlHc/uXN/UxS0sQJiqEUC6F2JIYVIEx/fYOyipjg8KkYPpYXLJZsUev2RpdfCCNN605qmxr7rmpWnfRa+S4Ppp1w3qxWTL7YVkqXiHJUQXFdCbaOLl7K+WUG28uusklPUAwjhVBhimURsfQEXkNz/rWVLOLoZiCr+Pw9G/A3902S8AAAAAElFTkSuQmCC') center/contain no-repeat;
}

/* ============================================================
   Chat en vivo
   ============================================================ */
.chat{
  display:grid;grid-template-columns:308px 1fr;gap:0;
  height:100%;min-height:0;
  background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
}
.contenido:has(.chat){padding:16px 20px 20px;height:100%}

/* ---- Columna de conversaciones ---- */
.chat-lista{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--borde);
            background:var(--panel2)}
.chat-filtros{padding:12px;display:flex;flex-direction:column;gap:8px;
              border-bottom:1px solid var(--borde);flex:none;background:var(--panel)}
.convs{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;
       scrollbar-color:var(--borde2) transparent}
.convs::-webkit-scrollbar{width:9px}
.convs::-webkit-scrollbar-thumb{background:var(--borde2);border-radius:9px;
  border:3px solid transparent;background-clip:content-box}

.conv{display:flex;gap:11px;padding:11px 13px;cursor:pointer;align-items:center;
      border-bottom:1px solid var(--borde);transition:background .13s var(--curva)}
.conv:hover{background:var(--panel3)}
.conv.on{background:var(--marca-f);box-shadow:inset 3px 0 0 var(--marca)}
.conv .avatar{width:40px;height:40px;font-size:15px}
.conv-txt{flex:1;min-width:0}
.conv-fila1{display:flex;align-items:baseline;gap:8px}
.conv-fila1 strong{flex:1;min-width:0;font-size:13.5px;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-hora{font-size:10.5px;color:var(--tenue);flex:none}
.conv-fila2{display:flex;align-items:center;gap:8px;margin-top:2px}
.conv-fila2 > span{flex:1;min-width:0;font-size:12px;color:var(--tenue);
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-fila2 .mio{color:var(--marca)}
.globo{
  flex:none;background:var(--verde);color:#fff;font-style:normal;font-weight:700;
  font-size:10.5px;min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  display:inline-grid;place-items:center;
}
.globo-menu{margin-left:auto;background:var(--oro);color:#5A4600}
.lateral nav a.on .globo-menu{background:#fff;color:var(--marca)}

/* ---- Hilo ---- */
.chat-hilo{display:flex;flex-direction:column;min-height:0;position:relative}
#panelChat{display:flex;flex-direction:column;min-height:0;height:100%}
.chat-vacio{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--tenue);
}
.chat-vacio svg{width:64px;height:64px;opacity:.35}
.chat-vacio p{margin:0;font-size:13.5px}

.hilo-cab{display:flex;align-items:center;gap:11px;padding:11px 15px;flex:none;
          border-bottom:1px solid var(--borde);background:var(--panel)}
.hilo-cab .avatar{width:38px;height:38px;font-size:14px}
.hilo-quien{flex:1;min-width:0}
.hilo-quien strong{display:block;font-size:14px;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hilo-quien small{display:block;font-size:11.5px;color:var(--tenue)}
.volver{display:none;padding:6px 10px;font-size:15px;line-height:1}

.hilo-cuerpo{
  flex:1;min-height:0;overflow-y:auto;padding:16px 18px;
  display:flex;flex-direction:column;gap:7px;
  background:var(--fondo);
  background-image:radial-gradient(circle at 1px 1px, rgba(0,103,172,.06) 1px, transparent 0);
  background-size:22px 22px;
  scrollbar-width:thin;scrollbar-color:var(--borde2) transparent;
}
.hilo-cuerpo::-webkit-scrollbar{width:9px}
.hilo-cuerpo::-webkit-scrollbar-thumb{background:var(--borde2);border-radius:9px;
  border:3px solid transparent;background-clip:content-box}

.msj{display:flex;max-width:100%}
.msj.sale{justify-content:flex-end}
.globo-msj{
  max-width:min(560px,78%);padding:8px 11px 5px;border-radius:12px;
  background:var(--panel);border:1px solid var(--borde);
  box-shadow:0 1px 2px rgba(15,29,46,.06);font-size:13.5px;line-height:1.45;
}
.msj.sale .globo-msj{background:var(--marca-f);border-color:var(--marca-b)}
.globo-msj .txt{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.pie-msj{display:flex;align-items:center;justify-content:flex-end;gap:6px;
         margin-top:3px;font-size:10px;color:var(--tenue)}
.pie-msj .por{margin-right:auto;font-weight:600;color:var(--marca)}
.acuse{font-size:11px}
.acuse.leido{color:#0EA5E9}
.acuse.error{color:var(--rojo)}
.fallo{margin-top:4px;font-size:11px;color:var(--rojo)}

.adj-img{max-width:260px;max-height:300px;border-radius:9px;display:block;margin-bottom:5px}
.adj-audio{width:250px;margin-bottom:4px}
.adj-doc{display:flex;align-items:center;gap:9px;padding:8px 11px;margin-bottom:5px;
         background:var(--panel2);border:1px solid var(--borde);border-radius:9px;
         text-decoration:none;color:var(--texto);font-size:12.5px}
.adj-doc:hover{border-color:var(--marca)}
.doc-ico{font-size:18px}

/* ---- Caja de envio ---- */
.hilo-caja{display:flex;align-items:flex-end;gap:9px;padding:11px 14px;flex:none;
           border-top:1px solid var(--borde);background:var(--panel)}
.caja-texto{flex:1;min-width:0}
.hilo-caja textarea{resize:none;min-height:38px;max-height:130px;padding:9px 12px;
                    border-radius:20px;line-height:1.4}
.hilo-caja .clip,.hilo-caja .enviar{
  flex:none;width:38px;height:38px;padding:0;border-radius:50%;
  display:grid;place-items:center;
}
.hilo-caja .clip svg,.hilo-caja .enviar svg{width:18px;height:18px}
.chip-adjunto{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
              background:var(--marca-f);border:1px solid var(--marca-b);color:var(--azul-t);
              padding:4px 6px 4px 5px;border-radius:999px;font-size:11.5px;max-width:100%}
.chip-adjunto span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-adjunto small{flex:none;opacity:.7;font-size:10.5px}
/* Miniatura de lo que se pego o se arrastro: sin verla se manda a ciegas */
.chip-adjunto img{flex:none;width:30px;height:30px;object-fit:cover;border-radius:999px;
                  border:1px solid var(--marca-b);background:var(--panel)}
.chip-adjunto img[hidden]+span{padding-left:6px}
.chip-adjunto button{background:none;border:0;color:inherit;padding:2px 5px;
                     font-size:12px;cursor:pointer;border-radius:50%}
.chip-adjunto button:hover{background:rgba(0,0,0,.08)}

/* La fila de archivos listos para salir: hasta diez, y se quitan uno a uno */
.adjuntos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px}
.adjuntos .chip-adjunto{margin-bottom:0;max-width:250px}
.adjuntos .quitar-todos{
  background:none;border:0;color:var(--tenue);font-size:11.5px;padding:3px 6px;
  border-radius:8px;cursor:pointer;text-decoration:underline}
.adjuntos .quitar-todos:hover{background:var(--panel2);color:var(--texto)}
/* Mientras se suben, en el mismo sitio donde estaban los archivos */
.adjuntos .subiendo{display:inline-flex;align-items:center;gap:8px;
  color:var(--azul-t);font-size:12px;padding:5px 2px}

/* Un mensaje que llego cifrado y todavia no se puede leer */
.txt.en-camino{display:flex;align-items:center;gap:7px;opacity:.75;font-style:italic}
.txt.en-camino em{font-style:normal}

/* Arrastrando un archivo encima del hilo */
.chat-hilo.soltando::after{
  content:'Suelta el archivo para adjuntarlo';
  position:absolute;inset:8px;z-index:5;display:grid;place-items:center;
  border:2px dashed var(--marca);border-radius:12px;
  background:rgba(231,242,250,.93);
  color:var(--azul-t);font-size:13.5px;font-weight:600;pointer-events:none;
}

/* Boton de grupos: entero = todo, tenue = escondidos, azul = solo grupos */
.son.solo{color:var(--marca);background:var(--marca-f);border-color:var(--marca-b)}
.chat-filtros #btnNuevo svg{width:17px;height:17px}

/* La @ de "te mencionaron en este grupo" */
.globo.arroba{
  background:var(--oro);color:#5A4600;font-weight:800;font-size:11.5px;
  min-width:18px;height:18px;padding:0 5px;
}

/* El avatar de la cabecera, cuando se puede tocar para ver la foto */
.avatar.tocable{cursor:pointer;transition:box-shadow .14s var(--curva)}
.avatar.tocable:hover,.avatar.tocable:focus-visible{
  box-shadow:0 0 0 3px var(--marca-b);outline:none}

/* Ficha de un numero al comprobarlo antes de escribirle */
.ficha{
  display:flex;align-items:center;gap:13px;margin-top:16px;padding:13px;
  background:var(--panel2);border:1px solid var(--borde);border-radius:12px;
}
.ficha.no{background:var(--rojo-f);border-color:#F3C9C9}
.ficha-foto{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;
            background:var(--panel3);display:grid;place-items:center}
.ficha-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ficha-foto .sin-foto{font-weight:700;color:var(--tenue);font-size:15px}
.ficha-txt{min-width:0}
.ficha-txt strong{display:block;font-size:14px;overflow:hidden;
                  text-overflow:ellipsis;white-space:nowrap}
.ficha-txt small{display:block;margin-top:3px;font-size:11.5px;color:var(--tenue);
                 line-height:1.4}

/* Un archivo que llego pero no se pudo descargar */
.adj-doc.fallo{opacity:.75;border-style:dashed;cursor:default}
.adj-doc.fallo em{display:block;font-style:normal;font-size:11px;color:var(--tenue)}

/* ---- Movil: una columna a la vez ---- */
@media (max-width:860px){
  .contenido:has(.chat){padding:0;height:calc(100vh - var(--barra))}
  .chat{grid-template-columns:1fr;border:0;border-radius:0;height:100%}
  .chat-hilo{display:none}
  .chat.abierto .chat-lista{display:none}
  .chat.abierto .chat-hilo{display:flex}
  .volver{display:grid;place-items:center}
  .globo-msj{max-width:86%}
}

/* Casillas de asignacion de numeros */
.casillas{display:flex;flex-wrap:wrap;gap:8px}
.casilla{
  display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:500;
  background:var(--panel2);border:1px solid var(--borde);border-radius:999px;
  padding:6px 13px 6px 10px;cursor:pointer;font-size:12.5px;color:var(--suave);
  transition:all .15s var(--curva);
}
.casilla:hover{border-color:var(--borde2)}
.casilla input{width:15px;height:15px;margin:0;accent-color:var(--marca);cursor:pointer}
.casilla:has(input:checked){background:var(--marca-f);border-color:var(--marca-b);color:var(--azul-t)}
.pastilla{
  display:inline-block;background:var(--panel3);border:1px solid var(--borde);
  border-radius:999px;padding:1px 9px;font-size:11px;margin:1px 2px 1px 0;
}
.rol.agente_web{background:#E8F7EE;color:#15803D;border:1px solid #A7E9C0}

/* Cargar mensajes anteriores */
.mas-arriba{display:flex;justify-content:center;padding:4px 0 10px;flex:none}
.mas-arriba button{font-size:12px;padding:6px 14px}
.mas-arriba .ayuda{margin:0;font-size:11.5px;color:var(--tenue)}

/* ============================================================
   Fotos de perfil, autor dentro de los grupos y aviso sonoro
   ============================================================ */

/* La foto sustituye a la inicial, ocupando el mismo circulo de siempre */
.avatar.con-foto{background:var(--panel3);overflow:hidden;padding:0}
.avatar.con-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Los grupos llevan otro tono para distinguirlos de un vistazo */
.avatar.grupo:not(.con-foto){background:linear-gradient(135deg,#64748B,#94A3B8)}

/* Quien escribio, dentro de un grupo.
   Un color por persona, estable entre recargas, para seguir el hilo de un
   grupo movido de un vistazo. Todos elegidos oscuros para que se lean sobre
   el globo blanco. */
.globo-msj .de{
  font-size:11.5px;font-weight:700;color:var(--marca);
  margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.globo-msj .de.c0{color:#0067AC}
.globo-msj .de.c1{color:#B45309}
.globo-msj .de.c2{color:#15803D}
.globo-msj .de.c3{color:#7C3AED}
.globo-msj .de.c4{color:#BE123C}
.globo-msj .de.c5{color:#0F766E}
.globo-msj .de.c6{color:#A16207}
.globo-msj .de.c7{color:#4338CA}

/* Botones de aviso, en fila con el buscador.
   Van en una fila de verdad y no flotando sobre el campo: antes eran dos y
   cabian a la derecha del texto, pero con la campana ya son tres y a cada uno
   habria que irle calculando su hueco a mano. */
.chat-filtros{position:relative}
/* El buscador arriba, a lo ancho, y los botones debajo.
   Con dos botones cabian todos en una linea; con cinco el campo de texto se
   quedaba en 93 px y no se leia lo que uno escribia. */
.busca-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.busca-fila #f_busca{flex:1 1 100%;min-width:0}
.busca-fila .son:first-of-type{margin-left:auto}
.chat-filtros .son{
  flex:none;width:32px;height:32px;padding:0;
  display:grid;place-items:center;border-radius:8px;
}
.chat-filtros .son svg{width:16px;height:16px}
.son .tachado{display:none}
.son.mudo{color:var(--tenue)}
.son.mudo .ondas{display:none}
.son.mudo .tachado{display:block}

/* Tarjeta que ofrece encender los avisos del sistema.
   Sale una sola vez y solo si el navegador todavia no tiene respuesta: el
   permiso hay que pedirlo desde un clic, y en las pantallas que no son el
   chat no hay ninguna campana donde hacerlo. */
.invita{
  position:fixed;left:16px;bottom:16px;z-index:70;max-width:330px;
  background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  padding:14px 16px;box-shadow:0 12px 32px rgba(15,29,46,.16);
  display:flex;flex-direction:column;gap:10px;
}
.invita strong{font-size:13px;display:block}
.invita p{margin:4px 0 0;font-size:12px;color:var(--tenue);line-height:1.45}
.invita-btns{display:flex;gap:8px}
.invita-btns button{flex:1;font-size:12.5px;padding:7px 10px}
@media (max-width:640px){
  .invita{left:12px;right:12px;bottom:12px;max-width:none}
}

/* ============================================================
   Visor de archivos del chat
   ============================================================ */

body.sin-scroll{overflow:hidden}

/* La miniatura ya no es un enlace: se ve y se comporta como boton */
.adj{display:block;cursor:zoom-in;position:relative;line-height:0;border-radius:10px;
     overflow:hidden;outline-offset:2px}
.adj:focus-visible{outline:2px solid var(--marca)}
.adj.video .play{
  position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.55);pointer-events:none;
}
.adj.video .play::after{
  content:'';position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;
}
.adj-doc[data-visor]{cursor:pointer}

.visor{
  position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.86);
  display:flex;align-items:center;justify-content:center;
  padding:64px 16px 24px;
  animation:visorEntra .16s var(--curva);
}
@keyframes visorEntra{from{opacity:0}to{opacity:1}}

.visor-barra{
  position:absolute;top:0;left:0;right:0;height:56px;
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(rgba(15,23,42,.75),transparent);color:#fff;
}
.visor-nombre{
  flex:1;min-width:0;font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.visor-cuenta{font-size:12px;opacity:.75;flex:none}
.visor-barra .b2{
  flex:none;width:34px;height:34px;padding:0;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border-color:transparent;color:#fff;border-radius:9px;
}
.visor-barra .b2:hover{background:rgba(255,255,255,.24)}
.visor-barra .b2 svg{width:17px;height:17px}

.visor-cuerpo{
  max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;
}
.visor-cuerpo img,.visor-cuerpo video{
  max-width:100%;max-height:calc(100vh - 96px);
  border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.45);background:#000;
}
.visor-cuerpo iframe{
  width:min(1000px,94vw);height:calc(100vh - 96px);
  border:0;border-radius:10px;background:#fff;
}

.visor-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;transition:background .13s var(--curva);
}
.visor-nav:hover{background:rgba(255,255,255,.28)}
.visor-nav.ant{left:14px}
.visor-nav.sig{right:14px}

@media (max-width:700px){
  .visor{padding:56px 8px 16px}
  .visor-nav{width:36px;height:36px;font-size:22px}
  .visor-nav.ant{left:6px}
  .visor-nav.sig{right:6px}
}
@media (prefers-reduced-motion:reduce){ .visor{animation:none} }

/* ============================================================
   Pestanas por numero (cuando el usuario tiene varias sesiones)
   ============================================================ */

/* Se acomodan en varias lineas en vez de irse de lado: la columna del chat es
   angosta y una pestana escondida a la derecha -justo la activa, a veces- no
   se ve ni se sospecha que este ahi. La tira crece con los numeros que tengas;
   solo si son muchisimos se topa y se desplaza. */
.tabs-num{
  display:flex;flex-wrap:wrap;gap:4px;
  max-height:30vh;overflow-y:auto;overflow-x:hidden;
  padding:2px;margin:-2px;
  scrollbar-width:thin;scrollbar-color:var(--borde2) transparent;
}
.tabs-num::-webkit-scrollbar{width:7px}
.tabs-num::-webkit-scrollbar-thumb{background:var(--borde2);border-radius:7px;
  border:2px solid transparent;background-clip:content-box}

.tabs-num .tab{
  flex:0 1 auto;min-width:0;max-width:100%;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border:1px solid var(--borde);border-radius:999px;
  background:var(--panel);color:var(--tenue);
  font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;
  cursor:pointer;white-space:nowrap;
  transition:background .13s var(--curva),color .13s var(--curva),border-color .13s var(--curva);
}
.tabs-num .tab > span{overflow:hidden;text-overflow:ellipsis}
.tabs-num .tab:hover{background:var(--panel3);color:var(--texto)}
.tabs-num .tab.on{
  background:var(--marca-f);border-color:var(--marca-b);color:var(--marca-hondo);
}

/* Punto de conexion del numero: se ve de un vistazo cual esta caido */
.tabs-num .punto{
  width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;
  background:var(--tenue);
}
.tabs-num .punto.on{background:var(--verde,#16A34A)}
.tabs-num .punto.off{background:var(--rojo)}

.tabs-num .globo{
  flex:none;min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  background:var(--marca);color:#fff;
  font-size:10.5px;font-style:normal;font-weight:700;
  display:inline-grid;place-items:center;
}
.tabs-num .tab.on .globo{background:var(--marca-hondo)}

@media (max-width:700px){
  .tabs-num{max-height:22vh}
}

/* ============================================================
   Depurar conversaciones del chat
   ============================================================ */

.hilo-cab .quitar-conv{
  flex:none;width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:9px;
}
.hilo-cab .quitar-conv svg{width:16px;height:16px}
.hilo-cab .quitar-conv:hover{color:var(--rojo);border-color:var(--rojo)}

#dlgLimpiar{max-width:520px}
.ocultas{max-height:230px;overflow-y:auto;border:1px solid var(--borde);border-radius:10px}
.ocultas:empty{display:none}
.oculta-fila{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--borde);
}
.oculta-fila:last-child{border-bottom:0}
.oculta-fila > div{flex:1;min-width:0}
.oculta-fila strong{display:block;font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.oculta-fila small{display:block;font-size:11.5px;color:var(--tenue)}
.oculta-fila button{flex:none;padding:5px 11px;font-size:12px}

/* Lo que se escribio desde el telefono, no desde el panel */
.pie-msj .por.telefono{color:var(--tenue);font-weight:600;font-style:italic}

/* ============================================================
   Banderas de pais en el chat
   ============================================================ */

/* La bandera va dibujada en SVG, no como emoji: Windows no tiene tipografia
   de banderas y las muestra como las dos letras del pais. */
.bandera{
  display:inline-block;width:18px;height:12px;margin-right:6px;flex:none;
  border-radius:2px;overflow:hidden;vertical-align:-1px;
  box-shadow:0 0 0 1px rgba(15,23,42,.15);
}
.bandera svg{display:block;width:100%;height:100%}
/* Deducida de la lada, no confirmada por el contacto: se ve mas tenue */
.bandera.supuesta{opacity:.6}
.hilo-cab .bandera{width:22px;height:15px;margin-right:8px}

/* Bandera + nombre del pais, para no tener que adivinar cual es */
.pais-chip{
  display:inline-flex;align-items:center;flex:none;max-width:120px;
  padding:1px 7px 1px 5px;border-radius:999px;
  background:var(--panel3);border:1px solid var(--borde);
  font-size:10.5px;font-weight:600;color:var(--suave);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pais-chip .bandera{width:14px;height:10px;margin-right:5px}
.pais-chip.supuesto{opacity:.75;font-style:italic}


/* Casilla suelta con su texto al lado.
   Hacia falta porque la regla general estira los input al ancho completo,
   y sin esto la casilla salia como una barra encima del texto. */
.check{
  display:flex;align-items:center;gap:9px;margin:10px 0 0;
  font-size:13.5px;cursor:pointer;font-weight:600;color:var(--texto);
}
.check input[type=checkbox]{
  width:16px;height:16px;flex:none;margin:0;accent-color:var(--marca);cursor:pointer;
}

/* Elegir que paises se le ofrecen al cliente */
.paises-elegir{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px;
  max-height:170px;overflow-y:auto;border:1px solid var(--borde);border-radius:10px;padding:8px;
}
.paises-elegir .check{gap:7px;padding:4px 6px;border-radius:7px;
  font-size:13px;font-weight:500;margin:0}
.paises-elegir .check:hover{background:var(--panel3)}
.paises-elegir .check span{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.paises-elegir .orden{
  flex:none;min-width:18px;height:18px;border-radius:6px;background:var(--marca);
  color:#fff;font-size:10.5px;font-style:normal;font-weight:700;
  display:grid;place-items:center;
}
#dlgBot{max-width:560px}
#dlgBot textarea{width:100%;min-height:52px}