/* SWITCH CRM · estilos de app9.js (Mensajes en masa) */

.aviso-numero{border-left:2px solid var(--medio);font-size:.76rem;line-height:1.65;color:var(--tx2)}
.aviso-numero b{color:var(--medio)}

/* -- la lista de envíos -- */
.fila.envio{align-items:flex-start}
.barra-envio{height:4px;background:var(--b4);overflow:hidden;margin-top:.55rem;max-width:26rem;border-radius:999px}
.barra-envio i{display:block;height:100%;background:var(--or);border-radius:999px;transition:width .3s}

/* -- el que manda, de a uno -- */
.enviador h3{margin-bottom:.8rem}
.kpis.chicos{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:0}
.kpis.chicos .kpi{padding:.65rem .8rem}
.kpis.chicos .kpi b{font-size:1.35rem}

.destino{margin-top:1rem;border:1px solid var(--bd);border-left:2px solid var(--or);background:var(--b3);padding:.9rem 1rem}
.destino .quien{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem}
.destino .quien strong{font-size:1.05rem}
.destino .quien span{font-size:.72rem;color:var(--tx3);letter-spacing:.06em}

.mensaje{margin:0;padding:.8rem .9rem;background:var(--b2);border:1px solid var(--bd);
  font:400 .82rem/1.65 var(--fb);white-space:pre-wrap;word-break:break-word;color:var(--tx);
  max-height:18rem;overflow:auto}
.mensaje.chica{font-size:.72rem;line-height:1.6;color:var(--tx2);margin-top:.5rem;max-height:9rem}

.acc-enviador{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;align-items:center}
.acc-enviador .btn.pri{min-width:16rem;justify-content:center;text-align:center}
.btn.quieto{opacity:.45;pointer-events:none;cursor:default;
  background:var(--b3);color:var(--tx3);border-color:var(--bd2)}

/* -- armado -- */
.huecos{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.huecos .btn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;letter-spacing:0;text-transform:none}
.tildes{display:grid;gap:.45rem;margin-top:.2rem}
.tildes label{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--tx2);
  letter-spacing:0;text-transform:none;cursor:pointer}
.tildes input{width:auto;margin:0;accent-color:var(--or)}
small.ayuda{color:var(--tx3);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}

.fila.plantilla,.fila.cola-fila{align-items:flex-start}
.fila.plantilla .acc{align-self:center}
.bajada code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;
  color:var(--or);background:var(--or-soft,rgba(255,106,0,.1));padding:.05rem .3rem}

@media(max-width:600px){
  .acc-enviador .btn.pri{min-width:0;width:100%}
  .destino{padding:.75rem .8rem}
}

/* Buscador dentro de un envío. Con 300 personas en el tablero, encontrar a
   uno por nombre o teléfono no puede ser pasar seis páginas. */
.busca-envio{display:flex;gap:.5rem;align-items:center;margin:.9rem 0 .2rem;flex-wrap:wrap}
.busca-envio input{flex:1 1 16rem;min-width:0;font-size:.8rem;padding:.5rem .65rem;
  background:var(--b2);border:1px solid var(--bd);color:var(--tx)}
.busca-envio input:focus{border-color:var(--or);outline:none}
.busca-envio input::placeholder{color:var(--tx3)}

/* "Tirar" tiene que estar a mano pero no invitar a usarlo: queda apagado
   hasta que pasas el mouse por la fila, y recien al tocarlo se pone rojo. */
.fila.envio [data-tirar]{opacity:.4;border-color:transparent}
.fila.envio:hover [data-tirar]{opacity:.75}
.fila.envio [data-tirar]:hover{opacity:1;color:var(--alto);border-color:var(--alto)}