/* =====================================================================
   «Necesita a una persona» (rojo) y naranja de lo técnico. Va después de mensajes.css y notificaciones.css (index.html).
   Componentes de web/js/intervencion.js (TLC.rojo) y lo que comparten Correos, Chats, Comentarios, el menú y el Panel.
   Rojo = una persona te espera (uno de los temas de «Cuándo lo atiende una persona»: factura, ARCO, «quiero hablar con
   una persona», queja, tema delicado, ligas de Zoom, Profeco…). Naranja = «Requiere atención» y «Con error» (estados
   técnicos). Morado = «Vino de una llamada». Azul = «Solo una persona». Nunca solo color: ícono + texto + aria-label.
   Contrastes (WCAG): blanco sobre --tlc-persona 5.6:1 · --tlc-persona-texto sobre --tlc-persona-fondo 7.0:1 ·
   --tlc-atencion-texto sobre --tlc-atencion-fondo 5.9:1 · blanco sobre --tlc-atencion-solido 5.0:1 · blanco sobre
   --tlc-llamada 6.3:1 (la bolita sobre la fila roja 5.4:1) · --tlc-llamada-texto sobre --tlc-llamada-fondo 8.1:1 ·
   «Solo una persona» #245A96 sobre #E6EFF9 6.1:1.
   ===================================================================== */

:root {
  --tlc-persona: #B83B36;
  --tlc-persona-fondo: #FBE9E8;
  --tlc-persona-texto: #8F2D29;
  --tlc-persona-borde: #EFC2BF;
  --tlc-persona-hover: #F8DFDD;
  --tlc-persona-activo: #F6D9D7;
  --tlc-atencion: #C8641E;           /* barras, bordes e íconos (blanco encima no llega a 4.5:1: usa --tlc-atencion-solido) */
  --tlc-atencion-texto: #8F4510;
  --tlc-atencion-fondo: #FCEADB;
  --tlc-atencion-solido: #B4541A;    /* fondo sólido con texto blanco (números del menú, píldora del Panel) */
  --tlc-llamada: #6D4BB8;            /* «Vino de una llamada»: la bolita (con ícono blanco) */
  --tlc-llamada-fondo: #EFEAF8;      /* la tarjeta de lo que entendió Sofía */
  --tlc-llamada-texto: #4E3391;
}

/* ---------- Píldora «Necesita a una persona» + chip del motivo ---------- */
.in-pildora {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; height: 24px; padding: 0 3px 0 9px;
  border-radius: 999px; background: var(--tlc-persona); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  white-space: nowrap; vertical-align: middle;
}
.in-pildora .ico { width: 13px; height: 13px; flex: none; }
.in-pildora-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* El chip del motivo; suelto (fuera de la píldora) va en rojo claro, dentro de la píldora en blanco. */
.in-chip {
  flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
  background: var(--tlc-persona-fondo); color: var(--tlc-persona-texto); box-shadow: inset 0 0 0 1px var(--tlc-persona-borde);
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.in-pildora .in-chip { background: #fff; box-shadow: none; }
.in-pildora.s { height: 20px; gap: 5px; padding: 0 2px 0 7px; font-size: 11px; }
.in-pildora.s .ico { width: 12px; height: 12px; }
.in-pildora.s .in-chip { height: 16px; padding: 0 6px; font-size: 10.5px; }

/* ---------- «Vino de una llamada» (TLC.rojo.deLlamada) y «Solo una persona» (TLC.rojo.soloPersona) ---------- */
.in-llamada {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tlc-llamada); color: #fff; vertical-align: middle;
}
.in-llamada .ico { width: 11px; height: 11px; }
.in-llamada.s { width: 12px; height: 12px; }
.in-llamada.s .ico { width: 8px; height: 8px; }
.in-solo {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 22px; padding: 0 9px; border-radius: 999px;
  background: #E6EFF9; color: #245A96; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.in-solo .ico { width: 12px; height: 12px; flex: none; }
.in-solo.s { height: 20px; gap: 4px; padding: 0 7px; font-size: 11px; }
.in-solo.s .ico { width: 11px; height: 11px; }

/* ---------- Filas en rojo: correos (.co-item) y chats y comentarios (.cv-item) ---------- */
.co-item.sv-rojo, .cv-item.sv-rojo { background: var(--tlc-persona-fondo); box-shadow: inset 4px 0 0 var(--tlc-persona); }
.co-item.sv-rojo:hover, .cv-item.sv-rojo:hover { background: var(--tlc-persona-hover); }
.co-item.sv-rojo.activo, .cv-item.sv-rojo.activo { background: var(--tlc-persona-activo); box-shadow: inset 4px 0 0 var(--tlc-persona), inset 0 0 0 1px var(--tlc-persona-borde); }
.co-item.sv-rojo .co-item-nombre, .cv-item.sv-rojo .cv-item-nombre { color: var(--tlc-persona-texto); font-weight: 800; }
.co-item.sv-rojo .co-item-cab time, .cv-item.sv-rojo .cv-item-cab time { color: var(--tlc-persona-texto); font-weight: 600; }
.co-item.sv-rojo .co-item-extracto, .cv-item.sv-rojo .cv-item-extracto, .co-item.sv-rojo .co-item-prog, .cv-item.sv-rojo .cv-item-prog { color: #555C69; }
.co-items li:has(.co-item.sv-rojo) + li, .co-items li + li:has(.co-item.sv-rojo),
.cv-items li:has(.cv-item.sv-rojo) + li, .cv-items li + li:has(.cv-item.sv-rojo) { border-top-color: transparent; }

/* Fila que se acaba de poner en rojo: dos latidos (TLC.rojo.latido). */
@keyframes in-latido {
  0% { box-shadow: inset 4px 0 0 var(--tlc-persona), 0 0 0 0 rgba(184, 59, 54, .45); }
  70% { box-shadow: inset 4px 0 0 var(--tlc-persona), 0 0 0 8px rgba(184, 59, 54, 0); }
  100% { box-shadow: inset 4px 0 0 var(--tlc-persona), 0 0 0 0 rgba(184, 59, 54, 0); }
}
.in-latido { animation: in-latido 1.2s ease-out 2; }

/* ---------- Carpeta «Necesitan a una persona» y sus números ---------- */
.co-carpeta.rojo:not(.activa), .cv-filtro.rojo:not(.activa) { color: var(--tlc-persona-texto); }
.co-carpeta.rojo:not(.activa) .ico, .cv-filtro.rojo:not(.activa) .ico { color: var(--tlc-persona); }
.co-cuenta.persona, .cv-cuenta.persona, .in-cuenta,
.co-carpeta.activa .co-cuenta.persona, .cv-filtro.activa .cv-cuenta.persona {
  background: var(--tlc-persona); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(184, 59, 54, .35);
}
.in-cuenta { flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-cuenta.pendiente, .cv-cuenta.pendiente, .co-carpeta.activa .co-cuenta.pendiente, .cv-filtro.activa .cv-cuenta.pendiente { background: var(--tlc-atencion-solido); color: #fff; }

/* ---------- Tira arriba de las demás carpetas ---------- */
.in-tira {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 0 0 8px; padding: 8px 14px;
  border: 1px solid var(--tlc-persona-borde); border-radius: 12px; background: var(--tlc-persona-fondo);
  color: var(--tlc-persona-texto); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; text-align: left;
}
button.in-tira { cursor: pointer; transition: background var(--t-rapida), border-color var(--t-rapida); }
button.in-tira:hover { background: var(--tlc-persona-hover); border-color: #E6AAA6; }
.in-tira > .ico { width: 17px; height: 17px; flex: none; color: var(--tlc-persona); }
.in-tira-txt { min-width: 0; flex: 0 1 auto; }
.in-tira-sep { flex: none; color: var(--tlc-persona); }
.in-tira-ver { flex: none; display: inline-flex; align-items: center; gap: 3px; text-decoration: underline; text-underline-offset: 3px; }
.in-tira-ver .ico { width: 13px; height: 13px; }

/* ---------- Caja roja (arriba del control en chats; antes de las tarjetas en correo; en comentarios) ---------- */
.in-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; margin: 0 0 12px; padding: 14px 16px;
  border: 1px solid var(--tlc-persona-borde); border-left: 4px solid var(--tlc-persona); border-radius: 14px;
  background: var(--tlc-persona-fondo); color: var(--tlc-tinta-2); font-size: 13px; line-height: 1.5;
}
.in-banner-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-persona); color: #fff; flex: none; }
.in-banner-ic .ico { width: 18px; height: 18px; }
.in-banner-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.in-banner-cuerpo p { margin: 0; }
.in-banner-tit { font-family: var(--tlc-titulo); font-size: 15px; font-weight: 800; color: var(--tlc-persona-texto); line-height: 1.3; }
.in-banner-calma { font-weight: 700; color: var(--tlc-persona-texto); }
.in-banner-pie { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px !important; font-size: 12px; color: var(--tlc-tinta-2); }
.in-banner-motivo { font-style: italic; }
.in-banner-acc { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.in-banner-acc .btn { justify-content: center; }
.in-banner .btn-secundario { border-color: var(--tlc-persona-borde); }
@media (max-width: 760px) {
  .in-banner { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .in-banner-acc { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .in-banner-acc .btn { flex: 1 1 140px; }
}

/* ---------- El mensaje o correo que lo puso en rojo ---------- */
.in-burbuja { outline: 2px solid var(--tlc-persona); outline-offset: 3px; }
.in-marca, .in-burbuja-marca {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--tlc-persona-fondo); color: var(--tlc-persona-texto); box-shadow: inset 0 0 0 1px var(--tlc-persona-borde);
  font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.in-marca .ico, .in-burbuja-marca .ico { width: 12px; height: 12px; flex: none; color: var(--tlc-persona); }

/* Debajo del editor de algo rojo: «Al enviar tu respuesta se quita el rojo.» */
.in-nota-editor { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--tlc-persona-texto); }
.in-nota-editor .ico { width: 13px; height: 13px; flex: none; color: var(--tlc-persona); }

/* ---------- Menú lateral y botón del menú del celular (app.js › ponerCuenta) ---------- */
.nav-cuenta.persona, .nav-item.activo .nav-cuenta.persona { background: var(--tlc-persona); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(184, 59, 54, .4); }
.nav-item.activo .nav-cuenta.persona { box-shadow: 0 0 0 2px var(--tlc-navy), 0 0 0 3.5px rgba(255, 255, 255, .55); }
.nav-cuenta.pendiente, .nav-item.activo .nav-cuenta.pendiente { background: var(--tlc-atencion-solido); color: #fff; }
/* La suma del botón del menú: naranja (pendiente) y roja solo si alguien necesita a una persona. */
.menu-movil-cuenta { background: var(--tlc-atencion-solido); }
.menu-movil-cuenta.persona { background: var(--tlc-persona); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(184, 59, 54, .4); }

/* ---------- Panel: tarjeta «Necesitan a una persona» y franja «En vivo» ---------- */
.pn-rojo {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: start;
  margin: 16px 0; padding: 18px 20px; border: 1px solid var(--tlc-persona-borde); border-left: 4px solid var(--tlc-persona);
  border-radius: var(--radio); background: var(--tlc-persona-fondo); box-shadow: var(--sombra);
}
.pn-rojo-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-persona); color: #fff; }
.pn-rojo-ic .ico { width: 21px; height: 21px; }
.pn-rojo-cab { min-width: 0; }
.pn-rojo-tit { margin: 0; font-family: var(--tlc-titulo); font-size: 17px; font-weight: 800; color: var(--tlc-persona-texto); line-height: 1.3; }
.pn-rojo-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--tlc-tinta-2); }
/* Dos columnas (cuatro secciones = 2 × 2): así «Facebook (mensajes y comentarios)» cabe en un renglón. */
.pn-rojo-filas { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pn-rojo-fila {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px 8px 12px; border-radius: 12px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--tlc-persona-borde); color: var(--tlc-tinta-2);
}
.pn-rojo-fila.cero { box-shadow: inset 0 0 0 1px var(--tlc-border-2); }
.pn-rojo-fila > .ico { width: 17px; height: 17px; flex: none; color: var(--tlc-persona); }
.pn-rojo-fila.cero > .ico { color: var(--tlc-tinta-4); }
.pn-rojo-nombre { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.pn-rojo-n { flex: none; font-family: var(--tlc-titulo); font-size: 20px; font-weight: 800; color: var(--tlc-persona-texto); font-variant-numeric: tabular-nums; }
.pn-rojo-fila.cero .pn-rojo-n { color: var(--tlc-tinta-3); }
.pn-rojo-ver { flex: none; display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--tlc-persona-texto); text-decoration: none; background: var(--tlc-persona-fondo); }
.pn-rojo-ver:hover { background: var(--tlc-persona-hover); text-decoration: none; }
.pn-rojo-ver .ico { width: 13px; height: 13px; }
/* En la franja «En vivo» (fondo navy). */
.pn-viva-rojo { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tlc-persona); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 14px -8px rgba(0, 0, 0, .6); }
.pn-viva-rojo:hover { background: #9C3530; color: #fff; text-decoration: none; }
.pn-viva-rojo:focus-visible { outline-color: var(--tlc-gold); }
.pn-viva-rojo .ico { width: 14px; height: 14px; }
/* «Requiere atención» del Panel ya no es rojo: naranja (es un estado técnico). */
.pn-viva-atencion { background: var(--tlc-atencion-solido); }
.pn-viva-atencion:hover { background: var(--tlc-atencion-texto); }
.pn-ms-op .alerta { border-color: #F0CDB0; background: #FFF8F2; color: var(--tlc-atencion-texto); }
.pn-ms-op .alerta .ico, .pn-ms-op .alerta b { color: var(--tlc-atencion-texto); }
/* Sin la llave de OpenAI: lo que la IA suma cuando pegues la llave (TLC.rojo.NOTA_SIN_IA). */
.pn-rojo-nota { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--tlc-persona-texto); }
.pn-rojo-nota .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--tlc-persona); }
/* «Correos que requieren atención»: el hilo que necesita a una persona va marcado en rojo (barra + píldora). */
.pn-co-lista .lista-item.rojo { box-shadow: inset 4px 0 0 var(--tlc-persona); background: #FFF8F7; }
.pn-co-lista .lista-item.rojo:hover { background: var(--tlc-persona-fondo); }
.pn-co-lista .lista-item.rojo .info b { color: var(--tlc-persona-texto); font-weight: 700; }
@media (max-width: 640px) {
  .pn-rojo { padding: 14px; gap: 12px; }
  .pn-rojo-filas { grid-template-columns: minmax(0, 1fr); }
  .pn-viva .pn-viva-rojo { grid-column: 1 / -1; justify-self: start; }
  /* En el celular la píldora de la lista del Panel deja solo el ícono y el motivo (la barra y el título rojos ya lo
     dicen, y su aria-label sigue diciendo «Necesita a una persona: …»): así el asunto del correo se alcanza a leer. */
  .pn-co-lista .in-pildora .in-pildora-txt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .in-latido { animation: none; }
  button.in-tira, .pn-rojo-ver { transition: none; }
}

/* Burbuja roja «Ya lo vi» (21-oct-2026): en la esquina de la fila en rojo mientras su aviso urgente siga sin leer. Al
   picarla revienta (el aviso sale de la campanita); la fila sigue en rojo hasta que alguien le conteste. */
.co-item .in-burbuja, .cv-item .in-burbuja {
  position: absolute; bottom: 9px; right: 9px; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tlc-persona); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(184, 59, 54, .55); animation: in-burbuja-late 1.6s ease-out infinite;
}
.co-item .in-burbuja::after, .cv-item .in-burbuja::after { content: '!'; font: 800 11px/1 system-ui, sans-serif; }
.co-item .in-burbuja:hover, .cv-item .in-burbuja:hover { transform: scale(1.12); }
@keyframes in-burbuja-late {
  0% { box-shadow: 0 0 0 0 rgba(184, 59, 54, .55); }
  70% { box-shadow: 0 0 0 9px rgba(184, 59, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 59, 54, 0); }
}
.co-item .in-burbuja.revienta, .cv-item .in-burbuja.revienta { animation: in-burbuja-revienta .45s ease-out forwards; pointer-events: none; }
@keyframes in-burbuja-revienta {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(184, 59, 54, .6); }
  35% { transform: scale(1.7); opacity: .95; box-shadow: 0 0 0 6px rgba(184, 59, 54, .35), 0 0 0 12px rgba(240, 179, 35, .25); }
  100% { transform: scale(2.6); opacity: 0; box-shadow: 0 0 0 16px rgba(184, 59, 54, 0), 0 0 0 26px rgba(240, 179, 35, 0); }
}
/* Azul «Lo contestó una persona»: lo último que salió lo escribió alguien del equipo (no el bot). */
.co-item.contestado, .cv-item.contestado { box-shadow: inset 3px 0 0 #2E6FD8; }
.in-contestado {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: #E3EDFB; color: #1F4E9A; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.in-contestado .ico { width: 12px; height: 12px; flex: none; }
.in-contestado.s { height: 20px; gap: 4px; padding: 0 7px; font-size: 11px; }
/* Dos números en «Requiere atención» (rojo y naranja) */
.co-cuenta + .co-cuenta, .cv-cuenta + .cv-cuenta { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .co-item .in-burbuja, .cv-item .in-burbuja { animation: none; }
  .co-item .in-burbuja.revienta, .cv-item .in-burbuja.revienta { animation: none; opacity: 0; }
}
/* Con dos números (rojo y naranja) la pestaña «Requiere atención» necesita más ancho que «Mensajes» (21-oct-2026). */
.co-pestanas { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.co-pestana { gap: 6px; }
.co-pestana .co-cuenta + .co-cuenta { margin-left: -2px; }


/* ---------- «Sin ver» (ronda 4): el color dura hasta que alguien abre la fila; la etiqueta de estado se queda ---------- */
.co-item.sv-azul, .cv-item.sv-azul { background: #EEF4FD; box-shadow: inset 4px 0 0 #2E6FD8; }
.co-item.sv-azul:hover, .cv-item.sv-azul:hover { background: #E3EDFB; }
.co-item.sv-azul .co-item-nombre, .cv-item.sv-azul .cv-item-nombre { color: #1F4E9A; font-weight: 800; }
/* El marco del hilo o chat abierto conserva el color con que se abrió (mientras esté abierto). */
.sv-marco.sv-rojo { box-shadow: inset 0 4px 0 var(--tlc-persona); }
.sv-marco.sv-azul { box-shadow: inset 0 4px 0 #2E6FD8; }
/* Bolitas: roja = necesitan a una persona; azul = contestó el bot. */
.sv-bolitas { display: inline-flex; gap: 4px; margin-left: auto; align-items: center; flex: none; }
.sv-bolita { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.sv-bolita.rojo { background: #C8352E; }
.sv-bolita.azul { background: #2E6FD8; }
/* En el menú, las bolitas van en el lugar del número de antes (sin el fondo crema). */
.nav-cuenta.nav-bolitas { background: none; padding: 0; min-width: 0; display: inline-flex; }
.nav-item.activo .nav-cuenta.nav-bolitas { background: none; }