/* =====================================================================
   CRM WhatsApp - estilos propios (lo que Tailwind no cubre):
   burbujas, fondo, lista de chats, formularios, modales y tablero.
   ===================================================================== */
:root {
    --wa-verde: #00a884;
    --wa-verde-osc: #008069;
    --wa-verde-claro: #25d366;
    --wa-salida: #d9fdd3;
    --wa-fondo: #efeae2;
    --wa-panel: #f0f2f5;
    --wa-borde: #e9edef;
    --wa-texto: #111b21;
    --wa-gris: #667781;
    --wa-gris-osc: #54656f;
    --wa-azul: #53bdeb;
    --wa-rojo: #ea0038;
}

body { font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14.2px; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Botones y formularios ---------- */
.btn-primario { background: var(--wa-verde); color: #fff; border-radius: 24px; padding: 10px 22px; font-weight: 500; font-size: 14px; transition: background .15s; }
.btn-primario:hover { background: var(--wa-verde-osc); }
.btn-sec { background: #fff; color: var(--wa-verde-osc); border: 1px solid #d1d7db; border-radius: 24px; padding: 9px 18px; font-size: 14px; font-weight: 500; }
.btn-sec:hover { background: #f5f6f6; }
.btn-peligro { background: #fff; color: var(--wa-rojo); border: 1px solid #f3b9c6; border-radius: 24px; padding: 9px 18px; font-size: 14px; }
.btn-peligro:hover { background: #fde8ec; }
.btn-icono { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--wa-gris-osc); flex-shrink: 0; transition: background .15s; }
.btn-icono:hover { background: rgba(11, 20, 26, .06); }
.btn-icono.activo { color: var(--wa-verde); background: rgba(0, 168, 132, .1); }
.btn-icono svg { width: 24px; height: 24px; }

.campo { display: block; }
.campo > span { display: block; font-size: 13px; color: var(--wa-gris-osc); margin-bottom: 5px; }
.campo input, .campo select, .campo textarea, .entrada {
    width: 100%; border: 1px solid #d1d7db; border-radius: 8px; padding: 9px 12px; background: #fff;
    color: var(--wa-texto); outline: none; font-size: 14.5px; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus {
    border-color: var(--wa-verde); box-shadow: 0 0 0 3px rgba(0, 168, 132, .15);
}
.campo small { display: block; margin-top: 4px; color: var(--wa-gris); font-size: 12.5px; }
.select-mini { border: 1px solid #d1d7db; border-radius: 16px; background: #fff; padding: 4px 10px; font-size: 13px; color: var(--wa-gris-osc); max-width: 150px; outline: none; }

/* ---------- Avisos ---------- */
.aviso { pointer-events: auto; padding: 11px 16px; border-radius: 10px; background: var(--wa-texto); color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(11, 20, 26, .25); transition: opacity .3s, transform .3s; }
.aviso-ok { background: var(--wa-verde-osc); }
.aviso-error { background: var(--wa-rojo); }
.aviso.saliendo { opacity: 0; transform: translateY(-8px); }
.aviso-inline { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; }
.aviso-inline.aviso-error { background: #fde8ec; color: #b3002b; }
.aviso-inline.aviso-info { background: #e7f3ff; color: #0b5394; }
.aviso-inline.aviso-ok { background: #e7fbe9; color: #0a6b4f; }

/* ---------- Lista de chats ---------- */
.buscador { display: flex; align-items: center; gap: 12px; background: var(--wa-panel); border-radius: 8px; padding: 0 12px; height: 36px; color: var(--wa-gris-osc); }
.buscador input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 14.5px; color: var(--wa-texto); }
.chip { padding: 5px 12px; border-radius: 16px; background: var(--wa-panel); color: var(--wa-gris-osc); font-size: 14px; white-space: nowrap; }
.chip:hover { background: #e9edef; }
.chip.activo { background: var(--wa-salida); color: var(--wa-verde-osc); }

.item-chat { display: flex; gap: 13px; align-items: center; padding-left: 13px; height: 72px; cursor: pointer; }
.item-chat:hover { background: #f5f6f6; }
.item-chat.activo { background: var(--wa-panel); }
.item-chat .cuerpo { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-right: 15px; border-bottom: 1px solid var(--wa-borde); }
.fila { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; }
.nombre { font-size: 16.5px; color: var(--wa-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hora { font-size: 12px; color: var(--wa-gris); flex-shrink: 0; }
.hora.nueva { color: var(--wa-verde-claro); }
.previa { font-size: 14px; color: var(--wa-gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 3px; min-width: 0; }
.previa span { overflow: hidden; text-overflow: ellipsis; }
.badge { background: var(--wa-verde-claro); color: #fff; border-radius: 12px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-agente { font-size: 11px; color: var(--wa-gris-osc); background: var(--wa-panel); border-radius: 4px; padding: 0 5px; line-height: 18px; flex-shrink: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lista-vacia { padding: 40px 24px; text-align: center; color: var(--wa-gris); font-size: 14px; }

.avatar { width: 49px; height: 49px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 17px; flex-shrink: 0; color: #fff; user-select: none; }
.avatar.chico { width: 40px; height: 40px; font-size: 15px; }
.avatar.grande { width: 110px; height: 110px; font-size: 38px; }

.estado-vivo { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; color: #8696a0; margin-right: 2px; white-space: nowrap; }
.estado-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8696a0; }
.estado-vivo[data-estado="vivo"] { color: var(--wa-verde-osc); }
.estado-vivo[data-estado="vivo"]::before { background: var(--wa-verde-claro); box-shadow: 0 0 0 3px rgba(37, 211, 102, .2); }
.estado-vivo[data-estado="reconectando"] { color: #b7791f; }
.estado-vivo[data-estado="reconectando"]::before { background: #f5a524; }

/* ---------- Conversación ---------- */
.chat-app { position: relative; }
.chat-cabecera { height: 60px; background: var(--wa-panel); display: flex; align-items: center; gap: 6px; padding: 0 10px; border-left: 1px solid var(--wa-borde); flex-shrink: 0; }
.mensajes { background-color: var(--wa-fondo); background-image: url("../img/fondo-chat.svg"); background-size: 240px; padding: 12px 6% 10px; display: flex; flex-direction: column; overscroll-behavior: contain; }
.separador-dia { align-self: center; background: #fff; color: var(--wa-gris-osc); font-size: 12.5px; padding: 5px 12px; border-radius: 7.5px; margin: 12px 0 6px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); text-transform: uppercase; }
.aviso-cifrado { align-self: center; background: #ffeecd; color: var(--wa-gris-osc); font-size: 12.5px; padding: 6px 12px; border-radius: 7.5px; margin: 4px 0 10px; text-align: center; max-width: 90%; display: flex; gap: 6px; align-items: flex-start; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.aviso-cifrado svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.cargar-mas { align-self: center; font-size: 12.5px; color: var(--wa-verde-osc); background: #fff; border-radius: 12px; padding: 4px 12px; margin-bottom: 6px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }

.burbuja { position: relative; max-width: min(65%, 560px); padding: 6px 7px 8px 9px; border-radius: 7.5px; margin-top: 2px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-size: 14.2px; line-height: 19px; color: var(--wa-texto); overflow-wrap: anywhere; }
.burbuja .txt { white-space: pre-wrap; }
.burbuja.entrante { align-self: flex-start; background: #fff; }
.burbuja.saliente { align-self: flex-end; background: var(--wa-salida); }
.burbuja.nota { align-self: flex-end; background: #fff5c4; box-shadow: inset 0 0 0 1px #e8c95a; }
.burbuja.primera { margin-top: 10px; }
.burbuja.primera.entrante { border-top-left-radius: 0; }
.burbuja.primera.saliente { border-top-right-radius: 0; }
.burbuja.primera.entrante::before, .burbuja.primera.saliente::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.burbuja.primera.entrante::before { left: -8px; background: linear-gradient(to bottom left, #fff 50%, transparent 50%); }
.burbuja.primera.saliente::before { right: -8px; background: linear-gradient(to bottom right, var(--wa-salida) 50%, transparent 50%); }
.burbuja.resaltada { animation: resaltar 1.2s ease; }
@keyframes resaltar { 0%, 60% { box-shadow: 0 0 0 3px rgba(0, 168, 132, .45); } }

.meta { float: right; margin: 4px 0 -6px 12px; font-size: 11px; color: var(--wa-gris); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; position: relative; top: 5px; }
.tick { width: 16px; height: 11px; }
.tick.leido { color: var(--wa-azul); }
.tick.fallido { color: var(--wa-rojo); width: 14px; height: 14px; }
.tick.reloj { width: 12px; height: 12px; }
.autor { font-size: 12.5px; font-weight: 500; color: var(--wa-verde-osc); margin-bottom: 1px; display: block; }
.etq-nota { font-size: 11.5px; color: #8a5a00; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.etq-nota svg { width: 13px; height: 13px; }
.etq-plantilla { font-size: 11.5px; color: var(--wa-gris); display: block; margin-bottom: 2px; }
.fallo { color: var(--wa-rojo); font-size: 12px; display: block; margin-top: 3px; clear: both; }

.cita { background: rgba(11, 20, 26, .05); border-left: 4px solid #06cf9c; border-radius: 6px; padding: 5px 8px; margin: -2px -3px 6px; font-size: 13px; color: var(--wa-gris-osc); max-height: 72px; overflow: hidden; cursor: pointer; }
.cita.cliente { border-left-color: var(--wa-azul); }
.cita b { display: block; font-weight: 500; color: #06cf9c; font-size: 12.5px; }
.cita.cliente b { color: #1d9bd1; }

.media-img { display: block; border-radius: 6px; max-width: 100%; width: 330px; max-height: 360px; object-fit: cover; margin: -3px -4px 5px; background: #dfe5e7; }
.media-sticker { width: 150px; height: 150px; object-fit: contain; }
.burbuja.sin-fondo { background: transparent; box-shadow: none; }
.burbuja.sin-fondo::before { display: none; }
.media-doc { display: flex; align-items: center; gap: 10px; background: rgba(11, 20, 26, .05); border-radius: 6px; padding: 10px; margin: -2px -3px 5px; min-width: min(250px, 60vw); color: inherit; text-decoration: none; }
.media-doc .ico-doc { width: 30px; height: 30px; color: #e5484d; flex-shrink: 0; }
.media-doc .ico-bajar { width: 20px; height: 20px; color: var(--wa-gris); flex-shrink: 0; }
.media-doc .doc-nombre { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-doc .doc-info { font-size: 12px; color: var(--wa-gris); }
.media-audio { width: 270px; max-width: 100%; height: 42px; display: block; margin-bottom: 4px; }
.burbuja a.enlace { color: #027eb5; text-decoration: none; }
.burbuja a.enlace:hover { text-decoration: underline; }
.burbuja code { font-family: Consolas, monospace; font-size: 13px; background: rgba(11, 20, 26, .06); padding: 0 3px; border-radius: 3px; }

.btn-responder { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--wa-gris-osc); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; box-shadow: 0 1px 3px rgba(11, 20, 26, .15); }
.btn-responder svg { width: 17px; height: 17px; }
.burbuja.entrante .btn-responder { right: -40px; }
.burbuja.saliente .btn-responder, .burbuja.nota .btn-responder { left: -40px; }
.burbuja:hover .btn-responder { opacity: 1; }
@media (hover: none) { .btn-responder { opacity: .85; } }

.btn-abajo { position: absolute; right: 18px; bottom: 96px; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(11, 20, 26, .2); color: var(--wa-gris-osc); display: flex; align-items: center; justify-content: center; z-index: 5; }
.btn-abajo svg { transform: rotate(-90deg); width: 22px; height: 22px; }
.btn-abajo .badge { position: absolute; top: -6px; right: -4px; }

.ventana { font-size: 12.5px; padding: 6px 16px; background: var(--wa-panel); color: var(--wa-verde-osc); display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--wa-borde); flex-shrink: 0; flex-wrap: wrap; }
.ventana svg { width: 14px; height: 14px; }
.ventana.cerrada { color: #8a5a00; background: #fff6e0; }
.ventana button { margin-left: auto; color: var(--wa-verde-osc); font-weight: 500; }

.respondiendo { background: var(--wa-panel); padding: 8px 12px 0 60px; flex-shrink: 0; display: flex; gap: 8px; align-items: center; }
.respondiendo .cita { margin: 0; flex: 1; cursor: default; }

.composer { display: flex; align-items: flex-end; gap: 2px; padding: 5px 10px; background: var(--wa-panel); min-height: 62px; flex-shrink: 0; }
.composer .btn-icono { margin-bottom: 6px; }
.composer textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: #fff; border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 21px; max-height: 144px; margin: 5px 6px; font-family: inherit; color: var(--wa-texto); }
.composer.modo-nota textarea { background: #fff8dc; box-shadow: inset 0 0 0 1px #e8c95a; }
.composer.modo-nota #btn-nota { color: #b7791f; background: #fff3c4; }
.composer textarea:disabled { background: #f7f8fa; }
.btn-enviar { width: 44px; height: 44px; border-radius: 50%; background: var(--wa-verde); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; flex-shrink: 0; transition: background .15s; }
.btn-enviar:hover { background: var(--wa-verde-osc); }
.btn-enviar:disabled { opacity: .5; cursor: default; }
.btn-enviar svg { width: 22px; height: 22px; }
.composer.modo-nota .btn-enviar { background: #d4a72c; }

.popover { position: absolute; bottom: 72px; left: 10px; width: min(420px, calc(100% - 20px)); background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(11, 20, 26, .2); z-index: 20; max-height: 300px; overflow-y: auto; padding: 6px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button { font-size: 24px; line-height: 1; padding: 6px 0; border-radius: 8px; }
.emoji-grid button:hover { background: var(--wa-panel); }
.rapida { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.rapida:hover, .rapida.sel { background: var(--wa-panel); }
.rapida b { color: var(--wa-verde-osc); font-weight: 500; margin-right: 6px; }
.rapida span { color: var(--wa-gris); }

/* ---------- Panel del cliente ---------- */
.info { background: var(--wa-panel); border-left: 1px solid var(--wa-borde); }
.info-cab { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--wa-panel); flex-shrink: 0; font-size: 16px; }
.seccion-info { background: #fff; padding: 14px 22px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.seccion-info h3 { font-size: 14px; color: var(--wa-gris); margin-bottom: 8px; font-weight: 400; }
.seccion-info .dato { font-size: 15px; color: var(--wa-texto); overflow-wrap: anywhere; }
.etq { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 10px; font-size: 12.5px; margin: 0 4px 4px 0; background: #eeedfe; color: #3c3489; }
.seg-linea { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--wa-gris-osc); padding: 3px 0; }
.seg-linea svg { width: 17px; height: 17px; color: var(--wa-verde-osc); flex-shrink: 0; }

@media (max-width: 1279px) {
    .info { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; box-shadow: -4px 0 16px rgba(11, 20, 26, .12); }
}

/* ---------- Celular: igual que la app ---------- */
@media (max-width: 767px) {
    .chat-app.con-chat .lista { display: none; }
    .chat-app.con-chat .conversacion { display: flex; }
    body.con-chat .nav-crm { display: none; }
    .info { width: 100%; border-left: 0; }
    .mensajes { padding: 10px 12px 8px; }
    .burbuja { max-width: 85%; }
    .btn-responder { display: none; }
    .respondiendo { padding-left: 12px; }
}

/* ---------- Modales (<dialog>) ---------- */
dialog.modal { border: 0; border-radius: 14px; padding: 0; width: min(520px, 94vw); max-height: 92vh; box-shadow: 0 12px 48px rgba(11, 20, 26, .3); color: var(--wa-texto); }
dialog.modal::backdrop { background: rgba(11, 20, 26, .45); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--wa-borde); font-size: 17px; font-weight: 500; }
.modal-cuerpo { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: calc(92vh - 140px); }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 16px; border-top: 1px solid var(--wa-borde); }
.vista-plantilla { background: var(--wa-fondo); border-radius: 8px; padding: 12px; }
.vista-plantilla .burbuja { max-width: 100%; }

/* ---------- Páginas de paneles ---------- */
.pagina { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 24px 28px; }
.pagina-titulo { font-size: 22px; font-weight: 500; color: var(--wa-texto); }
.pagina-sub { color: var(--wa-gris); font-size: 14px; margin-top: 2px; }
.tarjeta { background: #fff; border-radius: 12px; border: 1px solid var(--wa-borde); }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; font-size: 14px; border-collapse: collapse; }
.tabla th { text-align: left; font-weight: 500; color: var(--wa-gris-osc); font-size: 12.5px; padding: 10px 16px; background: #f7f8fa; border-bottom: 1px solid var(--wa-borde); white-space: nowrap; }
.tabla td { padding: 11px 16px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: #fafbfb; }
.b-estado { font-size: 12px; padding: 2px 9px; border-radius: 10px; display: inline-block; white-space: nowrap; }
.b-verde { background: #d9fdd3; color: #0a6b4f; }
.b-gris { background: var(--wa-panel); color: var(--wa-gris-osc); }
.b-rojo { background: #fde8ec; color: #b3002b; }
.b-ambar { background: #fff3c4; color: #8a5a00; }
.b-azul { background: #e7f3ff; color: #0b5394; }
.metrica { background: #fff; border-radius: 12px; border: 1px solid var(--wa-borde); padding: 16px 18px; }
.metrica .m-etq { font-size: 13px; color: var(--wa-gris); }
.metrica .m-valor { font-size: 28px; font-weight: 500; margin-top: 2px; }
.barra { height: 8px; border-radius: 4px; background: var(--wa-panel); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 4px; }
.codigo { font-family: Consolas, monospace; font-size: 12.5px; background: #111b21; color: #e9edef; border-radius: 8px; padding: 12px 14px; overflow-x: auto; white-space: pre; }
.secreto { font-family: Consolas, monospace; font-size: 13px; background: var(--wa-panel); border-radius: 6px; padding: 7px 10px; overflow-wrap: anywhere; }

@media (max-width: 767px) {
    .pagina { padding: 16px 14px; }
}

/* ---------- Tablero ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; flex: 1; min-height: 0; }
.columna { width: 290px; flex-shrink: 0; background: #e9edef; border-radius: 12px; display: flex; flex-direction: column; max-height: 100%; }
.columna-cab { padding: 12px 14px; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14.5px; }
.columna-cab .cuenta { margin-left: auto; font-size: 12.5px; color: var(--wa-gris); font-weight: 400; }
.columna-lista { padding: 0 10px 10px; overflow-y: auto; min-height: 80px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.columna.sobre { box-shadow: inset 0 0 0 2px var(--wa-verde); }
.tarjeta-chat { background: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(11, 20, 26, .1); cursor: grab; display: block; }
.tarjeta-chat:hover { box-shadow: 0 2px 6px rgba(11, 20, 26, .15); }
.tarjeta-chat.arrastrando { opacity: .45; }

/* ---------- Franja "Activar notificaciones" (como WhatsApp Web) ---------- */
.franja-notif { display: flex; align-items: center; gap: 14px; background: #53bdeb; color: #fff; padding: 12px 8px 12px 16px; flex-shrink: 0; }
.franja-notif[hidden] { display: none; }
.franja-icono { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #53bdeb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.franja-titulo { font-size: 15px; }
.franja-enlace { font-size: 13.5px; color: #fff; text-decoration: underline; text-underline-offset: 2px; padding: 0; background: none; }
.franja-texto { font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.franja-notif .btn-icono { color: #fff; }
.franja-notif .btn-icono:hover { background: rgba(255, 255, 255, .18); }

/* ---------- Silenciar (global y por chat) ---------- */
.btn-icono.silenciado { color: #8696a0; }
.badge.silenciado { background: #aebac1; }
.ico-silencio { width: 16px; height: 16px; color: #8696a0; display: block; }
/* Campana de cada fila: aparece al pasar el mouse (en celular, siempre visible y discreta) */
.btn-silenciar-item { display: none; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; color: var(--wa-gris-osc); background: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, .15); flex-shrink: 0; }
.btn-silenciar-item svg { width: 17px; height: 17px; }
.btn-silenciar-item:hover { background: rgba(11, 20, 26, .08); color: var(--wa-gris-osc); }
.item-chat:hover .btn-silenciar-item { display: inline-flex; }
@media (hover: none) { .btn-silenciar-item { display: none; } }
.btn-icono.fijado { color: var(--wa-verde); }