/* Call Evolution — consola de comunicaciones. Colores y letra del manual de marca (2026): azul Evolution #4A73FA,
   azul Call #0778C6 (acento), marino #03497F, tinta #14213A, fondo claro #F4F7FC y fondo oscuro #0D1726; títulos y
   cifras grandes en Montserrat Black y textos en Roboto. Modo oscuro opcional. */
@import url('/vendor/roboto/400.css');
@import url('/vendor/roboto/500.css');
@import url('/vendor/roboto/700.css');
@import url('/vendor/montserrat/900.css');
@import url('/vendor/tabler/tabler-icons.min.css');

:root {
  --acento: #0778C6; --acento-2: #03497F; --acento-vivo: #4A73FA; --acento-claro: #E8F1FB; --acento-texto: #03497F;
  --fondo: #F4F7FC; --panel: #ffffff; --panel-2: #F7F9FD; --riel: #ffffff;
  --borde: #DDE3EE; --borde-2: #C9D2E1; --texto: #14213A; --tenue: #56627A; --suave: #8A95AA;
  --exito: #15803d; --exito-claro: #E6F5EB; --peligro: #B3261E; --peligro-claro: #FCEBEA; --aviso: #B45309; --aviso-claro: #FEF3E2;
  --sombra: 0 1px 2px rgba(20, 33, 58, .05), 0 4px 14px rgba(20, 33, 58, .05);
  --sombra-alta: 0 18px 44px rgba(20, 33, 58, .16), 0 2px 8px rgba(20, 33, 58, .06);
  --anillo: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
  --radio: 12px;
  --titulos: 'Montserrat', 'Roboto', sans-serif;
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; /* gráficas, siempre en este orden (paleta validada para daltonismo) */
  --verde: var(--acento); --verde-2: var(--acento); --verde-claro: var(--acento-claro); --verde-osc: var(--acento-texto); /* nombres viejos */
  color-scheme: light;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto); font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --acento: #4A73FA; --acento-2: #6B8DFB; --acento-vivo: #6B8DFB; --acento-claro: #172A52; --acento-texto: #AFC3FF;
    --fondo: #0D1726; --panel: #132036; --panel-2: #172741; --riel: #0A1322;
    --borde: #23355A; --borde-2: #324A73; --texto: #E8EEF8; --tenue: #9CA9C3; --suave: #6E7D9A;
    --exito: #34c26f; --exito-claro: #0E2E22; --peligro: #F2726A; --peligro-claro: #3A1A1D; --aviso: #F0A54A; --aviso-claro: #33260F;
    --sombra: 0 1px 2px rgba(0,0,0,.35); --sombra-alta: 0 20px 50px rgba(0,0,0,.5); color-scheme: dark;
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
  }
}
:root[data-tema="oscuro"] {
  --acento: #4A73FA; --acento-2: #6B8DFB; --acento-vivo: #6B8DFB; --acento-claro: #172A52; --acento-texto: #AFC3FF;
  --fondo: #0D1726; --panel: #132036; --panel-2: #172741; --riel: #0A1322;
  --borde: #23355A; --borde-2: #324A73; --texto: #E8EEF8; --tenue: #9CA9C3; --suave: #6E7D9A;
  --exito: #34c26f; --exito-claro: #0E2E22; --peligro: #F2726A; --peligro-claro: #3A1A1D; --aviso: #F0A54A; --aviso-claro: #33260F;
  --sombra: 0 1px 2px rgba(0,0,0,.35); --sombra-alta: 0 20px 50px rgba(0,0,0,.5); color-scheme: dark;
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); }
a { color: var(--acento); text-decoration: none; }
::selection { background: color-mix(in srgb, var(--acento) 22%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--borde-2) transparent; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; color: var(--texto); }
h1 { font-size: 18px; } h2 { font-size: 15px; font-weight: 700; } h3 { font-size: 13px; font-weight: 700; }
/* Títulos de pantalla y de ventanas en Montserrat Black (manual de marca) */
#titulo, .modal h2 { font-family: var(--titulos); font-weight: 900; letter-spacing: -.01em; }
.tenue { color: var(--tenue); }
.oculto { display: none !important; }
.crece { flex: 1; min-width: 0; }
.ti { font-size: 18px; line-height: 1; vertical-align: -3px; }

/* Botones y campos */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--borde-2); background: var(--panel); color: var(--texto); padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 500; white-space: nowrap; line-height: 1.2; box-shadow: 0 1px 1px rgba(20, 33, 58, .04); transition: background .12s, border-color .12s, box-shadow .12s, color .12s; }
.btn:hover { background: var(--panel-2); border-color: var(--suave); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 1px 2px color-mix(in srgb, var(--acento) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.12); }
.btn.primario:hover { background: var(--acento-2); border-color: var(--acento-2); }
.btn.exito { background: var(--exito); border-color: var(--exito); color: #fff; }
.btn.peligro { color: var(--peligro); }
.btn.peligro:hover { background: var(--peligro-claro); border-color: color-mix(in srgb, var(--peligro) 45%, transparent); }
.btn.chico { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.icono { padding: 7px; border-color: transparent; background: transparent; color: var(--tenue); position: relative; box-shadow: none; }
.btn.icono:hover { background: var(--panel-2); color: var(--texto); }
.btn.icono.activo { color: var(--acento); background: var(--acento-claro); }
.btn:disabled { opacity: .55; cursor: default; }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.campo > span { font-size: 12.5px; font-weight: 500; color: var(--tenue); }
input, select, textarea { border: 1px solid var(--borde-2); background: var(--panel); border-radius: 10px; padding: 9px 11px; width: 100%; outline: none; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: var(--suave); }
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: var(--anillo); }
input::placeholder, textarea::placeholder { color: var(--suave); }
input[type=checkbox], input[type=radio] { width: auto; margin: 0; accent-color: var(--acento); }
.opcion { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
textarea { resize: vertical; min-height: 70px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila > .campo { flex: 1; min-width: 160px; }
.chip { display: inline-block; padding: 3px 9px; border-radius: 99px; background: var(--acento-claro); color: var(--acento-texto); font-size: 12px; font-weight: 500; margin: 0 4px 4px 0; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Presencia */
.estado { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel); flex: none; box-sizing: content-box; }
.estado.disponible { background: #22a35a; } .estado.ausente { background: #f59e0b; } .estado.no_molestar { background: #dc2626; }
.estado.en_pausa { background: #8b5cf6; } .estado.desconectado { background: #a3adbb; } .estado.en_llamada { background: #ea580c; }
/* Teléfono: recientes del panel, estado de la conexión y extras de la ventana de llamada */
.recientes { list-style: none; margin: 0; padding: 0 8px 12px; }
.recientes li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.recientes li:hover { background: var(--panel-2); }
.recientes li small { display: block; font-size: 12px; }
.recientes li > .ti:last-child { color: var(--tenue); opacity: 0; }
.recientes li:hover > .ti:last-child { opacity: 1; }
.tel-con.listo { color: var(--exito); } .tel-con.conectando { color: var(--aviso); } .tel-con.error { color: var(--peligro); }
.ll-consulta { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 13px; }
.ll-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 16px 10px; }
.ll-teclas button { border: 0; border-radius: 8px; padding: 8px; background: rgba(255,255,255,.1); color: inherit; font-size: 16px; cursor: pointer; }
.ll-teclas button:hover { background: rgba(255,255,255,.18); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-texto); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 12px; position: relative; flex: none; }
.avatar .estado { position: absolute; right: -3px; bottom: -3px; }
.avatar.grande { width: 44px; height: 44px; font-size: 15px; }
.avatar.mini { width: 24px; height: 24px; font-size: 10px; }
.avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.agente-cel { display: inline-flex; align-items: center; gap: 10px; }

/* ── Marco: menú lateral, barra superior, contenido y teléfono ── */
.app { display: grid; grid-template-columns: 224px 1fr; height: 100vh; transition: grid-template-columns .15s; }
.app.colapsado { grid-template-columns: 64px 1fr; }
.menu { --m-texto: #CCD5E6; --m-tenue: #7F8DAA; --m-hover: rgba(255, 255, 255, .06); --m-activo: rgba(74, 115, 250, .2); --m-linea: rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #14213A 0%, #0F1A2E 55%, #0D1726 100%); border-right: 1px solid #0D1726; color: var(--m-texto);
  display: flex; flex-direction: column; padding: 14px 12px; overflow-y: auto; overflow-x: hidden; z-index: 30; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
:root[data-tema="oscuro"] .menu { background: #0A1322; border-right-color: var(--borde); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .menu { background: #0A1322; border-right-color: var(--borde); } }
/* Marca: el símbolo a color y "Call Evolution" en blanco, Montserrat Black (manual de marca) */
.marca-menu { display: flex; align-items: center; gap: 9px; padding: 4px 6px 16px; font-family: var(--titulos); font-size: 17px; font-weight: 900; color: #fff; white-space: nowrap; letter-spacing: -.01em; }
.marca-menu:hover { text-decoration: none; }
.marca-menu .logo { width: 30px; height: 30px; flex: none; }
.grupo-menu { font-size: 10.5px; font-weight: 500; color: var(--m-tenue); text-transform: uppercase; letter-spacing: .09em; padding: 16px 10px 6px; white-space: nowrap; }
.menu a.item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 1px 0; border-radius: 9px; color: var(--m-texto); font-size: 13.5px; white-space: nowrap; transition: background .12s, color .12s; }
.menu a.item .ti { font-size: 18px; color: var(--m-tenue); vertical-align: 0; flex: none; transition: color .12s; }
.menu a.item:hover { background: var(--m-hover); color: #fff; text-decoration: none; }
.menu a.item:hover .ti { color: #fff; }
.menu a.item.activo { background: var(--m-activo); color: #fff; font-weight: 500; }
.menu a.item.activo .ti { color: #93ACFF; }
.menu a.item.activo::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: #4A73FA; }
.menu a.item .flecha { margin-left: auto; font-size: 15px; transition: transform .15s; }
.menu a.item.abierto .flecha { transform: rotate(180deg); }
.menu .globo { margin-left: auto; background: var(--peligro); color: #fff; font-size: 10px; font-weight: 500; border-radius: 99px; padding: 1px 6px; line-height: 1.4; }
.submenu { display: none; position: relative; padding: 2px 0 6px 38px; }
.submenu::before { content: ''; position: absolute; left: 19px; top: 2px; bottom: 8px; width: 1px; background: var(--m-linea); }
.submenu.abierto { display: block; }
.submenu a { position: relative; display: block; padding: 6px 10px; margin: 1px 0; border-radius: 7px; color: var(--m-tenue); font-size: 13px; white-space: nowrap; transition: background .12s, color .12s; }
.submenu a:hover { color: #fff; background: var(--m-hover); text-decoration: none; }
.submenu a.activo { color: #fff; font-weight: 500; background: rgba(255, 255, 255, .05); }
.submenu a.activo::before { content: ''; position: absolute; left: -20px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #4A73FA; box-shadow: 0 0 0 3px #13203A; }
.app.colapsado .menu { padding: 14px 8px; }
.app.colapsado .marca-menu span, .app.colapsado .grupo-menu, .app.colapsado .menu .etq, .app.colapsado .menu .flecha, .app.colapsado .submenu { display: none; }
.app.colapsado .marca-menu { justify-content: center; padding: 2px 0 14px; }
.app.colapsado .menu a.item { justify-content: center; padding: 10px 0; }
.app.colapsado .menu .globo { position: absolute; top: 2px; right: 4px; margin: 0; }
.app.colapsado .menu a.item.activo::before { left: -8px; }
.app.colapsado .menu a.item::after { content: attr(data-nombre); position: absolute; left: 54px; top: 50%; transform: translateY(-50%); background: #14213A; color: #fff; box-shadow: var(--sombra-alta); padding: 4px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 60; }
.app.colapsado .menu a.item:hover::after { opacity: 1; }
/* Barra superior estilo consola: estado, número y botón de llamar */
.boton-estado-agente { display: flex; align-items: center; gap: 7px; border: 1px solid var(--borde-2); background: var(--panel); cursor: pointer; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--texto); white-space: nowrap; transition: background .12s, border-color .12s; }
.boton-estado-agente:hover { background: var(--panel-2); border-color: var(--suave); }
.boton-estado-agente .ti-chevron-down { font-size: 14px; color: var(--tenue); }
.boton-estado-agente .estado { border: 0; }
/* Estado en las colas (con audífonos y borde) para no confundirlo con "Mi estado" (presencia) */
#cc-btn { padding: 6px 12px; }
#cc-btn .ti-headset { font-size: 16px; color: var(--acento); }
.cuerpo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.barra { height: 60px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--borde); position: relative; z-index: 20; }
.barra > .btn.icono { width: 38px; height: 38px; justify-content: center; border-radius: 10px; font-size: 18px; }
.barra > .btn.icono:hover { background: var(--panel-2); color: var(--texto); }
.buscador { position: relative; flex: 0 1 480px; }
.buscador > .ti { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--suave); font-size: 17px; }
.buscador input { padding-left: 38px; background: var(--fondo); border-color: transparent; height: 38px; border-radius: 11px; }
.buscador input:hover { border-color: var(--borde-2); }
.buscador input:focus { background: var(--panel); border-color: var(--acento); }
.buscador kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--tenue); background: var(--panel); border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; font-family: inherit; line-height: 18px; }
.resultados { position: absolute; top: 46px; left: 0; right: 0; min-width: 320px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-alta); max-height: 70vh; overflow-y: auto; padding: 6px; animation: sube .14s ease-out; }
.resultados h4 { margin: 8px 8px 4px; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.resultados a { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; color: var(--texto); }
.resultados a:hover, .resultados a.activo { background: var(--acento-claro); text-decoration: none; }
.resultados small { color: var(--tenue); display: block; }
.barra .espacio { flex: 1; }
.barra .boton-estado { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 3px; margin-left: 4px; border-radius: 99px; }
.barra .boton-estado:hover { background: var(--panel-2); }
/* Mi cuenta: avatar con los azules de la marca y un aro */
#yo-avatar > .avatar { width: 34px; height: 34px; background: linear-gradient(135deg, #4A73FA, #03497F); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--borde-2); }
.contador { position: absolute; top: 2px; right: 2px; background: var(--peligro); color: #fff; font-size: 10px; border-radius: 99px; padding: 0 5px; font-weight: 500; line-height: 16px; box-shadow: 0 0 0 2px var(--panel); }
.menu-flotante { position: absolute; top: 54px; right: 10px; width: 290px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-alta); padding: 6px; z-index: 40; max-height: 80vh; overflow-y: auto; animation: sube .14s ease-out; }
.menu-flotante button, .menu-flotante a { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--texto); }
.menu-flotante button:hover, .menu-flotante a:hover { background: var(--panel-2); text-decoration: none; }
.menu-flotante hr { border: 0; border-top: 1px solid var(--borde); margin: 6px 0; }
.menu-flotante .cab { padding: 8px 10px 10px; display: flex; gap: 10px; align-items: center; }
.menu-flotante .marcado { margin-left: auto; color: var(--acento); }
.menu-flotante .titulo-menu { padding: 6px 10px; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.area { flex: 1; display: flex; min-height: 0; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
.cabecera { display: flex; align-items: center; gap: 12px; padding: 18px 24px 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 12; background: var(--fondo); }
.cabecera #titulo { font-size: 21px; line-height: 1.2; }
/* La cabecera (título y botones como Guardar, Publicar o Probar) se queda arriba al bajar en la página */
.cabecera .espacio { flex: 1; }
.contenido { padding: 6px 24px 24px; flex: 1; min-height: 0; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 18px; margin-bottom: 16px; box-shadow: var(--sombra); }
.tarjeta > h2 { margin-bottom: 12px; }

/* Panel del teléfono */
.telefono { width: 290px; flex: none; background: var(--panel); border-left: 1px solid var(--borde); display: flex; flex-direction: column; overflow-y: auto; }
.telefono .tcab { padding: 12px 14px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 10px; }
.telefono .tcab .crece { flex: 1; min-width: 0; }
.telefono .tcab small { color: var(--tenue); display: block; font-size: 12px; }
.telefono .numero { margin: 18px 16px 8px; width: calc(100% - 32px); font-size: 22px; font-weight: 500; text-align: center; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; background: transparent; letter-spacing: .04em; }
.telefono .numero:focus { box-shadow: none; border-color: var(--acento); }
.telefono .numero::placeholder { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--suave); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 22px; }
.teclado button { height: 50px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel-2); cursor: pointer; font-size: 19px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.teclado button small { font-size: 9px; color: var(--suave); letter-spacing: .1em; margin-top: 3px; }
.teclado button:hover { background: var(--acento-claro); border-color: var(--acento); }
.telefono .llamar { display: flex; gap: 14px; justify-content: center; align-items: center; padding: 12px 16px; }
.telefono .llamar .btn.exito { width: 56px; height: 56px; border-radius: 50%; justify-content: center; }
.telefono .llamar .btn.exito .ti { font-size: 24px; vertical-align: 0; }
.telefono .nota { margin: 4px 16px 12px; font-size: 12px; color: var(--tenue); background: var(--panel-2); border: 1px dashed var(--borde-2); border-radius: 8px; padding: 8px 10px; }
.telefono h3 { margin: 10px 16px 6px; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }

/* Tablas */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); }
.tabla th, .tabla td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th { font-size: 11.5px; color: var(--tenue); font-weight: 500; background: var(--panel-2); text-transform: uppercase; letter-spacing: .045em; }
.tabla tbody tr { transition: background .1s; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: color-mix(in srgb, var(--acento) 6%, var(--panel)); }
.envuelve { overflow-x: auto; }
.paginas { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }

/* Kanban */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros input, .filtros select { width: auto; min-width: 140px; }
.kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 14px; }
.columna { flex: 0 0 272px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.columna .cab { padding: 10px 12px; border-top: 3px solid var(--color, var(--acento)); border-radius: 12px 12px 0 0; }
.columna .cab .n { color: var(--tenue); font-size: 12px; font-weight: 500; background: var(--panel); border: 1px solid var(--borde); border-radius: 99px; padding: 0 7px; margin-left: 4px; }
.columna .cab .suma { font-size: 12px; color: var(--tenue); margin-top: 3px; }
.columna .lista { padding: 4px 8px 8px; overflow-y: auto; flex: 1; min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.columna.sobre .lista { background: var(--acento-claro); }
.lead { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; cursor: grab; }
.lead:hover { border-color: var(--acento); box-shadow: var(--sombra); }
.lead.arrastrando { opacity: .4; }
.lead .t { font-weight: 500; margin-bottom: 4px; overflow-wrap: anywhere; }
.lead .v { font-weight: 500; color: var(--texto); }
.lead .meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); margin-top: 6px; }
.lead .avatar { width: 22px; height: 22px; font-size: 10px; }
.lead.ganado { border-left: 3px solid var(--exito); }
.lead.perdido { border-left: 3px solid var(--peligro); opacity: .85; }
.lead .vence { color: var(--peligro); }
.marcador-hueco { height: 4px; background: var(--acento); border-radius: 4px; }
.columna .agregar { margin: 0 8px 8px; justify-content: center; }
/* Leads: resumen del embudo, buscador con filtros plegables, tarjetas más completas y vista de lista */
.resumen-embudo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.resumen-embudo > div { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 1px; }
.resumen-embudo span { font-size: 12px; color: var(--tenue); }
.resumen-embudo b { font-size: 21px; font-family: var(--titulos); font-weight: 900; }
.resumen-embudo small { font-size: 12px; color: var(--tenue); }
.buscar-caja { position: relative; flex: 0 1 320px; min-width: 200px; }
.buscar-caja > .ti { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.buscar-caja input { padding-left: 34px; }
.cuenta-filtros { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--acento); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--acento-claro); color: var(--acento-texto); font-size: 12px; }
.chip-filtro button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 2px; display: inline-flex; border-radius: 50%; }
.chip-filtro button:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.chip-filtro .ti { font-size: 14px; }
.panel-filtros { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px 2px; margin-bottom: 14px; }
.panel-filtros .campo { flex: 0 1 190px; }
.panel-filtros .btn { margin-bottom: 12px; }
.lead .sub { font-size: 12px; color: var(--tenue); margin-top: 3px; display: flex; gap: 4px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead .sub .ti { font-size: 13px; flex: none; }
.lead .etqs { margin-top: 6px; } .lead .etqs .chip { margin-bottom: 0; }
.lead .meta .ti { font-size: 13px; }
.dias { font-size: 11px; color: var(--tenue); background: var(--panel-2); border: 1px solid var(--borde); border-radius: 99px; padding: 0 7px; white-space: nowrap; }
.dias.viejo { color: var(--aviso); border-color: var(--aviso); background: var(--aviso-claro); }
.avatar.vacio { background: var(--panel-2); color: var(--suave); border: 1px dashed var(--borde-2); }
.avatar.vacio .ti { font-size: 13px; vertical-align: 0; }
.columna-vacia { text-align: center; padding: 18px 8px; font-size: 12px; color: var(--tenue); border: 2px dashed var(--borde); border-radius: 10px; }
.columna-vacia .ti { display: block; font-size: 22px; margin: 0 auto 4px; color: var(--suave); }
/* Ajustes: una línea que explica cada página */
.intro-pagina { display: flex; gap: 10px; align-items: flex-start; max-width: 860px; margin: -4px 0 16px; color: var(--tenue); font-size: 13px; line-height: 1.45; }
.intro-pagina .ti { font-size: 18px; color: var(--acento); flex: none; margin-top: 1px; }
/* Central telefónica: franja de cifras y el camino de cada ruta de entrada */
.resumen-central { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.resumen-central a { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; color: var(--texto); }
.resumen-central a:hover { border-color: var(--acento); text-decoration: none; }
.resumen-central a > .ti { font-size: 20px; color: var(--acento); background: var(--acento-claro); border-radius: 10px; padding: 8px; vertical-align: 0; }
.resumen-central b { display: block; font-size: 20px; font-family: var(--titulos); font-weight: 900; line-height: 1.15; }
.resumen-central small { font-size: 12px; color: var(--tenue); }
.camino { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.camino.fuera { margin-top: 6px; font-size: 13px; }
.camino .paso { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--borde); font-size: 13px; white-space: nowrap; }
.camino .paso .ti { font-size: 15px; color: var(--tenue); }
.camino .paso.destino { background: var(--acento-claro); border-color: transparent; color: var(--acento-texto); }
.camino .paso.destino .ti { color: inherit; }
.flecha-c { color: var(--suave); font-size: 15px; }
.etapa-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--color) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--color) 35%, transparent); white-space: nowrap; }
.etapa-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color); }
.tabla-leads td { vertical-align: middle; } .tabla-leads td.vence { color: var(--peligro); }
.tabla-leads .chip { margin: 4px 4px 0 0; }
@media (max-width: 860px) { .resumen-embudo { grid-template-columns: 1fr 1fr; gap: 8px; } .resumen-embudo b { font-size: 17px; } .resumen-embudo > div { padding: 8px 10px; } }

/* Ventanas */
.velo { position: fixed; inset: 0; background: rgba(13, 23, 38, .5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; animation: aparece .14s ease-out; }
.modal { background: var(--panel); border-radius: 18px; width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 24px; box-shadow: var(--sombra-alta); border: 1px solid var(--borde); animation: sube .16s ease-out; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sube { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.modal.ancho { width: min(880px, 100%); }
.modal .acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal h2 { margin-bottom: 14px; font-size: 18px; }
.ficha { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.historial { max-height: 420px; overflow: auto; }
.evento { border-left: 2px solid var(--borde); padding: 0 0 12px 12px; position: relative; }
.evento::before { content: ""; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.evento.nota::before { background: var(--aviso); }
.evento .cuando { font-size: 11px; color: var(--tenue); }
.evento .que { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Equipo */
.arbol ul { list-style: none; padding-left: 22px; margin: 0; border-left: 1px dashed var(--borde-2); }
.arbol > ul { border: 0; padding-left: 0; }
.arbol li { padding: 4px 0; }
.arbol .persona { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); }
.directorio { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ficha-persona { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: center; }
.ficha-persona .crece { flex: 1; min-width: 0; }
.ficha-persona .nombre { font-weight: 500; }
.ficha-persona .linea { font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rol { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); color: var(--tenue); }
.rol.dueno { background: var(--aviso-claro); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 25%, transparent); }
.rol.admin { background: color-mix(in srgb, #7C3AED 12%, var(--panel)); color: color-mix(in srgb, #7C3AED 80%, var(--texto)); border-color: color-mix(in srgb, #7C3AED 22%, transparent); }
.rol.supervisor { background: var(--acento-claro); color: var(--acento-texto); border-color: transparent; }

/* Inicio */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metrica { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: var(--texto); box-shadow: var(--sombra); }
a.metrica:hover { border-color: var(--acento); text-decoration: none; }
.metrica .etq { font-size: 12px; color: var(--tenue); display: flex; align-items: center; gap: 6px; }
.metrica .num { font-size: 26px; font-family: var(--titulos); font-weight: 900; letter-spacing: -.01em; }
.metrica .sub { font-size: 12px; color: var(--tenue); }
.rejilla-inicio { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.metrica .num-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.chispa { display: block; flex: none; overflow: visible; }
.punto-ley { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* Inicio: el call center en este momento */
.cc-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-mini > div { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px; border-left: 4px solid var(--borde-2); }
.cc-mini > div.bien { border-left-color: var(--exito); } .cc-mini > div.alerta { border-left-color: var(--aviso); } .cc-mini > div.mal { border-left-color: var(--peligro); }
.cc-mini b { font-size: 22px; font-family: var(--titulos); font-weight: 900; display: block; line-height: 1.2; }
.cc-mini small { display: block; color: var(--tenue); font-size: 12px; }
.tarjeta .cab-tarjeta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tarjeta .cab-tarjeta h2 { flex: 1; margin: 0; }
.barra-estado { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--panel-2); margin: 8px 0 12px; }
.barra-estado span { display: block; height: 100%; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .estado { border: 0; }

/* Avisos */
.avisos { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 80; align-items: center; }
.aviso { background: #14213A; color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: var(--sombra-alta); max-width: 440px; font-size: 13.5px; animation: sube .16s ease-out; }
.aviso.error { background: var(--peligro); }
.vacio { text-align: center; padding: 40px 10px; color: var(--tenue); }
.vacio > .ti { font-size: 36px; display: block; margin: 0 auto 10px; color: var(--suave); }
.banner-licencia { background: var(--aviso-claro); color: var(--aviso); padding: 8px 22px; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--borde); }

/* Entrada (login) */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.entrada .lado { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, #1B3A6B 0%, transparent 55%), linear-gradient(160deg, #14213A 0%, #0D1726 100%); color: #CCD5E6; padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.entrada .lado::after { content: ''; position: absolute; right: -140px; bottom: -120px; width: 520px; height: 540px; background: url(/img/logo.svg) no-repeat center / contain; opacity: .07; pointer-events: none; }
.entrada .lado > * { position: relative; z-index: 1; max-width: 520px; }
.entrada .lado h1 { font-family: var(--titulos); font-size: 38px; line-height: 1.12; color: #fff; font-weight: 900; letter-spacing: -.015em; }
.entrada .lado ul { list-style: none; padding: 0; margin: 0; }
.entrada .lado li { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 15px; }
.entrada .lado li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: #4A73FA; box-shadow: 0 0 0 4px rgba(74, 115, 250, .2); }
.entrada .forma { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--fondo); }
.entrada .caja { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--borde); border-radius: 20px; padding: 32px; box-shadow: var(--sombra-alta); }
.entrada .caja #titulo { font-size: 26px; margin-bottom: 4px; }
.entrada .caja .btn.primario { height: 44px; font-size: 15px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--titulos); font-weight: 900; font-size: 22px; text-decoration: none; letter-spacing: -.01em; }
.marca img { width: 38px; height: 38px; }
.pestanas { display: flex; gap: 4px; margin: 18px 0; background: var(--panel-2); padding: 4px; border-radius: 12px; border: 1px solid var(--borde); }
.pestanas button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; cursor: pointer; font-weight: 500; color: var(--tenue); transition: background .12s, color .12s; }
.pestanas button:hover { color: var(--texto); }
.pestanas button.activo { background: var(--panel); color: var(--acento-texto); box-shadow: 0 1px 3px rgba(20, 33, 58, .12); }
/* Pestañas en una sola línea (se recorren de lado si no caben) */
.subpestanas { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--borde); margin-bottom: 18px; overflow-x: auto; scrollbar-width: thin; }
.subpestanas button { position: relative; flex: none; white-space: nowrap; border: 0; background: none; padding: 10px 14px 11px; cursor: pointer; font-weight: 500; color: var(--tenue); border-radius: 9px 9px 0 0; transition: color .12s, background .12s; }
.subpestanas button:hover { color: var(--texto); background: color-mix(in srgb, var(--acento) 5%, transparent); }
.subpestanas button.activo { color: var(--acento-texto); }
.subpestanas button.activo::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--acento); }
/* Las pestañas que repiten el submenú del menú lateral: con el menú abierto (computadora) no se muestran porque el menú
   ya las tiene; con el menú en íconos o en el celular sí, porque ahí el menú no muestra las subsecciones */
@media (min-width: 861px) { .app:not(.colapsado) .subpestanas.espejo { display: none; } }
.error-forma { color: var(--peligro); min-height: 18px; margin: 4px 0 8px; font-size: 13px; }
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple li .crece { flex: 1; min-width: 0; }
.mango { cursor: grab; color: var(--tenue); user-select: none; }
.copiar { display: flex; gap: 6px; } .copiar input { font-family: ui-monospace, monospace; font-size: 12px; }
.estado-canal { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); color: var(--tenue); white-space: nowrap; }
.estado-canal::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.estado-canal.conectado { background: var(--exito-claro); color: var(--exito); border-color: transparent; }
.estado-canal.pendiente { background: var(--aviso-claro); color: var(--aviso); border-color: transparent; }
.estado-canal.error, .estado-canal.desconectado { background: var(--peligro-claro); color: var(--peligro); border-color: transparent; }
.codigo { font-family: ui-monospace, monospace; font-size: 12px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 8px; padding: 10px; white-space: pre-wrap; word-break: break-all; }

/* ── Chats ── */
.contenido.sin-margen { padding: 0; display: flex; min-height: 0; }
.chats { display: grid; grid-template-columns: 320px 1fr 300px; flex: 1; min-height: 0; height: calc(100vh - 56px - 58px); border-top: 1px solid var(--borde); }
.chats > section { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--borde); background: var(--panel); }
.chats .lista-chats { overflow-y: auto; flex: 1; }
.chats .pestanas-chat { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.chats .pestanas-chat::-webkit-scrollbar { display: none; }
.chats .pestanas-chat button { border: 0; background: none; padding: 8px 9px; font-weight: 500; color: var(--tenue); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; font-size: 13px; }
.chats .pestanas-chat button.activo { color: var(--acento); border-color: var(--acento); }
.chats .pestanas-chat .n { background: var(--acento); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; margin-left: 3px; }
.chats .buscar-chat { padding: 8px; display: flex; gap: 6px; border-bottom: 1px solid var(--borde); }
.item-chat { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borde); cursor: pointer; align-items: flex-start; }
.item-chat:hover { background: var(--panel-2); }
.item-chat.activo { background: var(--acento-claro); }
.item-chat .avatar-chat { width: 38px; height: 38px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-texto); display: flex; align-items: center; justify-content: center; font-weight: 500; flex: none; position: relative; font-size: 13px; }
.item-chat .canal-ico { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 1px solid var(--borde); font-size: 10px; display: flex; align-items: center; justify-content: center; }
.item-chat .medio { flex: 1; min-width: 0; }
.item-chat .fila1 { display: flex; justify-content: space-between; gap: 6px; }
.item-chat .fila1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.item-chat .hora { font-size: 11px; color: var(--tenue); flex: none; }
.item-chat .ultimo { font-size: 13px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-chat .noleidos { background: var(--acento); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 500; padding: 0 7px; margin-left: 6px; }
.conversacion .cab-chat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); }
.conversacion .cab-chat .crece { flex: 1; min-width: 0; }
.conversacion .burbujas { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: var(--fondo); }
.bur { max-width: 70%; padding: 8px 12px; border-radius: 16px; overflow-wrap: anywhere; line-height: 1.45; border: 1px solid var(--borde); box-shadow: 0 1px 2px rgba(20, 33, 58, .06); }
.bur .txt { white-space: pre-wrap; }
.bur.entrante { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 4px; }
.bur.saliente { align-self: flex-end; background: linear-gradient(135deg, #0778C6, #03497F); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.bur.saliente .pie { color: rgba(255, 255, 255, .72); }
.bur.saliente a { color: #fff; text-decoration: underline; }
.bur.saliente .pie .error { color: #FFD3CF; }
.bur.nota { align-self: flex-end; background: var(--aviso-claro); color: var(--texto); border: 1px dashed var(--aviso); }
.bur.sistema { align-self: center; background: transparent; border: 0; color: var(--tenue); font-size: 12px; padding: 2px; }
.bur .pie { display: block; text-align: right; font-size: 11px; color: var(--tenue); margin-top: 3px; }
.bur .pie .error { color: var(--peligro); }
.bur img { max-width: 280px; max-height: 320px; border-radius: 8px; display: block; cursor: zoom-in; }
.bur audio, .bur video { max-width: 280px; display: block; }
.bur .asunto { font-weight: 500; font-size: 12px; margin-bottom: 4px; color: var(--tenue); }
.dia { align-self: center; font-size: 11px; font-weight: 500; color: var(--tenue); background: var(--panel); border: 1px solid var(--borde); padding: 3px 12px; border-radius: 99px; margin: 8px 0; box-shadow: 0 1px 2px rgba(20, 33, 58, .05); }
.redactar { border-top: 1px solid var(--borde); padding: 10px 12px; position: relative; background: var(--panel); }
.redactar .fila-red textarea { border-radius: 12px; }
.redactar .fila-red .btn { height: 40px; }
.redactar.es-nota textarea { background: var(--aviso-claro); border-color: var(--aviso); }
.redactar .fila-red { display: flex; gap: 6px; align-items: flex-end; }
.redactar textarea { resize: none; min-height: 40px; max-height: 160px; }
.redactar .opciones-red { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--tenue); margin-bottom: 6px; flex-wrap: wrap; }
.redactar .opciones-red label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.redactar .opciones-red input { width: auto; }
.rapidas { position: absolute; bottom: 100%; left: 10px; right: 10px; max-height: 220px; overflow-y: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); }
.rapidas button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; cursor: pointer; }
.rapidas button:hover, .rapidas button.activo { background: var(--acento-claro); }
.ficha-chat { overflow-y: auto; padding: 14px; gap: 14px; }
.ficha-chat h3 { margin: 4px 0 6px; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.chats .volver, .chats .cerrar-ficha { display: none; }
/* Sin conversación abierta no hay ficha: el centro dice cuántas esperan y abre la que más lleva esperando */
.chats.sin-chat { grid-template-columns: 320px 1fr; }
.chats.sin-chat .ficha-chat { display: none; }
.chat-vacio { margin: auto; text-align: center; max-width: 420px; padding: 24px; color: var(--tenue); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chat-vacio > .ti { font-size: 44px; color: var(--suave); }
.chat-vacio h2 { color: var(--texto); font-size: 17px; }
.chat-vacio p { margin: 0; }
.chat-cuentas { display: flex; gap: 10px; }
.chat-cuentas > div { min-width: 120px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; }
.chat-cuentas > div.hay { border-color: var(--aviso); background: var(--aviso-claro); }
.chat-cuentas b { font-size: 24px; color: var(--texto); font-variant-numeric: tabular-nums; }
.chat-cuentas small { font-size: 12px; }
.espera-chat { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 99px; background: var(--panel-2); color: var(--tenue); white-space: nowrap; }
.espera-chat .ti { font-size: 12px; }
.espera-chat.alerta { background: var(--aviso-claro); color: var(--aviso); }
.espera-chat.mal { background: var(--peligro-claro); color: var(--peligro); }
.chats.con-ficha .cerrar-ficha { align-self: flex-end; }

/* ── Dos paneles (Contactos) ── */
.dos-paneles { display: grid; grid-template-columns: 340px 1fr; flex: 1; min-height: 0; height: calc(100vh - 56px - 58px); border-top: 1px solid var(--borde); }
.dos-paneles .lista-lado { background: var(--panel); border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.filtros-lista { padding: 10px; border-bottom: 1px solid var(--borde); }
.filtros-lista select { padding: 6px 8px; font-size: 13px; }
.lista-items { flex: 1; overflow-y: auto; }
.item-contacto { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.item-contacto:hover { background: var(--panel-2); }
.item-contacto.activo { background: var(--acento-claro); }
.item-contacto .crece { flex: 1; min-width: 0; }
.item-contacto b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-contacto small { display: block; color: var(--tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-contacto .chip { margin: 0; }
.detalle { overflow-y: auto; padding: 18px 22px; min-width: 0; }
.cab-ficha { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.cab-ficha .crece { flex: 1; min-width: 220px; }
.cab-ficha h2 { font-size: 18px; }
.datos-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dato { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 3px 9px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); color: var(--texto); cursor: pointer; }
a.dato:hover, button.dato:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.dato .ti { font-size: 15px; }
.acciones-ficha { display: flex; gap: 8px; flex-wrap: wrap; }
.volver-lista { display: none; margin-bottom: 10px; }
/* Contactos: sin ficha abierta la lista ocupa todo el ancho, con más columnas; al abrir uno, la ficha va al lado */
.ic-cab, .item-contacto .ic-col { display: none; }
.item-contacto .ic-leads { flex: none; }
.dos-paneles .volver-lista { display: inline-flex; }
@media (min-width: 861px) {
  .dos-paneles.ancho { grid-template-columns: 1fr; }
  .dos-paneles.ancho .detalle { display: none; }
  .dos-paneles.ancho .filtros-lista { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .dos-paneles.ancho .filtros-lista > input { flex: 0 1 340px; }
  .dos-paneles.ancho .filtros-lista > .fila { margin-top: 0 !important; flex: 0 1 380px; }
  .dos-paneles.ancho .filtros-lista > #c-total { margin: 0 0 0 auto !important; }
  .dos-paneles.ancho .ic-cab, .dos-paneles.ancho .item-contacto { display: grid; grid-template-columns: 34px minmax(180px, 1.4fr) minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) 64px 110px; gap: 12px; align-items: center; }
  .dos-paneles.ancho .ic-cab { padding: 8px 14px; font-size: 12px; color: var(--tenue); font-weight: 500; background: var(--panel-2); border-bottom: 1px solid var(--borde); }
  .dos-paneles.ancho .item-contacto .ic-col { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dos-paneles.ancho .item-contacto .ic-col .chip { margin: 0 4px 0 0; }
  .dos-paneles.ancho .item-contacto .ic-leads { justify-self: start; }
}
.item-contacto:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.ficha-dos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.ficha-dos > aside > .tarjeta:last-child { margin-bottom: 0; }
@media (max-width: 1100px) { .ficha-dos { grid-template-columns: 1fr; } }
.vacio-chico { display: flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 13px; padding: 6px 0; }
.vacio-chico .ti { font-size: 20px; color: var(--suave); }
.datos-ficha { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.datos-ficha dt { color: var(--tenue); } .datos-ficha dd { margin: 0; overflow-wrap: anywhere; }

/* ── Panel lateral (cajón) para fichas ── */
.cajon-velo { position: fixed; inset: 0; background: rgba(13, 18, 25, .35); z-index: 50; display: flex; justify-content: flex-end; }
.cajon { background: var(--panel); width: min(720px, 100%); height: 100%; overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,.18); border-left: 1px solid var(--borde); padding: 0 0 20px; animation: entra .16s ease-out; }
@keyframes entra { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.cajon .cajon-cab { position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--borde); padding: 14px 20px; display: flex; align-items: center; gap: 10px; z-index: 2; }
.cajon .cajon-cab h2 { flex: 1; margin: 0; font-size: 17px; }
.cajon .cajon-cuerpo { padding: 16px 20px; }
.cajon .acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Ficha del lead */
.resumen-lead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.valor-lead { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.etapas-lead { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; }
.etapas-lead button { flex: 1; min-width: 90px; border: 1px solid var(--borde); background: var(--panel-2); color: var(--tenue); padding: 7px 8px; font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapas-lead button:hover { border-color: var(--color); color: var(--texto); }
.etapas-lead button.hecha { background: color-mix(in srgb, var(--color) 16%, var(--panel)); border-color: color-mix(in srgb, var(--color) 40%, transparent); color: var(--texto); }
.etapas-lead button.actual { background: var(--color); border-color: var(--color); color: #fff; }
.contacto-lead { display: flex; gap: 10px; align-items: center; padding: 12px 14px; }
.contacto-lead .crece { flex: 1; min-width: 0; }

/* ── Migas de pan y barras de lista (pantallas de administración) ── */
.miga { color: var(--tenue); font-weight: 400; }
a.miga:hover { color: var(--acento); text-decoration: none; }
.miga-sep { color: var(--suave); margin: 0 8px; font-weight: 400; }
/* Botones de la cabecera en una sola fila (las listas no se estiran a todo lo ancho) */
#acciones { flex-wrap: nowrap; }
#acciones select { width: auto; max-width: 280px; }
@media (max-width: 860px) { #acciones { flex-wrap: wrap; } }
.barra-lista { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barra-lista .espacio { flex: 1; }
.selector-grupo { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 0 0 0 10px; }
.selector-grupo .ti { color: var(--acento); }
.selector-grupo select { border: 0; background: transparent; box-shadow: none !important; padding-left: 2px; font-weight: 500; }
.tabla-admin th:first-child, .tabla-admin td:first-child { width: 36px; padding-right: 0; }
.tabla-admin input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--acento); }
.tabla-admin tbody tr:hover td { background: var(--panel-2); }

/* ── Directorio en tarjetas (como "Extensiones") ── */
.tarjeta-ext { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 14px 12px; }
.tarjeta-ext:hover { box-shadow: var(--sombra); }
.fila-ext { display: flex; gap: 12px; align-items: center; }
.fila-ext .crece { flex: 1; min-width: 0; }
.fila-ext .nombre { font-weight: 500; }
.fila-ext .linea { font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botones-ext { display: flex; gap: 8px; margin: 12px 0 0 56px; }
.redondo { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--acento-claro); color: var(--acento-texto); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s; }
.redondo:hover { background: var(--acento); color: #fff; }
.redondo .ti { font-size: 16px; vertical-align: 0; }

/* ── Ventana de llamada en curso y aviso de entrante ── */
.llamada-flotante { position: fixed; right: 20px; bottom: 20px; width: 340px; background: linear-gradient(180deg, #14213A, #0D1726); color: #E8EEF8; border-radius: 18px; border: 1px solid #23355A; box-shadow: 0 24px 60px rgba(13, 23, 38, .45); z-index: 70; overflow: hidden; animation: sube .18s ease-out; }
.llamada-flotante .ll-cab { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 12px; color: #9CA9C3; border-bottom: 1px solid #23355A; }
.llamada-flotante .ll-cab .crece { flex: 1; }
.ll-punto { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: latido 1.2s infinite; }
@keyframes latido { 50% { opacity: .3; } }
.ll-vista { background: #23355A; padding: 1px 8px; border-radius: 99px; }
.ll-min { background: none; border: 0; color: #9CA9C3; cursor: pointer; }
.ll-persona { display: flex; gap: 12px; align-items: center; padding: 16px 16px 10px; }
.ll-persona b { font-size: 17px; font-weight: 700; color: #fff; }
.llamada-flotante .ll-persona .avatar { background: linear-gradient(135deg, #4A73FA, #03497F); color: #fff; font-weight: 700; box-shadow: 0 0 0 3px rgba(74, 115, 250, .25); }
.ll-tiempo { font-variant-numeric: tabular-nums; color: #8fd3a8; margin-top: 2px; }
.ll-botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 12px; }
.ll-botones button { background: rgba(255, 255, 255, .07); border: 0; color: #E8EEF8; border-radius: 12px; padding: 10px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; cursor: pointer; }
.ll-botones button .ti { font-size: 19px; vertical-align: 0; }
.ll-botones button:hover { background: rgba(255, 255, 255, .13); }
.ll-botones button.activo { background: #4A73FA; color: #fff; }
.ll-colgar { display: flex; justify-content: center; padding: 10px 0 16px; }
.ll-colgar button, .redondo-rojo, .redondo-verde { width: 52px; height: 52px; border-radius: 50%; border: 0; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ll-colgar button .ti, .redondo-rojo .ti, .redondo-verde .ti { font-size: 22px; vertical-align: 0; }
.ll-colgar button, .redondo-rojo { background: #E5484D; box-shadow: 0 6px 18px rgba(229, 72, 77, .4); }
.redondo-verde { background: #22a35a; }
.llamada-flotante.minimizada .ll-persona ~ * { display: none; }
.entrante-flotante { position: fixed; top: 74px; right: 20px; width: 380px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-alta); padding: 14px; display: flex; gap: 12px; align-items: center; z-index: 70; animation: entra .18s ease-out; }
.entrante-flotante .crece { flex: 1; min-width: 0; }
.entrante-flotante .redondo-rojo, .entrante-flotante .redondo-verde { width: 44px; height: 44px; }

/* ── Chats: lista estilo consola ── */
.item-chat .canal-linea { font-size: 12px; color: var(--tenue); display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-chat .canal-linea .ti { font-size: 14px; color: var(--acento); flex: none; }
.acciones-chat { display: flex; gap: 4px; }
.acciones-chat .redondo { width: 32px; height: 32px; }

/* ── Responsivo ── */
@media (max-width: 1280px) { .telefono { position: fixed; right: 0; top: 56px; bottom: 0; z-index: 25; box-shadow: var(--sombra); } }
@media (max-width: 1100px) {
  .chats { grid-template-columns: 300px 1fr; } .chats .ficha-chat { display: none; }
  .chats.con-ficha .cerrar-ficha { display: inline-flex; }
  .chats.con-ficha .ficha-chat { display: flex; position: fixed; right: 0; top: 0; bottom: 0; width: min(340px, 92vw); z-index: 40; box-shadow: var(--sombra); }
  .rejilla-inicio { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr 60px; height: 100dvh; }
  .app.colapsado { grid-template-columns: 1fr; }
  .menu { grid-row: 2; flex-direction: row; padding: 0 6px; border-right: 0; border-top: 1px solid var(--borde); overflow-x: auto; overflow-y: hidden; align-items: center; }
  .menu nav { display: flex; flex-direction: row; gap: 2px; }
  .marca-menu, .grupo-menu, .menu .etq, .menu .flecha, .submenu, .menu a.item::after { display: none !important; }
  .menu a.item { padding: 10px 12px; }
  .menu .globo { position: absolute; top: 2px; right: 2px; margin: 0; }
  #menu-btn, .boton-estado-agente .etq { display: none; }
  .cuerpo { grid-row: 1; }
  .barra { padding: 0 10px; }
  .buscador kbd { display: none; }
  .resultados { min-width: 0; position: fixed; left: 8px; right: 8px; top: 52px; }
  .telefono { top: 56px; bottom: 60px; width: 100%; }
  .entrada { grid-template-columns: 1fr; }
  .entrada .lado { padding: 28px 20px; }
  .entrada .lado h1 { font-size: 24px; }
  .ficha { grid-template-columns: 1fr; }
  .contenido, .cabecera { padding-left: 14px; padding-right: 14px; }
  .columna { flex-basis: 82vw; }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metrica { padding: 12px; } .metrica .num { font-size: 20px; }
  .dos-paneles { grid-template-columns: 1fr; height: calc(100dvh - 56px - 58px - 60px); }
  .dos-paneles .detalle { display: none; padding: 12px 14px; }
  .dos-paneles.viendo .lista-lado { display: none; }
  .dos-paneles.viendo .detalle { display: block; }
  .volver-lista { display: inline-flex; }
  .cab-ficha .acciones-ficha { width: 100%; }
  .resumen-lead { grid-template-columns: 1fr 1fr; }
  .cajon .cajon-cab { flex-wrap: wrap; padding: 12px 14px; }
  .cajon .cajon-cuerpo { padding: 14px; }
  .chats { grid-template-columns: 1fr; height: calc(100dvh - 56px - 58px - 60px); }
  .chats .conversacion { display: none; }
  .chats.viendo .lista-lado { display: none; }
  .chats.viendo .conversacion { display: flex; }
  .chats .volver { display: inline-flex; }
  .bur { max-width: 85%; }
}

/* Buzón de voz y grabaciones */
.mensaje-voz { padding: 12px 16px; margin-bottom: 10px; }
.mensaje-voz .mv-icono { font-size: 22px; color: var(--tenue); }
.mensaje-voz.nuevo { border-left: 3px solid var(--acento); }
.mensaje-voz.nuevo .mv-icono { color: var(--acento); }
.mensaje-voz.nuevo b { font-weight: 700; }
.mensaje-voz audio { width: 100%; height: 36px; margin-top: 10px; }
.fila-audio td { background: var(--panel-2); }
.fila-audio audio { height: 34px; width: 320px; max-width: 100%; }
.subpestanas .cuenta { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--acento); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.ll-rec { margin-left: 8px; font-size: 12px; color: #fca5a5; font-weight: 600; }

/* Roles y permisos */
.roles { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; max-width: 1100px; }
.roles .tarjeta { margin-bottom: 0; }
.rol-item { cursor: pointer; padding: 9px 8px !important; border-radius: 8px; }
.rol-item:hover { background: var(--panel-2); }
.rol-item.activo { background: var(--acento-claro); }
.rol-item.activo b { color: var(--acento-texto); }
.permisos-grupo { border: 1px solid var(--borde); border-radius: 10px; padding: 4px 14px 6px; margin: 0 0 12px; }
.permisos-grupo legend { font-weight: 600; padding: 0 6px; font-size: 13px; }
.permisos-grupo[disabled] { opacity: .65; }
.permiso { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.permiso:last-child { border-bottom: 0; }
.permiso select { width: auto; min-width: 230px; }
.interruptor { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.interruptor span { position: absolute; inset: 0; border-radius: 99px; background: var(--borde-2); transition: background .15s; }
.interruptor span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + span { background: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } .permiso { flex-wrap: wrap; } .permiso select { min-width: 0; width: 100%; } }

/* Call center: colas, menús de voz y barra del agente */
.agente-cola { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 99px; font-size: 13px; }
.lista-agentes { max-height: 230px; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; padding: 0 10px; }
.lista-agentes li { padding: 6px 0; }
.tecla-menu { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--acento-claro); color: var(--acento-texto); font-weight: 700; flex: none; }
.opciones-menu .campo { margin: 0; }
.opciones-menu .campo > span:empty { display: none; }
.opciones-menu > .fila { margin-bottom: 6px; flex-wrap: nowrap; }
.boton-estado-agente .cc-tiempo { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tenue); }
.boton-estado-agente .cc-tiempo.pasado { color: var(--peligro); font-weight: 600; }
.cc-esperando { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--peligro); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.menu-flotante .cc-cola { display: flex; justify-content: space-between; padding: 4px 10px; font-size: 13px; color: var(--tenue); }

/* Wallboard: mosaicos grandes; el estado (bien, alerta, mal) siempre va con texto o ícono, no solo con color */
.wb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.wb-tile { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; border-top: 4px solid var(--borde-2); }
.wb-tile.bien { border-top-color: var(--exito); } .wb-tile.alerta { border-top-color: var(--aviso); } .wb-tile.mal { border-top-color: var(--peligro); }
.wb-t { font-size: 12px; color: var(--tenue); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.wb-v { font-size: 34px; font-weight: 700; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.wb-v small { font-size: 15px; color: var(--tenue); font-weight: 500; }
.wb-s { font-size: 12px; color: var(--tenue); margin-top: 4px; }
.wb-tile.alerta .wb-s, .wb-tile.mal .wb-s { color: var(--texto); }
.wb-sla { grid-row: span 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wb-anillo { --p: 0; width: 120px; height: 120px; border-radius: 50%; margin: 10px 0 4px; display: grid; place-items: center;
  background: conic-gradient(var(--c, var(--acento)) calc(var(--p) * 1%), var(--borde) 0); }
.wb-sla.bien .wb-anillo { --c: var(--exito); } .wb-sla.alerta .wb-anillo { --c: var(--aviso); } .wb-sla.mal .wb-anillo { --c: var(--peligro); }
.wb-anillo span { width: 92px; height: 92px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.wb-agentes .wb-ag { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 8px; }
.wb-ag div { display: flex; align-items: baseline; gap: 6px; } .wb-ag b { font-size: 22px; } .wb-ag small { color: var(--tenue); font-size: 12px; }
.wb-marca { display: inline-block; padding: 1px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.wb-marca.alerta { background: var(--aviso-claro); border-color: var(--aviso); } .wb-marca.mal { background: var(--peligro-claro); border-color: var(--peligro); font-weight: 600; }
.wb-espera { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wb-tv { background: var(--fondo); padding: 24px; overflow: auto; }
.wb-tv .wb-v { font-size: 52px; } .wb-tv .wb-t { font-size: 15px; } .wb-tv .wb-anillo { width: 170px; height: 170px; } .wb-tv .wb-anillo span { width: 132px; height: 132px; font-size: 38px; }
.wb-tiles.reporte { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .wb-tiles.reporte .wb-v { font-size: 26px; }
.tenue.pasado { color: var(--peligro); font-weight: 600; }

/* Panel del supervisor */
.monitoreo-barra { display: flex; align-items: center; gap: 8px; background: var(--acento-claro); border-color: transparent; position: sticky; top: 0; z-index: 5; }
.monitoreo-barra > .ti { font-size: 20px; color: var(--acento); }
.sv-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .sv-kpis .wb-v { font-size: 26px; } .sv-kpis .wb-tile { padding: 12px 14px; }
.sv-hoy { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tenue); font-size: 13px; }
.sv-hoy b { color: var(--texto); font-weight: 600; } .sv-hoy .ti { font-size: 15px; }
.sv-titulo { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.sv-titulo .n { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); color: var(--tenue); font-size: 12px; text-align: center; }
.sv-titulo .n.hay { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.wb-graf { margin-top: 4px; }

/* Gráfica de barras de los reportes: una escala, barras delgadas con punta redondeada y 2 px entre ellas */
.g-ley { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); }
.muestra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.muestra.s1 { background: var(--serie-1); } .muestra.s2 { background: var(--serie-2); } .muestra.s3 { background: var(--serie-3); }
.g-cab { display: flex; align-items: center; gap: 10px; } .g-cab h2 { flex: 1; min-width: 0; margin: 0; }
.g-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.grafica { display: flex; height: 220px; margin-top: 14px; padding-bottom: 22px; }
.g-eje { position: relative; width: 34px; flex: none; } .g-eje span { position: absolute; right: 6px; transform: translateY(50%); font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.g-area { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 4px; border-left: 1px solid var(--borde); }
.g-linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--borde); opacity: .7; }
.g-grupo { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 8px; cursor: default; }
.g-grupo:hover { background: color-mix(in srgb, var(--acento) 6%, transparent); }
.g-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.g-barra { width: min(14px, 40%); border-radius: 4px 4px 0 0; min-height: 0; }
.g-barra.s1 { background: var(--serie-1); } .g-barra.s2 { background: var(--serie-2); } .g-barra.s3 { background: var(--serie-3); }
.g-grupo:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 4px; }
.g-x { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--tenue); white-space: nowrap; }
.g-tip { position: fixed; z-index: 90; background: var(--texto); color: var(--panel); font-size: 12px; padding: 6px 9px; border-radius: 6px; pointer-events: none; max-width: 280px; }

/* Campañas de marcación */
.medidor { height: 8px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); overflow: hidden; margin-bottom: 4px; }
.medidor span { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.medidor.grande { height: 12px; }
.camp-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 16px; } .camp-tiles .wb-v { font-size: 30px; }
.camp-cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.camp-cuentas div { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.camp-cuentas b { font-size: 20px; font-variant-numeric: tabular-nums; } .camp-cuentas small { color: var(--tenue); font-size: 12px; }
.camp-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.tabla.compacta td, .tabla.compacta th { padding: 6px 8px; }
.tabla.compacta th select { margin-top: 4px; min-width: 130px; }
.tachado { text-decoration: line-through; } .tel-actual { font-weight: 600; }
.campo-camp { gap: 8px; margin-bottom: 8px; align-items: center; } .campo-camp input[data-c=nombre] { flex: 1; min-width: 160px; } .campo-camp input[data-c=opciones] { flex: 1.4; min-width: 180px; }
.camp-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.camp-trabajo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .camp-trabajo { grid-template-columns: 1fr; } }
/* En la consola la campaña se acomoda según su propio espacio (con la lista de chats o el panel derecho puede quedar angosta) */
#cons-trabajo { container-type: inline-size; }
@container (max-width: 640px) { .camp-trabajo { grid-template-columns: 1fr; } }
/* En una columna, lo de la llamada va primero (estado, Llamar o Colgar), luego la ficha, el guion y el formulario; la historia y los intentos al final */
@container (max-width: 640px) { .camp-trabajo > .camp-izq, .camp-trabajo > .camp-der { display: contents; } .camp-trabajo .camp-estado { order: -1; } .camp-trabajo .camp-historia, .camp-trabajo .camp-intentos { order: 1; } .camp-trabajo > div > .tarjeta { margin: 0; } }
@media (max-width: 900px) { .camp-trabajo > .camp-izq, .camp-trabajo > .camp-der { display: contents; } .camp-trabajo .camp-estado { order: -1; } .camp-trabajo .camp-historia, .camp-trabajo .camp-intentos { order: 1; } .camp-trabajo > div > .tarjeta { margin: 0; } }
.camp-izq, .camp-der { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .camp-izq > .tarjeta, .camp-der > .tarjeta { margin: 0; }
.camp-registro .avatar.grande { flex: none; }
.camp-tels { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.camp-tel { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--borde-2); border-radius: 8px; font-size: 16px; font-variant-numeric: tabular-nums; cursor: pointer; }
.camp-tel.actual { border-color: var(--acento); background: var(--acento-claro); }
.camp-tel.malo { opacity: .6; text-decoration: line-through; cursor: default; } .camp-tel small { font-size: 11px; color: var(--tenue); text-decoration: none; }
.camp-datos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 0; }
.camp-datos dt { color: var(--tenue); text-transform: capitalize; } .camp-datos dd { margin: 0; }
.camp-guion { line-height: 1.6; font-size: 15px; margin-top: 8px; } .camp-guion mark { background: var(--acento-claro); color: var(--acento-texto); padding: 0 3px; border-radius: 4px; }
.camp-estado-cab { display: flex; align-items: center; gap: 8px; font-size: 16px; } .camp-estado-cab .ti { font-size: 22px; }
.camp-estado.hablando .camp-estado-cab .ti, .camp-estado.marcando .camp-estado-cab .ti { color: var(--exito); }
.camp-estado.resultado .camp-estado-cab .ti, .camp-estado.pausa .camp-estado-cab .ti { color: var(--aviso); }
.camp-estado-cab [data-desde] { font-variant-numeric: tabular-nums; }
.camp-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.btn.grande { padding: 11px 18px; font-size: 15px; } .btn.peligro.grande { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.camp-cuenta { width: 100%; margin: 0; color: var(--tenue); } .camp-cuenta b { color: var(--texto); font-size: 18px; font-variant-numeric: tabular-nums; }
.camp-ultimo { margin-top: 12px; font-size: 13px; color: var(--tenue); border-top: 1px solid var(--borde); padding-top: 10px; }
.camp-pendiente { margin: 10px 0 0; color: var(--exito); font-weight: 500; }
.camp-campos .campo { margin-bottom: 10px; }
.camp-grupo { margin-top: 10px; } .camp-res { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.camp-res .btn { border-left-width: 4px; }
.camp-res .res-positivo { border-left-color: var(--exito); } .camp-res .res-negativo { border-left-color: var(--peligro); }
.camp-res .res-no_util { border-left-color: var(--suave); } .camp-res .res-no_contacto { border-left-color: var(--aviso); }
.camp-estrategia { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px 4px; margin: 0 0 14px; }
.camp-estrategia legend { padding: 0 6px; font-weight: 500; color: var(--tenue); font-size: 13px; }
.camp-todas { border-color: var(--acento); }
.regla { gap: 8px; align-items: center; margin-bottom: 8px; }
.chat-campana { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--acento-texto); background: var(--acento-claro); border-radius: 99px; padding: 0 7px; margin-top: 2px; }
.chat-campana .ti { font-size: 12px; }
/* Campañas por canal y de WhatsApp */
.canales-camp { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.canales-camp button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde-2); background: var(--panel); border-radius: 99px; padding: 6px 12px; cursor: pointer; font-weight: 500; color: var(--tenue); }
.canales-camp button.activo { border-color: var(--acento); color: var(--acento); background: var(--acento-claro); }
.canales-camp .cuenta { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--acento); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.wa-plantilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; margin-bottom: 14px; align-items: start; }
@media (max-width: 760px) { .wa-plantilla { grid-template-columns: 1fr; } }
.wa-burbuja { background: #dcf8c6; color: #1f2a37; border-radius: 10px 10px 10px 2px; padding: 10px 12px; line-height: 1.5; font-size: 14px; box-shadow: var(--sombra); white-space: normal; }
.wa-burbuja .tenue { color: #5b6573; margin-top: 4px; font-size: 12px; }
.wa-burbuja mark { background: #fff3bf; padding: 0 2px; border-radius: 3px; }
.wa-burbuja.error { background: var(--peligro-claro); color: var(--peligro); }
.wa-var { gap: 8px; align-items: center; margin-bottom: 8px; } .wa-var select { max-width: 220px; } .wa-var input { flex: 1; min-width: 140px; }
.wa-vistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.wa-estado > .fila > .ti { font-size: 26px; color: #25d366; }
/* Productividad: barras de avance con la raya del ritmo, tarjetas por indicador y tablero por persona */
.prod-barra { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.prod-fecha { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 2px 6px; }
.prod-fecha b { font-weight: 500; padding: 0 6px; text-transform: capitalize; }
.prod-sub { margin: 4px 0 10px; font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em; }
.mis-metas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.meta-tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; border-top: 4px solid var(--borde-2); }
.meta-tarjeta.bien { border-top-color: var(--exito); } .meta-tarjeta.cerca { border-top-color: var(--aviso); } .meta-tarjeta.mal { border-top-color: var(--peligro); }
.meta-nombre { font-size: 12px; color: var(--tenue); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.meta-cifras { margin: 4px 0 8px; } .meta-cifras b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meta-pie { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; margin-top: 6px; flex-wrap: wrap; }
.meta-barra { position: relative; height: 8px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); overflow: visible; }
.meta-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--suave); }
.meta-barra.bien > span { background: var(--exito); } .meta-barra.cerca > span { background: var(--aviso); } .meta-barra.mal > span { background: var(--peligro); }
.meta-barra > i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--texto); border-radius: 2px; opacity: .55; }
.estado-ritmo { font-weight: 600; } .estado-ritmo.bien { color: var(--exito); } .estado-ritmo.cerca { color: var(--aviso); } .estado-ritmo.mal { color: var(--peligro); } .estado-ritmo.sin { color: var(--tenue); font-weight: 400; }
.prod-tabla td { vertical-align: middle; }
.prod-tabla tr.con-gente td { background: var(--panel-2); }
.prod-persona { display: inline-flex; align-items: center; gap: 8px; }
.prod-persona small { display: block; font-size: 11px; }
.prod-celda { min-width: 140px; } .prod-celda .meta-barra { margin-top: 5px; height: 6px; }
.prod-tabla input { width: 120px; }
.prod-total td { background: var(--panel-2); font-size: 13px; }
.mi-meta-panel + .mi-meta-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.mi-meta-fila { padding: 6px 0; } .mi-meta-fila .meta-barra { margin: 6px 0 4px; }
.p-ind { border: 1px solid var(--borde); border-radius: 10px; padding: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.p-ind > .fila > select:first-child { max-width: 260px; }
.p-ops { padding: 2px 4px; font-size: 13px; }
/* Asistencia: línea del día (conectado, al habla, pausas y el turno), calendario del periodo y editor de turnos */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.asis-aviso { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; }
.asis-aviso > .ti { font-size: 20px; color: var(--acento); }
.asis-tabla td, .asis-tabla th { vertical-align: middle; padding-left: 8px; padding-right: 8px; }
.asis-tabla td:first-child, .asis-tabla th:first-child { padding-left: 14px; }
.asis-tabla .prod-persona b { white-space: nowrap; }
.asis-tabla td small { display: block; font-size: 11px; }
.asis-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.asis-estado { display: inline-block; font-weight: 600; font-size: 13px; white-space: nowrap; }
.asis-estado.bien { color: var(--exito); } .asis-estado.cerca { color: var(--aviso); } .asis-estado.mal { color: var(--peligro); }
.asis-estado.info { color: var(--acento); } .asis-estado.sin, .asis-estado.fut { color: var(--tenue); font-weight: 400; }
.asis-col-linea { min-width: 280px; width: 36%; }
.asis-eje { position: relative; height: 14px; font-size: 11px; font-weight: 400; color: var(--tenue); }
.asis-eje span { position: absolute; transform: translateX(-50%); }
.asis-eje span:first-child { transform: none; } .asis-eje span:last-child { transform: translateX(-100%); }
.asis-linea { position: relative; height: 22px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--borde); overflow: hidden; }
.asis-linea > span { position: absolute; top: 5px; bottom: 5px; }
.asis-linea > .l-turno { top: 0; bottom: 0; background: color-mix(in srgb, var(--acento) 9%, transparent); border-left: 2px solid var(--borde-2); border-right: 2px solid var(--borde-2); }
.asis-linea > .l-h { top: 3px; bottom: 3px; border-radius: 2px; }
.l-c { background: color-mix(in srgb, var(--serie-3) 45%, var(--panel)); }
.l-h { background: var(--serie-1); } .l-p { background: var(--serie-2); } .l-d { background: var(--suave); }
.l-turno { background: color-mix(in srgb, var(--acento) 12%, var(--panel)); border: 1px solid var(--borde-2); }
.asis-linea > .l-ahora { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--texto); opacity: .6; }
.muestra.l-ahora { width: 3px; background: var(--texto); opacity: .6; }
.asis-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; margin: 0; padding: 10px 14px; border-top: 1px solid var(--borde); }
.asis-ley > span { display: inline-flex; align-items: center; gap: 6px; }
.asis-cal { display: flex; gap: 2px; }
.asis-c { width: 16px; height: 16px; flex: none; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-style: normal; color: #fff; text-decoration: none; background: var(--panel-2); border: 1px solid var(--borde); }
a.asis-c:hover { text-decoration: none; outline: 2px solid var(--acento); outline-offset: 1px; }
.asis-c.bien { background: var(--exito); border-color: var(--exito); } .asis-c.cerca { background: var(--aviso); border-color: var(--aviso); }
.asis-c.mal { background: var(--peligro); border-color: var(--peligro); } .asis-c.info { background: var(--acento); border-color: var(--acento); }
.asis-c.fut { background: transparent; border-style: dashed; }
.asis-c.hoy { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--texto); }
.asis-cal-cab span { width: 16px; flex: none; text-align: center; font-size: 10px; font-weight: 500; color: var(--tenue); }
.asis-cal-cab span.hoy { color: var(--texto); font-weight: 700; }
.t-dias { display: flex; flex-direction: column; gap: 6px; }
.t-dia { display: grid; grid-template-columns: 112px 150px 14px 150px; justify-content: start; align-items: center; gap: 8px; }
.t-dia input[type=time] { width: 100%; }
.t-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 180px; overflow: auto; padding: 6px 2px; }
.t-personas small { margin-left: 4px; }
@media (max-width: 560px) { .t-dia { grid-template-columns: 1fr 1fr 14px 1fr; } }
/* Consola del agente: barra fija arriba, trabajo en medio y llamada + mi día a la derecha */
.consola { display: flex; flex-direction: column; gap: 14px; }
.cons-fija { position: sticky; top: var(--cab, 46px); z-index: 11; display: flex; flex-direction: column; gap: 10px; margin: -12px 0 -4px; padding: 12px 0 4px; background: var(--fondo); }
.cons-barra { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 10px 14px; box-shadow: var(--sombra); }
.cons-yo { display: flex; align-items: center; gap: 11px; padding-right: 18px; border-right: 1px solid var(--borde); }
.cons-yo .avatar.grande { background: linear-gradient(135deg, #4A73FA, #03497F); color: #fff; font-weight: 700; }
.cons-yo b { display: block; font-weight: 700; } .cons-yo small { display: block; font-size: 12px; }
.cons-estado { --est: #22a35a; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 12px; background: color-mix(in srgb, var(--est) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--est) 32%, transparent); }
.cons-estado b { display: block; font-size: 14px; } .cons-estado small { display: block; font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.cons-estado .estado { width: 10px; height: 10px; border: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--est) 22%, transparent); }
.cons-estado.disponible .estado { animation: latido-estado 2.4s ease-in-out infinite; }
@keyframes latido-estado { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--est) 10%, transparent); } }
.cons-estado.disponible { --est: #22a35a; } .cons-estado.en_pausa { --est: #8b5cf6; } .cons-estado.ausente { --est: #f59e0b; }
.cons-estado.en_llamada { --est: #ea580c; } .cons-estado.desconectado { --est: #a3adbb; }
.cons-estado > .ti { font-size: 22px; color: var(--acento); }
.cons-colas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 180px; }
.cons-cola { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--borde); font-size: 13px; font-weight: 500; background: var(--panel-2); }
.cons-cola.hay { border-color: var(--peligro); }
.cons-esperan { color: var(--peligro); font-weight: 600; font-size: 12px; }
.cons-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.cons-acciones select { width: auto; }
.cons-nota { width: 100%; }
.cons-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cons-principal { min-width: 0; }
.cons-lado { display: flex; flex-direction: column; gap: 14px; position: sticky; top: var(--bajo, 140px); max-height: var(--resto, calc(100vh - 210px)); overflow-y: auto; scrollbar-width: thin; }
.cons-lado > .tarjeta { margin: 0; }
.cons-llamada .cons-sin-llamada { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1.5px dashed var(--borde-2); border-radius: 16px; color: var(--tenue); font-size: 13px; }
.cons-llamada .cons-sin-llamada .ti { font-size: 22px; color: var(--suave); }
.cons-llamada:has(.llamada-flotante) .cons-sin-llamada { display: none; }
.llamada-flotante.acoplada { position: static; width: 100%; box-shadow: 0 6px 18px rgba(0,0,0,.18); animation: none; }
.mi-dia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mi-dia > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; }
.mi-dia > div:first-child { grid-column: 1 / -1; }
.mi-dia .ti { grid-row: 1 / 3; font-size: 18px; color: var(--acento); }
.mi-dia b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mi-dia small { font-size: 11px; color: var(--tenue); line-height: 1.25; }
.mi-dia > div.aviso { border-color: var(--aviso); background: var(--aviso-claro); } .mi-dia > div.aviso .ti { color: var(--aviso); }
.vence-c { color: var(--aviso); font-weight: 600; }
.cons-espera { text-align: center; padding: 36px 20px; }
.cons-espera > .ti { font-size: 44px; color: var(--acento); display: block; margin: 0 auto 10px; }
.cons-espera p { max-width: 460px; margin: 8px auto 0; }
/* Historia del cliente (consola y campañas) */
.hc-cab { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--borde); }
.hc-cab b { font-size: 15px; } .hc-cab .chip { margin-top: 4px; }
.hc-ficha { font-size: 13px; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.hc-titulo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 4px; }
.hc-titulo .ti { font-size: 15px; }
.hc-lista { list-style: none; margin: 0; padding: 0; }
.hc-lista li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.hc-lista li:last-child { border-bottom: 0; }
.hc-lista li[data-chat], .hc-lista li[data-ir] { cursor: pointer; } .hc-lista li[data-chat]:hover, .hc-lista li[data-ir]:hover { color: var(--acento); }
.hc-lista small { display: block; font-size: 12px; color: var(--tenue); }
.hc-lista .ti { color: var(--tenue); font-size: 16px; }
.hc-vacio { font-size: 13px; margin: 2px 0; }
/* Debajo del trabajo, las tarjetas de la derecha van en dos columnas que se llenan parejo (sin huecos) */
@media (max-width: 1250px) { .cons-cuerpo { grid-template-columns: 1fr; } .cons-lado { position: static; max-height: none; overflow: visible; display: block; columns: 2 260px; column-gap: 16px; } .cons-lado > *, .cons-lado > .tarjeta { break-inside: avoid; margin: 0 0 14px; } }
@media (max-width: 860px) { .cons-fija { position: static; } .cons-yo { border-right: 0; padding-right: 0; } }
/* Consola del agente */
.cons-titulo { display: flex; align-items: center; gap: 6px; font-size: 15px; margin: 4px 0 12px; }
.cons-colas .fila { align-items: center; gap: 8px; } .cons-colas .estado { width: 10px; height: 10px; }
.cons-tiempo { font-variant-numeric: tabular-nums; color: var(--tenue); } .cons-tiempo.pasado { color: var(--peligro); font-weight: 600; }
.cons-lista { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.no-contactar { display: inline-flex; align-items: center; gap: 4px; background: var(--peligro-claro); color: var(--peligro); border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 500; }
.seg-pausa td { color: var(--tenue); } .seg-acciones { white-space: nowrap; } .seg-acciones .btn { margin-left: 4px; }
.cond { gap: 8px; align-items: center; margin-bottom: 8px; } .cond select[data-k=campo] { max-width: 220px; } .cond input { flex: 1; min-width: 140px; }

/* ── A1: alertas, mensajes a agentes y reportes ── */
.segmentos { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--borde); margin-bottom: 14px; flex-wrap: wrap; }
.segmentos button { border: 0; background: none; padding: 6px 13px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--tenue); transition: background .12s, color .12s; }
.segmentos button:hover { color: var(--texto); }
.segmentos button.activo { background: var(--panel); color: var(--acento-texto); box-shadow: 0 1px 3px rgba(20, 33, 58, .12); }
.banda-alertas { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; margin-bottom: 12px; color: var(--texto); text-decoration: none; font-size: 14px; }
.banda-alertas.aviso { background: var(--aviso-claro); border: 1px solid var(--aviso); }
.banda-alertas.critico { background: var(--peligro-claro); border: 1px solid var(--peligro); }
.banda-alertas.info { background: var(--acento-claro); border: 1px solid var(--acento); }
.banda-alertas.info > i { color: var(--acento); }
.banda-alertas > i { font-size: 20px; } .banda-alertas.aviso > i { color: var(--aviso); } .banda-alertas.critico > i { color: var(--peligro); }
.banda-alertas > span:last-child { font-weight: 600; white-space: nowrap; }
.alerta-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde); border-left-width: 4px; margin-bottom: 8px; }
.alerta-item > i { font-size: 20px; margin-top: 2px; }
.alerta-item.aviso { border-left-color: var(--aviso); } .alerta-item.critico { border-left-color: var(--peligro); }
.alerta-item.cerrada { opacity: .75; border-left-color: var(--borde-2); }
.msj-agente > .fila > i { font-size: 24px; color: var(--acento); }
.msj-agente.urgente > .fila > i, .msj-agente.urgente h2 { color: var(--peligro); }
.lista-check { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; }
/* Botón para volver a la pantalla de origen (p. ej. del contacto al chat) */
.regreso-a { display: inline-flex; margin: 0 0 10px; background: var(--acento-claro); color: var(--acento-texto); border-color: transparent; text-decoration: none; }

/* ── Designer: formularios ── */
.dz-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dz-tarjeta h2 a { color: inherit; text-decoration: none; }
.dz-tarjetas.filtro-publicados [data-estado=borrador], .dz-tarjetas.filtro-borradores [data-estado=publicado] { display: none; }
.dz-tarjeta { display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; }
.dz-tarjeta:hover { border-color: var(--borde-2); box-shadow: var(--sombra); }
.dz-tarjeta > .fila:last-child { margin-top: auto !important; padding-top: 12px; }
.dz-ico { font-size: 22px; color: var(--acento); margin-right: 8px; }
.dz-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.dz-plantilla { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; text-align: center; font-size: 13px; }
.dz-plantilla input { position: absolute; opacity: 0; }
.dz-plantilla i { font-size: 24px; color: var(--acento); }
.dz-plantilla:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.dz { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; height: 100%; min-height: calc(100vh - 120px); }
.dz-paleta, .dz-props { padding: 14px; overflow: auto; background: var(--panel); }
.dz-paleta { border-right: 1px solid var(--borde); display: flex; flex-direction: column; gap: 4px; }
.dz-props { border-left: 1px solid var(--borde); }
.dz-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 600; margin: 0 0 8px; }
.dz-tipo { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); cursor: grab; font: inherit; color: var(--texto); text-align: left; }
.dz-tipo:hover { border-color: var(--acento); background: var(--acento-claro); }
.dz-tipo i { color: var(--acento); font-size: 17px; }
.dz-lienzo { padding: 18px; overflow: auto; background: var(--fondo); }
.dz-sec { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.dz-sec-cab { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.dz-sec-titulo { flex: 1; font-weight: 600; font-size: 15px; border: 1px dashed transparent; background: none; padding: 6px 8px; border-radius: 6px; }
.dz-sec-titulo:hover, .dz-sec-titulo:focus { border-color: var(--borde-2); background: var(--panel); }
.dz-campos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; padding: 2px; border-radius: 8px; }
.dz-campos.dz-final { box-shadow: inset 0 -3px 0 var(--acento); }
.dz-campo { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); cursor: pointer; position: relative; }
.dz-campo.medio { flex: 1 1 calc(50% - 6px); }
.dz-campo:hover { border-color: var(--borde-2); }
.dz-campo.sel { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-claro); }
.dz-campo.arrastrando { opacity: .4; }
.dz-campo.dz-antes { box-shadow: 0 -3px 0 var(--acento); }
.dz-campo small { display: block; color: var(--tenue); font-size: 12px; }
.dz-campo .btn { display: none; }
.dz-campo:hover .btn, .dz-campo.sel .btn, .dz-campo:focus-within .btn { display: inline-flex; }
.dz-asa { color: var(--tenue); cursor: grab; }
.dz-tico { color: var(--acento); font-size: 18px; }
.dz-vacio { flex: 1; padding: 14px; text-align: center; color: var(--tenue); border: 2px dashed var(--borde); border-radius: 8px; font-size: 13px; }
.dz-estado { font-size: 13px; color: var(--tenue); display: inline-flex; align-items: center; gap: 4px; }
.dz-estado.error { color: var(--peligro); }
.dz-props .campo { margin-bottom: 10px; }
.dz-props select, .dz-props input:not([type=checkbox]), .dz-props textarea { width: 100%; }
/* Angosto: la paleta pasa arriba como fila de botones; más angosto: todo en una columna */
@media (max-width: 1250px) {
  .dz { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto 1fr; }
  .dz-paleta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--borde); padding: 10px 14px; }
  .dz-paleta .dz-titulo { width: 100%; margin-bottom: 2px; } .dz-paleta p { display: none; }
  .dz-tipo { width: auto; padding: 5px 9px; font-size: 13px; }
}
@media (max-width: 760px) { .dz { grid-template-columns: 1fr; } .dz-props { border-left: 0; border-top: 1px solid var(--borde); } .dz-campo.medio { flex-basis: 100%; } }

/* Formulario como lo ve el agente */
.fv-seccion h3 { margin: 4px 0 8px; font-size: 14px; }
.fv-campos { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 10px; }
.fv-campo { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.fv-campo.medio { flex: 1 1 calc(50% - 12px); min-width: 160px; }
.fv-etq { font-size: 13px; font-weight: 500; }
.fv-oblig { color: var(--peligro); }
.fv-control { display: flex; align-items: center; gap: 6px; }
.fv-control > input, .fv-control > select, .fv-control > textarea { flex: 1; width: 100%; }
.fv-pre { color: var(--tenue); }
.fv-ops { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fv-estrellas { display: flex; gap: 2px; }
.fv-estrellas label { cursor: pointer; font-size: 22px; color: var(--aviso); }
.fv-estrellas input { position: absolute; opacity: 0; width: 0; }
.fv-estrellas input:focus-visible + i { outline: 2px solid var(--acento); border-radius: 4px; }
.fv-campo.falta .fv-etq { color: var(--peligro); }
.fv-campo.falta input, .fv-campo.falta select, .fv-campo.falta textarea, .fv-campo.falta .fv-ops { outline: 2px solid var(--peligro); outline-offset: 1px; border-radius: 6px; }

/* ── Designer: guiones por pasos ── */
.dz.dz-g { grid-template-columns: minmax(0, 1fr) 330px; }
.gz-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; font-size: 13px; }
.gz-mapa { position: relative; overflow: auto; padding: 4px 4px 48px; min-height: 300px; }
.gz-flechas { position: absolute; top: 0; left: 0; pointer-events: none; color: var(--borde-2); z-index: 0; overflow: visible; }
.gz-cols { display: flex; gap: 56px; align-items: flex-start; position: relative; z-index: 1; }
.gz-col { display: flex; flex-direction: column; gap: 18px; width: 210px; flex: none; }
.gz-col-titulo { font-size: 12px; color: var(--aviso); font-weight: 600; }
.gz-sueltos { padding-left: 16px; border-left: 2px dashed var(--borde); }
.gz-paso { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.gz-paso:hover { border-color: var(--borde-2); }
.gz-paso.sel { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-claro); }
.gz-paso.inicio { border-top: 3px solid var(--exito); }
.gz-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.gz-txt { color: var(--tenue); font-size: 12px; line-height: 1.4; margin-bottom: 6px; }
.gz-bots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gz-bots li { font-size: 12px; background: var(--acento-claro); color: var(--acento-texto); border-radius: 6px; padding: 2px 6px; }
.gz-final { font-size: 12px; color: var(--exito); }
.gz-campos { font-size: 12px; color: var(--tenue); margin-top: 6px; }
.gz-boton { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.gz-objecion { border: 1px solid var(--borde); border-radius: 8px; padding: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1100px) { .dz.dz-g { grid-template-columns: 1fr; } .dz-g .dz-props { border-left: 0; border-top: 1px solid var(--borde); } }

/* Guion como lo ve el agente */
.gv-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--tenue); margin-bottom: 8px; }
.gv-miga { border: 0; background: none; color: var(--acento); cursor: pointer; padding: 0; font: inherit; }
.gv-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 600; margin-bottom: 6px; }
.gv-texto { font-size: 15px; line-height: 1.55; }
.gv-texto p { margin: 0 0 8px; } .gv-texto ul { margin: 0 0 8px; padding-left: 20px; }
.gv-texto mark { background: var(--acento-claro); color: var(--acento-texto); border-radius: 4px; padding: 0 3px; }
.gv-texto mark.gv-falta { background: var(--aviso-claro); color: var(--aviso); }
.gv-campos { margin: 10px 0; padding: 10px; border-radius: 8px; background: var(--panel-2); }
.gv-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gv-botones .btn { white-space: normal; text-align: left; max-width: 100%; } /* si el texto no cabe, el botón crece hacia abajo */
.gv-fin { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--exito-claro); color: var(--exito); font-size: 14px; }
.gv-acciones { display: flex; gap: 6px; margin-top: 12px; }
.gv-obj { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 10px; }
.gv-obj > summary { cursor: pointer; font-weight: 500; }
.gv-objecion { margin: 8px 0 0 6px; } .gv-objecion > summary { cursor: pointer; color: var(--acento); }
.gv-objecion .gv-texto { font-size: 14px; margin: 6px 0 0 14px; }
/* Resultado que sugiere el guion */
[data-res].sugerido { outline: 2px solid var(--exito); outline-offset: 2px; position: relative; }
[data-res].sugerido::after { content: 'Sugerido'; position: absolute; top: -9px; right: 6px; font-size: 10px; background: var(--exito); color: #fff; border-radius: 99px; padding: 0 6px; line-height: 16px; }

/* ── Designer: flujos (lienzo) ── */
.dz.dz-f { grid-template-columns: 190px minmax(0, 1fr) 330px; }
.dz-f .dz-paleta .dz-titulo { margin-top: 8px; }
.fz-vista { overflow: auto; background: var(--fondo); position: relative; }
.fz-barra { position: sticky; top: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--fondo); font-size: 13px; flex-wrap: wrap; }
.fz-lienzo { position: relative; min-width: 100%; background-image: radial-gradient(var(--borde) 1px, transparent 1px); background-size: 22px 22px; }
.fz-flechas { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; }
.fz-linea { fill: none; stroke: var(--borde-2); stroke-width: 2; cursor: pointer; pointer-events: stroke; }
.fz-linea:hover, .fz-linea.sel { stroke: var(--acento); stroke-width: 3; }
.fz-linea.visto { stroke: var(--exito); }
.fz-linea.temp { stroke: var(--acento); stroke-dasharray: 6 4; pointer-events: none; }
.fz-nodo { position: absolute; z-index: 1; width: 210px; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; font-size: 13px; user-select: none; cursor: grab; touch-action: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.fz-nodo.sel { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-claro); }
.fz-nodo.visto { border-color: var(--exito); }
.fz-cab { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; }
.fz-cab i { font-size: 17px; }
.fz-nodo.g-inicio .fz-cab i { color: var(--exito); } .fz-nodo.g-logica .fz-cab i { color: var(--acento); } .fz-nodo.g-mensajes .fz-cab i { color: #16a34a; }
.fz-nodo.g-datos .fz-cab i { color: var(--aviso); } .fz-nodo.g-crm .fz-cab i { color: #7c3aed; }
.fz-nodo.g-inicio { border-top: 3px solid var(--exito); }
.fz-res { padding: 0 10px 8px; color: var(--tenue); font-size: 12px; line-height: 1.35; word-break: break-word; }
.fz-salida { position: relative; padding: 4px 22px 4px 10px; border-top: 1px dashed var(--borde); font-size: 12px; text-align: right; }
.fz-cuenta { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); color: var(--tenue); font-size: 11px; text-align: center; }
.fz-puerto { position: absolute; right: -7px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--panel); border: 2px solid var(--acento); cursor: crosshair; }
.fz-puerto:hover { background: var(--acento); }
.fz-entrada { position: absolute; left: -6px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--borde-2); border: 2px solid var(--panel); }
.fz-regla { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 4px; margin-bottom: 6px; }
#p-casos .fz-regla { grid-template-columns: 1fr 1fr auto; }
.fz-vars { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; margin: 4px 0 8px; }
.fz-var { border: 0; cursor: pointer; font-family: inherit; }
.fz-url { display: block; padding: 6px 8px; background: var(--panel-2); border-radius: 6px; font-size: 12px; word-break: break-all; }
.fz-pasos { margin: 8px 0 0; padding-left: 20px; } .fz-pasos li { margin-bottom: 6px; }
@media (max-width: 1250px) { .dz.dz-f { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(420px, 1fr); } }
@media (max-width: 760px) { .dz.dz-f { grid-template-columns: 1fr; } }
/* Chats en cola: fila de canales y chats de la consola, el chat dentro de la consola, la atención (finales) y la oferta flotante */
.cons-trans { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 8px 10px 8px 12px; box-shadow: var(--sombra); }
.cons-canales { display: flex; gap: 6px; padding-left: 12px; border-left: 1px solid var(--borde); margin-left: auto; }
/* El teléfono, hasta la derecha y en azul: abre el teclado para marcar */
.cons-canales .cons-canal[data-grupo="tel"]:not(.suena) { background: linear-gradient(135deg, #4A73FA, #0778C6); color: #fff; border-color: transparent; box-shadow: 0 3px 10px color-mix(in srgb, #0778C6 35%, transparent); }
.cons-canales .cons-canal[data-grupo="tel"]:not(.suena):hover { background: var(--acento-2); }
.cons-canal { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel-2); color: var(--suave); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 19px; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.cons-canal:hover { border-color: var(--acento); transform: translateY(-1px); }
.cons-canal.nuevo { color: var(--acento); }
.cons-canal.activo { background: var(--acento-claro); color: var(--acento-texto); border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
.cons-canal.suena { background: var(--exito); color: #fff; border-color: var(--exito); animation: suena 1.2s ease-in-out infinite; }
.cons-canal-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--acento); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--panel); }
.cons-canal.suena .cons-canal-n { background: var(--peligro); }
@keyframes suena { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--exito) 55%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--exito) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cons-canal.suena { animation: none; } }
.cons-chips { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; padding: 2px 0; } /* las pestañas bajan de renglón, no se esconden */
.cons-ofertas { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); }
.cons-ofertas .cons-oferta { flex: 1 1 340px; max-width: none; }
.cons-ofertas .cons-oferta small { max-width: none; }
.cons-sin-chats { font-size: 13px; }
.cons-chip > .ti, .cons-item > .ti, .cons-franja > .ti { --canal: var(--acento); width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--canal); background: color-mix(in srgb, var(--canal) 13%, transparent); }
.cons-item > .ti { width: 36px; height: 36px; font-size: 18px; }
:is(.cons-chip, .cons-item, .cons-franja) > .ti-brand-whatsapp, .cab-chat .ti-brand-whatsapp { --canal: #1FA855; }
:is(.cons-chip, .cons-item, .cons-franja) > .ti-brand-messenger, .cab-chat .ti-brand-messenger { --canal: #0A7CFF; }
:is(.cons-chip, .cons-item, .cons-franja) > .ti-brand-instagram, .cab-chat .ti-brand-instagram { --canal: #D62976; }
:is(.cons-chip, .cons-item, .cons-franja) > .ti-mail, .cab-chat .ti-mail { --canal: #C2410C; }
:is(.cons-chip, .cons-item, .cons-franja) > .ti-message-2, .cab-chat .ti-message-2 { --canal: #7C3AED; }
:is(.cons-chip, .cons-item, .cons-franja) > .ti-world, .cab-chat .ti-world { --canal: #0778C6; }
.cab-chat .tenue > .ti[class*="ti-"] { color: var(--canal, inherit); }
.cons-chip-trabajo > .ti { --canal: var(--texto); }
.cons-chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 11px 5px 6px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); cursor: pointer; flex: none; text-align: left; font: inherit; transition: border-color .12s, background .12s, box-shadow .12s; }
.cons-chip:hover { border-color: var(--borde-2); background: var(--panel-2); }
.cons-chip b { display: block; font-size: 13px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-chip small { display: block; font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.cons-chip.activo { border-color: var(--acento); background: var(--acento-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent); }
.cons-chip .noleidos { background: var(--acento); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 600; padding: 0 7px; }
.cons-oferta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 10px; border: 1px solid var(--exito); background: var(--exito-claro); flex: none; max-width: 460px; }
.cons-oferta > .ti { font-size: 18px; color: var(--exito); }
.cons-oferta .crece { min-width: 0; }
.cons-oferta b { display: block; font-size: 13px; } .cons-oferta small { display: block; font-size: 11px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.cons-oferta.llama { animation: llama .6s ease-in-out 2; }
@keyframes llama { 50% { transform: scale(1.04); } }
.cons-cuenta { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; color: var(--exito); min-width: 34px; text-align: right; }
.cons-chat { display: flex; flex-direction: column; height: var(--resto, calc(100vh - 250px)); min-height: 420px; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.cons-chat .cab-chat { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--borde); }
.cons-chat .cab-chat b { font-size: 15px; }
.cons-chat .cab-chat .crece { flex: 1; min-width: 0; }
.cons-chat .burbujas { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 6px; background-color: var(--fondo); background-image: radial-gradient(color-mix(in srgb, var(--acento) 9%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; }
.cons-chat .volver { display: none; }
/* Aviso amarillo dentro de una pantalla (con los colores del tema) */
.tarjeta.nota-aviso { background: var(--aviso-claro); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 28%, transparent); box-shadow: none; }
.tarjeta.nota-aviso b { color: inherit; }
.bur .pie .leido { color: #0ea5e9; } .bur.saliente .pie .leido { color: #A5E8FF; }
/* Aviso de la ventana de 24 horas de Meta, arriba de la caja de escribir */
.aviso-ventana { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid color-mix(in srgb, var(--aviso) 30%, transparent); background: var(--aviso-claro); color: var(--aviso); font-size: 13px; }
.aviso-ventana .ti { font-size: 17px; flex: none; }
.cons-atencion { display: flex; flex-direction: column; gap: 14px; }
.cons-atencion .tarjeta { margin: 0; }
.at-finales { display: flex; flex-direction: column; gap: 6px; }
.at-final { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--borde); border-radius: 11px; cursor: pointer; background: var(--panel); transition: border-color .12s, background .12s; }
.at-final:hover { border-color: var(--borde-2); background: var(--panel-2); }
.at-final input { accent-color: var(--acento); }
.at-final input { width: auto; margin: 0; }
.at-final span { flex: 1; font-weight: 500; }
.at-final small { font-size: 11px; }
.at-final:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 12%, transparent); }
.at-final.sugerido { border-style: dashed; border-color: var(--acento); }
.at-acciones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.at-acciones .primario { margin-left: auto; }
.at-ventana { max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.at-ventana .tarjeta { margin: 0; }
.chat-cola { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--aviso); background: var(--aviso-claro); border-radius: 99px; padding: 0 7px; margin-top: 2px; }
.chat-cola .ti { font-size: 12px; }
.chat-cola.para-mi { color: #fff; background: var(--exito); }
.modo-ayuda { font-size: 13px; margin: 8px 0 0; max-width: 760px; }
.cola-chats summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cola-final { gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
.cola-final input { flex: 1; min-width: 0; }
.ofertas-chat { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.oferta-chat { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--exito); border-left-width: 4px; border-radius: 12px; padding: 10px 12px; box-shadow: var(--sombra); animation: entra .25s ease-out; }
.oferta-chat > .ti { font-size: 24px; color: var(--exito); }
.oferta-chat .crece { min-width: 0; }
.oferta-chat b { display: block; font-size: 14px; } .oferta-chat small { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1250px) { .cons-chat { height: 70vh; } }
/* Con un chat abierto: sin el aviso de la llamada (si entra una, la consola regresa a ella) y, en pantallas medianas
   donde cabe (.cabe-lado, la consola mide 720 px o más), la atención se queda a la derecha del chat en vez de bajar */
.con-chat .cons-llamada:not(:has(.llamada-flotante)) { display: none; }
@media (min-width: 861px) and (max-width: 1250px) {
  .consola.cabe-lado .cons-cuerpo.con-chat { grid-template-columns: minmax(0, 1fr) 280px; }
  .consola.cabe-lado .con-chat .cons-lado { display: flex; position: sticky; max-height: var(--resto, calc(100vh - 210px)); overflow-y: auto; }
  .consola.cabe-lado .con-chat .cons-lado > * { margin: 0; }
  .consola.cabe-lado .con-chat .cons-chat { height: var(--resto, 70vh); }
}
@media (max-width: 860px) { .cons-canales { border-left: 0; padding-left: 0; } .cons-trans { flex-direction: column; align-items: stretch; } }
/* Correos dentro de una conversación: se ven como correo (de, para, copia, asunto y texto completo) y se contestan con copia */
.bur.correo-msj { max-width: 100%; align-self: stretch; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; color: var(--texto); }
.bur.correo-msj.saliente { border-left: 3px solid var(--acento); background: var(--panel); }
.bur.correo-msj.saliente .pie { color: var(--tenue); }
.bur.correo-msj.saliente a { color: var(--acento); }
.correo-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--borde); }
.correo-cab > span { white-space: nowrap; font-size: 12px; }
.correo-msj .asunto { font-weight: 600; margin-bottom: 6px; }
.correo-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.correo-msj a { display: inline-flex; margin-top: 8px; }
.correo-cc { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.correo-cc span { color: var(--tenue); }
.correo-cc input { flex: 1; padding: 5px 8px; }
/* Call center › Chats en vivo: supervisión de chats (no es una bandeja) y su historial */
.sc-sub { font-size: 12px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-acc select { width: auto; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); cursor: pointer; font: inherit; font-size: 13px; }
.sc-chip small { font-variant-numeric: tabular-nums; color: var(--tenue); }
.sc-chip.alerta { border-color: var(--aviso); background: var(--aviso-claro); } .sc-chip.alerta small { color: var(--aviso); font-weight: 600; }
.sc-chip.mal { border-color: var(--peligro); background: var(--peligro-claro); } .sc-chip.mal small { color: var(--peligro); font-weight: 600; }
.sc-chip.bien small { color: var(--exito); }
tr[data-ver] { cursor: pointer; } tr[data-ver]:hover td, tr[data-conv]:hover td { background: var(--panel-2); } tr[data-conv] { cursor: pointer; }
.sc-ver { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; min-height: 60vh; }
.sc-ver .conversacion { display: flex; flex-direction: column; height: 70vh; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.sc-ver .conversacion .burbujas { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--fondo); }
.conversacion.solo-leer [data-redactar] { display: none; }
.sc-lado { display: flex; flex-direction: column; gap: 10px; } .sc-lado .tarjeta { margin: 0; }
.sc-acciones { display: flex; flex-direction: column; gap: 8px; }
.sc-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: end; } .sc-filtros .campo { margin: 0; }
@media (max-width: 760px) { .sc-ver { grid-template-columns: 1fr; } .sc-ver .conversacion { height: 55vh; } }
/* Ajustes › Canales: qué consola usan los agentes */
.consola-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.consola-tipo { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; cursor: pointer; background: var(--panel); }
.consola-tipo input { width: auto; margin: 0; } .consola-tipo .ti { font-size: 20px; color: var(--acento); }
.consola-tipo span { grid-column: 2 / -1; font-size: 13px; margin-top: 4px; }
.consola-tipo:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.consola-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; } .consola-equipos .campo { margin: 0; }
/* Consola con bandeja: a la izquierda la lista de sus chats y los sin asignar; al lado, la llamada, la campaña o el chat */
.cons-principal.con-lista { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.cons-principal.con-lista > :not(.cons-bandeja) { grid-column: 2; grid-row: 1; }
.cons-bandeja { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; height: var(--resto, calc(100vh - 250px)); min-height: 420px; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); position: sticky; top: var(--bajo, 140px); }
.cons-lista-cab { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-bottom: 1px solid var(--borde); flex: none; }
.cons-lista-cab .segmentos { margin: 0; display: flex; } .cons-lista-cab .segmentos button { flex: 1; }
.cons-lista-cab .noleidos { background: var(--acento); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 600; padding: 0 6px; }
.cons-lista-items { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.cons-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; margin-bottom: 2px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--texto); transition: background .1s; }
.cons-item:hover { background: var(--panel-2); } .cons-item.activo { background: var(--acento-claro); }
.cons-item.activo::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.cons-item b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-item small { display: block; font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-item .crece { min-width: 0; flex: 1; }
.cons-item-der { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.cons-item-der .noleidos { background: var(--acento); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 600; padding: 0 7px; }
/* Si la consola mide menos de 1040 px (.cabe-todo lo pone consola.js), la lista va arriba del chat */
.consola:not(.cabe-todo) .cons-principal.con-lista { grid-template-columns: 1fr; } .consola:not(.cabe-todo) .cons-principal.con-lista > :not(.cons-bandeja) { grid-column: 1; grid-row: auto; }
.consola:not(.cabe-todo) .cons-bandeja { position: static; height: 300px; min-height: 0; }
/* Lista de chats encogida: una franja angosta con lo nuevo; la campaña o la llamada toma el resto */
.cons-principal.con-lista.lista-plegada { grid-template-columns: 52px minmax(0, 1fr); }
.lista-plegada .cons-bandeja { min-height: 0; }
.cons-lista-abrir { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; height: 100%; padding: 12px 0; border: 0; background: none; cursor: pointer; color: var(--acento); font: inherit; }
.cons-lista-abrir > .ti { font-size: 22px; }
.cons-lista-abrir .noleidos { background: var(--acento); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 600; padding: 0 7px; }
.cons-lista-abrir .etq { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; color: var(--tenue); }
.consola:not(.cabe-todo) .lista-plegada .cons-bandeja { height: auto; }
.consola:not(.cabe-todo) .cons-lista-abrir { flex-direction: row; justify-content: center; height: auto; padding: 8px; }
.consola:not(.cabe-todo) .cons-lista-abrir .etq { writing-mode: horizontal-tb; transform: none; }
.consola:not(.cabe-todo) .cons-principal.con-lista.lista-plegada { grid-template-columns: 1fr; }
/* Consola: la pestaña fija de la campaña o la llamada, y el aviso "Tu campaña sigue" arriba del chat */
.cons-chip-trabajo > .ti { color: var(--texto); }
.cons-chip-trabajo b { max-width: 190px; }
.cons-chips-sep { width: 1px; align-self: stretch; background: var(--borde); margin: 2px 2px; }
.cons-sigue { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--acento-claro); border-bottom: 1px solid var(--borde); font-size: 13px; }
.cons-sigue > .ti { color: var(--acento); font-size: 16px; }
/* Consola: mis metas en una línea por panel (el detalle se abre al picarla) */
.mi-meta-corta { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin-top: 6px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: var(--texto); }
.mi-meta-corta:hover { border-color: var(--acento); }
.mi-meta-corta .crece { min-width: 0; } .mi-meta-corta b { display: block; font-size: 14px; } .mi-meta-corta small { display: block; font-size: 12px; }
.mi-meta-corta .estado-ritmo { font-size: 12px; white-space: nowrap; }
.mi-meta-ventana { min-width: min(420px, 80vw); }
/* Transferir una llamada: lista de compañeros (con su estado) y colas */
.tr-lista { max-height: 300px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 10px; margin: 8px 0 12px; }
.tr-grupo { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); padding: 8px 12px 4px; background: var(--panel-2); }
.tr-destino { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--borde); cursor: pointer; }
.tr-destino input { width: auto; margin: 0; } .tr-destino b { display: block; font-size: 14px; } .tr-destino small { display: block; font-size: 12px; }
.tr-destino:has(input:checked) { background: var(--acento-claro); }
.tr-destino.ocupado { opacity: .7; }
/* Ficha del contacto en el panel lateral (consola) */
.ficha-cajon .ficha-tel { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.ficha-cajon .ficha-dato { display: grid; grid-template-columns: 100px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.ficha-cajon .ficha-titulo { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 16px 0 6px; }
/* Columna derecha compacta: sin llamada no hay recuadro (los controles salen arriba cuando hay una), Mi día en una línea */
.cons-llamada:not(:has(.llamada-flotante)) { display: none; }
.mi-dia-linea { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: var(--texto); }
.mi-dia-linea:hover { border-color: var(--acento); }
.mi-dia-linea > .ti:first-child { font-size: 20px; color: var(--acento); }
.mi-dia-linea .crece { min-width: 0; } .mi-dia-linea b { display: block; font-size: 15px; } .mi-dia-linea small { display: block; font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; }
/* Historia del cliente: botones de su ficha y "Guardar contacto" */
.hc-botones { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.hc-nuevo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; }
.ficha-cajon [data-actividad] { margin-top: 4px; }
/* Íconos de canal: apagado (tachado) y su menú */
.cons-trans { position: relative; }
.cons-canal.apagado { opacity: .55; }
.cons-canal.apagado::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: var(--peligro); transform: rotate(-45deg); border-radius: 2px; }
/* Calificar la llamada de cola en la consola */
.cons-calif { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; display: grid; gap: 8px; background: var(--panel-2); }
.cons-calif.urge { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.cons-calif h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.cons-calif textarea { min-height: 44px; }
.cons-finales { display: flex; flex-wrap: wrap; gap: 6px; }
.cons-final { position: relative; }
.cons-final input { position: absolute; opacity: 0; pointer-events: none; }
.cons-final span { display: inline-block; padding: 6px 12px; border: 1px solid var(--borde); border-radius: 99px; background: var(--panel); cursor: pointer; font-size: 13px; }
.cons-final input:checked + span { background: var(--acento); border-color: var(--acento); color: #fff; }
.cons-final input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.cons-falta-calif { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--acento); }
.chip-apagado { font-size: 11px; color: var(--peligro); background: var(--peligro-claro); }
/* Míos: cuántos chats abiertos (gris), sin leer (azul) y sin asignar (contorno); aviso de canal apagado */
.cons-lista-cab .cuenta, .cons-lista-abrir .cuenta { background: var(--panel-2); color: var(--suave); border: 1px solid var(--borde); border-radius: 99px; font-size: 11px; font-weight: 600; padding: 0 6px; }
.cons-lista-abrir .sin-asignar { border: 1px solid var(--acento); color: var(--acento); border-radius: 99px; font-size: 11px; font-weight: 600; padding: 0 6px; }
/* Historia del cliente: sus datos a la vista, solo de lectura */
.hc-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0 0; font-size: 13px; }
.hc-datos dt { color: var(--tenue); }
.hc-datos dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Inicio: las tarjetas de lo que a cada quien le miden van en la misma fila */
.metricas-medidas { display: contents; }
.metrica .meta-barra { margin: 2px 0; }
/* Reportes › Interacciones */
.int-filtros { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.int-filtros select, .int-filtros input[type=search] { width: auto; min-width: 150px; }
.int-resumen { font-size: 13px; margin: 0 0 8px; }
.int-fila { cursor: pointer; }
.int-fila:hover td, .int-fila:focus-visible td { background: var(--panel-2); }
.int-audio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.int-audio audio { max-width: 100%; }
/* AG3 · Mensajes programados en la conversación */
.programados { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; }
.programado { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--acento-claro); font-size: 13px; }
.programado small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.atajos-prog { gap: 6px; flex-wrap: wrap; margin: -4px 0 10px; }
.prog-icono { --canal: var(--acento); width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--canal); background: color-mix(in srgb, var(--canal) 14%, var(--panel)); }
.prog-destino { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 0 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.int-encuesta.si { background: var(--exito-claro); color: var(--exito); } .int-encuesta.no { background: var(--peligro-claro); color: var(--peligro); }
/* IA1a · Designer › EvoAgent */
.evo-cab-fila { display: flex; align-items: center; gap: 10px; }
.evo-cab-fila > .ti { font-size: 26px; color: var(--acento); }
.evo-cab-fila h2 { flex: 1; margin: 0; }
.evo-estado { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--panel-2); color: var(--tenue); }
.evo-estado.activo { background: var(--exito-claro); color: var(--exito); } .evo-estado.prueba { background: var(--acento-claro); color: var(--acento-texto); }
.evo-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.evo-paso { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; color: var(--texto); text-decoration: none; background: var(--panel); }
.evo-paso small { color: var(--tenue); font-size: 12px; } .evo-paso span { font-size: 14px; font-weight: 500; }
.evo-paso.hecho { border-color: color-mix(in srgb, var(--exito) 45%, transparent); } .evo-paso.hecho small { color: var(--exito); }
.evo-paso:hover { border-color: var(--acento); }
.evo-cifras { margin-bottom: 14px; }
.evo-barra { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin: 8px 0 2px; }
.evo-barra > div { height: 100%; background: var(--acento); border-radius: 99px; }
.evo-fuentes { margin: 12px 0; } .evo-fuentes li { align-items: center; } .evo-fuentes li > .ti { font-size: 20px; color: var(--acento); }
.evo-tipo { margin: 4px 0 10px; }
.evo-sub { font-size: 14px; margin: 16px 0 4px; display: flex; align-items: center; gap: 6px; }
.evo-nota { font-size: 13px; margin: 0 0 6px; display: block; }
.evo-casillas { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 8px; }
.evo-nosupo li { align-items: flex-start; } .evo-ns-resp { margin-top: 6px; gap: 6px; }
.evo-chat { min-height: 220px; max-height: 420px; overflow-y: auto; margin-bottom: 10px; }
@media (max-width: 720px) { .evo-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* DS1b · Desborde de las colas en el Panel en vivo */
.sat-banda { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--borde); border-radius: 12px; padding: 9px 14px; margin-bottom: 10px; background: var(--panel); font-size: 14px; }
.sat-banda > .ti { font-size: 20px; color: var(--tenue); }
.sat-banda .crece { flex: 1; min-width: 220px; }
.sat-banda.activa { background: var(--aviso-claro); border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.sat-banda.activa > .ti { color: var(--aviso); }
.sat-estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 99px; background: var(--aviso); color: #fff; margin: 0 4px; }
.sat-historial li { align-items: flex-start; flex-direction: column; gap: 0; }
/* Detalle de una llamada o chat: al centro, con el acomodo de la evaluación de Calidad */
.int-ventana.modal { width: min(1080px, 96vw); }
.int-ventana .cal-modal-cab h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-det { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.int-det-lado { position: sticky; top: 0; }
.int-det-lado .ficha-titulo { margin: 16px 0 6px; }
.int-det-main > .ficha-titulo:first-child { margin-top: 0; }
.int-det-main .int-mensajes { min-height: 360px; max-height: min(64vh, 640px); overflow-y: auto; }
.int-calidad .cal-bloque:first-child { margin-top: 16px; }
.int-det-main .int-calidad .cal-bloque:first-child { margin-top: 12px; }
@media (max-width: 860px) { .int-det { grid-template-columns: 1fr; } .int-det-lado { position: static; } .int-det-main .int-mensajes { min-height: 0; max-height: none; } .int-det .ll-cajas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* El chat o correo en Interacciones: como el cuadro de la llamada y las burbujas de la consola */
.ll-ico.int-canal { --canal: var(--acento); color: var(--canal); background: color-mix(in srgb, var(--canal) 13%, transparent); }
.int-canal.ti-brand-whatsapp { --canal: #1FA855; } .int-canal.ti-brand-messenger { --canal: #0A7CFF; } .int-canal.ti-brand-instagram { --canal: #D62976; }
.int-canal.ti-mail { --canal: #C2410C; } .int-canal.ti-message-2 { --canal: #7C3AED; } .int-canal.ti-world { --canal: #0778C6; }
.ll-cab .crece { min-width: 0; }
.ll-cab .crece > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-cab-asunto { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-estado.en { background: var(--acento-claro); color: var(--acento-texto); }
.int-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.int-linea li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.int-linea li + li::before { content: ''; position: absolute; left: 15px; top: -10px; height: 20px; border-left: 2px dashed var(--borde-2); }
.int-linea .avatar { width: 32px; height: 32px; font-size: 12px; flex: none; position: relative; z-index: 1; }
.int-linea .crece { flex: 1; min-width: 0; }
.int-linea small { display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.int-transf { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--acento-texto); background: var(--acento-claro); border-radius: 99px; padding: 1px 8px; }
.int-nota-at { margin: 6px 0 0; font-size: 13px; background: var(--panel-2); border-radius: 8px; padding: 6px 10px; }
.int-mensajes { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--borde); border-radius: 14px; background-color: var(--fondo); background-image: radial-gradient(color-mix(in srgb, var(--acento) 9%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; }
.int-msj { max-width: 82%; padding: 8px 12px 6px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--panel); border: 1px solid var(--borde); box-shadow: 0 1px 2px rgba(20, 33, 58, .06); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; align-self: flex-start; }
.int-msj.saliente { align-self: flex-end; background: linear-gradient(135deg, #0778C6, #03497F); color: #fff; border-color: transparent; border-radius: 16px; border-bottom-right-radius: 4px; }
.int-msj.nota { align-self: center; max-width: 90%; background: var(--aviso-claro); border-color: color-mix(in srgb, var(--aviso) 28%, transparent); border-radius: 12px; box-shadow: none; }
.int-quien { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--tenue); margin-bottom: 2px; white-space: normal; }
.int-msj.saliente .int-quien { color: rgba(255, 255, 255, .78); }
.int-msj.nota .int-quien { color: var(--aviso); }
.int-asunto { display: block; margin-bottom: 2px; }
.int-hora { display: block; text-align: right; font-size: 11px; color: var(--suave); margin-top: 2px; white-space: normal; }
.int-msj.saliente .int-hora { color: rgba(255, 255, 255, .7); }
.int-msj.saliente a { color: #fff; }
.int-dia { align-self: center; margin: 6px 0 2px; }
.int-dia span { display: inline-block; font-size: 11px; font-weight: 500; color: var(--tenue); background: var(--panel); border: 1px solid var(--borde); border-radius: 99px; padding: 2px 10px; }
.int-dia span::first-letter { text-transform: uppercase; }
.int-sistema { align-self: center; font-size: 12px; color: var(--tenue); text-align: center; background: var(--panel-2); border-radius: 99px; padding: 2px 10px; }
.int-foto { display: block; margin-top: 4px; }
.int-foto img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; object-fit: cover; }
.int-msj audio { display: block; max-width: 100%; margin-top: 4px; }
.int-archivo { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; border-radius: 10px; background: var(--panel-2); color: var(--texto); text-decoration: none; font-size: 13px; white-space: normal; }
.int-archivo .ti { font-size: 18px; color: var(--acento); }
.int-msj.saliente .int-archivo { background: rgba(255, 255, 255, .14); color: #fff; }
.int-msj.saliente .int-archivo .ti { color: #fff; }
/* Teléfono compacto: tarjeta flotante debajo del botón que lo abre (el botón azul de arriba o el de la consola) */
.telefono { position: fixed; top: 60px; right: 16px; bottom: auto; width: 264px; max-height: calc(100vh - 76px); z-index: 30; border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); }
.telefono .tcab { padding: 10px 12px; }
.telefono .numero { margin: 10px 14px 6px; width: calc(100% - 28px); font-size: 20px; }
.telefono .teclado { gap: 6px; padding: 4px 14px; }
.telefono .teclado button { height: 40px; font-size: 17px; border-radius: 10px; }
.telefono .teclado button small { font-size: 8px; margin-top: 1px; }
.telefono .llamar { padding: 8px 14px; }
.telefono .llamar .btn.exito { width: 46px; height: 46px; }
.telefono .nota { margin: 2px 14px 10px; }
.tel-recientes { border-top: 1px solid var(--borde); }
.tel-recientes > summary { cursor: pointer; padding: 8px 14px; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; list-style: none; display: flex; align-items: center; gap: 6px; }
.tel-recientes > summary::before { content: '\203A'; font-size: 14px; transition: transform .15s; }
.tel-recientes[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 640px) { .telefono { left: 8px !important; right: 8px; width: auto; } }
/* Botón del teclado en la barra de la consola, junto a lo que atiende */
/* Servicios */
.sv-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sv-tarjeta { cursor: pointer; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-tarjeta:hover, .sv-tarjeta:focus-visible { border-color: var(--acento); }
.sv-finales { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-finales .sv-positivo { background: var(--exito-claro, var(--acento-claro)); }
.sv-finales .sv-negativo { background: var(--aviso-claro); }
.aviso-suave { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; background: var(--aviso-claro); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }
/* Franja de la interacción en curso (debajo de la barra del agente) */
.cons-franja { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; background: linear-gradient(90deg, var(--acento-claro), var(--panel) 75%); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); border-radius: 14px; padding: 7px 10px 7px 8px; font-size: 13px; box-shadow: var(--sombra); }
.cons-franja > .ti { background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--canal) 30%, transparent); }
.franja-cliente { font-size: 14.5px; font-weight: 700; }
.franja-dato { color: var(--tenue); }
.franja-dato::before { content: '·'; margin-right: 10px; color: var(--tenue); }
.franja-tiempo { font-variant-numeric: tabular-nums; color: var(--texto); display: inline-flex; align-items: center; gap: 4px; }
.franja-estado { font-weight: 600; font-size: 12px; color: var(--acento-texto); background: color-mix(in srgb, var(--acento) 14%, transparent); padding: 2px 10px; border-radius: 99px; }
.franja-estado.urge { color: var(--peligro); background: var(--peligro-claro); }
.franja-fin { background: var(--panel); }
.franja-destino { animation: franjaDestino 1.4s ease-out; }
@keyframes franjaDestino { 0%, 40% { box-shadow: 0 0 0 4px var(--acento-claro); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .franja-destino { animation: none; } }
/* Buscar en la base de la campaña */
.cb-filtros { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cb-filtros select { width: auto; }
.cb-tabla { max-height: 55vh; overflow: auto; }
.hc-resultados { max-height: 50vh; overflow: auto; margin: 10px 0; }
.hc-resultados li { display: flex; align-items: center; gap: 8px; }
/* Espacios: Agente | Manager | Designer, arriba del menú */
.espacios { display: flex; gap: 3px; margin: 0 0 6px; padding: 4px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; }
.espacios button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; border-radius: 9px; padding: 7px 2px 6px; font: inherit; font-size: 11px; font-weight: 500; line-height: 1.1; color: var(--m-tenue, #7F8DAA); cursor: pointer; min-width: 0; transition: background .12s, color .12s; }
.espacios button .ti { font-size: 18px; }
.espacios button .etq { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espacios button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.espacios button.activo { background: #4A73FA; color: #fff; box-shadow: 0 2px 8px rgba(74, 115, 250, .35); }
.espacios button:focus-visible { outline: 2px solid #93ACFF; outline-offset: 1px; }
.colapsado .espacios { flex-direction: column; margin: 0 0 6px; }
.colapsado .espacios button { padding: 8px 0; }
.colapsado .espacios .etq { display: none; }
@media (max-width: 860px) {
  .espacios, .colapsado .espacios { flex-direction: row; margin: 0 6px 0 0; padding: 3px; flex: none; }
  .espacios button { padding: 7px 8px; }
  .espacios .etq { display: none; }
  .menu a.item.activo::before { left: 12px; right: 12px; top: auto; bottom: 1px; width: auto; height: 3px; border-radius: 3px; }
  /* En el celular: la barra de arriba sin el reloj de colas y la barra del agente que baja de renglón */
  .barra { gap: 4px; }
  #cc-btn .cc-tiempo { display: none; }
  .boton-estado-agente, #cc-btn { padding: 6px 9px; }
  .cons-yo { border-right: 0; padding-right: 0; }
  .cons-acciones { flex-wrap: wrap; width: 100%; }
  .cons-acciones select { flex: 1 1 140px; min-width: 0; }
}
/* Mi desempeño: las pantallas de adentro sin sus propias pestañas de manager */
.desempeno-sub > .subpestanas { display: none; }
/* Calidad */
.cal-nivel { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--panel-2); }
.cal-nivel.excelente { background: var(--exito-claro); color: var(--exito); }
.cal-nivel.bien { background: var(--acento-claro); color: var(--acento); }
.cal-nivel.regular { background: var(--aviso-claro); color: var(--aviso); }
.cal-nivel.malo { background: var(--peligro-claro); color: var(--peligro); }
.cal-critica { font-size: 11px; font-weight: 600; color: var(--peligro); border: 1px solid var(--peligro); border-radius: 99px; padding: 0 6px; margin-left: 4px; }
.cal-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-respuestas li.mal b { color: var(--peligro); }
.cal-comentario { white-space: pre-wrap; background: var(--panel-2); border-radius: 10px; padding: 8px 10px; margin: 0; }
.cal-fila { display: flex; gap: 8px; align-items: center; width: 100%; border: 1px solid var(--borde); background: var(--panel); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; cursor: pointer; font: inherit; text-align: left; }
.cal-evaluar { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; }
@media (max-width: 720px) { .cal-evaluar { grid-template-columns: 1fr; } }
.cal-form { max-height: 70vh; overflow: auto; padding-right: 4px; }
.cal-seccion { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; }
.cal-seccion legend { font-weight: 600; padding: 0 6px; }
.cal-preg { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.cal-preg:last-child { border-bottom: 0; }
.cal-preg small { display: block; }
.cal-opciones { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-opciones label { position: relative; }
.cal-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.cal-opciones span { display: inline-block; min-width: 36px; text-align: center; padding: 4px 10px; border: 1px solid var(--borde); border-radius: 99px; cursor: pointer; font-size: 13px; background: var(--panel); }
.cal-opciones input:checked + span { background: var(--acento); border-color: var(--acento); color: #fff; }
.cal-opciones input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.ev-editor .ev-seccion { display: grid; gap: 8px; }
.ev-pregunta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev-pts { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--suave); }
.ev-pts input { width: 70px; }

/* BuzónCero: aviso de lo que se ahorraría */
.bc-posible { display: flex; gap: 10px; align-items: flex-start; background: var(--aviso-claro); border-color: transparent; }
.bc-posible > .ti { font-size: 20px; color: var(--aviso); }
/* BuzónCero: los tres pasos, notas y dónde se usa */
.bc-pasos { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.bc-pasos li { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borde); color: var(--tenue); }
.bc-pasos li small { color: var(--tenue); font-size: 12px; }
.bc-pasos li.actual { border-color: var(--acento); background: var(--acento-claro); color: var(--texto); }
.bc-pasos li.hecho b::after { content: ' ✓'; color: var(--exito); }
.bc-nota { display: flex; gap: 8px; align-items: flex-start; background: var(--aviso-claro); color: var(--texto); padding: 8px 10px; border-radius: 8px; margin: 10px 0 0; }
.bc-alcance .bc-segs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0 24px; }

/* Call center › Bases: estado de las listas (barra apilada con leyenda; el color siempre va con su nombre y número) */
.bs-barra { display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; background: var(--panel-2); margin: 6px 0 4px; min-width: 160px; }
.bs-barra > span { min-width: 3px; }
.bs-nuevos { background: var(--acento); }
.bs-reintento { background: #7fb2ff; }
.bs-agenda { background: #8b5cf6; }
.bs-en_curso { background: var(--acento-2); }
.bs-contactados { background: var(--exito); }
.bs-agotados { background: var(--suave); }
.bs-baja { background: var(--peligro); }
.bs-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tenue); }
.bs-leyenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.bs-punto { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 5px; vertical-align: 0; }
.bs-ayuda { margin-top: 10px; }
.bs-aviso { display: flex; gap: 10px; align-items: flex-start; background: var(--aviso-claro); border-color: transparent; }
.bs-aviso > .ti { font-size: 20px; color: var(--aviso); }
.bs-chip-aviso { color: var(--aviso); border-color: var(--aviso); }
.bs-tabla td { vertical-align: middle; }
.bs-acc { white-space: nowrap; text-align: right; }
.bs-abrir { border: 0; background: none; color: var(--tenue); cursor: pointer; padding: 0 4px 0 0; font: inherit; }
.bs-abrir:disabled { visibility: hidden; }
.bs-seg td { background: var(--panel-2); }
.bs-sangria { padding-left: 22px; display: inline-block; }
.bs-pasos { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; counter-reset: paso; }
.bs-pasos li { counter-increment: paso; flex: 1; font-size: 13px; color: var(--tenue); border-top: 3px solid var(--borde); padding-top: 6px; }
.bs-pasos li::before { content: counter(paso) ". "; }
.bs-pasos li.activo { color: var(--texto); font-weight: 600; border-color: var(--acento); }
.bs-pasos li.hecho { border-color: var(--acento); }
.bs-rev { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bs-rev li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.bs-rev li small { display: block; }
.bs-rev li > .ti { font-size: 18px; margin-top: 1px; }
.bs-rev li.bien > .ti { color: var(--exito); }
.bs-rev li.info > .ti { color: var(--acento); }
.bs-rev li.aviso > .ti { color: var(--aviso); }
.bs-rev li.mal > .ti { color: var(--peligro); }

/* Contactar al cliente por otro medio: a cuál de sus números o correos (con por dónde se ha usado) o a uno nuevo */
.ct-destino { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-weight: 400; }
.ct-usos { display: inline-flex; gap: 4px; color: var(--tenue); font-size: 14px; }
.hc-usos { display: inline-flex; gap: 3px; margin-left: 4px; color: var(--tenue); font-size: 13px; vertical-align: -1px; }

/* Agenda de llamadas (AG1): el paso al elegir un final que programa y Mi agenda */
.ag-paso { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--acento); border-radius: 10px; background: var(--acento-claro); display: flex; flex-direction: column; gap: 8px; }
.ag-paso h4 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ag-atajos { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-campos { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-campos .campo { flex: 1 1 180px; margin: 0; }
.ag-campos .campo input:not(.oculto) + input:not(.oculto) { margin-top: 6px; }
.ag-para { display: flex; flex-wrap: wrap; gap: 14px; }
.ag-para .opcion { margin: 0; }
.cons-canal.ag-icono.toca { background: var(--aviso, #f59e0b); color: #fff; border-color: var(--aviso, #f59e0b); animation: suena 1.2s ease-in-out infinite; }
.cons-canal.ag-icono.toca .cons-canal-n { background: var(--peligro); }
@media (prefers-reduced-motion: reduce) { .cons-canal.ag-icono.toca { animation: none; } }
.ag-grupo { font-size: 13px; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.ag-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); }
.ag-fila.toca { border-color: var(--acento); background: var(--acento-claro); }
.ag-fila small { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; }
.ag-fila .ag-libre { color: var(--acento); }
.ag-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-reprog { flex-basis: 100%; display: flex; gap: 6px; align-items: center; }
.ag-reprog input { max-width: 230px; }
.sv-prog { margin: 0 0 0 4px; font-size: 12px; white-space: nowrap; }
.sv-prog-min { font-size: 12px; color: var(--suave); white-space: nowrap; }
.sv-prog-min input { width: 64px; padding: 2px 6px; }
.cola-final:has(.sv-prog) { flex-wrap: wrap; }
.cola-final .sv-prog input, .cola-final .sv-prog-min input { flex: none; }

/* Mi teléfono (T1): perdidas sin devolver, contadores del menú y "Ver todas" de Recientes */
.mt-perdidas { border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); }
.mt-perdidas h2 .cuenta { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--peligro); color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: middle; }
.mt-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mt-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde); }
.mt-lista li:first-child { border-top: 0; }
.mt-lista small { display: block; }
#tel-perdidas:not(:empty) { margin-bottom: 14px; }
.nav-n { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--peligro); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
a.item .nav-n + .flecha { margin-left: 6px; }
.submenu a:has(.nav-n) { display: flex; align-items: center; }
#app.colapsado a.item .nav-n { position: absolute; top: 2px; right: 2px; margin: 0; }
.tel-ver-todas { float: right; font-size: 12px; font-weight: 400; }

/* Perdidas de la cola (PL1): tarjeta de la consola y "por hora" del informe */
#cons-perdidas { border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); }
.pc-n { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--peligro); color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.pc-lista li { align-items: flex-start; }
.pc-lista li > i { margin-top: 3px; }
.pc-lista .crece { min-width: 0; }
.pc-lista small { display: block; }
.pc-estado { color: var(--aviso); font-weight: 600; }
.pc-estado.mia { color: var(--acento); }
.pc-otro { opacity: .7; }
.pc-acciones { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.pc-mas { background: none; border: 0; padding: 6px 0 0; color: var(--acento); cursor: pointer; font-size: 13px; }
.p-horas-t { margin: 18px 0 8px; font-size: 14px; }
.p-horas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 520px; }
.p-horas li { display: grid; grid-template-columns: 48px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; }
.p-horas b { text-align: right; font-variant-numeric: tabular-nums; }
.p-barra { height: 10px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.p-barra > span { display: block; height: 100%; background: var(--peligro); border-radius: 0 4px 4px 0; }

/* Reportes (IN1): predeterminados en tarjetas, el armador (panel, columnas que se arrastran) y su tabla */
.rp-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rp-tarjeta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); color: var(--texto); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rp-tarjeta:hover { border-color: var(--acento); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.rp-tarjeta > i { font-size: 22px; color: var(--acento); background: var(--acento-claro); border-radius: 10px; padding: 8px; }
.rp-tarjeta b { display: block; margin-bottom: 2px; }
.rp-tarjeta small { color: var(--tenue); font-size: 13px; line-height: 1.35; }
.rp-nuevo { border-style: dashed; }
.rp-panel { margin-bottom: 14px; }
.rp-fila { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.rp-fila .campo { margin: 0; min-width: 150px; flex: 0 1 auto; }
.rp-fila .segmentos { margin: 0; }
.rp-filtros { margin-top: 12px; }
.rp-filtros summary { cursor: pointer; font-weight: 500; color: var(--tenue); }
.rp-filtros[open] summary { margin-bottom: 8px; }
.rp-columnas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.rp-columnas .segmentos { margin: 0; }
.rp-columnas select { width: auto; }
.rp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 6px; border: 1px solid var(--borde); border-radius: 99px; background: var(--panel-2); font-size: 13px; cursor: grab; user-select: none; }
.rp-chip button { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--tenue); line-height: 1; }
.rp-chip button:hover { color: var(--peligro); }
.rp-resumen { margin: 0 0 8px; font-size: 13px; }
.rp-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-tabla tfoot td { font-weight: 700; border-top: 2px solid var(--borde-2); }
.rp-menu { position: relative; display: inline-block; }
.rp-menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; padding: 4px; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.rp-menu-lista button { display: flex; width: 100%; gap: 8px; align-items: center; padding: 8px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--texto); text-align: left; }
.rp-menu-lista button:hover { background: var(--panel-2); }
@media (max-width: 640px) { .rp-fila .campo { flex: 1 1 140px; min-width: 0; } }

/* PL2: vista previa de la devolución automática */
.pc-vista { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel-2); }
.pc-vista b { font-size: 17px; }
.cola-pl-casillas { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

/* Contactos sin "Ventas a empresas": sin la columna Leads */
@media (min-width: 861px) { .dos-paneles.ancho.sin-leads .ic-cab, .dos-paneles.ancho.sin-leads .item-contacto { grid-template-columns: 34px minmax(180px, 1.4fr) minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) 110px; } }

/* IN3: columnas calculadas en el armador */
.rp-chip.calc { border-style: dashed; }
.rp-chip .ti-math-function { color: var(--acento); }

/* ── Rediseño de Calidad (28 oct): reproductor, evaluación, ventana de evaluar, panel de la llamada y editor ── */
.rep { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px; margin: 10px 0 4px; }
.rep audio { display: none; }
.rep-play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--acento); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; font-size: 16px; }
.rep-play:hover { background: var(--acento-2); }
.rep-barra { flex: 1; height: 6px; border-radius: 99px; background: var(--borde); cursor: pointer; position: relative; overflow: hidden; }
.rep-barra span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--acento); border-radius: 99px; }
.rep-barra:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.rep-tiempo { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-vel { border: 1px solid var(--borde); background: var(--panel); border-radius: 99px; padding: 2px 9px; font-size: 12px; cursor: pointer; color: var(--texto); }
.rep-bajar { color: var(--tenue); font-size: 18px; display: grid; place-items: center; }
.rep-bajar:hover { color: var(--acento); }

.cal-anillo { flex: none; }
.cal-anillo circle { fill: none; stroke-width: 7; }
.cal-anillo .fondo { stroke: var(--panel-2); }
.cal-anillo .avance { stroke: var(--suave); stroke-linecap: round; transition: stroke-dasharray .3s; }
.cal-anillo.excelente .avance { stroke: var(--exito); } .cal-anillo.bien .avance { stroke: var(--acento); }
.cal-anillo.regular .avance { stroke: var(--aviso); } .cal-anillo.malo .avance { stroke: var(--peligro); }
.cal-anillo text { font-size: 15px; font-weight: 700; fill: var(--texto); }
.cal-etq { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12px; background: var(--panel-2); color: var(--tenue); }

.cal-resp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cal-resp.si { background: var(--exito-claro); color: var(--exito); }
.cal-resp.no { background: var(--peligro-claro); color: var(--peligro); }
.cal-resp.parcial { background: var(--aviso-claro); color: var(--aviso); }
.cal-resp.na { background: var(--panel-2); color: var(--tenue); }
.cal-escala { display: inline-flex; align-items: center; gap: 3px; }
.cal-escala i { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-2); }
.cal-escala i.on { background: var(--acento); }
.cal-escala.baja i.on { background: var(--peligro); }
.cal-escala b { font-size: 12px; margin-left: 4px; color: var(--tenue); font-weight: 600; }

.cal-sec { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; margin: 12px 0 0; background: var(--panel); }
.cal-sec > header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cal-sec > header b { flex: 1; font-size: 14px; }
.cal-sec-pts { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-mini { width: 90px; height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; display: inline-block; }
.cal-mini > span { display: block; height: 100%; border-radius: 99px; background: var(--suave); }
.cal-mini.excelente > span { background: var(--exito); } .cal-mini.bien > span { background: var(--acento); }
.cal-mini.regular > span { background: var(--aviso); } .cal-mini.malo > span { background: var(--peligro); }
.cal-lista { list-style: none; margin: 0; padding: 0; }
.cal-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.cal-pts { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }

.cal-ver-cab { border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; background: var(--panel); }
.cal-ver-agente { display: flex; align-items: center; gap: 10px; }
.cal-ver-agente small, .cal-ver-res small { display: block; }
.cal-ver-res { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cal-ver-res .cal-cab { margin-bottom: 4px; }
.cal-int-linea { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); margin-top: 2px; }
.cal-conversacion { display: flex; flex-direction: column; gap: 10px; }
.cal-burbuja { display: flex; gap: 8px; align-items: flex-start; max-width: 88%; }
.cal-burbuja > div { background: var(--panel-2); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
.cal-burbuja small { color: var(--tenue); font-size: 12px; }
.cal-burbuja p { margin: 2px 0 0; white-space: pre-wrap; }
.cal-burbuja.propia { align-self: flex-end; flex-direction: row-reverse; }
.cal-burbuja.propia > div { background: var(--acento-claro); border-radius: 14px 4px 14px 14px; }
.cal-responder textarea { width: 100%; }
.cal-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; }
.cal-timeline li { display: flex; gap: 12px; position: relative; padding: 0 0 14px; font-size: 14px; }
.cal-timeline li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 0; width: 2px; background: var(--borde); }
.cal-timeline li:last-child::before { display: none; }
.cal-tl-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); margin-top: 6px; flex: none; position: relative; z-index: 1; }
.cal-tl-niveles { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

.cal-ventana.modal { width: min(1080px, 96vw); }
.cal-evaluar { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-lado { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.cal-lado-int { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; background: var(--panel); }
.cal-vivo { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; background: var(--panel); }
.cal-vivo-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cal-vivo-cab small { display: block; margin-top: 4px; }
.cal-avance { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin-bottom: 4px; }
.cal-avance > span { display: block; height: 100%; background: var(--acento); border-radius: 99px; transition: width .2s; }
.cal-form { max-height: 72vh; overflow: auto; padding-right: 6px; }
.cal-form .cal-sec:first-child { margin-top: 0; }
.cal-preg { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--borde); border-bottom: 0; }
.cal-preg > .crece small { display: block; margin-top: 2px; font-size: 12px; }
.cal-seg { display: inline-flex; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.cal-seg button { border: 0; border-left: 1px solid var(--borde); background: none; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--tenue); min-width: 44px; }
.cal-seg button:first-child { border-left: 0; }
.cal-seg button:hover { background: var(--panel); color: var(--texto); }
.cal-seg button.activo.o-si, .cal-seg.escala button.activo { background: var(--exito); color: #fff; }
.cal-seg button.activo.o-no { background: var(--peligro); color: #fff; }
.cal-seg button.activo.o-parcial { background: var(--aviso); color: #fff; }
.cal-seg button.activo.o-na { background: var(--suave); color: #fff; }
.cal-seg.escala button.activo.o-1, .cal-seg.escala button.activo.o-2 { background: var(--peligro); }
.cal-seg.escala button.activo.o-3 { background: var(--aviso); }
.cal-seg.escala button.activo.o-na { background: var(--suave); }
.cal-seg button:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
@media (max-width: 860px) { .cal-evaluar { grid-template-columns: 1fr; } .cal-lado { position: static; } .cal-form { max-height: none; } }

.ll-cab { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; background: var(--panel); }
.ll-cab small { display: flex; align-items: center; gap: 4px; }
.ll-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex: none; background: var(--panel-2); color: var(--tenue); }
.ll-ico.ok { background: var(--exito-claro); color: var(--exito); } .ll-ico.mal { background: var(--peligro-claro); color: var(--peligro); }
.ll-estado { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--tenue); }
.ll-estado.ok { background: var(--exito-claro); color: var(--exito); } .ll-estado.mal { background: var(--peligro-claro); color: var(--peligro); }
.ll-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.ll-caja { background: var(--panel-2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ll-caja small { font-size: 12px; }
.ll-sonaron { margin-top: 12px; }
.ll-sonaron > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* (solo en Interacciones: a quién le sonó; la ventana de llamada usa la misma clase) */
.ll-sonaron .ll-persona { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 99px; padding: 2px 10px 2px 2px; font-size: 13px; }
.ll-sonaron .ll-persona .avatar { width: 22px; height: 22px; font-size: 10px; }
.ll-nota { background: var(--panel-2); border-radius: 10px; padding: 8px 12px; margin: 12px 0 0; font-size: 14px; }
.ll-grab { display: block; margin-bottom: 8px; }
.cal-bloque { border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; margin-top: 16px; background: var(--panel); }
.cal-bloque-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cal-bloque-cab h3 { flex: 1; margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }

.ev-sec-nombre { font-weight: 600; flex: 1; font-size: 15px; }
.ev-sec-pts { font-size: 12px; font-weight: 600; color: var(--acento); background: var(--acento-claro); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.ev-editor .ev-seccion { border-radius: 14px; }
.ev-pregunta { background: var(--panel-2); border-radius: 10px; padding: 8px 10px; }

/* Ver una evaluación al centro, con el mismo acomodo que Evaluar y Corregir */
.cal-modal-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-modal-cab h2 { flex: 1; margin: 0; }
.cal-ver .cal-lado { gap: 0; }
.cal-ver .cal-lado .ficha-titulo { margin: 16px 0 8px; }
.cal-ver .cal-form .cal-sec:first-child { margin-top: 0; }
.cal-evaluar.cal-ver { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
@media (max-width: 860px) { .cal-evaluar.cal-ver { grid-template-columns: 1fr; } }

/* ── Chat del equipo (chat interno): panel a la derecha, sin velo, deja ver la pantalla ── */
.chati { position: fixed; top: 56px; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--panel); border-left: 1px solid var(--borde); box-shadow: -10px 0 30px rgba(23, 32, 49, .10); z-index: 45; display: flex; flex-direction: column; animation: chati-entra .16s ease-out; }
@keyframes chati-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.chati-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--borde); }
.chati-cab > i { font-size: 20px; color: var(--acento); }
.chati-cab h2 { font-size: 15px; margin: 0; flex: 1; }
.chati-cuerpo { flex: 1; display: grid; grid-template-columns: 270px 1fr; min-height: 0; }
.chati-lista { border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; background: var(--panel-2); }
.chati-lista > input { margin: 10px; width: auto; }
.chati-lista > div { overflow-y: auto; flex: 1; padding: 0 6px 10px; }
.chati-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); padding: 10px 8px 4px; font-weight: 600; }
.chati-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 7px 8px; cursor: pointer; color: inherit; font: inherit; }
.chati-item:hover { background: var(--panel); }
.chati-item.activo { background: var(--acento-claro); }
.chati-item .crece, .chati-pcab .crece { min-width: 0; display: flex; flex-direction: column; }
.chati-item b, .chati-pcab b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chati-item small, .chati-pcab small { font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chati-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.chati-meta small { font-size: 11px; }
.chati-meta i { font-size: 13px; color: var(--suave); }
.chati-n { background: var(--acento); color: #fff; font-size: 11px; font-weight: 600; border-radius: 99px; min-width: 18px; padding: 0 5px; line-height: 18px; text-align: center; }
.chati-n.gris { background: var(--suave); }
.chati-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-texto); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 16px; }
.chati-nadie { padding: 16px 10px; font-size: 13px; }
.chati-platica { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chati-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tenue); gap: 6px; padding: 20px; text-align: center; }
.chati-vacio i { font-size: 36px; color: var(--suave); }
.chati-pcab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); }
.chati-pcab .crece { flex: 1; }
.chati-atras { display: none; }
.chati-msjs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--fondo); }
.chati-mas { align-self: center; margin-bottom: 6px; }
.chati-dia { align-self: center; font-size: 11px; color: var(--tenue); background: var(--panel); border: 1px solid var(--borde); border-radius: 99px; padding: 2px 10px; margin: 8px 0 4px; }
.chati-msj { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.chati-msj.mio { align-self: flex-end; align-items: flex-end; }
.chati-de { font-size: 11px; color: var(--tenue); margin: 0 0 2px 10px; font-weight: 600; }
.chati-burbuja { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px 14px 14px 4px; padding: 7px 11px 5px; font-size: 14px; line-height: 1.4; }
.chati-msj.mio .chati-burbuja { background: var(--acento); border-color: var(--acento); color: #fff; border-radius: 14px 14px 4px 14px; }
.chati-burbuja p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chati-burbuja img { display: block; max-width: 260px; max-height: 220px; border-radius: 10px; margin-bottom: 4px; }
.chati-burbuja.borrado { background: transparent !important; color: var(--tenue) !important; border-style: dashed !important; border-color: var(--borde-2) !important; font-style: italic; }
.chati-hora { display: block; font-size: 10.5px; opacity: .7; text-align: right; margin-top: 2px; }
.chati-archivo { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 500; padding: 4px 0; text-decoration: underline; }
.chati-borrar { position: absolute; top: 50%; left: -30px; transform: translateY(-50%); background: var(--panel); border: 1px solid var(--borde); border-radius: 50%; width: 24px; height: 24px; color: var(--tenue); cursor: pointer; opacity: 0; transition: opacity .12s; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.chati-msj:hover .chati-borrar, .chati-borrar:focus { opacity: 1; }
.chati-borrar:hover { color: var(--peligro); }
.chati-visto { font-size: 11px; color: var(--tenue); margin-top: 2px; display: inline-flex; align-items: center; gap: 3px; }
.chati-visto i { color: var(--acento); font-size: 13px; }
.chati-escribir { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borde); }
.chati-escribir textarea { width: 100%; resize: none; min-height: 38px; max-height: 140px; border-radius: 12px; padding: 8px 12px; font: inherit; }
.chati-adjunto { font-size: 12px; display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 8px; padding: 3px 4px 3px 8px; margin-bottom: 6px; }
.chati-lee { margin: 0; padding: 12px 16px; border-top: 1px solid var(--borde); color: var(--tenue); font-size: 13px; display: flex; align-items: center; gap: 6px; background: var(--panel-2); }
.chati-elegir { max-height: 260px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 10px; padding: 4px 8px; }
.chati-elegir .opcion { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.chati-toast { position: fixed; top: 66px; right: 18px; z-index: 75; display: flex; align-items: center; gap: 10px; max-width: 340px; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 10px 14px; cursor: pointer; text-align: left; font: inherit; animation: entra .18s ease-out; }
.chati-toast span { display: flex; flex-direction: column; min-width: 0; }
.chati-toast b { font-size: 13px; }
.chati-toast small { font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .chati-cuerpo { grid-template-columns: 1fr; }
  .chati.con-platica .chati-lista { display: none; }
  .chati:not(.con-platica) .chati-platica { display: none; }
  .chati-atras { display: inline-flex; }
  .chati-msj { max-width: 88%; }
}

/* ── CI1b: tarjetas en el chat del equipo y retro en la evaluación ── */
.chati-tj { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; width: 280px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; font-size: 13px; text-align: left; }
.chati-msj.mio .chati-tj { border-color: var(--acento); }
.chati-msj .chati-tj + .chati-burbuja { margin-top: 4px; }
.chati-tj[data-abrir-ev] { cursor: pointer; }
.chati-tj[data-abrir-ev]:hover { border-color: var(--acento); }
.chati-tj.sin { color: var(--tenue); flex-direction: row; align-items: center; gap: 6px; font-style: italic; }
.chati-tj-cab { display: flex; align-items: center; gap: 10px; }
.chati-tj-cab .crece { min-width: 0; display: flex; flex-direction: column; }
.chati-tj-cab b { font-size: 13px; }
.chati-tj-cab small { color: var(--tenue); font-size: 12px; }
.chati-tj-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chati-tj-pie small { color: var(--tenue); font-size: 12px; }
.chati-tj-abrir { margin-left: auto; color: var(--acento); font-weight: 500; font-size: 12px; }
.chati-tj-desde { color: var(--acento); font-size: 12px; font-weight: 500; }
.chati-tj .rep { margin: 0; }
.chati-anillo { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--suave); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.chati-anillo.excelente { border-color: #16a34a; }
.chati-anillo.bien { border-color: var(--acento); }
.chati-anillo.regular { border-color: var(--aviso); }
.chati-anillo.malo { border-color: var(--peligro); }
.chati-pie { display: flex; align-items: center; gap: 6px; }
.chati-pie .chati-borrar { position: static; transform: none; opacity: .7; }
.chati-pendiente { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.chati-pendiente .chati-tj { width: auto; flex: 1; padding: 8px 10px; }
.chati-escribir { position: relative; }
.chati-menu { position: absolute; bottom: 54px; left: 10px; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); padding: 4px; display: flex; flex-direction: column; z-index: 3; min-width: 210px; }
.chati-menu button { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.chati-menu button:hover { background: var(--panel-2); }
.chati-elegir-tj { max-height: 380px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; }
.chati-elegir-tj .chati-item small { display: block; }
.chati-msj.resaltado .chati-burbuja, .chati-msj.resaltado .chati-tj { box-shadow: 0 0 0 3px var(--acento-claro), 0 0 0 4px var(--acento); transition: box-shadow .3s; }
.rep-barra { position: relative; }
.rep-marca { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--acento); border-radius: 2px; transform: translateX(-1px); pointer-events: none; }
.cal-retro { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cal-retro li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.cal-retro li > i { color: var(--acento); margin-top: 2px; }
.cal-retro small { display: block; }
.btn-link { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; }
.btn-link:hover { text-decoration: underline; }

/* ── AY1: pedir ayuda ── */
.ay-tarjeta { position: fixed; top: 70px; right: 20px; width: 360px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--acento); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 12px 14px; z-index: 72; display: flex; flex-direction: column; gap: 8px; animation: entra .18s ease-out; font-size: 13px; }
.ay-cab { display: flex; align-items: center; gap: 10px; }
.ay-cab > i { font-size: 22px; color: var(--acento); }
.ay-cab .crece { min-width: 0; display: flex; flex-direction: column; }
.ay-cab small { color: var(--tenue); }
.ay-cuenta { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--aviso); background: var(--aviso-claro); border-radius: 99px; padding: 2px 8px; font-size: 12px; }
.ay-llamada { color: var(--tenue); font-size: 12px; }
.ay-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.ay-modos .btn { justify-content: center; }
.ay-modos .btn.activo { background: var(--acento-claro); border-color: var(--acento); color: var(--acento-texto); }
.ay-otros { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ay-otros .btn { flex: 1; justify-content: center; }
.ay-nota { margin: 0; color: var(--tenue); }
.ay-motivos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ay-motivos button { border: 1px solid var(--borde-2); background: var(--panel); border-radius: 99px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
.ay-motivos button.activo { background: var(--acento-claro); border-color: var(--acento); color: var(--acento-texto); }
.ay-jefes { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.ay-jefes li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; }
.ay-jefes li .crece { display: flex; flex-direction: column; min-width: 0; }
.ay-jefes li small { color: var(--aviso); font-size: 12px; }
.ay-jefes li small.ok { color: var(--exito); }
.ay-jefes li.ocupado { opacity: .65; background: var(--panel-2); }
.ll-ayuda { gap: 8px; align-items: center; }
.ll-ayuda > i { color: #fbbf24; }
.llamada-flotante [data-ll="ayuda"].agotado { opacity: .45; }
.ll-ayudas { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ll-ver .ll-ayudas li { border: 1px solid var(--borde); border-left: 3px solid var(--aviso); border-radius: 10px; padding: 8px 12px; background: var(--panel); }

/* ── AY2: pedir ayuda en un chat ── */
.ay-chat { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 8px 12px; border-radius: 10px; background: var(--aviso-claro); border: 1px solid color-mix(in srgb, var(--aviso) 35%, transparent); font-size: 13px; }
.ay-chat > i { color: var(--aviso); font-size: 17px; }
.ay-chat .crece { flex: 1; min-width: 0; }
.redactar.ay-bloqueado [data-nota] { cursor: not-allowed; }

/* AR4: lugar en la fila de un informe pesado */
.fila-aviso { position: fixed; left: 20px; bottom: 20px; background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 14px; font-size: 13px; display: flex; gap: 8px; align-items: center; z-index: 75; }
.fila-aviso .ti { color: var(--acento, #1a73e8); }

/* AR5a: aviso del plan (almacenamiento o saldo de IA) */
.aviso-plan { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 76; max-width: min(720px, calc(100vw - 24px)); box-shadow: 0 8px 24px rgba(0,0,0,.12); background: var(--aviso-claro); }

/* Pago pendiente (dueño y administradores) */
.aviso-pago { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 77; max-width: min(760px, calc(100vw - 24px)); box-shadow: 0 8px 24px rgba(0,0,0,.14); background: var(--peligro-claro); }
.aviso-pago ~ .aviso-plan { top: 116px; }
.aviso-plan.info { background: var(--acento-claro); } .aviso-plan.critico { background: var(--peligro-claro); }
.aviso-plan a { font-weight: 600; white-space: nowrap; }
/* Mi plan: la barra del almacenamiento con las marcas de los avisos */
.barra-almacen { position: relative; height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin: 8px 0 2px; }
.barra-almacen > div { height: 100%; border-radius: 99px; }
.barra-almacen > span { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--panel); }
.barra-almacen-marcas { position: relative; height: 14px; margin-bottom: 4px; }
.barra-almacen-marcas small { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--suave); }
/* IA2a · Voz de EvoAgent */
.evo-voz { align-items: flex-end; }
.evo-voz-prueba { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--acento-claro); font-size: 14px; }
.evo-voz-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--acento); flex: none; }
.evo-voz-prueba[data-estado="escuchando"] .evo-voz-punto { animation: evo-oye 1.6s ease-out infinite; }
.evo-voz-prueba[data-estado="hablando"] .evo-voz-punto { animation: evo-habla .8s ease-in-out infinite; }
@keyframes evo-oye { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 50%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes evo-habla { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.evo-webchats { font-size: 13px; margin: 10px 0 6px; }
.sc-voz { color: var(--acento); }
@media (prefers-reduced-motion: reduce) { .evo-voz-prueba .evo-voz-punto { animation: none !important; } }