/* Piel de la bandeja de conversaciones (Componentes/BandejaConversaciones.razor).
   Se sirve como  _content/IntegraIA.Conversaciones/css/integraia-bandeja.css  y cada producto
   la linkea, igual que la del panel de configuración del agente.

   ⚠️ NO es CSS aislado de Blazor a propósito: el bundle `<Proyecto>.styles.css` sólo llega si el
   host lo linkea, y hay productos que no lo hacen. Una hoja que depende de eso es una pantalla
   que aparece sin estilos, sin un solo error en la consola.

   ⚠️ TODO cuelga de `.icv` — ni un selector suelto sobre `button`, `input` o `textarea`. Esta
   hoja entra a productos con su propio CSS ya escrito, y un selector global les cambia pantallas
   que nadie tocó.

   ── Cómo lo pinta un producto ────────────────────────────────────────────────────────────────
   En su propia hoja, DESPUÉS de linkear ésta:

       .icv { --icv-acento: #059669; --icv-propio: #d1fae5; }

   El resto son grises que funcionan con cualquier acento. */

.icv {
    --icv-acento: #2563eb;
    --icv-propio: #dbeafe;          /* burbuja de lo que mandamos nosotros */
    --icv-ajeno: #ffffff;           /* burbuja de lo que dijo la persona */
    --icv-texto: #1e293b;
    --icv-tenue: #64748b;
    --icv-borde: #e2e8f0;
    --icv-fondo: #f8fafc;

    display: flex;
    gap: 0;
    height: min(72vh, 720px);
    border: 1px solid var(--icv-borde);
    border-radius: 10px;
    overflow: hidden;
    background: var(--icv-fondo);
    color: var(--icv-texto);
    font-size: 0.9rem;
}

/* ── Panel izquierdo ─────────────────────────────────────────────────────────────────────── */

.icv .icv-lista {
    width: 340px;
    flex: 0 0 340px;
    border-right: 1px solid var(--icv-borde);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.icv .icv-filtros { padding: 0.7rem; border-bottom: 1px solid var(--icv-borde); }

.icv .icv-buscar {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--icv-borde);
    border-radius: 6px;
    font: inherit;
}

.icv .icv-chips { display: flex; gap: 0.35rem; margin-top: 0.5rem; }

/* «Nuevo chat»: el botón va debajo del buscador y el panel reemplaza a la lista mientras está abierto. */
.icv .icv-nuevo-chat {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px dashed var(--icv-acento);
    border-radius: 6px;
    background: #fff;
    color: var(--icv-acento);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.icv .icv-nuevo-chat:hover { background: var(--icv-propio); }
.icv .icv-nuevo-panel { padding: 0.7rem 0 0; }
.icv .icv-nuevo-panel > .icv-buscar,
.icv .icv-nuevo-panel > .icv-tenue { margin: 0 0.7rem 0.5rem; width: calc(100% - 1.4rem); }
.icv .icv-nuevo-panel > .icv-tenue { font-size: 0.78rem; display: block; }
.icv .icv-nuevo-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 0 0.7rem 0.5rem; }
.icv .icv-nuevo-panel .icv-item:disabled { cursor: not-allowed; opacity: 0.55; }
.icv .icv-nuevo-panel .icv-item:disabled:hover { background: #fff; }

.icv .icv-chip {
    border: 1px solid var(--icv-borde);
    background: #fff;
    color: var(--icv-tenue);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.icv .icv-chip.on {
    background: var(--icv-acento);
    border-color: var(--icv-acento);
    color: #fff;
}

.icv .icv-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--icv-borde);
    background: #fff;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    font: inherit;
}

.icv .icv-item:hover { background: #f8fafc; }
.icv .icv-item.sel { background: var(--icv-propio); }

.icv .icv-item-linea1 { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.icv .icv-nombre { font-weight: 600; }

.icv .icv-badge {
    background: var(--icv-acento);
    color: #fff;
    border-radius: 999px;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    text-align: center;
}

.icv .icv-item-linea2 { margin-top: 0.15rem; }

.icv .icv-preview {
    color: var(--icv-tenue);
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.icv .icv-item-linea3 {
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.72rem;
    color: var(--icv-tenue);
}

.icv .icv-etq {
    border: 1px solid var(--icv-borde);
    border-radius: 999px;
    padding: 0 0.45rem;
    background: #f1f5f9;
    color: #0f172a;
}

.icv .icv-vacio { padding: 1.2rem 0.9rem; color: var(--icv-tenue); line-height: 1.5; }

/* ── Panel derecho ───────────────────────────────────────────────────────────────────────── */

.icv .icv-chat { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.icv .icv-sinseleccion {
    margin: auto;
    color: var(--icv-tenue);
    padding: 2rem;
    text-align: center;
}

.icv .icv-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--icv-borde);
    background: #fff;
    flex-wrap: wrap;
}

.icv .icv-tenue { color: var(--icv-tenue); font-size: 0.8rem; margin-left: 0.5rem; }
.icv .icv-acciones { display: flex; align-items: center; gap: 0.6rem; }

.icv .icv-switch {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--icv-tenue);
    cursor: pointer;
}

.icv .icv-btn {
    border: 1px solid var(--icv-borde);
    background: #fff;
    border-radius: 6px;
    padding: 0.25rem 0.7rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
}

.icv .icv-etiquetera {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--icv-borde);
    background: #fff;
}

.icv .icv-etq-btn {
    border: 1px solid var(--icv-borde);
    background: #fff;
    color: var(--icv-tenue);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.76rem;
    cursor: pointer;
}

.icv .icv-etq-btn.on { color: #0f172a; font-weight: 600; }

.icv .icv-mensajes {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.icv .icv-msg { display: flex; }
.icv .icv-msg.de-ellos { justify-content: flex-start; }
.icv .icv-msg.de-nosotros { justify-content: flex-end; }

.icv .icv-burbuja {
    max-width: min(72%, 520px);
    background: var(--icv-ajeno);
    border: 1px solid var(--icv-borde);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
}

.icv .icv-msg.de-nosotros .icv-burbuja {
    background: var(--icv-propio);
    border-color: transparent;
}

.icv .icv-burbuja.fallo { border-color: #fca5a5; background: #fef2f2; }

.icv .icv-texto { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.icv .icv-adjunto { margin-top: 0.35rem; }
.icv .icv-adjunto img { max-width: 100%; border-radius: 8px; display: block; }

.icv .icv-pie {
    margin-top: 0.25rem;
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    font-size: 0.7rem;
    color: var(--icv-tenue);
}

.icv .icv-autor { font-style: italic; }
.icv .icv-error { margin-top: 0.3rem; font-size: 0.75rem; color: #b91c1c; }

.icv .icv-composer {
    border-top: 1px solid var(--icv-borde);
    padding: 0.6rem 0.8rem;
    background: #fff;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.icv .icv-input {
    flex: 1 1 auto;
    resize: vertical;
    border: 1px solid var(--icv-borde);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font: inherit;
    min-width: 0;
}

.icv .icv-enviar {
    background: var(--icv-acento);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    font: inherit;
}

.icv .icv-enviar:disabled { opacity: 0.5; cursor: default; }

.icv .icv-cerrada {
    flex: 1 1 100%;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.83rem;
    line-height: 1.45;
}

.icv .icv-error-envio {
    flex: 1 1 100%;
    color: #b91c1c;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ── Teléfono: la lista y el chat no entran a la vez ──────────────────────────────────────── */

@media (max-width: 820px) {
    .icv { flex-direction: column; height: auto; }
    .icv .icv-lista { width: auto; flex: 0 0 auto; max-height: 45vh; border-right: 0;
                      border-bottom: 1px solid var(--icv-borde); }
    .icv .icv-mensajes { max-height: 55vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   12/09/2026 — Tres paneles, composer según la ventana, ficha, notas, sugerencias, mobile.
   Todo sigue colgado de `.icv`. Los colores nuevos son grises o derivan de --icv-acento;
   el producto los pinta con las mismas dos variables de siempre.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.icv.icv-3col { height: min(78vh, 820px); }
.icv .icv-lista { width: 320px; flex: 0 0 320px; }
.icv .icv-chat  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; }
.icv .icv-ficha-wrap { flex: 0 0 300px; width: 300px; border-left: 1px solid var(--icv-borde); background: #fff; overflow-y: auto; display: flex; flex-direction: column; }
.icv .icv-ficha { flex: 1 1 auto; padding: 0.9rem; }
.icv .icv-ficha-vacia { flex: 0 0 300px; border-left: 1px solid var(--icv-borde); background: #fff; }

/* chips con contador y por canal */
.icv .icv-chips { flex-wrap: wrap; }
.icv .icv-chips-sec { margin-top: 0.4rem; }
.icv .icv-chip em { font-style: normal; opacity: .75; margin-left: .25rem; font-size: .72rem; }
.icv .icv-chip.on em { opacity: 1; }
.icv .icv-chip-alerta { border-color: #f59e0b; color: #b45309; }
.icv .icv-chip-alerta.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.icv .icv-sep { width: 1px; background: var(--icv-borde); margin: 0 .2rem; }
.icv .icv-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.icv .icv-punto-wa { background: #25d366; }
.icv .icv-punto-ig { background: #a3457e; }

/* fila de la lista con avatar */
.icv .icv-item { display: flex; gap: .6rem; align-items: flex-start; }
.icv .icv-item.por-vencer { box-shadow: inset 3px 0 0 #f59e0b; }
.icv .icv-item-cuerpo { flex: 1 1 auto; min-width: 0; }
.icv .icv-item-linea2 { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.icv .icv-item-linea3 { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .25rem; }
.icv .icv-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--icv-tenue); font-size: .82rem; }
.icv .icv-hora { color: var(--icv-tenue); font-size: .72rem; flex: 0 0 auto; }
.icv .icv-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--icv-propio); color: var(--icv-acento); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; position: relative; }
.icv .icv-avatar-lg { width: 48px; height: 48px; flex-basis: 48px; font-size: .95rem; }
.icv .icv-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }
.icv .icv-avatar.wa::after { background: #25d366; }
.icv .icv-avatar.ig::after { background: #a3457e; }
.icv .icv-etq-ia { background: #ede9fe; border-color: #ddd6fe; color: #5b21b6; }
.icv .icv-ventana { font-size: .7rem; color: var(--icv-tenue); border: 1px solid var(--icv-borde); border-radius: 999px; padding: 0 .4rem; }
.icv .icv-ventana.alerta { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.icv .icv-ventana.cerrada { border-color: #fecaca; color: #991b1b; background: #fef2f2; }
.icv .icv-vacio-lista { padding: 1.4rem 1rem; text-align: center; }
.icv .icv-vacio-lista p { margin: 0 0 .4rem; }

/* cabecera del chat */
.icv .icv-cabecera { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-bottom: 1px solid var(--icv-borde); background: #fff; flex-wrap: wrap; }
.icv .icv-cab-quien { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.icv .icv-cab-quien strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icv .icv-acciones { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.icv .icv-btn.on { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.icv .icv-btn-primario { background: var(--icv-acento); border-color: var(--icv-acento); color: #fff; }
.icv .icv-btn-primario:disabled { opacity: .55; cursor: not-allowed; }
.icv .icv-volver { display: none; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--icv-acento); padding: 0 .3rem; }
.icv .icv-btn-ficha { display: none; }

/* la ventana de 24 h, siempre a la vista */
.icv .icv-ventana-banner { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .4rem .8rem; font-size: .78rem; border-bottom: 1px solid var(--icv-borde); }
.icv .icv-ventana-banner.abierta    { background: #f0fdf4; color: #166534; }
.icv .icv-ventana-banner.por-vencer { background: #fffbeb; color: #92400e; }
.icv .icv-ventana-banner.cerrada    { background: #fef2f2; color: #991b1b; }
.icv .icv-ventana-banner.sin-accion { background: #f1f5f9; color: var(--icv-tenue); }

/* burbujas: IA, plantilla, nota interna */
.icv .icv-mensajes { flex: 1 1 auto; overflow-y: auto; }
.icv .icv-burbuja.de-ia { background: #ecfdf5; border: 1px solid #a7f3d0; }
.icv .icv-burbuja.plantilla { border-style: dashed; }
.icv .icv-burbuja-tag { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #047857; margin-bottom: .2rem; font-weight: 700; }
.icv .icv-burbuja.plantilla .icv-burbuja-tag { color: var(--icv-tenue); }
.icv .icv-msg-nota { display: flex; justify-content: center; padding: .25rem .8rem; }
.icv .icv-nota { max-width: 80%; background: #fefce8; border: 1px dashed #fde047; border-radius: 8px; padding: .45rem .7rem; font-size: .85rem; }
.icv .icv-nota-cab { font-size: .7rem; color: #854d0e; margin-bottom: .2rem; font-weight: 600; }
/* El aviso que deja el sistema (no una persona): gris, para que la nota escrita a mano resalte. */
.icv .icv-nota.aviso { background: #f8fafc; border-color: #cbd5e1; }
.icv .icv-nota.aviso .icv-nota-cab { color: #475569; }

/* Notas compactas (23/10/2026): una línea fina por tanda, como los avisos de WhatsApp. Se abre al tocarla.
   ⚠️ Tamaños en rem: tienen que crecer con el control de letra. */
.icv .icv-nota-linea { display: flex; align-items: center; gap: .5rem; max-width: 92%; min-width: 0; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; border-radius: 999px; padding: .15rem .7rem; font: inherit; font-size: .72rem; cursor: pointer; text-align: left; }
.icv .icv-nota-linea:hover { background: #f1f5f9; }
.icv .icv-nota-linea small { flex: none; font-size: .66rem; color: #94a3b8; }
.icv .icv-nota-linea-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icv .icv-nota-linea.de-persona { background: #fefce8; border-color: #fde047; color: #854d0e; }
.icv .icv-nota-linea.abierta { background: transparent; border-style: dashed; }

/* El selector Compactas · Completas · Ocultas, arriba del chat. */
.icv .icv-notas-modo { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .3rem .8rem; border-bottom: 1px solid #f1f5f9; font-size: .75rem; }
.icv .icv-notas-modo .icv-chip { font-size: .72rem; padding: .1rem .55rem; }

/* respuesta sugerida */
.icv .icv-sugerencia { margin: .4rem .8rem; border: 1px solid #a7f3d0; background: #ecfdf5; border-radius: 10px; padding: .6rem .8rem; }
.icv .icv-sugerencia-cab { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #047857; font-weight: 700; margin-bottom: .3rem; }
.icv .icv-sugerencia-acciones { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .5rem; flex-wrap: wrap; }

/* composer */
.icv .icv-composer { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; padding: .6rem .8rem; border-top: 1px solid var(--icv-borde); background: #fff; }
.icv .icv-composer .icv-input { flex: 1 1 260px; }
.icv .icv-composer-btns { display: flex; gap: .4rem; align-items: center; }
.icv .icv-input-nota { background: #fefce8; border-color: #fde047; }
.icv .icv-enviar-nota { background: #ca8a04; border-color: #ca8a04; }
.icv .icv-cerrada { flex: 1 1 100%; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: .5rem .7rem; font-size: .82rem; }
.icv .icv-sin-accion { flex: 1 1 100%; background: #f8fafc; border: 1px solid var(--icv-borde); border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; }
.icv .icv-sin-accion strong { display: block; margin-bottom: .2rem; }
.icv .icv-sin-accion p { margin: .25rem 0; }
.icv .icv-no-permite { margin: .4rem 0; padding-left: 1.1rem; color: #991b1b; font-size: .8rem; }
.icv .icv-composer-plantillas { border-top: 1px solid var(--icv-borde); background: #fff; max-height: 46%; overflow-y: auto; flex-shrink: 0; /* en una columna flex (la app del celular) se aplastaba a 9 px */ }

/* selector de plantillas */
.icv .icv-plantillas { padding: .7rem .8rem; }
.icv .icv-plantillas-cab { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: .85rem; }
.icv .icv-plantillas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.icv .icv-plantilla { text-align: left; border: 1px solid var(--icv-borde); border-radius: 10px; background: #fff; padding: .55rem .7rem; cursor: pointer; font: inherit; }
.icv .icv-plantilla:hover { border-color: var(--icv-acento); }
.icv .icv-plantilla.sel { border-color: var(--icv-acento); background: var(--icv-propio); }
.icv .icv-plantilla-cab { display: flex; justify-content: space-between; gap: .4rem; align-items: center; }
.icv .icv-plantilla-cab code { font-size: .78rem; }
.icv .icv-plantilla-estado { font-size: .66rem; border-radius: 999px; padding: 0 .45rem; background: #dcfce7; color: #166534; }
.icv .icv-plantilla-cuerpo { font-size: .8rem; margin: .3rem 0; color: var(--icv-texto); white-space: pre-wrap; }
.icv .icv-plantilla-pie { font-size: .68rem; color: var(--icv-tenue); letter-spacing: .04em; text-transform: uppercase; }
.icv .icv-plantilla-vars { margin-top: .7rem; border-top: 1px solid var(--icv-borde); padding-top: .6rem; }
.icv .icv-plantilla-vars-cab { font-size: .8rem; margin-bottom: .4rem; }
.icv .icv-plantilla-var { display: flex; gap: .5rem; align-items: center; margin-bottom: .35rem; font-size: .8rem; }
.icv .icv-plantilla-var span { flex: 0 0 44px; font-family: monospace; color: var(--icv-tenue); }
.icv .icv-plantilla-var input { flex: 1 1 auto; padding: .35rem .5rem; border: 1px solid var(--icv-borde); border-radius: 6px; font: inherit; }
.icv .icv-plantilla-preview { margin: .5rem 0; font-size: .82rem; }
.icv .icv-plantilla-preview .icv-burbuja { display: inline-block; margin-top: .25rem; background: var(--icv-propio); }
.icv .icv-plantilla-acciones { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.icv .icv-plantillas-vacio { text-align: center; padding: .8rem; }
.icv .icv-plantillas-vacio p { margin: .3rem 0; }
/* Compacto (la app del celular): renglones de una línea y la elegida plegada. */
.icv .icv-plantillas-buscar { width: 100%; box-sizing: border-box; padding: .45rem .7rem; margin-bottom: .45rem; border: 1px solid var(--icv-borde); border-radius: 999px; font: inherit; font-size: 16px; background: #eef1f6; }
.icv .icv-plantillas-renglones { display: flex; flex-direction: column; max-height: 13rem; overflow-y: auto; border: 1px solid var(--icv-borde); border-radius: 10px; }
.icv .icv-plantilla-renglon { display: flex; flex-direction: column; gap: .05rem; text-align: left; border: 0; border-bottom: 1px solid var(--icv-borde); background: #fff; padding: .5rem .7rem; font: inherit; cursor: pointer; min-width: 0; }
.icv .icv-plantilla-renglon:last-child { border-bottom: 0; }
.icv .icv-plantilla-renglon.sel, .icv .icv-plantilla-renglon:active { background: var(--icv-propio); }
.icv .icv-plantilla-renglon strong { font-size: .88rem; }
.icv .icv-plantilla-renglon span { font-size: .78rem; color: var(--icv-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icv .icv-plantilla-elegida { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.icv .icv-plantilla-elegida strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icv .icv-plantilla-elegida + .icv-plantilla-vars { margin-top: .45rem; padding-top: .45rem; }

/* ficha */
.icv .icv-ficha-cargando { color: var(--icv-tenue); font-size: .85rem; }
.icv .icv-ficha-cab { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.icv .icv-ficha-quien { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.icv .icv-vinculo { align-self: flex-start; font-size: .68rem; border-radius: 999px; padding: .05rem .5rem; background: var(--icv-propio); color: var(--icv-acento); font-weight: 600; }
.icv .icv-vinculo-nuevo { background: #fef3c7; color: #92400e; }
.icv .icv-ficha-link { font-size: .78rem; color: var(--icv-acento); text-decoration: none; white-space: nowrap; }
.icv .icv-ficha-datos { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; margin: 0 0 .6rem; font-size: .82rem; }
.icv .icv-ficha-datos dt { color: var(--icv-tenue); }
.icv .icv-ficha-datos dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icv .icv-ficha-seccion { border-top: 1px solid var(--icv-borde); padding-top: .6rem; margin-top: .6rem; }
.icv .icv-ficha-seccion h4 { margin: 0 0 .45rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--icv-tenue); display: flex; justify-content: space-between; gap: .4rem; }
.icv .icv-ficha-nota { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .68rem; background: #ecfdf5; color: #047857; border-radius: 999px; padding: 0 .4rem; }
.icv .icv-ficha-vinculos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; }
.icv .icv-ficha-vinculos li { display: flex; flex-direction: column; }
.icv .icv-ficha-vinculos a { color: var(--icv-acento); text-decoration: none; }
.icv .icv-ficha-vinculos small { color: var(--icv-tenue); }
.icv .icv-ficha-vacio { color: var(--icv-tenue); font-size: .8rem; margin: 0; }
.icv .icv-ficha-acciones { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
.icv .icv-volver-ficha { display: none; text-align: left; padding: .5rem .8rem; font-size: .85rem; border-bottom: 1px solid var(--icv-borde); }

/* ── Mobile: un panel por vez, con botón de volver ─────────────────────────────────────── */
@media (max-width: 900px) {
    .icv.icv-3col { height: calc(100vh - 140px); min-height: 480px; }
    .icv .icv-lista, .icv .icv-chat, .icv .icv-ficha-wrap { display: none; width: 100%; flex: 1 1 100%; border: 0; }
    .icv .icv-ficha-vacia { display: none; }
    .icv.icv-vista-lista .icv-lista { display: flex; }
    .icv.icv-vista-chat  .icv-chat  { display: flex; }
    .icv.icv-vista-ficha .icv-ficha-wrap { display: flex; }
    .icv .icv-volver, .icv .icv-btn-ficha, .icv .icv-volver-ficha { display: inline-block; }
    .icv .icv-cabecera .icv-switch span { display: none; }
    .icv .icv-plantillas-lista { grid-template-columns: 1fr; }
}

/* ── Pantallas de gestión: plantillas, grupos, difusiones, etiquetas, canales ─────────────── */
.icv.icv-gestion { display: block; height: auto; min-height: 0; border: 0; background: transparent; overflow: visible; }
.icv .icv-gestion-cols { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1rem; }
.icv .icv-gestion-lista, .icv .icv-gestion-form { background: #fff; border: 1px solid var(--icv-borde); border-radius: 10px; padding: .8rem; }
.icv .icv-gestion-lista { display: flex; flex-direction: column; gap: .5rem; max-height: 78vh; overflow-y: auto; }
.icv .icv-gestion-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.icv .icv-gestion-sub { border-top: 1px solid var(--icv-borde); margin-top: 1rem; padding-top: .8rem; }
.icv .icv-aviso-sim { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; margin-bottom: .8rem; }
.icv .icv-aviso { background: #f8fafc; border: 1px solid var(--icv-borde); border-radius: 8px; padding: .5rem .7rem; font-size: .82rem; margin: .4rem 0 .6rem; }
.icv .icv-ok { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: .45rem .7rem; font-size: .82rem; margin: .4rem 0; }
.icv .icv-campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; font-size: .85rem; }
.icv .icv-campo > span { font-weight: 600; }
.icv .icv-campo small { font-weight: 400; color: var(--icv-tenue); }
.icv .icv-campo input, .icv .icv-campo select, .icv .icv-campo textarea { padding: .45rem .6rem; border: 1px solid var(--icv-borde); border-radius: 6px; font: inherit; width: 100%; box-sizing: border-box; }
.icv .icv-campo textarea { resize: vertical; }
.icv .icv-campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* ⚠️ El checkbox rompe el molde de .icv-campo, que apila en columna y estira el control al
   100%: sin esto queda un cuadradito de 700 px de ancho con la etiqueta abajo. */
.icv .icv-campo-check { flex-direction: row; align-items: flex-start; gap: .5rem; }
.icv .icv-campo-check input[type="checkbox"],
.icv .icv-campo-check input[type="radio"] { width: auto; flex: none; margin-top: .2rem; }
.icv .icv-campo-check > span { font-weight: 500; }
/* Un grupo de opciones excluyentes: el título arriba como en .icv-campo, y cada opción en su
   renglón con el molde del checkbox. */
.icv .icv-opciones { border: 0; padding: 0; margin: 0 0 .7rem; font-size: .85rem; }
.icv .icv-opciones > legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.icv .icv-opciones .icv-campo-check { display: flex; margin-bottom: .3rem; cursor: pointer; }
/* Los destinos de una difusión: uno por tarjeta, con sus parámetros adentro. */
.icv .icv-destinos { display: flex; flex-direction: column; gap: .4rem; }
.icv .icv-destino { border: 1px solid var(--icv-borde); border-radius: 8px; padding: .45rem .6rem; background: #fff; }
.icv .icv-destino-cab { display: flex; align-items: center; gap: .5rem; }
.icv .icv-destino-cab strong { flex: 1; font-weight: 600; min-width: 0; }
.icv .icv-destino .icv-campos-2 { margin-top: .4rem; }
.icv .icv-destino .icv-campo { margin-bottom: 0; }
/* El detalle del costo va DEBAJO de la ficha y no en su <dd>, que corta con «…» lo que no entra. */
.icv .icv-costo-detalle { display: block; margin: -.3rem 0 .6rem; font-size: .78rem; color: var(--icv-tenue); line-height: 1.4; }
.icv .icv-btn-peligro { color: #991b1b; border-color: #fecaca; background: #fff; }
.icv .icv-btn-peligro:hover { background: #fef2f2; }
.icv .icv-btn-mini { padding: .1rem .45rem; font-size: .75rem; }
.icv .icv-plantilla-estado.est-borrador   { background: #f1f5f9; color: var(--icv-tenue); }
.icv .icv-plantilla-estado.est-enrevision { background: #fef3c7; color: #92400e; }
.icv .icv-plantilla-estado.est-aprobada, .icv .icv-plantilla-estado.est-enviada { background: #dcfce7; color: #166534; }
.icv .icv-plantilla-estado.est-rechazada, .icv .icv-plantilla-estado.est-fallida { background: #fee2e2; color: #991b1b; }
.icv .icv-plantilla-estado.est-pausada, .icv .icv-plantilla-estado.est-cancelada { background: #e2e8f0; color: #475569; }
.icv .icv-plantilla-estado.est-enviando, .icv .icv-plantilla-estado.est-programada { background: #dbeafe; color: #1e40af; }
.icv .icv-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .5rem; }
.icv .icv-tabla th { text-align: left; font-weight: 600; color: var(--icv-tenue); border-bottom: 1px solid var(--icv-borde); padding: .35rem .4rem; }
.icv .icv-tabla td { padding: .4rem; border-bottom: 1px solid var(--icv-borde); vertical-align: top; }
.icv .icv-tabla tr.est-fallido td { background: #fef2f2; }
.icv .icv-tabla tr.est-omitido td { color: var(--icv-tenue); }
.icv .icv-lista-marcar { display: flex; flex-direction: column; gap: .3rem; max-height: 260px; overflow-y: auto; border: 1px solid var(--icv-borde); border-radius: 8px; padding: .5rem; font-size: .85rem; }
.icv .icv-lista-marcar label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.icv .icv-lista-marcar label.ya { opacity: .5; }
.icv .icv-error-texto { color: #b91c1c; font-size: .78rem; }
.icv details.icv-aviso summary { cursor: pointer; font-weight: 600; }
.icv details.icv-aviso ul, .icv .icv-error-envio ul { margin: .4rem 0 0; padding-left: 1.2rem; max-height: 200px; overflow-y: auto; }
.icv .icv-presupuesto { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 10px; padding: .7rem .9rem; margin-top: .8rem; }
.icv .icv-presupuesto h4 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #166534; }
.icv .icv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin: .6rem 0 .9rem; }
.icv .icv-kpis > div { border: 1px solid var(--icv-borde); border-radius: 8px; padding: .5rem; text-align: center; display: flex; flex-direction: column; }
.icv .icv-kpis b { font-size: 1.3rem; }
.icv .icv-kpis span { font-size: .7rem; color: var(--icv-tenue); }
.icv .icv-kpis > div.mal { border-color: #fecaca; background: #fef2f2; }
.icv .icv-etiquetas-grilla { display: flex; flex-wrap: wrap; gap: .4rem; }
.icv .icv-etq-grande { font-size: .85rem; padding: .25rem .7rem; }
.icv .icv-colores { display: flex; gap: .4rem; flex-wrap: wrap; }
.icv .icv-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.icv .icv-color.sel { border-color: var(--icv-texto); }
/* canales */
.icv.icv-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.icv .icv-canal { background: #fff; border: 1px solid var(--icv-borde); border-radius: 10px; padding: 1rem; font-size: .88rem; }
.icv .icv-canal h4 { margin: .8rem 0 .4rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--icv-tenue); }
.icv .icv-canal-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.icv .icv-canal-cab strong { flex: 1 1 auto; }
.icv .icv-requisitos { list-style: none; padding: 0; margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .5rem; }
.icv .icv-requisitos label { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.icv .icv-requisitos input { margin-top: .25rem; }
.icv .icv-requisitos-info { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-direction: column; gap: .25rem; }
.icv .icv-pasos { padding-left: 1.3rem; margin: .6rem 0; display: flex; flex-direction: column; gap: .5rem; }
.icv .icv-pasos li { opacity: .55; }
.icv .icv-pasos li.actual { opacity: 1; background: var(--icv-propio); border-radius: 6px; padding: .3rem .5rem; margin-left: -.5rem; }
.icv .icv-pasos li.hecho { opacity: .85; text-decoration: none; }
.icv .icv-pasos li.hecho b::before { content: "✓ "; color: #166534; }
.icv .icv-diagnostico { margin-top: .8rem; font-size: .82rem; }
.icv .icv-diagnostico summary { cursor: pointer; color: var(--icv-acento); }
.icv .icv-diagnostico ul { margin: .4rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
@media (max-width: 900px) {
    .icv .icv-gestion-cols { grid-template-columns: 1fr; }
    .icv .icv-gestion-lista { max-height: 40vh; }
    .icv .icv-campos-2 { grid-template-columns: 1fr; }
}

/* ── Nota interna: cuadro propio en la columna derecha, lejos del composer (12/09) ─────── */
.icv .icv-nota-bloque { margin: .7rem .9rem 0; border: 1px dashed #fde047; background: #fefce8; border-radius: 10px; overflow: hidden; }
.icv .icv-nota-bloque-cab { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; border: 0; background: transparent; padding: .5rem .7rem; font: inherit; font-size: .82rem; font-weight: 600; color: #854d0e; cursor: pointer; text-align: left; }
.icv .icv-nota-bloque-cab small { font-weight: 400; color: #a16207; }
.icv .icv-nota-bloque.abierta .icv-nota-bloque-cab { border-bottom: 1px dashed #fde047; }
.icv .icv-nota-bloque .icv-input-nota { display: block; width: calc(100% - 1.4rem); margin: .6rem .7rem .4rem; box-sizing: border-box; }
.icv .icv-nota-bloque-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 0 .7rem .6rem; flex-wrap: wrap; }

/* ── Canal Portal (la app del producto) y conversación por PERSONA (12/09) ─────────────── */
.icv .icv-punto-app { background: var(--icv-acento); }
.icv .icv-avatar.app::after { background: var(--icv-acento); }
.icv .icv-canales { display: inline-flex; gap: 2px; align-items: center; }
.icv .icv-canales .icv-punto { margin-right: 0; }
.icv .icv-cab-canal { display: inline-flex; align-items: center; gap: .15rem; margin-right: .5rem; white-space: nowrap; }
.icv .icv-destino { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; padding: .4rem .8rem; border-bottom: 1px solid var(--icv-borde); background: #fff; font-size: .8rem; }
.icv .icv-destino .icv-chip small { margin-left: .2rem; opacity: .8; }
.icv .icv-ventana-banner.propio { background: var(--icv-propio); color: var(--icv-texto); }
.icv .icv-pie .icv-punto { margin-right: .2rem; }

/* ── Botones de una plantilla ──────────────────────────────────────────────
   Se dibujan en la vista previa para que se vea lo que va a recibir la persona.
   ⚠️ Un botón de respuesta rápida es lo que reabre la ventana de 24 h cuando lo tocan,
   así que verlo antes de mandar la plantilla a aprobar no es un detalle estético:
   es la diferencia entre una campaña que se lee y una conversación que se puede seguir. */
/* El encabezado de archivo en la vista previa. No se dibuja la imagen: lo que importa acá es
   que se vea QUE va un archivo arriba del texto, y el archivo puede ser un PDF o un video. */
.icv-burbuja-adjunto {
    margin-bottom: .4rem;
    padding: .5rem .6rem;
    border-radius: .4rem;
    background: var(--icv-fondo-suave, #f1f5f9);
    color: var(--icv-texto-tenue, #64748b);
    font-size: .85rem;
}

.icv-burbuja-boton {
    margin-top: .4rem;
    padding: .4rem .6rem;
    text-align: center;
    border-top: 1px solid var(--icv-borde, #e2e8f0);
    color: var(--icv-acento, #2563eb);
    font-size: .9rem;
}

/* El bloque de programar el envío, adentro del presupuesto. */
.icv-programar {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--icv-borde, #e2e8f0);
}

.icv-programar small { display: block; margin-top: .35rem; }

/* Quien hablo ultimo, delante del preview. Tenue a proposito: tiene que dejar leer el
   texto de un vistazo, no competir con el. Cuando el que hablo fue el CLIENTE no se
   dibuja nada — esa es la mayoria de las filas que importan, y un prefijo en todas
   gastaria el ancho que necesita el mensaje. */
.icv .icv-preview-autor {
    color: var(--icv-tenue, #94a3b8);
    margin-right: .25rem;
    flex: 0 0 auto;
    font-weight: 600;
}

/* Un «icv» que NO es la bandeja de tres columnas: aporta los colores y el scope de las
   reglas `.icv .icv-*`, y le saca el layout. Sin esto habria que duplicar chips, botones
   y etiquetas para cada pantalla nueva del modulo. */
.icv.icv-suelto {
    display: block;
    height: auto;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

/* ── LISTA COMPACTA DE MENSAJES ─────────────────────────────────────────────
   Una linea por persona, para barrer muchas de un vistazo. Es lo contrario de la
   bandeja de tres paneles: ahi se trabaja UNA conversacion, aca se miran TODAS. */
.icv .icv-msgs{ display: flex; flex-direction: column; gap: .75rem; }

.icv .icv-msgs-barra{ display: flex; flex-direction: column; gap: .5rem; }

.icv .icv-msgs-vacio{ padding: 2rem 1rem; text-align: center; }

.icv .icv-msgs-lista{ list-style: none; margin: 0; padding: 0; border-radius: 12px; overflow: hidden; }

.icv .icv-msg{ border-bottom: 1px solid var(--icv-borde, #e2e8f0); background: var(--icv-fondo, #fff); }
.icv .icv-msg:last-child{ border-bottom: 0; }

/* El que espera se distingue por el PESO y una barra, no por un color de fondo:
   una lista con la mitad de las filas pintadas deja de tener jerarquia. */
.icv .icv-msg.espera{ border-left: 3px solid var(--icv-acento, #2D8B5E); }
.icv .icv-msg.espera .icv-msg-nombre{ font-weight: 700; }
.icv .icv-msg.espera .icv-msg-texto{ color: var(--icv-texto, #1e293b); }

.icv .icv-msg.abierto{ background: var(--icv-fondo-alt, #f8fafc); }

.icv .icv-msg-fila{
    display: grid;
    grid-template-columns: minmax(7rem, 14rem) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .55rem .85rem;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.icv .icv-msg-fila:hover{ background: var(--icv-fondo-alt, #f8fafc); }

.icv .icv-msg-nombre{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ⚠️ min-width:0 o el grid no deja que se achique y el ellipsis nunca aplica. */
.icv .icv-msg-texto{
    min-width: 0;
    color: var(--icv-tenue, #64748b);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.icv .icv-msg-autor{ font-style: normal; font-weight: 600; margin-right: .25rem; }

.icv .icv-msg-marcas{ display: flex; gap: .3rem; align-items: center; flex: 0 0 auto; }
.icv .icv-msg-hora{ color: var(--icv-tenue, #94a3b8); font-size: .8rem; white-space: nowrap; }

.icv .icv-msg-detalle{ padding: .25rem .85rem .85rem 1.1rem; }
.icv .icv-msg-completo{
    margin: 0 0 .6rem;
    white-space: pre-wrap;
    line-height: 1.45;
}
.icv .icv-msg-pie{ display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ── LA MISMA LISTA, CON FORMA DE GMAIL (la app del celular) ─────────────────
   Avatar redondo con la inicial, quien y la hora arriba, el «asunto» y el mensaje
   debajo. Lo nuevo va en negrita y con la hora en el color de acento: es la unica
   marca, como en el correo, para que la lista no se llene de carteles.
   ⚠️ Clases propias (icv-gm-*) y no icv-msg: esa clase ya la usa la burbuja del chat
   (display:flex) y cualquier regla nueva sobre ella le cambiaria el chat a todos. */
.icv .icv-msgs.gm { gap: 0; }
.icv .icv-msgs.gm .icv-msgs-barra { padding: .6rem .75rem .5rem; gap: .55rem; }
.icv .icv-msgs.gm .icv-buscar {
    width: 100%; border: 0; border-radius: 28px; background: #eef1f6;
    padding: .7rem 1rem .7rem 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: .85rem center;
}
.icv .icv-msgs.gm .icv-chip { border-radius: 8px; }

.icv .icv-gm-lista { list-style: none; margin: 0; padding: 0; background: var(--icv-fondo, #fff); }
.icv .icv-gm-fila {
    display: flex; gap: .85rem; align-items: flex-start;
    width: 100%; padding: .7rem 1rem; border: 0; background: none;
    text-align: left; font: inherit; color: #202124; cursor: pointer;
}
.icv .icv-gm-fila:active { background: #e8eaed; }

.icv .icv-gm-avatar {
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.15rem; font-weight: 500; margin-top: .1rem;
}

/* ⚠️ min-width:0 en el cuerpo y en cada renglon: sin eso el ellipsis no aplica y un
   mensaje largo empuja la hora fuera de la pantalla. */
.icv .icv-gm-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.icv .icv-gm-l1, .icv .icv-gm-l2, .icv .icv-gm-l3 { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.icv .icv-gm-nombre {
    flex: 1; min-width: 0; font-size: 1rem; color: #3c4043;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icv .icv-gm-hora { flex: none; font-size: .78rem; color: #5f6368; }

.icv .icv-gm-asunto {
    min-width: 0; font-size: .92rem; color: #3c4043;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icv .icv-gm-l2 .icv-etq { flex: none; font-size: .68rem; }

.icv .icv-gm-texto {
    flex: 1; min-width: 0; font-size: .9rem; color: #5f6368;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icv .icv-gm-autor { margin-right: .25rem; }
.icv .icv-gm-l3 .icv-badge { flex: none; }

.icv .icv-gm-fila.nuevo .icv-gm-nombre,
.icv .icv-gm-fila.nuevo .icv-gm-asunto { font-weight: 700; color: #202124; }
.icv .icv-gm-fila.nuevo .icv-gm-hora { font-weight: 700; color: #202124; }
.icv .icv-gm-fila.nuevo .icv-gm-texto { color: #3c4043; }

/* En el telefono el nombre y el texto no entran en la misma linea. */
@media (max-width: 720px) {
    .icv-msg-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: .15rem; }
    .icv-msg-nombre { grid-column: 1; }
    .icv-msg-hora { grid-column: 2; grid-row: 1; }
    .icv-msg-texto { grid-column: 1 / -1; grid-row: 2; }
    .icv-msg-marcas { grid-column: 1 / -1; grid-row: 3; }
}


/* Por qué existe la ventana de servicio, al lado del reloj que la cuenta.
   ⚠️ Más chico y sin bastardilla marcada: es una aclaración, no una segunda alerta — si
   pesa lo mismo que el cartel, el cartel deja de leerse. */
.icv .icv-ventana-porque {
    display: inline;
    font-style: normal;
    opacity: .75;
    font-size: .92em;
    margin-left: .35rem;
}


/* Dónde cae lo que se escriba, cuando el canal es propio del producto.
   ⚠️ Va en su propio renglón y con más peso que la aclaración de la ventana: aquello explica
   una regla de Meta, esto dice que el mensaje NO le va a llegar al teléfono. */
.icv .icv-ventana-destino {
    display: block;
    margin-top: .15rem;
    font-weight: 600;
}

/* El resumen de «empieza de cero» se lee y se CORRIGE: es lo único que el asistente va a saber de lo
   anterior. Con el ancho natural del textarea quedaba una columna angosta de seis renglones. */
.icv .icv-nuevo-panel > .icv-resumen-cero {
    display: block;
    width: calc(100% - 1.4rem);
    margin: 0 0.7rem 0.5rem;
    min-height: 16rem;
    line-height: 1.45;
}

/* ── Fotos, audios, videos, documentos y la nota de voz (16/10/2026) ───────────────────── */
.icv .icv-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.icv .icv-adjunto img { max-height: 320px; object-fit: contain; cursor: zoom-in; }
.icv .icv-adjunto audio { width: 260px; max-width: 100%; display: block; }
.icv .icv-adjunto video { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; }
.icv .icv-adjunto-bajando { font-size: 0.8rem; color: var(--icv-tenue); }
.icv .icv-adjunto-doc {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem;
    border: 1px solid var(--icv-borde); border-radius: 8px; background: rgba(255,255,255,.6);
    color: inherit; text-decoration: none; max-width: 300px;
}
.icv .icv-adjunto-doc:hover { border-color: var(--icv-acento); }
.icv .icv-adjunto-doc-ico { font-size: 1.3rem; }
.icv .icv-adjunto-doc-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icv .icv-adjunto-doc small { color: var(--icv-tenue); white-space: nowrap; }

.icv .icv-btn-icono { font-size: 1.05rem; padding: 0.3rem 0.55rem; line-height: 1; cursor: pointer; }
.icv label.icv-btn-icono.deshabilitado { opacity: 0.5; pointer-events: none; }
.icv .icv-archivo-elegido {
    flex: 1 1 100%; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.6rem; border: 1px solid var(--icv-borde); border-radius: 8px; background: var(--icv-fondo);
}
.icv .icv-archivo-elegido span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icv .icv-btn-x { padding: 0.15rem 0.45rem; }
.icv .icv-grabando { flex: 1 1 100%; display: flex; align-items: center; gap: 0.6rem; }
.icv .icv-grabando > span:nth-child(2) { flex: 1; font-variant-numeric: tabular-nums; }
.icv .icv-grabando-punto { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: icv-latido 1s infinite; }
@keyframes icv-latido { 50% { opacity: 0.25; } }

/* ── Sobre un mensaje: menú, cita, reacciones y borrar para mí (16/10/2026) ───────────── */
.icv .icv-burbuja { position: relative; }
.icv .icv-burbuja-menu {
    position: absolute; top: 2px; right: 4px; border: 0; background: transparent; color: var(--icv-tenue);
    font-size: 0.9rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 6px; cursor: pointer; opacity: 0;
}
.icv .icv-burbuja:hover .icv-burbuja-menu, .icv .icv-burbuja-menu.on, .icv .icv-burbuja-menu:focus-visible { opacity: 1; }
.icv .icv-burbuja-menu:hover, .icv .icv-burbuja-menu.on { background: rgba(0,0,0,.07); }
@media (hover: none) { .icv .icv-burbuja-menu { opacity: .6; } }

.icv .icv-menu-msg {
    margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--icv-borde);
    display: flex; flex-direction: column; gap: 0.15rem; min-width: 220px;
}
.icv .icv-menu-emojis { display: flex; gap: 0.15rem; padding-bottom: 0.2rem; }
.icv .icv-menu-emojis button {
    border: 0; background: transparent; font-size: 1.2rem; line-height: 1; padding: 0.25rem; border-radius: 50%; cursor: pointer;
}
.icv .icv-menu-emojis button:hover { background: rgba(0,0,0,.07); }
.icv .icv-menu-emojis button.on { background: var(--icv-acento); }
.icv .icv-menu-item {
    border: 0; background: transparent; text-align: left; padding: 0.3rem 0.35rem; border-radius: 6px;
    font: inherit; font-size: 0.85rem; color: inherit; cursor: pointer;
}
.icv .icv-menu-item:hover { background: rgba(0,0,0,.06); }
.icv .icv-menu-confirma { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; color: var(--icv-tenue); }
.icv .icv-menu-confirma > div { display: flex; gap: 0.4rem; justify-content: flex-end; }
.icv .icv-menu-confirma .icv-btn-peligro { background: #dc2626; border-color: #dc2626; color: #fff; }
.icv .icv-menu-confirma .icv-btn-peligro:hover { background: #b91c1c; border-color: #b91c1c; }

.icv .icv-cita {
    display: flex; flex-direction: column; gap: 0.05rem; margin: 0 1.2rem 0.3rem 0;
    padding: 0.3rem 0.5rem; border-left: 3px solid var(--icv-acento); border-radius: 6px;
    background: rgba(0,0,0,.05); font-size: 0.78rem;
}
.icv .icv-cita b { color: var(--icv-acento); font-weight: 600; }
.icv .icv-cita span, .icv .icv-citando span { color: var(--icv-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icv .icv-citando {
    flex: 1 1 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem;
    border-left: 3px solid var(--icv-acento); border-radius: 8px; background: var(--icv-fondo);
}
.icv .icv-citando > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.8rem; }
.icv .icv-citando b { color: var(--icv-acento); font-weight: 600; }

.icv .icv-reacciones { display: flex; gap: 0.2rem; margin-top: 0.2rem; }
.icv .icv-reacciones span {
    font-size: 0.95rem; line-height: 1; padding: 0.15rem 0.35rem; border-radius: 999px;
    background: var(--icv-ajeno); border: 1px solid var(--icv-borde);
}
.icv .icv-reacciones span.nuestra { border-color: var(--icv-acento); }

.icv .icv-burbuja.icv-borrado { background: transparent; border: 1px dashed var(--icv-borde); color: var(--icv-tenue); font-style: italic; }
.icv .icv-msg.de-nosotros .icv-burbuja.icv-borrado { background: transparent; border-color: var(--icv-borde); }
.icv .icv-link { border: 0; background: transparent; padding: 0; color: var(--icv-acento); font: inherit; font-style: normal; cursor: pointer; text-decoration: underline; }
.icv .icv-texto a { color: var(--icv-acento); text-decoration: underline; word-break: break-all; }

/* ── El menú «⋯» de la cabecera del chat (21/10/2026) ─────────────────────────────────────
   En el teléfono no entran ocho botones al lado del nombre: se apilaban en tres renglones y el
   chat quedaba con medio cuadro. Van detrás de «⋯», como en WhatsApp. En la computadora el botón
   no existe y las acciones quedan como siempre. */
.icv .icv-btn-mas { display: none; }
@media (max-width: 900px) {
    .icv .icv-cabecera { position: relative; flex-wrap: nowrap; }
    .icv .icv-cab-quien { min-width: 0; flex: 1 1 auto; }
    .icv .icv-cab-quien strong, .icv .icv-cab-quien .icv-tenue {
        display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .icv .icv-btn-mas { display: inline-block; font-size: 1.25rem; line-height: 1; padding: .3rem .7rem; flex: none; }
    .icv .icv-btn-ficha { display: none !important; }
    .icv .icv-acciones { display: none; }
    .icv .icv-acciones.abiertas {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; top: 100%; right: .5rem; z-index: 30;
        min-width: 15rem; max-width: calc(100vw - 1rem);
        background: #fff; border: 1px solid var(--icv-borde); border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .18); padding: .35rem 0;
    }
    .icv .icv-acciones.abiertas > .icv-btn,
    .icv .icv-acciones.abiertas > .icv-switch {
        display: flex !important; align-items: center; gap: .5rem; width: 100%;
        border: 0; border-radius: 0; background: transparent; text-align: left;
        padding: .75rem 1rem; font-size: .95rem; margin: 0;
    }
    .icv .icv-acciones.abiertas > .icv-btn:active { background: var(--icv-propio); }
    .icv .icv-acciones.abiertas .icv-switch span { display: inline !important; }
    .icv .icv-acciones.abiertas > .icv-btn-ficha { display: flex !important; }
}