/* 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; }

.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; }

/* 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; }

/* 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; }

/* 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; }
.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-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; }