/* ============================================================================
   290-echoes.css — MOD-290 · OMNIA ECHOES
   ----------------------------------------------------------------------------
   Estilo Notion × Linear × GitHub, con los tokens de la casa. Cuatro reglas que
   se respetan aquí y conviene no romper después:

   · SÓLO TOKENS QUE EXISTEN. Hasta la 4.3.342 esta hoja usaba `--linea` (13
     veces) y `--bd` (4), y NINGUNA de las dos está definida para esta página:
     `--linea` sólo vive dentro del `<style>` de XPLOD y `--bd` está scoped a
     FlexWall. Una declaración con una variable indefinida es inválida, así que
     `border-color` caía a `currentColor` — los bordes de la bandeja se pintaban
     del color del texto. Los nombres buenos, de `app.css:57`, son:
        --border  --bg  --bg2  --bg3  --text  --text2  --dim
        --turq/--accent  --green  --red  --yellow
     y el acento de la marca, `--mk-acc` / `--mk-acc2`, que llega por
     `.mk-echoes` (288-marca-modulos.css:76).
   · EL ALTO SE HEREDA. `height:100%`, nunca `calc(100vh - Npx)`. Ese cálculo es
     lo que recortó la nómina en la 4.3.226 y lo que dejó FlexWall corto.
   · NADA DE `!important`. Si algo no gana, es que el selector está mal.
   · UN SOLO COLOR FUERTE, y es el del borrado, porque ese botón no se deshace.
   ========================================================================== */

#page-echoes{ height:100%; overflow:hidden; }

/* La bandeja quiere TODO el alto; el resto de pestañas se lee en columna
   estrecha. Por eso el ancho máximo lo pone cada vista, no el contenedor. */
.ech-wrap{
    height:100%; display:flex; flex-direction:column; gap:14px;
    padding:20px 20px 0; min-height:0;
}
.ech-wrap.is-conv{ padding-bottom:0; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.ech-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex:0 0 auto; }
.ech-mark{ flex:0 0 auto; width:52px; height:42px; display:inline-flex; color:var(--text); }
.ech-mark > svg{ width:100%; height:100%; display:block; }
.ech-head-txt{ flex:1 1 240px; min-width:0; }
.ech-head-txt h1{
    margin:0; color:var(--text); font-size:20px; font-weight:680;
    letter-spacing:-.01em; text-transform:none;
}
.ech-head-txt p{ margin:3px 0 0; color:var(--text2); font-size:12.5px; text-transform:none; }

/* El chip toma el verde de la marca por `color-mix`, no un hex propio: si el
   acento cambia en 288, esto va detrás sin tocarse. */
.ech-chip{
    flex:0 0 auto; padding:5px 12px; border-radius:999px;
    border:1px solid color-mix(in srgb, var(--mk-acc) 42%, transparent);
    background:color-mix(in srgb, var(--mk-acc) 12%, transparent);
    color:var(--mk-acc); font-size:10.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; white-space:nowrap;
}
.ech-chip.is-vivo::before{
    content:''; display:inline-block; width:6px; height:6px; margin-right:6px;
    border-radius:50%; background:var(--mk-acc); vertical-align:middle;
    animation:echLatido 2.4s ease-in-out infinite;
}
@keyframes echLatido{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ── Pestañas ─────────────────────────────────────────────────────────── */
.ech-tabs{
    flex:0 0 auto; display:flex; gap:2px; margin:0;
    border-bottom:1px solid var(--border);
}
.ech-tab{
    background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
    padding:9px 14px; font-size:12.5px; font-weight:600; letter-spacing:.02em;
    color:var(--text2); font-family:inherit;
}
.ech-tab:hover{ color:var(--text); }
.ech-tab.is-on{ color:var(--text); border-bottom-color:var(--text); }
.ech-tab-n{
    display:inline-block; margin-left:7px; padding:1px 6px; border-radius:999px;
    background:var(--bg3); color:var(--text2); font-size:10px; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.ech-tab.is-on .ech-tab-n{ background:var(--mk-acc); color:var(--bg); }

/* ── Tarjetas (ESTADO y LISTA NEGRA) ──────────────────────────────────── */
.ech-hoja{ flex:1 1 auto; min-height:0; overflow:auto; padding-bottom:34px; }
.ech-hoja-int{ max-width:860px; display:flex; flex-direction:column; gap:14px; }

.ech-card{
    padding:18px 20px; border:1px solid var(--border); border-radius:12px;
    background:var(--bg2); color:var(--text);
}
.ech-card h2{
    margin:0 0 14px; color:var(--text); font-size:11px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase;
}
.ech-card p{ margin:5px 0 0; color:var(--text2); font-size:12.5px; line-height:1.6; text-transform:none; }

/* El aviso es lo único que puede costar el historial de conversaciones de la
   empresa, así que se pinta en rojo y con icono. No es decoración. */
.ech-aviso{
    display:flex; gap:13px; align-items:flex-start;
    border-color:color-mix(in srgb, var(--red) 38%, var(--border));
    background:color-mix(in srgb, var(--red) 7%, var(--bg2));
}
.ech-aviso > i{ flex:0 0 auto; margin-top:2px; color:var(--red); font-size:15px; }
.ech-aviso strong{ display:block; color:var(--text); font-size:13px; text-transform:none; }

/* ── La lista de pasos ────────────────────────────────────────────────── */
.ech-steps{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.ech-step{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; }
.ech-step + .ech-step{ border-top:1px solid var(--border); }
.ech-step-dot{
    flex:0 0 18px; width:18px; height:18px; margin-top:1px;
    display:grid; place-items:center; border-radius:50%;
    border:1.5px solid var(--border); background:transparent;
    color:var(--bg); font-size:8px;
}
.ech-step.is-ok .ech-step-dot{ border-color:var(--mk-acc); background:var(--mk-acc); }
.ech-step-txt{ min-width:0; }
.ech-step-txt strong{
    display:block; color:var(--text); font-size:12.5px; font-weight:600;
    text-transform:none; letter-spacing:0;
}
.ech-step:not(.is-ok) .ech-step-txt strong{ color:var(--text2); }
.ech-step-txt small{
    display:block; margin-top:2px; color:var(--dim);
    font-size:11.5px; line-height:1.55; text-transform:none; letter-spacing:0;
}

/* ── Datos de la cuenta ───────────────────────────────────────────────── */
.ech-datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 18px; }
.ech-dato small{
    display:block; color:var(--dim); font-size:9px; font-weight:650;
    letter-spacing:.06em; text-transform:uppercase;
}
.ech-dato strong{
    display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis;
    color:var(--text); font-size:12.5px; font-weight:550; text-transform:none;
    font-variant-numeric:tabular-nums;
}
.ech-link{
    display:inline-flex; align-items:center; gap:7px; margin-top:14px;
    color:var(--mk-acc); font-size:12px; font-weight:600; text-decoration:none;
    text-transform:none;
}
.ech-link:hover{ text-decoration:underline; }
.ech-link > i{ font-size:10px; }

/* ══════════════════════════════════════════════════════════════════════════
   LA BANDEJA — tres zonas: lista · conversación · ficha
   La lista y la ficha son fijas; sólo el hilo se desplaza. El alto se HEREDA
   en cadena con `min-height:0` en cada nivel, que es lo que deja encoger a un
   hijo de flex; sin eso el hilo empuja la página y aparece el scroll de fuera.
   ══════════════════════════════════════════════════════════════════════════ */
.ech-conv{
    flex:1 1 auto; min-height:0;
    display:grid; grid-template-columns:290px minmax(0,1fr) 260px; gap:0;
    border:1px solid var(--border); border-radius:12px; overflow:hidden;
    background:var(--bg2); margin-bottom:20px;
}
@media (max-width:1180px){ .ech-conv{ grid-template-columns:270px minmax(0,1fr); } .ech-ficha{ display:none; } }
@media (max-width:820px){ .ech-conv{ grid-template-columns:1fr; } .ech-lista{ display:none; } .ech-conv.sin-abierta .ech-lista{ display:flex; } .ech-conv.sin-abierta .ech-hilo{ display:none; } }

/* ── Columna 1 · la lista ─────────────────────────────────────────────── */
.ech-lista{
    display:flex; flex-direction:column; min-height:0;
    border-right:1px solid var(--border); background:var(--bg);
}
.ech-busca{ flex:0 0 auto; display:flex; gap:6px; padding:9px; border-bottom:1px solid var(--border); }
.ech-busca input{
    flex:1 1 auto; min-width:0; background:var(--bg2); color:var(--text);
    border:1px solid var(--border); border-radius:7px; padding:7px 10px;
    font-size:12.5px; font-family:inherit;
}
.ech-busca input::placeholder{ color:var(--dim); }
.ech-busca input:focus{ outline:none; border-color:var(--turq); }
.ech-rows{ flex:1 1 auto; min-height:0; overflow:auto; }
/* «Cargar más» va al pie de la lista, dentro del scroll: se llega a él
   cuando ya se vio lo que hay, no antes. */
.ech-mas{ padding:10px 12px 16px; }
.ech-mas .ech-sub{ text-align:center; }

.ech-row{
    display:flex; gap:10px; align-items:flex-start; width:100%;
    background:none; border:0; border-bottom:1px solid var(--border); cursor:pointer;
    padding:10px 11px; text-align:left; font-family:inherit; color:var(--text);
}
.ech-row:last-child{ border-bottom:0; }
.ech-row:hover{ background:var(--bg3); }
.ech-row.is-open{ background:var(--bg3); box-shadow:inset 2px 0 0 var(--mk-acc); }

/* La inicial hace de avatar. Sin fotos: WhatsApp no las manda por webhook y
   pintar un círculo vacío sería peor que una letra. */
.ech-ava{
    flex:0 0 30px; width:30px; height:30px; border-radius:50%;
    display:grid; place-items:center; margin-top:1px;
    background:var(--bg3); border:1px solid var(--border);
    color:var(--text2); font-size:11px; font-weight:700; letter-spacing:.02em;
}
.ech-row.is-open .ech-ava{ border-color:var(--mk-acc); color:var(--mk-acc); }
.ech-row-txt{ flex:1 1 auto; min-width:0; }
.ech-row-l1{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ech-row-nom{
    font-size:12.5px; font-weight:600; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.ech-row-fec{ font-size:10.5px; color:var(--dim); flex:0 0 auto; font-variant-numeric:tabular-nums; }
.ech-row-l2{
    margin-top:2px; font-size:11.5px; color:var(--text2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ech-row-tags{ display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; }

/* ── Etiquetas ────────────────────────────────────────────────────────── */
.ech-tag{
    display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
    border-radius:999px; border:1px solid var(--border); background:var(--bg2);
    color:var(--text2); font-size:10px; font-weight:600; letter-spacing:.02em;
    white-space:nowrap; font-family:inherit;
}
.ech-tag-pt{ width:6px; height:6px; border-radius:50%; background:var(--dim); flex:0 0 auto; }
.ech-tag button{
    background:none; border:0; cursor:pointer; padding:0; margin-left:1px;
    color:var(--dim); font-size:10px; line-height:1; font-family:inherit;
}
.ech-tag button:hover{ color:var(--red); }
.ech-tag-add{
    cursor:pointer; border-style:dashed; color:var(--dim); background:transparent;
}
.ech-tag-add:hover{ color:var(--text); border-color:var(--text2); }

/* ── Columna 2 · el hilo ──────────────────────────────────────────────── */
.ech-hilo{ display:flex; flex-direction:column; min-height:0; background:var(--bg2); }
.ech-hilo-vacio{
    flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:10px; color:var(--text2); padding:44px 18px; text-align:center;
}
.ech-hilo-vacio > i{ font-size:26px; opacity:.35; }
.ech-hilo-vacio p{ margin:0; font-size:12.5px; }

.ech-det-head{
    flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:11px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap;
    background:var(--bg);
}
/* La cabecera del hilo era dos líneas de texto suelto. Con avatar se reconoce
   de un vistazo con quién estás, igual que en la lista. */
.ech-det-ava{
    flex:0 0 auto; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg3); color:var(--text2); border:1px solid var(--border);
    font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.ech-det-id{ min-width:0; flex:1 1 auto; }
.ech-det-id strong{ display:block; font-size:13.5px; color:var(--text); }
.ech-det-id small{ display:block; margin-top:1px; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.ech-det-acc{ display:flex; gap:7px; align-items:center; flex:0 0 auto; }
/* Responder: el verde va SÓLO en el icono. Un botón entero de verde en esta
   barra competiría con el rojo del borrado, que es el único color que debe
   gritar en esta pantalla. */
.ech-btn-wa{ display:inline-flex; align-items:center; gap:6px; }
.ech-btn-wa i{ color:var(--wa); font-size:13px; }
/* DOS CLASES, no una: `.ech-btn-min:hover` está MÁS ABAJO en esta hoja y tiene
   la misma especificidad, así que ganaba por orden y el verde no se veía nunca.
   Lo cazó la auditoría. Subir la especificidad es lo correcto aquí — mover la
   regla dependería del orden del archivo, que es justo lo frágil. */
.ech-btn-min.ech-btn-wa:hover{ border-color:var(--wa); color:var(--text); }

/* El pie que dice dónde se contesta. Sin él, la pantalla enseña una
   conversación y ningún sitio donde escribir: parece que falta cargar algo. */
.ech-hilo-pie{
    flex:0 0 auto; display:flex; align-items:center; gap:7px;
    padding:9px 16px; border-top:1px solid var(--border);
    background:var(--bg2); color:var(--text2); font-size:11.5px;
}
.ech-hilo-pie > i{ color:var(--dim); font-size:11px; }

.ech-msgs{
    flex:1 1 auto; min-height:0; overflow:auto; padding:16px 16px 20px;
    display:flex; flex-direction:column; gap:3px;
}

/* La fecha separa el hilo, como en WhatsApp: sin ella, seis meses seguidos son
   un muro. */
.ech-dia{
    align-self:center; margin:14px 0 8px; padding:3px 11px; border-radius:999px;
    background:var(--bg3); border:1px solid var(--border);
    color:var(--text2); font-size:10px; font-weight:650; letter-spacing:.04em;
    text-transform:uppercase;
}
.ech-dia:first-child{ margin-top:0; }

.ech-msg{ max-width:min(72%,560px); display:flex; flex-direction:column; gap:2px; }
.ech-msg.is-in{ align-self:flex-start; align-items:flex-start; }
.ech-msg.is-out{ align-self:flex-end; align-items:flex-end; }
/* Los mensajes seguidos del mismo lado se agrupan: sólo el último lleva la
   esquina en pico y la hora. */
.ech-msg + .ech-msg{ margin-top:2px; }
.ech-msg.abre{ margin-top:10px; }

.ech-msg-b{
    border:1px solid var(--border); border-radius:12px; padding:7px 11px;
    font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
    background:var(--bg3); color:var(--text);
}
.ech-msg.is-in .ech-msg-b{ border-bottom-left-radius:12px; }
.ech-msg.is-in.cierra .ech-msg-b{ border-bottom-left-radius:4px; }
/* El saliente lleva el acento de la marca, tenue: se distingue de un vistazo
   sin gritar, y sigue el tema si cambia el acento. */
.ech-msg.is-out .ech-msg-b{
    background:color-mix(in srgb, var(--mk-acc) 14%, var(--bg3));
    border-color:color-mix(in srgb, var(--mk-acc) 34%, var(--border));
}
.ech-msg.is-out.cierra .ech-msg-b{ border-bottom-right-radius:4px; }

.ech-msg-pie{
    display:flex; align-items:center; gap:5px; padding:0 3px;
    font-size:10px; color:var(--dim); font-variant-numeric:tabular-nums;
}
.ech-msg-pie .fa-mobile-screen{ font-size:9px; opacity:.75; }
.ech-sinmedia{ color:var(--text2); font-style:italic; }

/* ── Columna 3 · la ficha ─────────────────────────────────────────────── */
.ech-ficha{
    display:flex; flex-direction:column; min-height:0; overflow:auto;
    border-left:1px solid var(--border); background:var(--bg); padding:14px;
    gap:14px;
}
.ech-ficha-vacia{ color:var(--dim); font-size:12px; text-align:center; padding-top:30px; }
.ech-fbloque > h3{
    margin:0 0 8px; color:var(--dim); font-size:9px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase;
}
.ech-fnombre{
    width:100%; background:var(--bg2); color:var(--text);
    border:1px solid var(--border); border-radius:7px; padding:7px 10px;
    font-size:12.5px; font-family:inherit; font-weight:600;
}
.ech-fnombre:focus{ outline:none; border-color:var(--turq); }
.ech-fdato{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:12px; }
.ech-fdato span{ color:var(--dim); }
.ech-fdato strong{ color:var(--text); font-weight:600; text-align:right; min-width:0; word-break:break-word; }

/* El vínculo con el CRM: si el número ya es de alguien, se dice y se abre. */
.ech-vinc{
    display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
    padding:9px 10px; border:1px solid var(--border); border-radius:9px;
    background:var(--bg2); color:var(--text); font-family:inherit; text-align:left;
}
.ech-vinc:hover{ border-color:var(--turq); }
.ech-vinc > i{ flex:0 0 auto; color:var(--turq); font-size:13px; }
.ech-vinc-txt{ min-width:0; flex:1 1 auto; }
.ech-vinc-txt strong{ display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ech-vinc-txt small{ display:block; color:var(--dim); font-size:10.5px; }
/* Un lead descartado o archivado se pinta APAGADO: sigue siendo un vínculo
   real, pero no es la misma noticia que uno vivo y no debe leerse igual. */
.ech-vinc.is-frio > i{ color:var(--dim); }
.ech-vinc.is-frio .ech-vinc-txt strong{ color:var(--text2); }

/* Crear lead desde la conversación. Ocupa el ancho porque es LA acción de este
   bloque; el vínculo de arriba sólo informa. */
.ech-btn-lead{
    display:flex; align-items:center; justify-content:center; gap:7px;
    width:100%; margin-top:9px; padding:8px 12px;
}
.ech-btn-lead > i{ color:var(--turq); font-size:12px; }
.ech-btn-lead:hover{ border-color:var(--turq); }

/* ── Filtros de la bandeja ────────────────────────────────────────────────
   Las «listas» de WhatsApp (🏆, 🔥, ❄️, Interno, VIP…) NO se pueden traer: Meta
   las declara «Not supported» en Coexistence. Se recrean con etiquetas, y esta
   barra es para lo que servían. */
.ech-filtros{
    flex:0 0 auto; display:flex; flex-wrap:wrap; gap:5px;
    padding:8px 10px; border-bottom:1px solid var(--border);
}
.ech-chipf{
    display:inline-flex; align-items:center; gap:5px; cursor:pointer;
    padding:4px 9px; border-radius:999px; font-family:inherit;
    border:1px solid var(--border); background:transparent;
    color:var(--text2); font-size:11px; font-weight:600; max-width:100%;
}
.ech-chipf:hover{ border-color:var(--text2); color:var(--text); }
.ech-chipf.is-on{ background:var(--bg3); border-color:var(--text2); color:var(--text); }
.ech-chipf > span{
    color:var(--dim); font-size:10px; font-variant-numeric:tabular-nums;
}
.ech-chipf.is-on > span{ color:var(--text2); }
/* El ojo se separa del resto: no es una etiqueta, es un modo de ver. */
.ech-chipf-ojo{ margin-left:auto; }
.ech-chipf-ojo.is-on{ border-color:var(--yellow); color:var(--yellow); }

/* Una conversación oculta, cuando se enseñan: atenuada, para que se note que
   no está en la bandeja de todos los días. */
.ech-row.is-oculta{ opacity:.55; }
.ech-row.is-oculta .ech-ava{ border-style:dashed; }

/* ── Selección múltiple ───────────────────────────────────────────────── */
.ech-selbar{
    flex:0 0 auto; display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-bottom:1px solid var(--border); background:var(--bg3);
}
.ech-selbar-n{
    flex:1 1 auto; color:var(--text); font-size:11.5px; font-weight:600;
    font-variant-numeric:tabular-nums;
}
.ech-check{
    flex:0 0 auto; width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--bg2);
    color:var(--bg); font-size:11px;
}
.ech-check.is-on{ background:var(--mk-acc); border-color:var(--mk-acc); }
.ech-row.is-sel{ background:var(--bg3); }

/* ── Botones ──────────────────────────────────────────────────────────── */
.ech-btn, .ech-btn-min{
    cursor:pointer; font-family:inherit; background:var(--bg2); color:var(--text);
    border:1px solid var(--border); border-radius:7px; font-size:11.5px; font-weight:600;
}
.ech-btn{ padding:7px 13px; }
.ech-btn-min{ padding:6px 9px; color:var(--text2); background:transparent; }
.ech-btn:hover, .ech-btn-min:hover{ border-color:var(--text2); color:var(--text); }
.ech-btn-full{ width:100%; display:block; }

/* El único rojo de la pantalla, y con calavera: esto borra de verdad. */
.ech-btn-danger{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit;
    background:transparent; color:var(--red); border:1px solid var(--red);
    border-radius:7px; padding:6px 11px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
}
.ech-btn-danger:hover{ background:var(--red); color:#fff; }

/* ── Lista negra ──────────────────────────────────────────────────────── */
.ech-neg-add{ display:flex; gap:7px; margin:11px 0; }
.ech-neg-add input{
    flex:1 1 auto; min-width:0; background:var(--bg); color:var(--text);
    border:1px solid var(--border); border-radius:7px; padding:8px 11px;
    font-size:12.5px; font-family:inherit;
}
.ech-neg-add input:focus{ outline:none; border-color:var(--turq); }
.ech-neg-list{ border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.ech-neg-row{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:9px 12px; border-bottom:1px solid var(--border); font-size:12.5px;
}
.ech-neg-row:last-child{ border-bottom:0; }
/* Cada fila con cara y nombre: una columna de doce dígitos no dice a quién
   bloqueaste, que era justo lo que había que poder saber. */
.ech-neg-ava{
    flex:0 0 auto; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg3); color:var(--text2); border:1px solid var(--border);
    font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.ech-neg-id{ flex:1 1 auto; min-width:0; }
.ech-neg-id small{ display:block; margin-top:2px; color:var(--dim); font-size:10.5px; }
.ech-neg-id small em{ font-style:normal; color:var(--text2); }
.ech-neg-nom{
    width:100%; background:transparent; color:var(--text);
    border:1px solid transparent; border-radius:6px; padding:3px 6px; margin:-3px -6px;
    font-size:12.5px; font-family:inherit; font-weight:600;
}
.ech-neg-nom::placeholder{ color:var(--dim); font-weight:400; }
.ech-neg-nom:hover{ border-color:var(--border); }
.ech-neg-nom:focus{ outline:none; background:var(--bg2); border-color:var(--turq); }

/* ── Menudencias ──────────────────────────────────────────────────────── */
.ech-card p.ech-sub, .ech-sub{ margin:5px 0 0; color:var(--text2); font-size:12px; line-height:1.6; }
.ech-vacio{ color:var(--text2); font-size:12.5px; padding:20px 14px; margin:0; text-align:center; }

.ech-veto{ display:flex; gap:13px; align-items:flex-start; }
.ech-veto > i{ flex:0 0 auto; margin-top:2px; color:var(--dim); font-size:15px; }
.ech-veto strong{ display:block; color:var(--text); font-size:13px; text-transform:none; }

.ech-pie{ margin:4px 0 0; color:var(--dim); font-size:11px; line-height:1.6; text-transform:none; }
.ech-pie code{
    padding:1px 5px; border-radius:5px; background:var(--bg3);
    font-size:10.5px; font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
}
.ech-pie span{ opacity:.6; }

/* Donde iría el botón de descartar cuando la conversación es con el propio
   número de la empresa. Se explica en vez de desaparecer sin más. */
.ech-propio{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--text2); font-size:11.5px; border:1px solid var(--border);
    border-radius:7px; padding:6px 11px;
}

@media (max-width:560px){
    .ech-wrap{ padding:16px 12px 0; }
    .ech-chip{ order:3; }
    .ech-msg{ max-width:86%; }
}

/* Una etiqueta por la que se filtra pero que ya no le queda a nadie. Se pinta
   igual —y marcada— para poder soltarla: si el único chip que la quita
   desaparece, la bandeja se queda en cero sin salida. Fue un P0. */
.ech-chipf-huerf{ border-style:dashed; color:var(--dim); }

/* ── Catálogo de etiquetas y vistas guardadas ───────────────── 4.3.348 ──
   Las «listas» de WhatsApp no se pueden traer (Meta: «Not supported»), así que
   estas etiquetas las sustituyen: Gerardo las crea, todo el equipo las aplica. */
.ech-chipf-pt{
    display:inline-block; width:7px; height:7px; border-radius:50%;
    flex:0 0 auto;
}
/* Una etiqueta que alguien escribió a mano antes de que hubiera catálogo.
   Se pinta a rayas para que Gerardo sepa cuáles conviene adoptar. */
.ech-chipf-suelta{ border-style:dashed; }
.ech-filtros-der{ margin-left:auto; display:flex; gap:5px; align-items:center; }
.ech-chev{ font-size:8px; opacity:.6; }

/* El desplegable. `position:relative` en el envoltorio y no en la barra: la
   barra tiene `overflow` visible pero es flex, y anclando al contenedor el menú
   se abriría siempre en la misma esquina. */
.ech-menu-wrap{ position:relative; display:inline-flex; }
.ech-menu{
    position:absolute; top:calc(100% + 5px); right:0; z-index:40;
    min-width:230px; max-width:320px; max-height:340px; overflow:auto;
    padding:7px; border:1px solid var(--border); border-radius:10px;
    background:var(--bg2); box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.ech-menu h4{
    margin:6px 4px 4px; color:var(--dim); font-size:9px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase;
}
.ech-menu .ech-sub{ padding:6px 4px; }
.ech-menu-pie{ margin-top:6px; padding-top:7px; border-top:1px solid var(--border); }

.ech-vista{ display:flex; align-items:center; gap:4px; border-radius:7px; }
.ech-vista:hover{ background:var(--bg3); }
.ech-vista.is-on{ background:var(--bg3); }
.ech-vista-n{
    flex:1 1 auto; min-width:0; text-align:left; cursor:pointer;
    background:none; border:0; padding:6px 8px; font-family:inherit;
    color:var(--text); font-size:12.5px; font-weight:600;
}
.ech-vista-n small{
    display:block; margin-top:1px; color:var(--dim);
    font-size:10.5px; font-weight:400;
}

/* El menú de poner etiqueta se abre hacia la IZQUIERDA: el botón «+ Etiqueta»
   vive en la ficha, pegado al borde derecho de la pantalla. */
.ech-menu-tags{ right:auto; left:0; min-width:190px; }
.ech-menu-tag{
    display:flex; align-items:center; gap:7px; width:100%; cursor:pointer;
    padding:6px 8px; border:0; border-radius:7px; background:none;
    font-family:inherit; color:var(--text); font-size:12.5px; text-align:left;
}
.ech-menu-tag:hover{ background:var(--bg3); }

/* La pestaña de administración */
.ech-tag-pt-g{ flex:0 0 auto; width:12px; height:12px; border-radius:50%; }
.ech-tag-col{
    flex:0 0 auto; width:30px; height:26px; padding:0; cursor:pointer;
    border:1px solid var(--border); border-radius:6px; background:var(--bg2);
}