/* =====================================================================
   Estilos específicos de cada vista.
   Cada agente agrega su bloque SOLO dentro de su sección y con prefijos propios
   (p. ej. .pn- para panel, .pr- para prospectos) para no chocar con los demás.
   Antes de inventar algo, revisa css/tlc.css: tokens (--tlc-*), botones (.btn-*),
   tarjetas, tablas, píldoras, KPI, franja EN VIVO, cajón, modal, vacíos y esqueletos.
   ===================================================================== */

/* ---------- Panel (js/vistas/panel.js) ---------- */
/* Avisos fijos arriba: interruptor (H72), aviso de privacidad (H24) y actividad de seguridad (H20) */
.pn-avisos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pn-avisos:empty { display: none; }
.pn-aviso { align-items: center; }
.pn-aviso-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pn-aviso-txt b { font-size: 13.5px; }
.pn-aviso > .btn, .pn-aviso > .grupo-btn { flex: none; }
@media (max-width: 640px) {
  .pn-aviso { flex-wrap: wrap; }
  .pn-aviso > .btn, .pn-aviso > .grupo-btn { width: 100%; }
}
/* Franja EN VIVO */
.pn-viva { gap: 14px 18px; }
.pn-ultima { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: inherit; text-align: left; transition: background var(--t-rapida), border-color var(--t-rapida); }
.pn-ultima:hover { background: rgba(255, 255, 255, .11); border-color: rgba(240, 179, 35, .5); }
.pn-ultima:focus-visible { outline-color: var(--tlc-gold); }
.pn-ultima-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(240, 179, 35, .16); color: var(--tlc-gold); }
.pn-ultima-ic .ico { width: 16px; height: 16px; }
.pn-ultima-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pn-ultima-txt small { font-size: 11px; color: rgba(255, 255, 255, .66); }
.pn-ultima-txt b { max-width: 220px; color: #fff !important; font-weight: 700 !important; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-viva-correos { color: inherit; text-decoration: none; border-radius: 8px; }
.pn-viva-correos:hover { text-decoration: underline; text-decoration-color: rgba(240, 179, 35, .7); text-underline-offset: 4px; }
.pn-viva-correos:focus-visible, .pn-viva-atencion:focus-visible { outline-color: var(--tlc-gold); }
.pn-viva-atencion { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: #B3322E; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); transition: background var(--t-rapida); }
.pn-viva-atencion:hover { background: #9C2A26; color: #fff; text-decoration: none; }
.pn-viva-atencion .ico { width: 14px; height: 14px; }
.pn-ultima-res { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(240, 179, 35, .18); color: var(--tlc-gold); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* Gráfica y resultados */
.leyenda i.pn-linea { width: 14px; height: 3px; border-radius: 2px; }
.pn-resultados { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--tlc-border); }
.pn-res-cab { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 9px; font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.pn-res-cab .gris { font-weight: 400; font-size: 12px; }
.pn-res-barra { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; }
.pn-res-barra i { min-width: 6px; transition: filter var(--t-rapida); }
.pn-res-barra i:hover { filter: brightness(1.08); }
.pn-res-leyenda { margin-top: 10px; gap: 6px 14px; }
.pn-res-leyenda b { font-weight: 700; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }

/* Embudo */
.pn-embudo { display: flex; flex-direction: column; gap: 9px; }
.pn-emb-fila { display: grid; grid-template-columns: 118px minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-size: 12.5px; }
.pn-emb-nom { color: var(--tlc-tinta-2); font-weight: 600; }
.pn-emb-barra { position: relative; height: 32px; border-radius: 9px; background: #F4EFE4; overflow: hidden; }
.pn-emb-barra i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 38px; display: flex; align-items: center; padding-left: 11px; border-radius: 9px; font-style: normal; font-family: var(--tlc-titulo); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; animation: pn-crecer 700ms var(--curva) both; }
.pn-emb-fila:nth-child(2) i { animation-delay: 40ms; } .pn-emb-fila:nth-child(3) i { animation-delay: 80ms; } .pn-emb-fila:nth-child(4) i { animation-delay: 120ms; } .pn-emb-fila:nth-child(5) i { animation-delay: 160ms; }
@keyframes pn-crecer { from { clip-path: inset(0 100% 0 0 round 9px); } to { clip-path: inset(0 0 0 0 round 9px); } }
.pn-emb-barra i.pn-cero { background: transparent; color: var(--tlc-tinta-3); animation: none; }
.pn-emb-pct { text-align: right; font-size: 12px; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; }
.pn-emb-pct b { color: var(--tlc-navy); font-weight: 700; }
.pn-emb-tarjeta { display: flex; flex-direction: column; }
.pn-emb-tarjeta > .tarjeta-cuerpo { flex: 1; display: flex; flex-direction: column; }
.pn-emb-tarjeta .pn-embudo { flex: 1; justify-content: space-evenly; min-height: 220px; }
.pn-emb-pie { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; }
.pn-emb-conv, .pn-emb-perdidos { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 14px; }
.pn-emb-conv { flex: 1; position: relative; overflow: hidden; background: var(--tlc-navy); background-image: var(--hex-claro), linear-gradient(135deg, var(--tlc-navy) 0%, var(--tlc-navy-3) 100%); background-size: 34.64px 60px, auto; }
.pn-emb-conv small { font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.pn-emb-conv b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 26px; line-height: 1.05; color: #fff; }
.pn-emb-conv::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.pn-emb-perdidos { min-width: 92px; background: #F4EFE4; border: 1px solid var(--tlc-border-2); }
.pn-emb-perdidos small { font-size: 11.5px; color: var(--tlc-tinta-3); }
.pn-emb-perdidos b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 22px; line-height: 1.05; color: var(--tlc-tinta-2); }

/* Rendimiento por origen */
.pn-origen td { padding-top: 10px; padding-bottom: 10px; }
.pn-origen-nom { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--tlc-navy); white-space: nowrap; }
.pn-origen-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); color: var(--tlc-blue); }
.pn-origen-ic .ico { width: 15px; height: 15px; }
.pn-celda-barra { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pn-celda-barra .mini-barra { width: 64px; height: 5px; margin: 0; }

/* Prospectos por programa */
.pn-programas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.pn-prog-cab { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.pn-prog-nom { flex: 1; min-width: 0; color: var(--tlc-tinta-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-prog-cab b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); }
.pn-prog-cab small { width: 36px; text-align: right; font-size: 11.5px; color: var(--tlc-tinta-3); }
.pn-prog-barra { margin-top: 6px; height: 8px; border-radius: 999px; background: #F1ECE1; overflow: hidden; }
.pn-prog-barra i { display: block; height: 100%; border-radius: inherit; animation: pn-crecer 700ms var(--curva) both; }
.pn-programas li.apagado .pn-prog-nom { color: var(--tlc-tinta-3); font-style: italic; }

/* Listas inferiores */
.pn-listas .tarjeta-cuerpo.sin-pad { padding: 10px 0 6px; }
.pn-lista .lista-item { padding: 11px 20px; }
.pn-lista button.lista-item:disabled { cursor: default; }
.pn-lista .lista-item .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pn-lista .lista-item .lado small { font-size: 11.5px; color: var(--tlc-tinta-3); }
.pn-fecha { width: 44px; height: 46px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); line-height: 1; }
.pn-fecha b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 18px; color: var(--tlc-navy); }
.pn-fecha small { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.pn-fecha.hoy { background: var(--tlc-navy); border-color: var(--tlc-navy); }
.pn-fecha.hoy b { color: #fff; }
.pn-fecha.hoy small { color: var(--tlc-gold); }
.pn-tipo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tlc-navy); color: var(--tlc-gold); }
.pn-tipo .ico { width: 16px; height: 16px; }
.pn-tipo.t-saliente { background: var(--tlc-gold-claro); color: #7A5605; box-shadow: inset 0 0 0 1px #F3DD9E; }
.pn-tipo.t-navegador { background: var(--tlc-sky-claro); color: #1A5F96; box-shadow: inset 0 0 0 1px #CBE2F7; }
.pn-tarea { gap: 12px; transition: opacity var(--t), background var(--t-rapida); }
.pn-tarea.vencida { box-shadow: inset 3px 0 0 var(--tlc-caliente); }
.pn-tarea.hecha { opacity: .45; }
.pn-tarea.hecha .info b { text-decoration: line-through; }
.pn-check-area { width: 32px; height: 32px; margin: -6px -4px -6px -8px; flex: none; display: grid; place-items: center; border-radius: 10px; cursor: pointer; }
.pn-check-area:hover { background: var(--tlc-exito-claro); }
.pn-check { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--tlc-exito); cursor: pointer; }
.pn-tarea-quien { font-size: 12px; max-width: 100%; min-height: 24px; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: left; }
.pn-al-dia .vacio-ic { color: var(--tlc-exito); }

/* Bienvenida (sin datos) */
.pn-bienvenida { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 32px 60px; border-radius: var(--radio-l); background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra); }
.pn-bienvenida::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-tenue); background-size: 34.64px 60px; mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); }
.pn-bienvenida::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--franja); }
.pn-bienvenida .vacio-ic { width: 88px; height: 88px; margin-bottom: 16px; }
.pn-bienvenida .titular { margin-top: 16px; font-size: 34px; }
.pn-bv-texto { max-width: 540px; margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--tlc-tinta-2); }
.pn-bv-acciones { margin-top: 26px; justify-content: center; }
.pn-pasos { list-style: none; margin: 38px 0 0; padding: 0; width: 100%; max-width: 840px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.pn-pasos li { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--radio); background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); }
.pn-paso-ic { position: relative; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); }
.pn-paso-ic em { position: absolute; right: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; background: var(--tlc-gold); color: var(--tlc-navy); font-style: normal; font-size: 11px; font-weight: 800; }
.pn-pasos b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14.5px; color: var(--tlc-navy); }
.pn-pasos small { font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-3); }
.pn-bv-config { margin-top: 28px; font-size: 13px; }

@media (max-width: 1280px) { .pn-oc { display: none; } }
@media (max-width: 760px) {
  .pn-pasos { grid-template-columns: minmax(0, 1fr); }
  .pn-bienvenida { padding: 36px 18px 42px; }
  .pn-bienvenida .titular { font-size: 26px; }
  .pn-bv-acciones .btn { width: 100%; }
}
@media (max-width: 640px) {
  .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pn-kpis .kpi { padding: 14px 14px 12px; }
  .pn-kpis .kpi-etq { font-size: 11.5px; gap: 7px; align-items: flex-start; min-height: 30px; }
  .pn-kpis .kpi-ic { width: 26px; height: 26px; border-radius: 8px; }
  .pn-kpis .kpi-valor { font-size: 28px; white-space: normal; }
  .pn-kpis .kpi-valor small { display: block; margin: 4px 0 0; font-size: 11.5px; }
  .pn-kpis .kpi-pie { gap: 4px 6px; }
  .pn-kpis .kpi-pie span:not(.delta) { font-size: 11px; line-height: 1.3; }
  .pn-viva { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .pn-viva .vivo, .pn-viva .pn-ultima, .pn-viva .der { grid-column: 1 / -1; }
  .pn-viva .item:not(.pn-ultima) { flex-direction: column; align-items: flex-start; gap: 3px; white-space: normal; font-size: 12px; line-height: 1.25; }
  .pn-ultima-txt { flex: 1; }
  .pn-ultima-txt b { max-width: none; }
  .pn-viva .der { margin-left: 0; }
  .pn-viva .der .btn { width: 100%; }
  .pn-emb-fila { grid-template-columns: 96px minmax(0, 1fr) 38px; gap: 8px; }
  .pn-lista .lista-item { padding: 11px 16px; }
  .pn-origen th, .pn-origen td { padding-left: 10px; padding-right: 10px; }
  .pn-celda-barra .mini-barra { display: none; }
}


/* ---------- Prospectos (js/vistas/prospectos.js) ---------- */
.pr-barra { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pr-etapas { max-width: 100%; }
.pr-filtros { margin-bottom: 0; gap: 8px; }
.pr-filtros-ic, .pr-orden-ic { display: grid; place-items: center; color: var(--tlc-tinta-3); }
.pr-filtro { display: inline-flex; min-width: 0; }
.pr-filtro .select-pildora { max-width: 250px; background-color: #fff; text-overflow: ellipsis; }
.pr-filtro.activo .select-pildora { border-color: var(--tlc-navy); background-color: var(--tlc-navy-claro); box-shadow: inset 0 0 0 1px var(--tlc-navy); }
.pr-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--tlc-border); }
.pr-chip-q .chip-quitar .ico { width: 13px; height: 13px; }
.pr-filtros .total b { color: var(--tlc-navy); font-family: var(--tlc-titulo); font-weight: 800; font-size: 15px; }
#pr-resultados { transition: opacity var(--t); }
#pr-resultados.pr-cargando { opacity: .55; pointer-events: none; }
.pr-tarjeta { overflow-x: auto; }
.pr-th { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; margin: -6px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.pr-th .ico { opacity: .5; }
.pr-th:hover, .pr-th.activo { color: var(--tlc-navy); }
.pr-th.activo .ico { opacity: 1; color: var(--tlc-blue); }
.pr-tabla td { padding-top: 11px; padding-bottom: 11px; }
.pr-tabla .persona b { max-width: 210px; }
.pr-programa { display: block; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tlc-tinta-2); }
.pr-programa.gris { color: var(--tlc-tinta-3); font-style: italic; }
.pr-origen { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: var(--tlc-tinta-3); white-space: nowrap; }
.pr-origen .ico { color: var(--tlc-blue); }
.pr-ult { white-space: nowrap; }
.pr-ult > span { color: var(--tlc-navy); font-weight: 600; }
.pr-ult small { display: block; margin-top: 1px; font-size: 11px; color: var(--tlc-tinta-3); }
.pr-movil { display: none; }
.pr-mas { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-top: 1px solid var(--tlc-border-2); }
.pr-nota { padding: 0 20px 14px; text-align: center; font-size: 12px; color: var(--tlc-tinta-3); }
/* «Programa y origen» se oculta antes de que la tabla deje de caber en su tarjeta */
@media (max-width: 1360px) { .pr-oc-t { display: none; } }
/* Debajo de 1100 px (tablet y laptops chicas) la fila pasa a modo compacto: etapa, temperatura y contacto bajo el nombre */
@media (max-width: 1100px) {
  .pr-oc-m { display: none; }
  .pr-movil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-left: 43px; font-size: 11.5px; color: var(--tlc-tinta-3); }
  .pr-movil span:last-child { margin-left: 2px; }
}
/* Tableta: con etapa y temperatura bajo el nombre sobra ancho para volver a mostrar el programa y el origen */
@media (min-width: 761px) and (max-width: 1100px) {
  .pr-tabla .pr-oc-t { display: table-cell; }
  .pr-programa { max-width: 250px; }
}
@media (max-width: 760px) {
  .pr-sep, .pr-orden-ic, .pr-filtros-ic { display: none; }
  .pr-filtros .total { order: -1; width: 100%; margin-left: 0; }
  .pr-filtro { flex: 1 1 140px; }
  .pr-filtro .select-pildora { width: 100%; max-width: none; }
  .pr-tabla th, .pr-tabla td { padding-left: 14px; padding-right: 14px; }
  .pr-tabla th:first-child, .pr-tabla td:first-child { padding-left: 16px; }
  .pr-tabla .puntaje-barra { width: 34px; }
  .pr-tabla .persona b { max-width: 190px; white-space: normal; }   /* en celular el nombre completo baja a 2 renglones en vez de cortarse */
}


/* ---------- Ficha del prospecto (js/vistas/ficha.js) ---------- */
/* Cabecera */
.fi-id { display: flex; align-items: center; gap: 16px; }
.fi-id .avatar.xl { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--tlc-border), 0 12px 24px -14px rgba(28, 43, 94, .7); }
.fi-id-txt { flex: 1; min-width: 0; }
.fi-sobre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; }
.fi-sobre .capsula { font-size: 11px; padding: 4px 11px; }
.fi-id h2 { font-size: 25px; overflow-wrap: anywhere; }
.fi-sub { gap: 6px 16px; }
.fi-sub > * { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fi-sub .ico { color: var(--tlc-tinta-4); }
.fi-ult { color: var(--tlc-tinta-3); }
.fi-sub a { color: var(--tlc-tinta-2); overflow-wrap: anywhere; }
.fi-sub a:hover { color: var(--tlc-blue); }
.fi-copiar { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--tlc-tinta-2); cursor: copy; }
.fi-copiar:hover { color: var(--tlc-blue); }
.fi-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); }
.fi-ctrl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fi-ctrl > span { font-family: var(--tlc-titulo); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.fi-ctrl > b { height: 32px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--tlc-navy); }
.fi-ctrl .puntaje { height: 32px; }
.fi-etapa {
  height: 32px; padding-left: 26px; font-weight: 700; border-color: transparent; color: var(--texto); background-color: var(--fondo);
  box-shadow: inset 0 0 0 1px rgba(28, 43, 94, .1);
  background-image: radial-gradient(circle at 14px 50%, var(--punto) 0 3.6px, transparent 4.2px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: 0 0, right 12px center; background-size: auto, 15px; background-repeat: no-repeat;
}
.fi-etapa.oscuro { background-image: radial-gradient(circle at 14px 50%, #F0B323 0 3.6px, transparent 4.2px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.fi-etapa option { background: #fff; color: var(--tlc-navy); }
.fi-temp { padding: 2px; }
.fi-temp button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; }
.fi-temp button i { width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.fi-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fi-wa .ico { color: var(--tlc-exito); }
.fi-sufijo { font-weight: 400; color: var(--tlc-tinta-3); }
.fi-faltan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fi-faltan li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tlc-tinta-2); }
.fi-faltan .ico { color: var(--tlc-gold-osc); }
.fi-pestanas { margin: 12px 0 0 -4px; }
.fi-pestanas .badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; }

/* Cuerpo */
.fi-cuerpo { padding-top: 20px; }
.fi-cuerpo:focus { outline: none; }
.fi-bq { margin: 0; }
.fi-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.fi-mini { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; text-align: left; color: inherit; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.fi-mini:hover { border-color: #DDCDA9; box-shadow: var(--sombra-m); transform: translateY(-1px); }
.fi-mini-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--tlc-blue-claro); color: var(--tlc-blue); }
.fi-mini-ic .ico { width: 17px; height: 17px; }
.fi-mini.dorada .fi-mini-ic { background: var(--tlc-navy); color: var(--tlc-gold); }
.fi-mini.roja .fi-mini-ic { background: var(--tlc-peligro-claro); color: var(--tlc-peligro); }
.fi-mini.vacia .fi-mini-ic { background: #F1EEE7; color: var(--tlc-tinta-3); }
.fi-mini-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fi-mini-txt small { font-size: 11px; font-weight: 600; color: var(--tlc-tinta-3); }
.fi-mini-txt b { margin-top: 1px; font-size: 13.5px; font-weight: 700; color: var(--tlc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-mini-txt em { margin-top: 1px; font-style: normal; font-size: 11.5px; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-mini.roja em { color: var(--tlc-peligro); font-weight: 600; }
.fi-mini.vacia em { color: var(--tlc-blue); font-weight: 600; }
.fi-aviso { margin-bottom: 18px; }
.fi-cita { cursor: pointer; font-size: 13.5px; transition: border-color var(--t), box-shadow var(--t); }
.fi-cita:hover { border-color: #DDCDA9; box-shadow: var(--sombra-m); }
.fi-cita-ver { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--tlc-blue); }
.fi-cita-ver .ico { width: 14px; height: 14px; }
.fi-notas { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--tlc-border-2); background: #fff; font-size: 13px; color: var(--tlc-tinta-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.fi-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fi-seccion-cab .seccion-titulo { margin: 0; }
.fi-dia { margin: 4px 0 12px; }
.fi-dia span { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tlc-cream); color: var(--tlc-navy); font-size: 11.5px; font-weight: 700; }
.fi-dia span::first-letter { text-transform: uppercase; }
.fi-dia + .linea-tiempo { margin-bottom: 16px; }
.fi-evento-cab { display: flex; align-items: baseline; gap: 10px; }
.fi-evento-cab b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fi-evento-cab time { flex: none; font-size: 11.5px; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; }
.fi-detalle { white-space: pre-wrap; overflow-wrap: anywhere; }
.fi-evento .fi-detalle { margin-top: 6px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--tlc-border-2); background: #fff; font-size: 12.5px; line-height: 1.5; }
.fi-ver { margin-top: 6px; font-size: 12px; }

/* Datos (edición en línea) */
.fi-ayuda { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12px; color: var(--tlc-tinta-3); }
.fi-datos { margin: 0; overflow: hidden; border-radius: var(--radio); border: 1px solid var(--tlc-border); background: #fff; }
.fi-dato { display: grid; grid-template-columns: 186px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 4px 8px 4px 16px; border-top: 1px solid var(--tlc-border-2); transition: background var(--t); }
.fi-dato:first-child { border-top: 0; }
.fi-dato dt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-3); }
.fi-dato dt .ico { color: var(--tlc-tinta-4); }
.fi-dato dd { margin: 0; min-width: 0; }
.fi-valor { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--tlc-navy); cursor: text; transition: background var(--t-rapida), border-color var(--t-rapida); }
.fi-valor:hover { background: var(--tlc-cream-2); border-color: var(--tlc-border); }
.fi-valor-txt { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fi-valor.fi-sin { color: var(--tlc-blue); font-weight: 600; }
.fi-valor.fi-sin .fi-valor-txt::before { content: '+ '; }
.fi-dato.largo .fi-valor:not(.fi-sin) { font-weight: 400; color: var(--tlc-tinta-2); line-height: 1.55; }
.fi-lapiz { display: grid; color: var(--tlc-tinta-3); opacity: 0; transition: opacity var(--t-rapida); }
.fi-valor:hover .fi-lapiz, .fi-valor:focus-visible .fi-lapiz { opacity: 1; }
.fi-dato.largo { align-items: start; }
.fi-dato.largo dt { padding-top: 14px; }
.fi-dato.editando { background: #FDFBF7; }
.fi-editor { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.fi-editor .input, .fi-editor .select { height: 38px; }
.fi-editor-ayuda { font-size: 11px; color: var(--tlc-tinta-3); }
.fi-dato.guardando { opacity: .6; }
.fi-dato.guardado { animation: fi-guardado 1.3s var(--curva); }
@keyframes fi-guardado { 0%, 35% { background: var(--tlc-exito-claro); } 100% { background: transparent; } }
.fi-sololectura { margin-top: 12px; border-style: dashed; background: transparent; }
.fi-sololectura dd span { display: block; padding: 6px 10px; font-size: 13px; color: var(--tlc-tinta-2); }
.fi-peligro { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding: 14px 16px; border-radius: 14px; border: 1px solid #F4D3D1; background: #FEF8F7; }
.fi-peligro b { display: block; font-size: 13px; color: var(--tlc-peligro); }
.fi-peligro small { font-size: 12px; color: var(--tlc-tinta-3); }

/* Sesiones, tareas y llamadas */
.fi-lista { display: flex; flex-direction: column; gap: 10px; }
.fi-cita-item { display: flex; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; }
.fi-cita-item.apagada { opacity: .62; }
.fi-fecha { width: 50px; height: 54px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 13px; border: 1px solid var(--tlc-border); background: var(--tlc-cream-2); line-height: 1; }
.fi-fecha b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 20px; color: var(--tlc-navy); }
.fi-fecha span { margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.fi-fecha.viva { border-color: var(--tlc-navy); background: var(--tlc-navy); }
.fi-fecha.viva b { color: #fff; }
.fi-fecha.viva span { color: var(--tlc-gold); }
.fi-cita-info { flex: 1; min-width: 0; }
.fi-cita-info > b { display: block; font-size: 13.5px; color: var(--tlc-navy); }
.fi-cita-info > b::first-letter { text-transform: uppercase; }
.fi-cita-info > small { display: block; margin-top: 2px; font-size: 12px; color: var(--tlc-tinta-3); }
.fi-pildoras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fi-cita-info .fi-detalle { margin-top: 8px; font-size: 12.5px; color: var(--tlc-tinta-2); }
.fi-cita-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fi-tareas { gap: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; }
.fi-tarea { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--tlc-border-2); cursor: pointer; transition: background var(--t-rapida); }
.fi-tarea:first-child { border-top: 0; }
.fi-tarea:hover { background: #FCF9F2; }
.fi-tarea.vencida { box-shadow: inset 3px 0 0 var(--tlc-caliente); }
.fi-check { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--tlc-exito); cursor: pointer; }
.fi-tarea-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fi-tarea-txt b { font-size: 13.5px; font-weight: 600; color: var(--tlc-navy); overflow-wrap: anywhere; }
.fi-tarea-txt small { font-size: 12px; color: var(--tlc-tinta-3); }
.fi-tarea.vencida small { color: var(--tlc-peligro); font-weight: 600; }
.fi-tarea.hecha b { color: var(--tlc-tinta-3); text-decoration: line-through; }
.fi-hechas-tit { margin-top: 22px; }
.fi-al-dia { display: flex; align-items: center; gap: 8px; padding: 14px 4px; font-size: 13px; color: var(--tlc-tinta-3); }
.fi-al-dia .ico { color: var(--tlc-exito); }
.fi-llamada { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; text-align: left; color: inherit; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.fi-llamada:hover { border-color: #DDCDA9; box-shadow: var(--sombra-m); transform: translateY(-1px); }
.fi-llamada-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tlc-navy); color: var(--tlc-gold); }
.fi-llamada-ic .ico { width: 17px; height: 17px; }
.fi-llamada-ic.t-saliente { background: var(--tlc-gold-claro); color: #7A5605; box-shadow: inset 0 0 0 1px #F3DD9E; }
.fi-llamada-ic.t-navegador { background: var(--tlc-sky-claro); color: #1A5F96; box-shadow: inset 0 0 0 1px #CBE2F7; }
.fi-llamada-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fi-llamada-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.fi-llamada-cab b { font-size: 13.5px; color: var(--tlc-navy); }
.fi-llamada-res { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.5; color: var(--tlc-tinta-2); }
.fi-chev { margin-top: 9px; color: var(--tlc-tinta-4); }

/* Modal: agendar sesión */
.fi-horas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 34px; }
.fi-hora { font-variant-numeric: tabular-nums; cursor: pointer; }
.fi-horas-pie { width: 100%; margin-top: 2px; font-size: 11.5px; color: var(--tlc-tinta-3); }
.fi-horas-cargando { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tlc-tinta-3); }
.fi-horas-cargando .ico { animation: girar 1.6s linear infinite; }
.fi-horas .mensaje-caja { width: 100%; }
.fi-hora-manual { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.fi-hora-manual .input { width: 140px; }

/* Modal: llamada (si la vista de Llamadas no está) */
.fi-llamada-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.fi-audio { width: 100%; }
.fi-chat { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 4px; }
.fi-burbuja { max-width: 85%; padding: 9px 13px; border-radius: 16px; font-size: 13px; line-height: 1.45; }
.fi-burbuja small { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; opacity: .75; }
.fi-burbuja.sofia { align-self: flex-start; background: var(--tlc-navy); color: #fff; border-bottom-left-radius: 5px; }
.fi-burbuja.cliente { align-self: flex-end; background: var(--tlc-cream); color: var(--tlc-navy); border-bottom-right-radius: 5px; }

@media (max-width: 640px) {
  .fi-id .avatar.xl { display: none; }
  .fi-id h2 { font-size: 21px; }
  .fi-sub { gap: 4px 12px; font-size: 12px; }
  .fi-ult { display: none !important; }
  .fi-controles { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; margin-top: 12px; margin-right: -48px; padding: 10px 12px; }
  .fi-controles .fi-ctrl:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .fi-ctrl > span { font-size: 10px; }
  .fi-etapa { width: 100%; }
  .fi-temp { width: 100%; }
  .fi-temp button { flex: 1; justify-content: center; }
  /* Acciones rápidas en rejilla de 2 columnas (sin carrusel que recorte): «Llamar con Sofía» a todo lo ancho */
  .fi-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; margin-right: -48px; overflow: visible; }
  .fi-acciones .btn { width: 100%; min-width: 0; padding: 0 10px; }
  .fi-acciones .fi-llamar { grid-column: 1 / -1; }
  /* Pestañas: usan también el espacio bajo el botón de cerrar; si aun así no caben, desvanecido como pista */
  .fi-pestanas { margin-right: -48px; scroll-padding: 0 24px; }
  .fi-pestanas { gap: 0; }
  .fi-pestanas button { padding: 11px 7px; font-size: 12.5px; gap: 4px; }
  .fi-pestanas .badge { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .fi-pestanas.desborda { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .fi-resumen { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fi-dato { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 8px 6px 12px; }
  .fi-dato.largo dt { padding-top: 0; }
  .fi-valor { padding-left: 0; }
  .fi-cita-item { gap: 12px; padding: 12px; }
  .fi-peligro { flex-direction: column; align-items: flex-start; }
}


/* ---------- Pipeline (js/vistas/pipeline.js) ---------- */
.pp-barra { justify-content: space-between; gap: 12px 16px; }
.pp-ayuda { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--tlc-tinta-3); }
.pp-ayuda .ico { flex: none; color: var(--tlc-beige); }
.pp-ayuda b { color: var(--tlc-tinta-2); }
.pp-barra-der { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-left: auto; }
.pp-perdidos { font-weight: 600; color: var(--tlc-tinta-2); }
.pp-filtrado { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 12.5px; color: var(--tlc-tinta-3); }
.pp-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr); align-items: start; gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.pp-tablero.con-perdidos { grid-auto-columns: minmax(220px, 1fr); }
.pp-col { position: relative; display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - var(--alto-barra) - 140px); max-height: calc(100dvh - var(--alto-barra) - 140px); border-radius: var(--radio); border: 1px solid var(--tlc-border-2); background: #F4EFE4; scroll-snap-align: start; transition: background var(--t), border-color var(--t), box-shadow var(--t); }
.pp-col::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.pp-col-cab { padding: 14px 14px 10px; }
.pp-col-tit { display: flex; align-items: center; gap: 8px; }
.pp-col-tit i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--c); }
.pp-col-tit h3 { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-col-cab small { display: block; margin-top: 2px; padding-left: 17px; font-size: 11.5px; color: var(--tlc-tinta-3); }
.pp-col-cuerpo { flex: 1; min-height: 130px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 12px; }
.pp-tablero.arrastrando .pp-col:not(.origen) { border-style: dashed; border-color: #D3C29B; }
.pp-col.sobre { background: var(--tlc-blue-claro); border-color: var(--tlc-blue) !important; border-style: solid !important; box-shadow: inset 0 0 0 1px var(--tlc-blue); }
.pp-col-vacia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 10px; border-radius: 12px; border: 1.5px dashed #DCCFB2; font-size: 12px; text-align: center; color: var(--tlc-tinta-3); }
.pp-ver-mas { align-self: center; }
.pp-tarjeta { position: relative; flex: none; padding: 11px 12px 10px 13px; border-radius: 12px; border: 1px solid var(--tlc-border); background: #fff; box-shadow: var(--sombra-s); cursor: grab; transition: box-shadow var(--t), transform var(--t), border-color var(--t), opacity var(--t); }
.pp-tarjeta::before { content: ''; position: absolute; left: -1px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t); }
.pp-tarjeta:hover { border-color: #DDCDA9; box-shadow: var(--sombra-m); transform: translateY(-1px); }
.pp-tarjeta:active { cursor: grabbing; }
.pp-tarjeta:focus-visible { outline-offset: 1px; border-radius: 12px; }
.pp-tarjeta.arrastrando { opacity: .4; transform: rotate(1.2deg); }
.pp-tarjeta.recien { animation: pp-recien 1.5s var(--curva); }
@keyframes pp-recien { 0%, 40% { box-shadow: 0 0 0 3px rgba(240, 179, 35, .65), var(--sombra-m); } 100% { box-shadow: var(--sombra-s); } }
.pp-t-cab { display: flex; align-items: center; gap: 8px; }
.pp-t-cab { align-items: flex-start; }
.pp-t-cab .avatar { margin-top: 1px; }
.pp-t-nombre { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--tlc-navy); overflow-wrap: anywhere; }
.pp-t-puntaje { flex: none; min-width: 28px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--tlc-border-2); background: var(--tlc-cream-2); font-family: var(--tlc-titulo); font-size: 11.5px; font-weight: 800; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.pp-t-prog { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 7px 0 0; font-size: 12px; line-height: 1.4; color: var(--tlc-tinta-2); }
.pp-t-prog.gris { color: var(--tlc-tinta-3); font-style: italic; }
.pp-t-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; min-height: 24px; }   /* si «hace 16 d» no cabe, baja al renglón de abajo */
.pp-t-origen { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--tlc-blue); }
.pp-t-cuando { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--tlc-tinta-3); white-space: nowrap; }
.pp-mover { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.pp-mover-txt { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--tlc-border); background: #fff; font-size: 11px; font-weight: 700; color: var(--tlc-tinta-2); transition: border-color var(--t-rapida), color var(--t-rapida); }
.pp-mover select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.pp-mover:hover .pp-mover-txt { border-color: var(--tlc-blue); color: var(--tlc-blue); }
.pp-mover:focus-within .pp-mover-txt { outline: 2.5px solid var(--tlc-blue); outline-offset: 2px; color: var(--tlc-blue); }
@media (hover: hover) and (pointer: fine) {
  /* Oculto ocupa 0 px y además devuelve el hueco del gap: si no, «hace 53 min» se salía de la tarjeta. */
  .pp-mover { width: 0; margin-left: -6px; overflow: hidden; opacity: 0; transition: opacity var(--t-rapida); }
  .pp-tarjeta:hover .pp-mover, .pp-tarjeta:focus-within .pp-mover { width: auto; overflow: visible; opacity: 1; }
  .pp-tarjeta:hover .pp-t-cuando, .pp-tarjeta:focus-within .pp-t-cuando { display: none; }
  .pp-tarjeta:hover .pp-mover, .pp-tarjeta:focus-within .pp-mover { margin-left: auto; }
}
@media (max-width: 1023.98px) { .pp-col { max-height: none; } .pp-col-cuerpo { max-height: 62vh; } }
@media (max-width: 760px) {
  .pp-ayuda { display: none; }
  .pp-barra-der { margin-left: 0; width: 100%; justify-content: space-between; }
  .pp-tablero, .pp-tablero.con-perdidos { grid-auto-columns: 84%; margin: 0 -16px; padding: 0 16px 12px; scroll-padding-left: 16px; scroll-snap-type: x mandatory; }
}


/* ---------- Seguimiento (js/vistas/seguimiento.js) ---------- */
.sg-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.sg-cifra { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radio); border: 1px solid var(--tlc-border); background: #fff; box-shadow: var(--sombra); text-align: left; color: var(--tlc-tinta-2); transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.sg-cifra:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); border-color: #DDCDA9; }
.sg-cifra::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sg-c, var(--tlc-border)); }
.sg-cifra-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--sg-f, var(--tlc-cream-2)); color: var(--sg-c, var(--tlc-navy)); }
.sg-cifra-ic .ico { width: 20px; height: 20px; }
.sg-cifra-txt { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; min-width: 0; }
.sg-cifra-txt b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 30px; line-height: 1; color: var(--tlc-navy); font-variant-numeric: tabular-nums; grid-row: span 2; }
.sg-cifra-txt span { font-weight: 700; font-size: 13.5px; color: var(--tlc-navy); }
.sg-cifra-txt small { font-size: 11.5px; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-cifra.c-vencidas { --sg-c: var(--tlc-tinta-3); --sg-f: #F1EEE7; }
.sg-cifra.c-vencidas.alerta { --sg-c: var(--tlc-peligro); --sg-f: var(--tlc-peligro-claro); }
.sg-cifra.c-vencidas.alerta b { color: var(--tlc-peligro); }
.sg-cifra.c-hoy { --sg-c: #B7850A; --sg-f: var(--tlc-gold-claro); }
.sg-cifra.c-proximas { --sg-c: var(--tlc-blue); --sg-f: var(--tlc-blue-claro); }
.sg-cifra.c-hechas { --sg-c: var(--tlc-exito); --sg-f: var(--tlc-exito-claro); }
.sg-filtros .segmento { max-width: 100%; }

.sg-grupo { scroll-margin-top: calc(var(--barra-real, var(--alto-barra)) + 16px); }
.sg-grupo .tarjeta-cab { padding-bottom: 12px; border-bottom: 1px solid var(--tlc-border-2); }
.sg-grupo .tarjeta-cab .badge { margin-left: -2px; }
.sg-grupo .tarjeta-cab .ayuda { margin-left: auto; }
.sg-grupo-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--tlc-cream-2); color: var(--tlc-navy); border: 1px solid var(--tlc-border-2); }
.sg-grupo-ic .ico { width: 16px; height: 16px; }
.sg-grupo.g-vencidas .sg-grupo-ic { background: var(--tlc-peligro-claro); color: var(--tlc-peligro); border-color: #F4D3D1; }
.sg-grupo.g-hoy .sg-grupo-ic { background: var(--tlc-gold-claro); color: #8A6206; border-color: #F6E3AE; }
.sg-grupo.g-proximas .sg-grupo-ic { background: var(--tlc-blue-claro); color: var(--tlc-blue); border-color: #D3E2F3; }
.sg-grupo.g-hechas .sg-grupo-ic { background: var(--tlc-exito-claro); color: var(--tlc-exito); border-color: #CDE8D8; }
.sg-grupo.resalta { animation: sg-resalta 1.1s var(--curva); }
@keyframes sg-resalta { 0%, 40% { box-shadow: 0 0 0 3px rgba(240, 179, 35, .55), var(--sombra); } 100% { box-shadow: var(--sombra); } }
.sg-grupo .tarjeta-cuerpo.sin-pad { padding: 0; }

.sg-lista { list-style: none; margin: 0; padding: 0; }
.sg-tarea { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px 13px 20px; border-top: 1px solid var(--tlc-border-2); transition: background var(--t-rapida), opacity var(--t), transform var(--t); }
.sg-tarea:first-child { border-top: 0; }
.sg-tarea:hover { background: #FCF9F2; }
.sg-tarea.p-alta::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tlc-caliente); }
.sg-check { width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid #CDBF9F; background: #fff; color: transparent; transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida), transform var(--t-rapida); }
.sg-check .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.sg-check:hover { border-color: var(--tlc-exito); color: rgba(47, 125, 87, .45); background: var(--tlc-exito-claro); }
.sg-check[aria-pressed="true"] { background: var(--tlc-exito); border-color: var(--tlc-exito); color: #fff; }
.sg-tarea.marcando .sg-check { background: var(--tlc-exito); border-color: var(--tlc-exito); color: #fff; transform: scale(1.12); }
.sg-tarea.marcando { opacity: .55; }
.sg-tarea.marcando .sg-titulo { text-decoration: line-through; text-decoration-color: rgba(28, 43, 94, .45); }
.sg-info { flex: 1; min-width: 0; }
.sg-titulo { display: block; font-weight: 600; font-size: 13.5px; color: var(--tlc-navy); line-height: 1.4; overflow-wrap: anywhere; }
.sg-tarea.hecha .sg-titulo { color: var(--tlc-tinta-3); text-decoration: line-through; text-decoration-color: rgba(107, 114, 128, .5); font-weight: 600; }
.sg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 5px; font-size: 12px; color: var(--tlc-tinta-3); }
.sg-vence { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sg-tarea.vencida .sg-vence { color: var(--tlc-peligro); font-weight: 600; }
.sg-contacto { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 9px 2px 2px; border-radius: 999px; border: 1px solid var(--tlc-border); background: #fff; color: var(--tlc-navy); font-size: 12px; font-weight: 600; transition: border-color var(--t-rapida), background var(--t-rapida); }
.sg-contacto:hover { border-color: var(--tlc-blue); background: var(--tlc-blue-claro); }
.sg-contacto .avatar.s { width: 20px; height: 20px; font-size: 8.5px; }
.sg-contacto span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.sg-origen { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 20px; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-size: 11px; font-weight: 600; }
.sg-origen .ico { color: var(--tlc-gold); }
.sg-lado { display: flex; align-items: center; gap: 2px; flex: none; }
.sg-lado .pildora { margin-right: 6px; }
.sg-lado .btn-icono { color: var(--tlc-tinta-3); opacity: .55; transition: opacity var(--t-rapida), background var(--t-rapida), color var(--t-rapida); }
.sg-tarea:hover .sg-lado .btn-icono, .sg-lado .btn-icono:focus-visible { opacity: 1; }
.sg-lado .sg-borrar:hover { color: var(--tlc-peligro); background: var(--tlc-peligro-claro); }
.sg-nada { display: flex; align-items: center; gap: 8px; padding: 16px 20px 18px; font-size: 13px; color: var(--tlc-tinta-3); }
.sg-nada .ico { color: var(--tlc-exito); }
.sg-tarea.compacta { align-items: center; padding-top: 10px; padding-bottom: 10px; }
.sg-tarea.compacta .sg-check { width: 26px; height: 26px; margin-top: 0; }
.sg-tarea.compacta .sg-titulo { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-tarea.compacta .sg-meta { margin-top: 2px; flex-wrap: nowrap; min-width: 0; }
.sg-tarea.compacta .sg-meta > * { min-width: 0; }
.sg-contacto-txt { font-size: 12px; min-height: 24px; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.sg-tarea.compacta .sg-lado { width: auto; padding: 0; margin: 0; }

.sg-dia { background-image: var(--hex-tenue), linear-gradient(160deg, #fff 0%, var(--tlc-cream-2) 100%); background-size: 34.64px 60px, auto; }
.sg-dia-pct { font-family: var(--tlc-titulo); font-weight: 800; font-size: 26px; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.sg-dia-barra { height: 10px; border-radius: 999px; background: #EFE8D9; overflow: hidden; margin-top: 10px; }
.sg-dia-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tlc-navy), var(--tlc-blue) 70%, var(--tlc-gold)); transition: width 400ms var(--curva); }
.sg-dia-txt { margin-top: 12px; font-size: 13px; color: var(--tlc-tinta-2); line-height: 1.55; }
.sg-dia-txt b { color: var(--tlc-navy); }

@media (max-width: 1100px) { .sg-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sg-cifras { gap: 10px; }
  .sg-cifra { padding: 12px; gap: 10px; }
  .sg-cifra-ic { width: 34px; height: 34px; border-radius: 11px; }
  .sg-cifra-txt b { font-size: 24px; }
  .sg-cifra-txt small { display: none; }
  .sg-filtros .total { margin-left: 0; width: 100%; }
  .sg-tarea { padding: 12px 12px 12px 16px; gap: 10px; flex-wrap: wrap; }
  .sg-lado { width: 100%; padding-left: 38px; margin-top: -2px; }
  .sg-lado .btn-icono { opacity: 1; }
  .sg-grupo .tarjeta-cab .ayuda { width: 100%; margin-left: 0; }
}


/* ---------- Calendario (js/vistas/calendario.js) ---------- */
.cl-tarjeta { --cl-h: 72px; --cl-col-h: 84px; }
.cl-barra { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--tlc-border-2); }
.cl-nav { display: flex; gap: 6px; }
.cl-nav [aria-pressed="true"] { border-color: var(--tlc-navy); box-shadow: inset 0 0 0 1px var(--tlc-navy); }
.cl-rango { font-size: 22px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.cl-rango b { color: var(--tlc-gold-osc); font-weight: 800; }
.cl-rango span { color: var(--tlc-tinta-3); font-weight: 700; }
.cl-cuenta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-cuenta-total { font-size: 13px; color: var(--tlc-tinta-3); margin-right: 2px; }
.cl-cuenta-total b { font-family: var(--tlc-titulo); font-size: 22px; font-weight: 800; color: var(--tlc-navy); margin-right: 2px; font-variant-numeric: tabular-nums; }
.cl-mini { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #F1EEE7; color: var(--tlc-tinta-2); white-space: nowrap; }
.cl-mini.e-confirmada { background: var(--tlc-blue-claro); color: #245A96; }
.cl-mini.e-realizada { background: var(--tlc-exito-claro); color: var(--tlc-exito); }
.cl-mini.e-no_asistio { background: var(--tlc-caliente-claro); color: #A3322E; }
.cl-aviso-vacio { display: flex; align-items: center; gap: 8px; margin: 12px 20px 0; padding: 10px 14px; border-radius: 12px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); font-size: 12.5px; color: var(--tlc-tinta-2); }
.cl-aviso-vacio .ico { color: var(--tlc-blue); }

/* Rejilla semanal */
.cl-semana { position: relative; }
.cl-cab, .cl-cuerpo { display: grid; grid-template-columns: var(--cl-col-h) repeat(6, minmax(0, 1fr)); }
.cl-cab { position: sticky; top: var(--barra-real, var(--alto-barra)); z-index: 6; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--tlc-border); }
.cl-esquina { display: grid; place-items: center; color: var(--tlc-tinta-4); }
.cl-dia-cab { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; border-left: 1px solid var(--tlc-border-2); position: relative; }
.cl-dia-cab span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.cl-dia-cab b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 20px; color: var(--tlc-navy); line-height: 1; font-variant-numeric: tabular-nums; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.cl-dia-cab em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--tlc-cream); color: var(--tlc-navy); font-size: 11px; font-weight: 700; }
.cl-dia-cab.hoy b { background: var(--tlc-navy); color: #fff; box-shadow: 0 0 0 3px var(--tlc-gold-claro), 0 0 0 4px var(--tlc-gold); }
.cl-dia-cab.hoy span { color: var(--tlc-navy); }
.cl-dia-cab.hoy em { background: var(--tlc-gold); }
.cl-dia-cab.pasado b, .cl-dia-cab.pasado span { color: var(--tlc-tinta-3); }
.cl-cuerpo { position: relative; transition: opacity var(--t); }
.cl-semana.cargando .cl-cuerpo { opacity: .45; pointer-events: none; }
.cl-hora { height: var(--cl-h); position: relative; }
.cl-hora span { position: absolute; right: 10px; top: -8px; font-size: 11px; font-weight: 600; color: var(--tlc-tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-hora:first-child span { top: 4px; }
.cl-col {
  position: relative; height: calc(var(--cl-h) * var(--cl-filas)); border-left: 1px solid var(--tlc-border-2); cursor: pointer;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cl-h) - 1px), #EADFC8 calc(var(--cl-h) - 1px), #EADFC8 var(--cl-h)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cl-h) / 2 - 1px), rgba(231, 220, 195, .28) calc(var(--cl-h) / 2 - 1px), rgba(231, 220, 195, .28) calc(var(--cl-h) / 2), transparent calc(var(--cl-h) / 2), transparent var(--cl-h));
}
.cl-col.hoy { background-color: rgba(253, 243, 216, .38); }
.cl-col.pasado { background-color: rgba(241, 238, 231, .5); cursor: default; }
.cl-pasado-hoy { position: absolute; left: 0; right: 0; top: 0; background: rgba(241, 238, 231, .6); pointer-events: none; }
.cl-ahora { position: absolute; left: -1px; right: 0; z-index: 4; border-top: 2px solid var(--tlc-gold); pointer-events: none; }
.cl-ahora i { position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--tlc-gold); box-shadow: 0 0 0 2px #fff; }
.cl-fantasma { position: absolute; left: 4px; right: 4px; z-index: 1; display: flex; align-items: center; padding: 0 9px; border-radius: 9px; border: 1.5px dashed var(--tlc-blue); background: rgba(46, 109, 180, .07); color: var(--tlc-blue); font-size: 11.5px; font-weight: 700; pointer-events: none; overflow: hidden; white-space: nowrap; }

/* Bloques de sesión: color por modalidad, tratamiento por estado */
.cl-cita {
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px;
  padding: 5px 8px 5px 11px; border: 0; border-radius: 9px; text-align: left; overflow: hidden;
  background: var(--f); color: var(--tlc-navy); font-size: 12px; line-height: 1.25; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--c), 0 0 0 1.5px #fff, 0 2px 6px -3px rgba(28, 43, 94, .25);
  transition: box-shadow var(--t-rapida), transform var(--t-rapida);
}
.cl-cita:hover, .cl-cita:focus-visible { z-index: 5; transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1.5px #fff, var(--sombra-m); }
.cl-cita.m-presencial:not(.e-cancelada):not(.e-no_asistio) { background: linear-gradient(135deg, var(--tlc-navy) 0%, #22346E 100%); color: #fff; box-shadow: inset 3px 0 0 var(--tlc-gold), 0 0 0 1.5px #fff, 0 4px 10px -5px rgba(28, 43, 94, .6); }
.cl-cita.m-presencial:not(.e-cancelada):not(.e-no_asistio) .cl-cita-top { color: var(--tlc-gold); }
.cl-cita.m-presencial:not(.e-cancelada):not(.e-no_asistio) .cl-cita-sub { color: rgba(255, 255, 255, .72); }
.cl-cita.m-presencial:not(.e-cancelada):not(.e-no_asistio) .cl-cita-sub .ico { color: var(--tlc-gold); }
.cl-cita.media { padding-top: 3px; padding-bottom: 3px; gap: 0; }
.cl-cita.media .cl-cita-top { font-size: 10.5px; }
.cl-cita.media .cl-cita-nombre { font-size: 12px; }
.cl-leyenda i.m-presencial { background: var(--tlc-navy) !important; border-left-color: var(--tlc-gold) !important; }
.cl-cita-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; font-size: 11px; font-weight: 700; color: var(--t); white-space: nowrap; }
.cl-cita-est { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; flex: none; }
.cl-cita-est .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.cl-cita-nombre { display: block; max-width: 100%; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-cita-sub { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 11px; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-cita-sub .ico { width: 12px; height: 12px; color: var(--c); }
.cl-cita.corta { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.cl-cita.corta .cl-cita-top { width: auto; order: 2; }
.cl-cita.corta .cl-cita-hora { display: none; }
.cl-cita.corta .cl-cita-nombre { order: 1; flex: 1; min-width: 0; }
.cl-cita.e-realizada .cl-cita-est { color: var(--tlc-exito); }
.cl-cita.e-realizada { filter: saturate(.75); }
.cl-cita.e-no_asistio { background-image: repeating-linear-gradient(135deg, rgba(217, 83, 79, .1) 0 6px, transparent 6px 12px); box-shadow: inset 3px 0 0 var(--tlc-caliente), 0 0 0 1.5px #fff; }
.cl-cita.e-no_asistio .cl-cita-est { color: var(--tlc-caliente); }
.cl-cita.e-cancelada { background: #F6F4EF; color: var(--tlc-tinta-3); box-shadow: inset 3px 0 0 #CFC8B8, 0 0 0 1.5px #fff; opacity: .85; }
.cl-cita.e-cancelada .cl-cita-nombre { text-decoration: line-through; text-decoration-color: rgba(107, 114, 128, .6); font-weight: 600; }
.cl-cita.e-cancelada .cl-cita-top { color: var(--tlc-tinta-3); }
.cl-cita.e-cancelada .cl-cita-est { color: var(--tlc-tinta-3); }

.cl-leyenda { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px 14px; border-top: 1px solid var(--tlc-border-2); font-size: 12px; color: var(--tlc-tinta-2); }
.cl-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.cl-leyenda i { width: 18px; height: 12px; border-radius: 4px; border-left: 3px solid; }
.cl-leyenda .sep { width: 1px; height: 16px; background: var(--tlc-border); }
.cl-ley-e .ico { color: var(--tlc-exito); }
.cl-ley-e.mal .ico { color: var(--tlc-caliente); }
.cl-ley-e.tachada { text-decoration: line-through; color: var(--tlc-tinta-3); }
.cl-ley-tip { margin-left: auto; color: var(--tlc-tinta-3); }
.cl-ley-tip .ico { color: var(--tlc-blue); }

/* Lista por día (móvil) */
.cl-lista { display: none; padding: 14px 16px 16px; flex-direction: column; gap: 18px; }
.cl-ldia header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cl-ldia header b { display: inline-block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 15px; color: var(--tlc-navy); }
.cl-ldia header b::first-letter { text-transform: uppercase; }
.cl-ldia header .capsula { font-size: 11px; padding: 3px 10px; }
.cl-ldia header .gris { margin-left: auto; font-size: 12px; }
.cl-ldia.pasado header b { color: var(--tlc-tinta-3); }
.cl-ltarjeta { overflow: hidden; }
.cl-litem { position: relative; padding-left: 16px; }
.cl-litem::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.cl-lhora { display: flex; flex-direction: column; min-width: 72px; }
.cl-lhora b { font-size: 13px; font-weight: 700; color: var(--tlc-navy); white-space: nowrap; }
.cl-lhora small { font-size: 11px; color: var(--tlc-tinta-3); }
/* Segunda línea: estado + modalidad + programa en una sola línea con puntos suspensivos */
.cl-litem .info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-litem .info small .ico { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.cl-lestado { font-weight: 700; }
.cl-lestado::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--e); vertical-align: 1px; }
.cl-litem.e-cancelada .info b { text-decoration: line-through; color: var(--tlc-tinta-3); }
.cl-lvacio { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border: 1px dashed var(--tlc-border); border-radius: 12px; color: var(--tlc-tinta-3); font-size: 12.5px; }

/* Formulario de sesión */
.cl-form { display: flex; flex-direction: column; gap: 20px; }
.cl-form-sec { border: 0; margin: 0; padding: 0; min-width: 0; }
.cl-form-sec legend { display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 10px; }
.cl-form-sec legend .ico { color: var(--tlc-blue); }
.cl-slots { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cl-slots:empty { display: none; }
.cl-slots-cab { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tlc-tinta-3); }
.cl-slots-cab b { color: var(--tlc-navy); font-weight: 600; }
.cl-slots-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-slot { font-variant-numeric: tabular-nums; }
.cl-slots-nada { font-size: 12.5px; color: var(--tlc-tinta-3); }

/* Detalle de sesión */
.cl-det-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); }
.cl-det-cuando { text-align: right; flex: none; }
.cl-det-cuando b { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 22px; color: var(--tlc-navy); line-height: 1.1; white-space: nowrap; }
.cl-det-cuando span { font-size: 12px; color: var(--tlc-tinta-3); }
.cl-det-etq { margin-bottom: 8px; }
.cl-estados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cl-estado { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--tlc-border); background: #fff; font-size: 12px; font-weight: 600; color: var(--tlc-tinta-2); transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.cl-estado .ico { color: var(--c); }
.cl-estado:hover { border-color: var(--c); }
.cl-estado[aria-pressed="true"] { background: var(--f); border-color: var(--c); color: var(--t); box-shadow: inset 0 0 0 1px var(--c); }
.cl-estado.cargando-estado { opacity: .6; pointer-events: none; }
.cl-notas { display: flex; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--tlc-gold-claro); color: #6B4B05; font-size: 13px; white-space: pre-wrap; }
.cl-notas .ico { margin-top: 2px; }
.cl-por-sofia { display: inline-flex; align-items: center; gap: 5px; }
.cl-por-sofia .ico { color: var(--tlc-gold-osc); }

@media (max-width: 1280px) { .cl-tarjeta { --cl-col-h: 76px; } .cl-dia-cab span { letter-spacing: .04em; } }
/* Tableta y laptop chica: columnas angostas → horas más altas para que el nombre completo quepa en dos renglones */
@media (min-width: 761px) and (max-width: 1280px) {
  .cl-tarjeta { --cl-h: 104px; }
  .cl-cita .cl-cita-nombre, .cl-cita.media .cl-cita-nombre { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  .cl-semana { display: none; }
  .cl-lista { display: flex; }
  .cl-ley-tip { display: none !important; }
  .cl-barra { padding: 14px 16px; }
  .cl-rango { font-size: 19px; order: -1; width: 100%; }
  .cl-cuenta { margin-left: auto; }
  .cl-aviso-vacio { margin: 12px 16px 0; }
}
@media (max-width: 640px) {
  .cl-estados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-det-cab { flex-direction: column; align-items: flex-start; }
  .cl-det-cuando { text-align: left; }
  .cl-leyenda { padding: 12px 16px; gap: 6px 12px; }
  .cl-leyenda .sep { display: none; }
  .cl-lhora { min-width: 64px; }
}


/* ---------- Llamadas (js/vistas/llamadas.js) ---------- */
.ll-kpis { margin-bottom: 18px; }
.ll-tabla { transition: opacity var(--t); }
.ll-tabla.cargando { opacity: .5; pointer-events: none; }
.ll-tab td { vertical-align: middle; }
.ll-resumen-corto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 440px; font-size: 12.5px; color: var(--tlc-tinta-3); line-height: 1.45; }
.ll-c-cuando { white-space: nowrap; }
.ll-c-cuando small { display: block; font-size: 11px; color: var(--tlc-tinta-3); }
.ll-con-audio { display: inline-flex; margin-left: 6px; color: var(--tlc-gold-osc); vertical-align: -2px; }
.ll-solo-movil { display: none; }
.ll-c-dur { white-space: nowrap; }
.ll-av-tel { background: var(--tlc-cream); color: var(--tlc-navy); }
.ll-av-tel .ico { width: 15px; height: 15px; }
.ll-av-tel.l .ico { width: 20px; height: 20px; }
.ll-av-tel.s .ico { width: 13px; height: 13px; }

/* Detalle */
.ll-det-cab { padding-bottom: 18px; }
.ll-volver { margin-bottom: 12px; font-size: 12.5px; }
.ll-det-pildoras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ll-det-pildoras .capsula { font-size: 12px; padding: 5px 13px; }
.ll-det-quien { display: flex; align-items: center; gap: 14px; margin-top: 16px; min-width: 0; }
.ll-det-quien > div { min-width: 0; }
.ll-det-quien h2 { overflow-wrap: anywhere; }
.ll-det-quien .sub { gap: 6px 14px; }
.ll-det-quien .sub span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ll-det-quien .sub .ico { color: var(--tlc-tinta-4); }
.ll-det-acc { margin-top: 16px; }
.ll-det .seccion { margin-bottom: 26px; }
.ll-det .seccion > h4 .ico { color: var(--tlc-blue); }
.ll-resumen {
  margin: 0; padding: 26px 26px 24px 86px; font-size: 15.5px; line-height: 1.65; color: var(--tlc-navy);
  background-image: var(--hex-tenue), linear-gradient(150deg, #FFFDF8 0%, var(--tlc-cream-2) 100%); background-size: 34.64px 60px, auto;
  box-shadow: var(--sombra);
}
.ll-resumen::before { font-size: 108px; left: 18px; top: 6px; line-height: 1; }
.ll-resumen::after { content: '\201D'; position: absolute; right: 18px; bottom: -34px; font-family: Georgia, 'Times New Roman', serif; font-size: 72px; line-height: 1; color: var(--tlc-gold); opacity: .55; }
.ll-resumen p { margin: 0; }

.ll-player { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra); }
.ll-play { width: 46px; height: 46px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); box-shadow: 0 8px 18px -10px rgba(28, 43, 94, .8); transition: background var(--t-rapida), color var(--t-rapida), transform var(--t-rapida); }
.ll-play:hover { background: var(--tlc-navy-2); }
.ll-play:active { transform: scale(.96); }
.ll-play.activo { background: var(--tlc-gold); color: var(--tlc-navy); }
.ll-play .ico { width: 19px; height: 19px; }
.ll-pista { position: relative; flex: 1; min-width: 0; height: 40px; border-radius: 8px; }
.ll-pista:focus-within { outline: 2.5px solid var(--tlc-blue); outline-offset: 3px; }
.ll-onda { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.ll-onda i { flex: 1; min-width: 1px; border-radius: 2px; background: #E2D7BF; transition: background var(--t-rapida); }
.ll-onda i.on { background: var(--tlc-blue); }
.ll-pista input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ll-tiempo { flex: none; min-width: 82px; text-align: right; font-size: 12px; font-weight: 600; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; }
.ll-vel { flex: none; height: 28px; min-width: 44px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--tlc-border); background: var(--tlc-cream-2); font-size: 12px; font-weight: 700; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.ll-vel:hover { border-color: var(--tlc-beige); }
.ll-sin-audio { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--tlc-border); background: #FDFBF7; color: var(--tlc-tinta-3); font-size: 13px; }
.ll-sin-audio .ico { color: var(--tlc-tinta-4); flex: none; }

.ll-chat { list-style: none; margin: 0; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra); }
.ll-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.ll-msg.sofia { align-self: flex-start; }
.ll-msg.cliente { align-self: flex-end; flex-direction: row-reverse; }
.ll-msg-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); }
.ll-msg-av .ico { width: 15px; height: 15px; }
.ll-msg .avatar.s { width: 28px; height: 28px; font-size: 10px; }
.ll-msg-cuerpo { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ll-msg.cliente .ll-msg-cuerpo { align-items: flex-end; }
.ll-msg-meta { display: flex; align-items: center; gap: 7px; margin: 0 6px 4px; font-size: 11px; color: var(--tlc-tinta-3); }
.ll-msg.cliente .ll-msg-meta { flex-direction: row-reverse; }
.ll-msg-meta b { font-weight: 700; color: var(--tlc-tinta-2); }
.ll-seg { border: 0; padding: 0 6px; border-radius: 6px; background: #F3EEE3; color: var(--tlc-tinta-3); font-family: var(--tlc-sans); font-weight: 600; font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
button.ll-seg { min-height: 24px; padding: 0 8px; }
button.ll-seg:hover { background: var(--tlc-blue-claro); color: var(--tlc-blue); }
.ll-burbuja { margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; transition: box-shadow var(--t); }
.ll-msg.sofia .ll-burbuja { background: var(--tlc-navy); color: #fff; border-bottom-left-radius: 6px; }
.ll-msg.cliente .ll-burbuja { background: var(--tlc-cream); color: var(--tlc-navy); border-bottom-right-radius: 6px; }
.ll-msg.sonando .ll-burbuja { box-shadow: 0 0 0 3px rgba(240, 179, 35, .6); }
.ll-datos .tarjeta-cuerpo { padding: 6px 18px; }
.ll-id { font-size: 12px; gap: 6px; }

@media (max-width: 1280px) { .ll-resumen-corto { max-width: 280px; } }
@media (max-width: 1100px) { .ll-c-resumen { display: none; } }
/* Tablet: sin barra lateral la tabla se queda con persona, resultado y cuándo para que quepa sin cortarse */
@media (max-width: 1023.98px) { .ll-c-tipo, .ll-c-dur { display: none; } }
@media (max-width: 640px) {
  .ll-solo-movil { display: inline; }
  .ll-c-cuando { display: none; }
  .ll-tab td:first-child { max-width: 200px; }
  .ll-tab td:last-child, .ll-tab th:last-child { padding-right: 14px; }
  .ll-tab td, .ll-tab th { padding-left: 10px; padding-right: 10px; }
  .ll-tab td:first-child, .ll-tab th:first-child { padding-left: 14px; }
  .ll-tab td:last-child, .ll-tab th:last-child { padding-right: 14px; }
  .ll-tab .persona .avatar { display: none; }
  .ll-tab .persona b { white-space: normal; }
  .ll-resumen { padding: 22px 18px 22px 62px; font-size: 14.5px; }
  .ll-resumen::before { font-size: 80px; left: 12px; }
  .ll-msg { max-width: 94%; }
  .ll-player { flex-wrap: wrap; }
  .ll-pista { flex-basis: calc(100% - 60px); }
  .ll-tiempo { min-width: 0; text-align: left; margin-left: 58px; }
  .ll-vel { margin-left: auto; }
  .ll-det-quien .avatar.l { display: none; }
  .ll-kpis .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ll-kpis .kpi { padding: 13px 14px 12px; }
  .ll-kpis .kpi-ic { width: 26px; height: 26px; border-radius: 8px; }
  .ll-kpis .kpi-ic .ico { width: 14px; height: 14px; }
  .ll-kpis .kpi-etq { font-size: 12px; gap: 7px; line-height: 1.25; }
  .ll-kpis .kpi-valor { font-size: 26px; margin-top: 9px; }
  .ll-kpis .kpi-pie { font-size: 11px; margin-top: 6px; line-height: 1.35; }
}


/* ---------- Memoria de Sofía (js/vistas/sofia.js) ---------- */
.sf { display: flex; flex-direction: column; gap: 16px; }
.sf-rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sf-nota { font-size: 12.5px; color: var(--tlc-tinta-3); line-height: 1.55; }

/* Cabecera de la vista */
.sf-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 24px; padding: 22px 24px 24px; }
.sf-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-tenue); background-size: 34.64px 60px; mask-image: linear-gradient(100deg, transparent 45%, #000 100%); -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 100%); }
.sf-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.sf-hero-izq { flex: 1; min-width: 0; }
.sf-hero-txt { margin-top: 12px; max-width: 640px; font-size: 13.5px; line-height: 1.6; color: var(--tlc-tinta-2); }
.sf-hero-der { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.sf-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; font-size: 12.5px; }
.sf-sync-txt { color: var(--tlc-tinta-3); }
.sf-sync .estado-punto.sf-pendiente { --punto: var(--tlc-gold); color: var(--tlc-gold-osc); }
.sf-asistente { height: 26px; padding: 0 10px; font-size: 11.5px; color: var(--tlc-tinta-2); }
.sf-asistente .ico { color: var(--tlc-blue); }
.sf-modelo { height: 26px; padding: 0 10px; font-size: 11.5px; font-weight: 700; color: var(--tlc-navy); }
.sf-modelo .ico { color: var(--tlc-gold-osc); }
.sf-resultado { align-items: center; }
.sf-resultado-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sf-resultado-txt b { font-weight: 700; }
.sf-resultado .grupo-btn { flex-wrap: nowrap; }

/* Contadores */
.sf-contador { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-contador.cerca { color: var(--tlc-alerta); font-weight: 600; }
.sf-saludo { min-height: 84px; }

/* Horario por día */
.sf-horario { margin-top: 10px; }
.sf-dia { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: 'nombre rangos' '. linea'; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--tlc-border); }
.sf-dia-nombre { grid-area: nombre; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.sf-dia-nombre b { font-weight: 600; font-size: 13px; color: var(--tlc-navy); }
.sf-dia-nombre .interruptor { width: 34px; height: 20px; }
.sf-dia-nombre .interruptor::after { width: 14px; height: 14px; }
.sf-dia-nombre .interruptor:checked::after { transform: translateX(14px); }
.sf-dia.cerrado .sf-dia-nombre b { color: var(--tlc-tinta-3); }
.sf-dia-rangos { grid-area: rangos; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sf-rango { height: 30px; padding: 0 8px 0 4px; gap: 2px; background: var(--tlc-navy-claro); border-color: transparent; color: var(--tlc-navy); }
.sf-rango-txt { border: 0; background: transparent; padding: 0 6px; height: 26px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; cursor: pointer; }
.sf-rango-txt:hover { background: rgba(28, 43, 94, .08); }
.sf-rango .chip-quitar .ico { width: 12px; height: 12px; }
.sf-rango .chip-quitar { margin: -2px -6px -2px -4px; }
.sf-agregar { height: 30px; border-style: dashed; color: var(--tlc-blue); background: transparent; padding: 0 10px; }
.sf-agregar:hover { border-color: var(--tlc-blue) !important; color: var(--tlc-navy); background: #fff; }
.sf-cerrado { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--tlc-tinta-3); font-weight: 600; }
.sf-cerrado::before { content: ''; width: 10px; height: 2px; border-radius: 2px; background: currentColor; }
.sf-rango-editor { display: inline-flex; align-items: center; gap: 5px; }
.sf-rango-input { width: 132px; height: 32px; border-radius: 999px; padding: 0 12px; font-family: var(--tlc-sans); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sf-rango-editor .btn-icono.btn-s { width: 32px; }
.sf-rango-error { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tlc-peligro); font-weight: 600; }
.sf-dia-linea { grid-area: linea; position: relative; height: 6px; border-radius: 999px; background: #F1ECE0; overflow: hidden; }
.sf-dia-linea i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--tlc-navy), var(--tlc-blue)); }
.sf-dia.cerrado .sf-dia-linea { background: repeating-linear-gradient(135deg, #F3EEE3 0 6px, #FBF8F1 6px 12px); }
.sf-escala { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding-top: 6px; }
.sf-escala > div { grid-column: 2; position: relative; height: 14px; }
.sf-escala em { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-escala em:first-child { transform: none; }
.sf-horario-resumen { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--tlc-cream-2); font-size: 12.5px; color: var(--tlc-tinta-2); }

/* Transferencia y programas */
.sf-transfer-ayuda { display: inline-flex; align-items: flex-start; gap: 7px; }
.sf-transfer-ayuda .ico { margin-top: 2px; color: var(--tlc-blue); flex: none; }
.sf-transfer-ayuda.mal { color: var(--tlc-peligro); }
.sf-transfer-ayuda.mal .ico { color: var(--tlc-peligro); }
.sf-programas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sf-prog { max-width: 100%; height: auto; min-height: 30px; padding: 4px 8px 4px 11px; }
.sf-prog .ico:first-child { color: var(--tlc-gold-osc); }
.sf-prog-form { display: flex; gap: 8px; margin-top: 14px; }
.sf-prog-form .input { flex: 1; min-width: 0; }

/* Vista previa del prompt */
.sf-prompt > summary { list-style: none; cursor: pointer; padding-bottom: 18px; border-radius: var(--radio); }
.sf-prompt > summary::-webkit-details-marker { display: none; }
.sf-prompt > summary:hover h3 { color: var(--tlc-blue); }
.sf-prompt-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); color: var(--tlc-blue); flex: none; }
.sf-prompt-ic .ico { width: 16px; height: 16px; }
.sf-prompt-tit { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-chevron { transition: transform var(--t) var(--curva); color: var(--tlc-tinta-3); }
.sf-prompt[open] .sf-chevron { transform: rotate(180deg); }
.sf-prompt[open] > summary { padding-bottom: 0; }
.sf-prompt .tarjeta-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.sf-prompt-txt { margin: 0; max-height: 440px; overflow: auto; padding: 14px 16px; border-radius: 12px; background: #FDFBF7; border: 1px solid var(--tlc-border-2); font-family: var(--tlc-mono); font-size: 12px; line-height: 1.65; color: var(--tlc-tinta-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Barra de cambios sin guardar */
.sf-barra { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(105deg, var(--tlc-navy) 0%, #22346E 60%, var(--tlc-navy-3) 100%); box-shadow: var(--sombra-l); animation: subir var(--t) var(--curva) both; }
.sf-barra::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-claro); background-size: 34.64px 60px; mask-image: linear-gradient(90deg, transparent 20%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000); }
.sf-barra-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(240, 179, 35, .16); color: var(--tlc-gold); }
.sf-barra-txt { flex: 1; min-width: 0; }
.sf-barra-txt b { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; }
.sf-barra-txt small { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); }
.sf-barra .btn-fantasma { color: rgba(255, 255, 255, .85); }
.sf-barra .btn-fantasma:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }

/* Modal "falta un paso" */
.sf-faltan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-faltan li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--tlc-border-2); border-radius: 14px; background: #fff; }
.sf-faltan li.falta { background: #FFFCF4; border-color: #F1E0B0; }
.sf-faltan li > div { flex: 1; min-width: 0; }
.sf-faltan b { display: block; font-weight: 600; color: var(--tlc-navy); font-size: 13.5px; }
.sf-faltan small { display: block; color: var(--tlc-tinta-3); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.sf-faltan-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sf-faltan li.ok .sf-faltan-ic { background: var(--tlc-exito-claro); color: var(--tlc-exito); }
.sf-faltan li.falta .sf-faltan-ic { background: var(--tlc-gold-claro); color: var(--tlc-gold-osc); }
.sf-faltan-ic .ico { width: 16px; height: 16px; }

/* Panel flotante de la llamada de prueba (vive en <body>, sirve desde cualquier vista) */
.sf-llamada { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: 372px; max-width: calc(100vw - 32px); padding: 16px 16px 18px; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(140deg, #22346E 0%, var(--tlc-navy) 45%, var(--tlc-navy-3) 100%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 70px -24px rgba(20, 32, 72, .7); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity 200ms var(--curva), transform 200ms var(--curva); }
.sf-llamada.visible { opacity: 1; transform: none; }
.sf-llamada.saliendo { opacity: 0; transform: translateY(10px); }
.sf-llamada.llamar-atencion { animation: sacudir 320ms ease; }
.sf-llamada::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-claro); background-size: 34.64px 60px; mask-image: linear-gradient(200deg, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 70%); }
.sf-llamada::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.sf-llamada:focus-visible { outline: 2.5px solid var(--tlc-gold); outline-offset: 2px; }
.sf-ll-cab { display: flex; align-items: center; gap: 12px; }
.sf-ll-avatar { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(240, 179, 35, .35); }
.sf-llamada[data-fase="en-llamada"] .sf-ll-avatar::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(240, 179, 35, .5); opacity: calc(.15 + var(--vol, 0)); transform: scale(calc(1 + var(--vol, 0) * .12)); transition: transform 90ms linear, opacity 90ms linear; }
.sf-ll-barras { display: flex; align-items: center; gap: 3px; height: 22px; }
.sf-ll-barras i { width: 3px; border-radius: 3px; background: var(--tlc-gold); transform-origin: center; transition: transform 90ms linear; }
.sf-ll-barras i:nth-child(1), .sf-ll-barras i:nth-child(5) { height: 8px; }
.sf-ll-barras i:nth-child(2), .sf-ll-barras i:nth-child(4) { height: 14px; }
.sf-ll-barras i:nth-child(3) { height: 21px; }
.sf-llamada[data-fase="en-llamada"] .sf-ll-barras i { transform: scaleY(calc(.45 + var(--vol, 0) * 1.5)); }
.sf-llamada[data-fase="preparando"] .sf-ll-barras i, .sf-llamada[data-fase="conectando"] .sf-ll-barras i { animation: sf-onda 1s ease-in-out infinite; }
.sf-ll-barras i:nth-child(2) { animation-delay: .1s !important; }
.sf-ll-barras i:nth-child(3) { animation-delay: .2s !important; }
.sf-ll-barras i:nth-child(4) { animation-delay: .3s !important; }
.sf-ll-barras i:nth-child(5) { animation-delay: .4s !important; }
.sf-llamada[data-fase="terminada"] .sf-ll-barras i, .sf-llamada[data-fase="error"] .sf-ll-barras i { opacity: .45; }
.sf-ll-titulos { flex: 1; min-width: 0; }
.sf-ll-etq { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tlc-gold); }
.sf-ll-etq .vivo { font-size: 10.5px; }
.sf-ll-etq .vivo::before { width: 7px; height: 7px; }
.sf-ll-titulos b { display: block; margin-top: 2px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 16px; line-height: 1.25; color: #fff; }
.sf-ll-titulos small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.sf-ll-reloj { font-family: var(--tlc-titulo); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; color: #fff; }
.sf-ll-x { width: 30px; height: 30px; align-self: flex-start; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, .6); display: grid; place-items: center; }
.sf-ll-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sf-ll-x .ico { width: 15px; height: 15px; }
.sf-ll-spin { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); border-top-color: var(--tlc-gold); animation: girar .8s linear infinite; }
.sf-ll-trans { margin-top: 14px; padding: 10px 12px; min-height: 66px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.sf-ll-trans p b { margin-right: 6px; font-weight: 700; }
.sf-ll-trans p.sofia b { color: var(--tlc-gold); }
.sf-ll-trans p.tu b { color: var(--tlc-sky); }
.sf-ll-trans p.parcial { opacity: .62; }
.sf-ll-pista { color: rgba(255, 255, 255, .6); }
.sf-ll-nota { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.sf-ll-pie { display: flex; gap: 8px; margin-top: 14px; }
.sf-ll-btn { flex: 1; height: 40px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.sf-ll-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .17); }
.sf-ll-btn.activo { background: rgba(240, 179, 35, .18); border-color: rgba(240, 179, 35, .4); color: var(--tlc-gold); }
.sf-ll-btn.peligro { background: var(--tlc-peligro); border-color: transparent; }
.sf-ll-btn.peligro:hover:not(:disabled) { background: #A93632; }
.sf-ll-btn.dorado { background: var(--tlc-gold); border-color: transparent; color: var(--tlc-navy); }
.sf-ll-btn.dorado:hover:not(:disabled) { background: #F4BE3C; }
@media (min-width: 641px) { body:has(.sf-llamada.visible) .sf-barra { margin-right: 396px; } }
/* Tarjeta de Sofía de la lateral durante la prueba */
.sofia-tarjeta.en-llamada { border-color: rgba(240, 179, 35, .55); background: #FFF9EA; }
.sofia-tarjeta.en-llamada #canal-sofia .punto { background: var(--tlc-gold); animation: latido-dorado 2s infinite; }
.sofia-tarjeta.en-llamada #canal-sofia small { color: var(--tlc-gold-osc); font-weight: 600; font-variant-numeric: tabular-nums; }

@keyframes sf-destello { 0% { background: var(--tlc-gold-claro); border-color: var(--tlc-gold); } 100% { background: #fff; } }
@keyframes sf-onda { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }

@media (max-width: 1100px) {
  .sf-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sf-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 16px 20px; }
  .sf-hero-der { justify-content: stretch; }
  .sf-hero-der .btn { flex: 1 1 200px; }
}
@media (max-width: 640px) {
  .sf-dia { grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  .sf-escala { grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  .sf-escala em:nth-child(even) { display: none; }
  .sf-resultado { flex-wrap: wrap; }
  .sf-barra { flex-wrap: wrap; bottom: 10px; }
  .sf-barra-txt small { display: none; }
  .sf-barra .btn-acento { flex: 1; }
  .sf-llamada { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
}


/* ---------- Configuración (js/vistas/configuracion.js) ---------- */
.cf { display: flex; flex-direction: column; gap: 16px; }
.cf-rejilla { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cf-texto { font-size: 13px; line-height: 1.6; color: var(--tlc-tinta-2); }

/* Cabecera con el progreso de la conexión */
.cf-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: 22px 24px 24px; }
.cf-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-tenue); background-size: 34.64px 60px; mask-image: linear-gradient(100deg, transparent 40%, #000 100%); -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 100%); }
.cf-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.cf-hero-tit { margin-top: 14px; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.cf-hero-txt { margin-top: 14px; max-width: 580px; font-size: 13.5px; line-height: 1.6; color: var(--tlc-tinta-2); }
.cf-hero-der { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .85); border: 1px solid var(--tlc-border-2); }
.cf-progreso { display: flex; gap: 5px; }
.cf-progreso i { flex: 1; height: 6px; border-radius: 999px; background: #EFE8D9; }
.cf-progreso i.ok { background: var(--tlc-navy); }
.cf-hero.listo .cf-progreso i.ok:last-child { background: var(--tlc-gold); }
.cf-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cf-checks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tlc-tinta-2); }
.cf-checks li .ico { color: var(--tlc-tinta-4); }
.cf-checks li.ok .ico { color: var(--tlc-exito); }
.cf-checks em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--tlc-tinta-3); }
.cf-checks li.ok em { color: var(--tlc-exito); }
.cf-checks li.alerta .ico, .cf-checks li.alerta em { color: var(--tlc-gold-osc); }
.cf-checks li.cf-opcional { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--tlc-border); color: var(--tlc-tinta-3); }
.cf-progreso i.alerta { background: var(--tlc-gold); }
.cf-hero-estado { display: block; margin-bottom: 4px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--tlc-navy); }
.cf-hero.alerta .cf-hero-estado { color: var(--tlc-gold-osc); }
.cf-falta { --fondo: var(--tlc-gold-claro); --texto: #7A5605; --punto: var(--tlc-gold); }
.cf-paso.alerta .cf-paso-num { border-color: var(--tlc-gold); color: var(--tlc-gold-osc); }

/* Pasos */
.cf-pasos { list-style: none; margin: 4px 0 0; padding: 0; }
.cf-paso { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; padding-bottom: 28px; }
.cf-paso:last-child { padding-bottom: 0; }
.cf-paso::before { content: ''; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--tlc-border-2); }
.cf-paso:last-child::before { display: none; }
.cf-paso.listo::before { background: linear-gradient(180deg, var(--tlc-navy), var(--tlc-border-2)); }
.cf-paso-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--tlc-border); color: var(--tlc-navy); font-family: var(--tlc-titulo); font-weight: 800; font-size: 15px; grid-row: 1 / span 2; align-self: start; }
.cf-paso.listo .cf-paso-num { background: var(--tlc-navy); border-color: var(--tlc-navy); color: var(--tlc-gold); }
.cf-paso-num .ico { width: 17px; height: 17px; stroke-width: 2.4; }
.cf-paso-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 36px; }
.cf-paso-cab h4 { font-size: 15.5px; font-weight: 800; }
.cf-paso-cab p { flex-basis: 100%; font-size: 13px; color: var(--tlc-tinta-3); line-height: 1.5; }
.cf-ok { --fondo: var(--tlc-exito-claro); --texto: var(--tlc-exito); --punto: var(--tlc-exito); }
.cf-paso-cuerpo { grid-column: 2; margin-top: 12px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cf-paso-cuerpo > * { max-width: 100%; }
.cf-paso-cuerpo > .cf-guia, .cf-paso-cuerpo > form, .cf-paso-cuerpo > .cf-telefono, .cf-paso-cuerpo > .cf-nota, .cf-paso-cuerpo > .cf-asistente, .cf-paso-cuerpo > .mensaje-caja, .cf-paso-cuerpo > .cf-avanzado { align-self: stretch; }

/* Guía "dónde están en Vapi" */
.cf-guia { padding: 14px 16px; border-radius: 14px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); }
.cf-guia-cab { display: flex; align-items: center; gap: 8px; color: var(--tlc-navy); font-size: 13px; }
.cf-guia-cab .ico { color: var(--tlc-blue); }
.cf-guia ol { margin: 8px 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.55; color: var(--tlc-tinta-2); }
.cf-guia ol b { color: var(--tlc-navy); }
.cf-guia ol li::marker { color: var(--tlc-gold-osc); font-weight: 700; }

/* Llaves */
.cf-llaves { display: flex; flex-direction: column; gap: 14px; }
.cf-secreto { position: relative; }
.cf-secreto > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tlc-tinta-3); pointer-events: none; }
.cf-secreto .input { padding-left: 38px; padding-right: 46px; font-size: 12.5px; }
.cf-secreto .input::placeholder { font-family: var(--tlc-sans); font-size: 13px; }
.cf-ver { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--tlc-tinta-3); display: grid; place-items: center; }
.cf-ver:hover { background: var(--tlc-cream-2); color: var(--tlc-navy); }
.cf-ver .ico { width: 17px; height: 17px; }
.cf-guardada { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--tlc-exito-claro); }
.cf-quitar { font-size: 12.5px; color: var(--tlc-peligro); }
.cf-llaves-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cf-llaves-pie .ayuda { font-size: 12px; color: var(--tlc-tinta-3); }

/* Notas y número */
.cf-nota { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #FDFBF7; border: 1px dashed var(--tlc-border); font-size: 12.5px; line-height: 1.55; color: var(--tlc-tinta-2); }
.cf-nota > .ico { margin-top: 2px; color: var(--tlc-blue); flex: none; }
.cf-nota b { color: var(--tlc-navy); }
.cf-nota a { display: inline-flex; align-items: center; min-height: 24px; }
.cf-nota a .ico { display: inline-block; margin-left: 3px; vertical-align: -2px; }
.cf-telefono { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cf-telefono .ayuda { font-size: 12px; color: var(--tlc-tinta-3); }
.cf-telefono .mensaje-caja { align-self: stretch; }
.cf-tel-fila { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.cf-tel-fila .select { flex: 1; min-width: 0; }
.cf-tel-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); }
.cf-cargando { display: flex; align-self: stretch; }

/* Asistente */
.cf-asistente { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra-s); }
.cf-asistente-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); }
.cf-asistente-txt { flex: 1; min-width: 0; }
.cf-asistente-txt b { display: block; font-weight: 600; color: var(--tlc-navy); font-size: 13.5px; }
.cf-asistente-txt small { display: block; font-size: 12px; color: var(--tlc-tinta-3); overflow-wrap: anywhere; }
.cf-avanzado { border-top: 1px dashed var(--tlc-border); padding-top: 12px; }
.cf-avanzado > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tlc-blue); border-radius: 8px; }
.cf-avanzado > summary::-webkit-details-marker { display: none; }
.cf-avanzado > summary .ico { transition: transform var(--t) var(--curva); }
.cf-avanzado[open] > summary .ico { transform: rotate(90deg); }
.cf-avanzado > summary:hover { color: var(--tlc-navy); }
.cf-avanzado-cuerpo { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.cf-adoptar { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cf-adoptar .campo { align-self: stretch; }

/* URLs y ejemplos */
.cf-url-fila { display: flex; gap: 8px; }
.cf-url-fila .input { flex: 1; min-width: 0; font-size: 12px; background: #FDFBF7; color: var(--tlc-tinta-2); text-overflow: ellipsis; }
.cf-urls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.cf-ejemplo { border-left: 1px solid var(--tlc-border-2); padding-left: 24px; min-width: 0; }
.cf-ejemplo-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.cf-ejemplo-cab b { font-family: var(--tlc-titulo); font-weight: 800; color: var(--tlc-navy); font-size: 14px; }
.cf-ejemplo-intro { margin-top: 12px; font-size: 13px; color: var(--tlc-tinta-2); }
.cf-n8n { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.55; color: var(--tlc-tinta-2); }
.cf-n8n b { color: var(--tlc-navy); }
.cf-n8n li::marker { color: var(--tlc-gold-osc); font-weight: 700; }
.cf-codigo { position: relative; margin-top: 10px; }
.cf-codigo pre { margin: 0; padding: 16px 18px; padding-right: 96px; border-radius: 14px; background: var(--tlc-navy-3); color: #E3E8F5; font-family: var(--tlc-mono); font-size: 12px; line-height: 1.65; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.cf-codigo-copiar { position: absolute; top: 10px; right: 10px; }
.cf-campos-tabla { margin-top: 12px; display: flex; flex-direction: column; }
.cf-campos-tabla > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--tlc-border); font-size: 12.5px; color: var(--tlc-tinta-2); }
.cf-campos-tabla > div:last-child { border-bottom: 0; }
.cf-campos-tabla .mono { color: var(--tlc-navy); font-weight: 600; }
.cf-ejemplo > #cf-ejemplo > .ayuda { display: block; margin-top: 8px; font-size: 12px; color: var(--tlc-tinta-3); }

/* Contraseña */
.cf-pass { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.cf-pass > .btn { align-self: flex-start; }
.cf-pass > .ayuda { font-size: 12px; color: var(--tlc-tinta-3); margin-top: -4px; }
.cf-fuerza { display: flex; gap: 4px; }
.cf-fuerza i { flex: 1; height: 4px; border-radius: 999px; background: #EFE8D9; transition: background var(--t); }
.cf-fuerza[data-n="1"] i:nth-child(-n+1) { background: var(--tlc-peligro); }
.cf-fuerza[data-n="2"] i:nth-child(-n+2) { background: var(--tlc-gold); }
.cf-fuerza[data-n="3"] i:nth-child(-n+3) { background: var(--tlc-blue); }
.cf-fuerza[data-n="4"] i { background: var(--tlc-exito); }

@media (max-width: 1100px) {
  .cf-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cf-urls { grid-template-columns: minmax(0, 1fr); }
  .cf-ejemplo { border-left: 0; padding-left: 0; border-top: 1px solid var(--tlc-border-2); padding-top: 16px; }
}
@media (max-width: 860px) {
  .cf-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .cf-hero { padding: 18px 16px 20px; }
  .cf-hero-estado { font-size: 16.5px; }
  .cf-paso { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
  .cf-paso-num { width: 30px; height: 30px; font-size: 13px; }
  .cf-paso::before { display: none; }
  .cf-paso { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dashed var(--tlc-border); }
  .cf-paso:last-child { margin-bottom: 0; border-bottom: 0; }
  .cf-paso-cab { min-height: 30px; }
  .cf-paso-cuerpo { grid-column: 1 / -1; }
  .cf-url-fila { flex-wrap: wrap; }
  .cf-url-fila .input { flex-basis: 100%; }
  .cf-url-fila .btn { flex: 1; }
  .cf-codigo pre { padding-right: 18px; padding-top: 52px; }
  .cf-campos-tabla > div { grid-template-columns: 1fr; gap: 2px; }
}


/* Configuración: permiso de llamadas desde /leads */
.cf-leads-llamar { align-items: flex-start; line-height: 1.45; color: var(--tlc-tinta-2); }
.cf-leads-llamar .interruptor { margin-top: 1px; }


/* ---------- Correos (js/vistas/correos.js) ---------- */
.co { display: flex; flex-direction: column; gap: 14px; }
.co .peq { font-size: 12px; }

/* Franja de estado: buzón, modo, envíos, revisar */
.co-estado { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 12px 14px 12px 12px; background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio); box-shadow: var(--sombra); }
.co-estado-buzon { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
.co-estado-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--tlc-cream-2); color: var(--tlc-tinta-3); border: 1px solid var(--tlc-border); }
.co-estado-ic.ok { background: var(--tlc-navy); border-color: var(--tlc-navy); color: var(--tlc-gold); box-shadow: 0 6px 14px -8px rgba(28, 43, 94, .7); }
.co-estado-ic.mal { background: var(--tlc-peligro-claro); border-color: #F3C9C6; color: var(--tlc-peligro); }
.co-estado-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: 1px; }
.co-estado-txt small, .co-estado-modo small, .co-estado-tope small, .co-estado-bot small { font-family: var(--tlc-titulo); font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.co-estado-txt b { font-size: 14px; font-weight: 700; color: var(--tlc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-estado-txt .estado-punto { font-size: 12px; }
.co-estado-ult { font-weight: 400; color: var(--tlc-tinta-3); }
.co-estado-bot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 20px; border-left: 1px solid var(--tlc-border-2); }
.co-estado-modo, .co-estado-tope { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-left: 20px; border-left: 1px solid var(--tlc-border-2); }
.co-modo { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 5px 0 12px; border-radius: 999px; border: 1px solid var(--tlc-border); background: var(--tlc-cream-2); color: var(--tlc-navy); font-weight: 700; font-size: 12.5px; white-space: nowrap; transition: border-color var(--t-rapida), box-shadow var(--t-rapida); }
.co-modo:hover { border-color: var(--tlc-beige); box-shadow: var(--sombra); }
.co-modo .ico { width: 15px; height: 15px; color: var(--tlc-blue); }
.co-modo em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--tlc-blue); background: #fff; border: 1px solid var(--tlc-border); border-radius: 999px; padding: 3px 10px; }
.co-modo.m-automatico { background: var(--tlc-navy); border-color: var(--tlc-navy); color: #fff; }
.co-modo.m-automatico .ico { color: var(--tlc-gold); }
.co-modo.m-automatico em { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.co-modo.m-automatico:focus-visible { outline-color: var(--tlc-blue); }
.co-modo.m-apagado { background: #F0F0F2; color: #4B5563; }
.co-modo.m-apagado .ico { color: #4B5563; }
.co-estado-tope b { font-family: var(--tlc-titulo); font-size: 18px; font-weight: 800; color: var(--tlc-navy); line-height: 1.15; }
.co-estado-tope b span { font-size: 12px; color: var(--tlc-tinta-3); font-weight: 700; }
.co-estado-acc { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* «Para encender el bot faltan N pasos»: una sola fila compacta dentro de la franja de estado */
.co-pasos { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 2px -2px -2px; padding: 9px 6px 0 8px; border-top: 1px solid var(--tlc-border-2); }
.co-pasos-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--tlc-gold-claro); color: var(--tlc-gold-osc); }
.co-pasos-ic .ico { width: 15px; height: 15px; }
.co-pasos.solo-apagado .co-pasos-ic { background: #F0F0F2; color: #4B5563; }
.co-pasos-txt { flex: 1 1 320px; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; color: var(--tlc-tinta-2); }
.co-pasos-txt b { font-weight: 700; color: var(--tlc-navy); }
.co-pasos-ir { font-weight: 700; font-size: 13px; }
.co-pasos-sep { color: var(--tlc-tinta-4); }
.co-pasos-acc { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.co-pasos-acc .btn-fantasma { color: var(--tlc-tinta-3); }
.co-pasos-detalle { flex: 1 1 100%; list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.co-pasos-detalle li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #FDFBF7; border: 1px solid var(--tlc-border-2); }
.co-pasos-detalle li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-pasos-detalle b { font-size: 13px; color: var(--tlc-navy); }
.co-pasos-detalle small { font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }
.co-pasos-n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--tlc-navy); color: var(--tlc-gold); }
.co-pasos-n .ico { width: 15px; height: 15px; }
.co-modo.m-apagado em { color: #4B5563; }

/* Avisos (Gmail, pausa, llave de OpenAI) y consejo del modo de respuesta */
.co-avisos { display: flex; flex-direction: column; gap: 10px; }
.co-avisos:empty { display: none; }
.co-aviso { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 14px; border: 1px solid; animation: subir var(--t) var(--curva) both; }
.co-aviso.info { background: var(--tlc-blue-claro); border-color: #CFE0F3; color: #1F4E85; }
.co-aviso.alerta { background: var(--tlc-gold-claro); border-color: #F3DD9E; color: #6B4B05; }
.co-aviso.error { background: var(--tlc-peligro-claro); border-color: #F3C9C6; color: #8F2D29; }
.co-aviso-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #fff; box-shadow: var(--sombra-s); }
.co-aviso-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; }
.co-aviso-txt b { font-size: 13.5px; font-weight: 700; }
.co-aviso-acc { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.co-aviso .btn-fantasma { color: inherit; }
.co-aviso.consejo { position: relative; overflow: hidden; background: #fff; border-color: var(--tlc-border); color: var(--tlc-tinta-2, #374151); box-shadow: var(--sombra-s); padding-left: 16px; }
.co-aviso.consejo::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--tlc-gold), var(--tlc-beige)); }
.co-aviso.consejo .co-aviso-ic { background: var(--tlc-navy); color: var(--tlc-gold); box-shadow: 0 6px 14px -8px rgba(28, 43, 94, .7); }
.co-aviso.consejo .co-aviso-txt b { color: var(--tlc-navy); }
.co-aviso.consejo .btn-fantasma { color: var(--tlc-tinta-3); }

/* Bandeja (ESPEC2 §6): lista de hilos con sus dos carpetas arriba · hilo abierto */
.co-bandeja { position: relative; display: grid; grid-template-columns: minmax(320px, 410px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: var(--co-alto, 680px); background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio-l); box-shadow: var(--sombra); overflow: hidden; }
.co-bandeja::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); z-index: 2; }

/* Las dos carpetas: «Requiere atención» (con su número: rojo si algo está en rojo, naranja si no) y «Mensajes». Dos
   botones tipo pestaña (role="tablist") arriba de la lista; a 390 px, dos chips a todo lo ancho. La primera es más ancha
   (1.6 a 1): con su número, «Requiere atención» cabe completo en la columna de la lista (410 px; 350 px hasta 1180) y a
   360 px; en partes iguales se cortaba («Requiere aten…»). */
.co-carpetas { grid-column: 1; grid-row: 1; min-width: 0; padding: 14px 12px 12px; background: #FCFAF5; border-right: 1px solid var(--tlc-border-2); border-bottom: 1px solid var(--tlc-border-2); }
.co-pestanas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #F1ECE0; box-shadow: inset 0 0 0 1px rgba(28, 43, 94, .06); }
.co-pestana { position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--tlc-tinta-2); font-weight: 700; font-size: 13.5px; line-height: 1.2; transition: background var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida); }
.co-pestana .ico { width: 17px; height: 17px; flex: none; color: var(--tlc-tinta-3); transition: color var(--t-rapida); }
.co-pestana:hover { background: rgba(255, 255, 255, .7); color: var(--tlc-navy); }
.co-pestana.activa { background: #fff; color: var(--tlc-navy); box-shadow: 0 1px 2px rgba(28, 43, 94, .12), 0 6px 14px -10px rgba(28, 43, 94, .55); }
.co-pestana.activa .ico { color: var(--tlc-blue); }
.co-pestana.con-rojo .ico { color: var(--tlc-persona, #B83B36); }
.co-pestana-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-cuenta { flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--tlc-cream); color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.co-cuenta.alerta { background: var(--tlc-peligro); color: #fff; }
.co-probar { width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px dashed var(--tlc-beige); background: #fff; text-align: left; color: inherit; transition: box-shadow var(--t), border-color var(--t); }
.co-probar:hover { border-style: solid; box-shadow: var(--sombra-m); }
.co-probar-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--tlc-navy); color: var(--tlc-gold); }
.co-probar-ic .ico { width: 16px; height: 16px; }
.co-probar b { display: block; font-size: 12.5px; color: var(--tlc-navy); line-height: 1.3; }
.co-probar small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--tlc-tinta-3); }

/* Zona 2: lista de hilos */
.co-lista { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; border-right: 1px solid var(--tlc-border-2); transition: opacity var(--t); }
.co-lista.cargando { opacity: .5; pointer-events: none; }
.co-lista > .tarjeta { border: 0; box-shadow: none; border-radius: 0; }
.co-lista-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--tlc-border-2); flex: none; }
.co-lista-cab > div { flex: 1 1 120px; min-width: 0; }
/* «Mensajes» › «Mostrar:» */
.co-mostrar { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; font-size: 12px; font-weight: 700; color: var(--tlc-tinta-3); }
.co-mostrar .select { width: auto; min-width: 0; max-width: 200px; min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.co-lista-cab h2 { font-size: 17px; font-weight: 800; line-height: 1.2; }
.co-lista-cab small { font-size: 12px; color: var(--tlc-tinta-3); }
.co-lista-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 6px; display: flex; }
.co-lista-cuerpo > .vacio { margin: auto; }
.co-items { list-style: none; margin: 0; padding: 6px; flex: 1; min-height: 0; overflow-y: auto; }
.co-items li + li { border-top: 1px solid var(--tlc-border-2); }
.co-items li + li:has(.co-item.activo), .co-items li:has(.co-item.activo) + li { border-top-color: transparent; }
.co-item { position: relative; width: 100%; display: flex; gap: 11px; padding: 12px 10px 12px 10px; margin: 2px 0; border: 0; border-radius: 13px; background: transparent; text-align: left; color: inherit; transition: background var(--t-rapida), box-shadow var(--t-rapida); }
.co-item:hover { background: #FBF7EE; }
.co-item.activo { background: var(--tlc-navy-claro); box-shadow: inset 3px 0 0 var(--tlc-navy); }
/* Sobre el fondo del activo el gris secundario queda en 4.47:1: se oscurece un poco para AA. */
.co-item.activo .co-item-extracto, .co-item.activo .co-item-cab time, .co-item.activo .co-item-prog { color: #555C69; }
.co-item.activo .co-item-tu { color: #245A96; }
.co-item .avatar { margin-top: 1px; }
.co-item-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-item-cab { display: flex; align-items: baseline; gap: 6px; }
.co-item-nombre { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--tlc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-item-n { flex: none; font-size: 10.5px; font-weight: 700; color: var(--tlc-tinta-2); background: var(--tlc-cream); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.co-item-cab time { flex: none; margin-left: auto; font-size: 11.5px; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; }
/* «Requiere atención» es un estado técnico: naranja (el rojo es solo «Necesita a una persona», intervencion.css). */
.co-item.urgente .co-item-cab time { color: var(--tlc-atencion-texto, #8F4510); font-weight: 600; }
.co-item-asunto { font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-item-extracto { font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-item-tu { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--tlc-blue); }
.co-item-tu .ico { width: 12px; height: 12px; }
.co-item-pie { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.co-item-prog { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; font-size: 11px; color: var(--tlc-tinta-3); }
.co-item-prog span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-item-prog .ico { width: 12px; height: 12px; flex: none; }
.co-item-clip { display: inline-flex; color: var(--tlc-tinta-3); }
.co-item-clip.comprobante { color: var(--tlc-gold-osc); }
/* «Requiere atención» con algo en rojo: «Necesitan a una persona · n» y «Lo demás que espera · m» (ESPEC2 §6.1). */
.co-items li.co-grupo { padding: 12px 10px 4px; }
.co-items li.co-grupo, .co-items li.co-grupo + li { border-top-color: transparent; }
.co-items li + li.co-grupo.demas { margin-top: 6px; }
.co-grupo-tit { font-family: var(--tlc-titulo); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.co-grupo.rojo .co-grupo-tit { color: var(--tlc-persona-texto, #8F2D29); }
.co-grupo-sub { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--tlc-persona-texto, #8F2D29); }
/* Por qué espera: el motivo de «Revisar» y «Con error» (naranja, 6.9:1 sobre blanco). */
.co-item-motivo { font-size: 11.5px; line-height: 1.4; color: var(--tlc-atencion-texto, #8F4510); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* «Ver más antiguos» al final de la lista (SPEC-CORREOS §10.4: la bandeja se pide por páginas). */
.co-items li.co-mas-li { border-top-color: transparent; display: flex; justify-content: center; padding: 10px 6px 14px; }
.co-lista-cuerpo.con-seguir { flex-direction: column; }
.co-lista-seguir { display: flex; justify-content: center; padding: 0 6px 14px; }

/* Chip de categoría (rectangular, para distinguirlo de la píldora de estado) */
.co-cat { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: #fff; color: var(--tlc-tinta-2); box-shadow: inset 0 0 0 1px var(--tlc-border); }
.co-cat.s { height: 20px; padding: 0 7px; font-size: 10.5px; border-radius: 6px; }
.co-cat.t-dorado { background: var(--tlc-gold-claro); color: #7A5605; box-shadow: inset 0 0 0 1px #F3DD9E; }
.co-cat.t-rojo { background: var(--tlc-peligro-claro); color: #A3322E; box-shadow: inset 0 0 0 1px #F3C9C6; }
.co-cat.t-gris { background: #F4F4F5; color: #4B5563; box-shadow: none; }

/* Zona 3: hilo abierto */
.co-hilo { grid-column: 2; grid-row: 1 / -1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--tlc-fondo); }
.co-hilo-marco { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.co-hilo-cab { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 15px; background: #fff; border-bottom: 1px solid var(--tlc-border-2); flex: none; }
.co-hilo-cab-txt { flex: 1; min-width: 0; }
.co-hilo-titulo { font-size: 19px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.co-hilo-titulo:focus { outline: none; }
.co-hilo-titulo:focus-visible { outline: 2.5px solid var(--tlc-blue); outline-offset: 4px; }
.co-hilo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.co-hilo-prog { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tlc-tinta-2); }
.co-hilo-prog .ico { color: var(--tlc-blue); }
.co-hilo-enlaces { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.co-btn-pago .ico { color: var(--tlc-gold-osc); }
.co-atras { display: none; }
.co-hilo-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 30px; display: flex; flex-direction: column; gap: 14px; }
.co-hilo-cuerpo > * { flex-shrink: 0; }

.co-hilo-vacio { margin: auto; max-width: 440px; padding: 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.co-hilo-vacio .titular { font-size: 24px; }
.co-hilo-vacio p { font-size: 13.5px; line-height: 1.6; color: var(--tlc-tinta-3); }
.co-hilo-vacio .btn { margin-top: 6px; }
.co-como { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.co-como li { display: flex; gap: 12px; align-items: flex-start; }
.co-como li > span { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-gold-claro); color: #7A5605; font-family: var(--tlc-titulo); font-weight: 800; font-size: 12.5px; box-shadow: inset 0 0 0 1px #F3DD9E; }
.co-como b { display: block; font-size: 13.5px; color: var(--tlc-navy); }
.co-como small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-3); }
.co-sello { position: relative; width: 86px; height: 86px; margin-bottom: 4px; border-radius: 26px; display: grid; place-items: center; color: var(--tlc-gold); background-color: var(--tlc-navy); background-image: var(--hex-claro), linear-gradient(135deg, var(--tlc-navy) 0%, var(--tlc-navy-3) 100%); background-size: 34.64px 60px, auto; box-shadow: 0 18px 36px -18px rgba(28, 43, 94, .85); }
.co-sello::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--cinta); }
.co-sello .ico { width: 38px; height: 38px; stroke-width: 1.5; }

/* Lo que entendió la IA */
.co-ia { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio); box-shadow: var(--sombra-s); }
.co-ia-cab { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.co-ia-capsula { font-size: 11.5px; padding: 5px 13px; }
.co-conf { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--tlc-tinta-3); }
.co-conf-barra { position: relative; width: 112px; height: 8px; border-radius: 999px; background: #EFE8D9; }
.co-conf-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--tlc-blue); }
.co-conf-barra em { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--tlc-navy); transform: translateX(-1px); }
.co-conf.n-alta .co-conf-barra i { background: var(--tlc-exito); }
.co-conf.n-media .co-conf-barra i { background: var(--tlc-gold); }
.co-conf.n-baja .co-conf-barra i { background: var(--tlc-caliente); }
.co-conf b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); min-width: 36px; text-align: right; }
.co-ia-resumen { margin: 0; font-size: 14px; color: var(--tlc-navy); }
.co-conf { flex-wrap: wrap; justify-content: flex-end; row-gap: 3px; }
.co-conf-ley { flex: 1 1 100%; text-align: right; font-size: 11px; color: var(--tlc-tinta-3); }
.co-conf-barra em { cursor: help; }
.co-conf-regla { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--tlc-peligro-claro); color: #8F2D29; font-size: 12px; font-weight: 700; }
/* Plegada a una línea cuando hay respuesta propuesta (la respuesta es lo principal) */
.co-ia.compacta { gap: 8px; padding: 0; overflow: hidden; }
.co-ia-plegable > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 10px; cursor: pointer; border-radius: var(--radio); }
.co-ia-plegable > summary::-webkit-details-marker { display: none; }
.co-ia-plegable > summary:hover { background: #FDFBF7; }
.co-ia-mini { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-size: 11.5px; font-weight: 700; }
.co-ia-mini .ico { width: 13px; height: 13px; color: var(--tlc-gold); }
.co-ia-linea { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--tlc-tinta-2); }
.co-ia-plegable[open] .co-ia-linea { visibility: hidden; }
.co-ia-chip { flex: none; height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; background: var(--tlc-cream); color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.co-ia-chip.n-alta { background: var(--tlc-exito-claro); color: #22603F; }
.co-ia-chip.n-baja { background: var(--tlc-peligro-claro); color: #8F2D29; }
.co-ia-chip.regla { background: var(--tlc-peligro-claro); color: #8F2D29; }
.co-ia-chev { flex: none; width: 16px; height: 16px; color: var(--tlc-tinta-3); transition: transform var(--t) var(--curva); }
.co-ia-plegable[open] .co-ia-chev { transform: rotate(180deg); }
.co-ia-det { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 14px; }
.co-ia-det .co-conf { margin-left: 0; justify-content: flex-start; }
.co-ia-det .co-conf-ley { text-align: left; }
.co-ia.compacta > .co-ia-motivo { margin: 0 10px 10px; }
.co-ia-motivo b { font-weight: 700; }
.co-ia.sin-llave { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--tlc-gold-claro); border-color: #F3DD9E; color: #6B4B05; }
.co-ia.sin-llave > div { flex: 1 1 220px; }
.co-ia.sin-llave b { display: block; font-size: 13.5px; }
.co-ia.sin-llave p { font-size: 12.5px; }
.co-ia-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #fff; color: var(--tlc-gold-osc); }

/* Pago ligado al hilo */
.co-pago { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--tlc-gold-claro); border: 1px solid #F3DD9E; }
.co-pago-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #fff; color: var(--tlc-gold-osc); }
.co-pago-txt { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.co-pago-txt small { font-size: 11.5px; color: #6B4B05; }
.co-pago-txt b { font-family: var(--tlc-titulo); font-size: 16px; font-weight: 800; color: var(--tlc-navy); }
.co-pago-txt .gris { font-family: var(--tlc-sans); font-size: 12px; font-weight: 600; }
.co-pago .btn-fantasma { color: var(--tlc-navy); }

/* Mensajes (solo texto, escapado) */
.co-msjs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.co-msj { padding: 14px 16px 16px; background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio); box-shadow: var(--sombra-s); }
.co-msj.sale { margin-left: 32px; background: #FBFCFE; border-color: #D9E3F2; }
.co-msj.sale.auto { border-left: 3px solid var(--tlc-navy); }
.co-msj-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-msj-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--tlc-blue-claro); color: var(--tlc-blue); }
.co-msj-av.ia { background: var(--tlc-navy); color: var(--tlc-gold); }
.co-msj-av .ico { width: 13px; height: 13px; }
.co-msj-quien { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.co-msj-quien b { font-size: 13px; color: var(--tlc-navy); }
.co-msj-quien small { font-size: 11.5px; color: var(--tlc-tinta-3); overflow-wrap: anywhere; }
.co-msj-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.co-msj-chips time { font-size: 11.5px; color: var(--tlc-tinta-3); white-space: nowrap; }
.co-chip-ia { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(28, 43, 94, .7); }
.co-chip-ia .ico { width: 12px; height: 12px; color: var(--tlc-gold); }
.co-msj-texto { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.65; color: var(--tlc-tinta); }
.co-msj-mas { margin-top: 10px; font-size: 12px; }
.co-msj-completo { margin-top: 8px; max-height: 320px; overflow-y: auto; padding: 10px 12px; border-left: 3px solid var(--tlc-border); border-radius: 0 10px 10px 0; background: var(--tlc-cream-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.55; color: var(--tlc-tinta-3); }
.co-msj-nota { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--tlc-tinta-3); }
.co-adjuntos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.co-adj { display: flex; align-items: center; gap: 10px; max-width: 290px; padding: 7px 12px 7px 7px; border-radius: 12px; border: 1px solid var(--tlc-border); background: #fff; color: inherit; text-align: left; transition: border-color var(--t-rapida), background var(--t-rapida); }
.co-adj:hover { border-color: var(--tlc-beige); background: var(--tlc-cream-2); }
.co-adj-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--tlc-gold-claro); color: var(--tlc-gold-osc); }
.co-adj-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.co-adj-txt b { font-size: 12.5px; color: var(--tlc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-adj-txt small { font-size: 11px; color: var(--tlc-tinta-3); }
.co-adj > .ico { color: var(--tlc-tinta-4); }

/* Editor del borrador */
.co-editor { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio); box-shadow: var(--sombra-m); }
.co-editor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); }
.co-editor-cab { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 15px 16px 11px; }
.co-editor-tit { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tlc-titulo); font-size: 14.5px; font-weight: 800; color: var(--tlc-navy); }
.co-editor-tit .ico { color: var(--tlc-blue); }
.co-editor-hint { margin-left: auto; font-size: 11.5px; color: var(--tlc-tinta-3); }
.co-editor-meta { margin: 0; padding: 0 16px; border-top: 1px solid var(--tlc-border-2); }
.co-editor-meta > div { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tlc-border-2); font-size: 13px; }
.co-editor-meta dt { width: 54px; flex: none; font-size: 12px; color: var(--tlc-tinta-3); }
.co-editor-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--tlc-tinta-2); }
.co-editor-meta dd b { color: var(--tlc-navy); }
.co-editor-texto { display: block; width: 100%; min-height: 190px; padding: 14px 16px; border: 0; resize: vertical; background: #fff; font: inherit; font-size: 14px; line-height: 1.65; color: var(--tlc-navy); }
.co-editor-texto::placeholder { color: var(--tlc-tinta-3); }
.co-editor-texto:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(46, 109, 180, .4); }
.co-editor-firma { display: flex; align-items: center; gap: 7px; padding: 8px 16px; font-size: 11.5px; color: var(--tlc-tinta-3); background: #FDFBF7; border-top: 1px solid var(--tlc-border-2); }
.co-editor-firma .ico { flex: none; color: var(--tlc-blue); }
.co-editor-cuenta { margin-left: auto; white-space: nowrap; }
.co-editor > .mensaje-caja { margin: 10px 16px 0; }
/* «Al enviar tu respuesta se quita el rojo.» (TLC.rojo.notaEditor) debajo de la firma, con el mismo margen. */
.co-editor > .in-nota-editor { margin: 0; padding: 8px 16px 10px; background: var(--tlc-persona-fondo, #FBE9E8); border-top: 1px solid var(--tlc-persona-borde, #EFC2BF); }
.co-editor-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px 14px; background: #FDFBF7; border-top: 1px solid var(--tlc-border-2); }
.co-editor > .mensaje-caja + .co-editor-pie { border-top: 0; margin-top: 10px; }
.co-editor-pie .btn { padding: 0 15px; }
.co-resolver { margin-left: auto; }
.co-sufijo { font-weight: 400; font-size: 11.5px; color: var(--tlc-tinta-3); }
.co-responder-fila { display: flex; }
/* Barra de acciones al pie del hilo: siempre a la vista (escritorio: fuera del scroll del hilo; celular: sticky) */
.co-hilo-barra { flex: none; position: relative; z-index: 4; isolation: isolate; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 22px 12px; background: #fff; border-top: 1px solid var(--tlc-border-2); box-shadow: 0 -10px 22px -18px rgba(28, 43, 94, .55); }
.co-hilo-barra-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.co-hilo-barra-btns .btn { padding: 0 15px; }
.co-hilo-barra .co-resolver { margin-left: auto; }
/* Atajo flotante sobre la barra mientras la respuesta no se ve */
.co-ir-editor { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(28, 43, 94, .8); transition: opacity var(--t-rapida), transform var(--t-rapida); }
.co-ir-editor:hover { background: #24356F; color: #fff; text-decoration: none; }
.co-ir-editor .ico { color: var(--tlc-gold); }
.co-ir-editor:focus-visible { outline: 2.5px solid var(--tlc-gold); outline-offset: 2px; }
.co-hilo-barra.editor-visible .co-ir-editor { opacity: 0; pointer-events: none; transform: translate(-50%, 6px); }
.co-editor:focus { outline: none; }
.co-fuera { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radio); background: #FBF6EC; border: 1px solid #E8D9B8; }
.co-fuera-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #fff; color: #6B5427; border: 1px solid #E8D9B8; }
.co-fuera-txt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-fuera-txt b { font-size: 14px; color: var(--tlc-navy); }
.co-fuera-txt span { font-size: 12.5px; line-height: 1.5; color: #5C4A22; }
.co-fuera-acc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Correo que el bot dejó para el dueño (SPEC-CORREOS §10.4): «Este correo lo contestas tú» */
.co-sinbot { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radio); background: #EEF5FC; border: 1px solid #CFE2F5; }
.co-sinbot-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #fff; color: #1A5F96; border: 1px solid #CFE2F5; }
.co-sinbot-txt { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-sinbot-txt b { font-size: 14px; color: var(--tlc-navy); }
.co-sinbot-txt span { font-size: 12.5px; line-height: 1.5; color: #2B4A6B; }
.co-sinbot-txt small { font-size: 11.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.co-sinbot-acc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.co-pasos.lee .co-pasos-ic { background: #EAF4FD; color: #1A5F96; }
.co-btn-gmail .ico { color: var(--tlc-blue); }
a.co-adj { text-decoration: none; }
.co-mas { position: relative; }
.co-mas > summary { list-style: none; color: var(--tlc-tinta-2); }
.co-mas > summary::-webkit-details-marker { display: none; }
.co-mas[open] > summary { background: #fff; }
.co-mas-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; width: 290px; max-width: 80vw; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra-l); }
.co-mas-item { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: inherit; }
.co-mas-item:hover { background: var(--tlc-cream-2); }
.co-mas-item .ico { flex: none; margin-top: 2px; color: var(--tlc-blue); }
.co-mas-item b { display: block; font-size: 13px; color: var(--tlc-navy); }
.co-mas-item small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--tlc-tinta-3); }
.co-nota-envio { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--tlc-blue-claro); color: #1F4E85; font-size: 13px; font-weight: 600; }

/* Modales: adjunto, regenerar, llave, simulador */
.co-adj-vista { display: grid; place-items: center; min-height: 240px; overflow: hidden; border-radius: 14px; border: 1px solid var(--tlc-border); background: #F4F1EA; }
.co-adj-vista img { max-width: 100%; max-height: 64vh; object-fit: contain; }
.co-adj-vista.pdf iframe { width: 100%; height: 64vh; border: 0; background: #fff; }
.co-adj-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.co-adj-pie .gris { display: inline-flex; align-items: center; gap: 6px; }
.co-adj-cargando, .co-adj-falla { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: var(--tlc-tinta-3); text-align: center; }
.co-regenerar .co-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.co-pasos-llave { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.co-sim { display: flex; flex-direction: column; gap: 16px; }
.co-sim-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.co-sim-ej { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--tlc-border); background: #fff; color: var(--tlc-navy); font-weight: 600; font-size: 12.5px; line-height: 1.35; text-align: left; transition: background var(--t-rapida), border-color var(--t-rapida); }
.co-sim-ej .ico { flex: none; color: var(--tlc-blue); }
.co-sim-ej:hover { border-color: var(--tlc-beige); background: var(--tlc-cream-2); }
.co-sim-ej[aria-pressed="true"] { background: var(--tlc-navy); border-color: var(--tlc-navy); color: #fff; }
.co-sim-ej[aria-pressed="true"] .ico { color: var(--tlc-gold); }
.co-sim-ej[aria-pressed="true"]:focus-visible { outline-color: var(--tlc-blue); }
.co-sim-adj { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--tlc-border); background: #FDFBF7; }
.co-sim-adj-cab { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.co-sim-adj-cab .etq { font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.co-sim-adj-cab small { font-size: 11.5px; color: var(--tlc-tinta-3); }
.co-sim-adj-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.co-sim-subir { cursor: pointer; }
.co-sim-adj-botones:has(input:focus-visible) .co-sim-subir { outline: 2.5px solid var(--tlc-blue); outline-offset: 2px; }
.co-sim-adj-elegido { display: flex; align-items: center; gap: 12px; }
.co-sim-adj-elegido img { width: 52px; height: 66px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--tlc-border); background: #fff; }
.co-sim-adj-elegido > span:not(.co-sim-adj-ic) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.co-sim-adj-elegido b { font-size: 13px; color: var(--tlc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-sim-adj-elegido small { font-size: 11.5px; color: var(--tlc-tinta-3); }
.co-sim-adj-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--tlc-gold-claro); color: var(--tlc-gold-osc); }
.co-sim-nota { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tlc-tinta-3); }
.co-sim-nota .ico { flex: none; color: var(--tlc-exito); }
.co-sim-llave { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid #F3DD9E; background: var(--tlc-gold-claro); color: #6B4B05; font-size: 13px; line-height: 1.5; }
.co-sim-llave-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #fff; color: var(--tlc-gold-osc); }
.co-sim-llave b { font-size: 14px; }
.co-sim-llave ol { margin: 6px 0 12px; padding-left: 18px; }
.co-sim-resultado:empty { display: none; }
.co-sim-pensando { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--tlc-navy-claro); color: var(--tlc-navy); font-size: 13px; font-weight: 600; }
.co-sim-pensando .ico { flex: none; color: var(--tlc-blue); animation: co-latir 1.3s ease-in-out infinite; }
@keyframes co-latir { 50% { transform: scale(.82); opacity: .55; } }
.co-sim-res { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--tlc-border-2); animation: subir var(--t) var(--curva) both; }
.co-sim-decision { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; }
.co-sim-decision > .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.co-sim-decision b { display: block; font-family: var(--tlc-titulo); font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.co-sim-decision span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
.co-sim-decision.d-verde { background: var(--tlc-exito-claro); color: #22603F; }
.co-sim-decision.d-rojo { background: var(--tlc-peligro-claro); color: #8F2D29; }
.co-sim-decision.d-gris { background: #F4F4F5; color: #4B5563; }
.co-sim-decision.d-navy { background: var(--tlc-navy); background-image: var(--hex-claro); background-size: 34.64px 60px; color: rgba(255, 255, 255, .82); }
.co-sim-decision.d-navy b { color: #fff; }
.co-sim-decision.d-navy > .ico { color: var(--tlc-gold); }
.co-sim-datos { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.co-sim-datos > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.co-sim-datos small { font-family: var(--tlc-titulo); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.co-sim-datos b { font-size: 14px; color: var(--tlc-navy); }
.co-sim-resumen { margin: 0; font-size: 13.5px; }
.co-sim-borrador { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; }
.co-sim-borrador .co-msj-texto { margin-top: 6px; max-height: 260px; overflow-y: auto; font-size: 13px; }

/* ---------- «Necesita a una persona», «Bot en este correo», «Nunca contestar» y «Correo nuevo» (ESPEC 20-oct-2026) ---------- */
/* La caja de «Requiere atención» (técnica) va en naranja; la roja es solo la de intervencion.css. */
.mensaje-caja.error.naranja { background: var(--tlc-atencion-fondo, #FCEADB); color: var(--tlc-atencion-texto, #8F4510); }
.mensaje-caja.error.naranja .ico { color: var(--tlc-atencion, #C8641E); }
.co-sim-decision.d-naranja { background: var(--tlc-atencion-fondo, #FCEADB); color: var(--tlc-atencion-texto, #8F4510); }
.co-sim-llave .co-sim-sin-llave { display: block; margin: 2px 0 6px; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-2); }
.co-lista-tira { padding: 10px 12px 0; }
.co-lista-tira .in-tira { margin: 0 0 2px; }
/* Control por conversación (como «Bot en este chat»). */
.co-control { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radio); background: #fff; border: 1px solid var(--tlc-border); }
.co-control-fila { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.co-bot-correo { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 7px 14px 7px 9px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #FCFAF5; cursor: pointer; transition: border-color var(--t-rapida), background var(--t-rapida); }
.co-bot-correo:hover { border-color: #D9C69C; }
.co-bot-correo-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.co-bot-correo-txt b { font-size: 13.5px; color: var(--tlc-navy); }
.co-bot-correo-txt small { font-size: 12px; color: var(--tlc-tinta-3); overflow-wrap: anywhere; }
.co-bot-correo.tono-ok .co-bot-correo-txt small { color: #22603F; }
.co-bot-correo.tono-alerta .co-bot-correo-txt small { color: #6B4B05; }
.co-bot-correo.tono-apagado { background: #F1EEE7; border-color: #DCD5C6; }
.co-bot-correo.tono-apagado .co-bot-correo-txt small { color: #3D4555; font-weight: 600; }
.co-bot-correo.tono-rojo { background: var(--tlc-persona-fondo, #FBE9E8); border-color: var(--tlc-persona-borde, #EFC2BF); }
.co-bot-correo.tono-rojo .co-bot-correo-txt small { color: var(--tlc-persona-texto, #8F2D29); font-weight: 700; }
/* «Nunca contestar» o «No contactar»: lo deciden la lista o la ficha; el interruptor se ve apagado y no se cambia aquí. */
.co-bot-correo.bloqueado { cursor: not-allowed; }
.co-bot-correo.bloqueado:hover { border-color: #DCD5C6; }
.co-bot-correo.bloqueado .interruptor:disabled { opacity: .55; cursor: not-allowed; }
/* Hilo vacío: «{n} necesitan a una persona» en rojo, primero (como en los chats). Blanco sobre --tlc-persona: 5.6:1. */
.co-hilo-vacio .co-btn-rojos { background: var(--tlc-persona, #B83B36); color: #fff; box-shadow: 0 6px 14px -8px rgba(143, 45, 41, .7); }
.co-hilo-vacio .co-btn-rojos:hover:not(:disabled) { background: #9E312D; }
.co-hilo-vacio .co-btn-rojos .ico { color: #fff; }
.co-control-fila .co-btn-control { flex: none; }
.co-control-ayuda { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.co-control-ayuda .ico { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.co-control-ayuda b { color: var(--tlc-tinta-2); font-weight: 700; }
.co-aviso-control { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; border: 1px solid #C9DAF0; background: var(--tlc-blue-claro); }
.co-aviso-control > div { flex: 1 1 240px; min-width: 0; }
.co-aviso-control b { display: block; font-size: 14px; line-height: 1.3; color: #1F4E85; overflow-wrap: anywhere; }
.co-aviso-control small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: #2B5A8E; }
.co-aviso-control > .btn { flex: none; }
.co-aviso-control-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #fff; color: var(--tlc-blue); }
.co-aviso-control-ic .ico { width: 17px; height: 17px; }
.co-aviso-control.humano { border-color: #9DBDE3; box-shadow: inset 4px 0 0 var(--tlc-blue); }
.co-aviso-control.apagado { background: #F4F2EC; border-color: #DCD5C6; }
/* «Solo lo contesta una persona» (ESPEC2 §4.6): azul, como la píldora «Solo una persona» (#245A96 sobre #E6EFF9). */
.co-aviso-control.solo { background: #E6EFF9; border-color: #9DBDE3; box-shadow: inset 4px 0 0 #245A96; }
.co-aviso-control.solo .co-aviso-control-ic { color: #245A96; }
.co-aviso-control.apagado b { color: #2F3747; }
.co-aviso-control.apagado small { color: #4B5563; }
.co-aviso-control.apagado .co-aviso-control-ic { color: #4B5563; }
/* «Más acciones» del encabezado del hilo: botón de íconos (no le quita espacio al asunto) y el menú abre hacia abajo. */
.co-mas-hilo .co-mas-menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; }
.co-mas-hilo > summary { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.co-mas-hilo > summary.btn-icono { width: 34px; padding: 0; }
/* Con varios botones, que bajen de renglón antes de aplastar el asunto. */
.co-hilo-cab { flex-wrap: wrap; }
.co-hilo-cab-txt { flex: 1 1 220px; }
.co-hilo-enlaces { flex: 0 1 auto; justify-content: flex-end; }
/* El correo que puso la conversación en rojo. */
.co-msj.in-burbuja { outline-offset: 2px; }
/* «Correo nuevo» y «Nunca contestar a este remitente». */
.co-nuevo { display: flex; flex-direction: column; gap: 12px; }
.co-nuevo .campo { margin: 0; }
.co-nuevo textarea { min-height: 170px; resize: vertical; }
.co-nuevo-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--tlc-blue-claro); color: #1F4E85; font-size: 12.5px; line-height: 1.5; }
.co-nuevo-nota .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.co-nuevo-nota b { overflow-wrap: anywhere; }
.co-nuevo .co-editor-meta { margin: 0; }
.co-nunca { display: flex; flex-direction: column; gap: 10px; }
.co-nunca p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tlc-tinta-2); }
.co-nunca-opciones { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.co-nunca-op { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--tlc-border); background: #fff; cursor: pointer; font-size: 13.5px; }
.co-nunca-op:has(input:checked) { border-color: var(--tlc-navy); box-shadow: inset 0 0 0 1px var(--tlc-navy); }
.co-nunca-op b { overflow-wrap: anywhere; }
/* Ficha › Correos: la conversación en rojo. */
.fi-co-hilo.rojo { border-color: var(--tlc-persona-borde, #EFC2BF); background: var(--tlc-persona-fondo, #FBE9E8); box-shadow: inset 4px 0 0 var(--tlc-persona, #B83B36); }
/* Memoria · Correos › Ajustes del bot: la tarjeta «Solo lo contesta una persona» (antes «Nunca contestar»). */
.ca-solo .ayuda, .ca-solo .sf-nota { margin: 0; }
.ca-solo .btn { align-self: flex-start; }

/* Correos: responsive */
@media (max-width: 1180px) {
  .co-bandeja { grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); }
  .co-carpetas { padding: 12px 10px 10px; }
  .co-pestana { gap: 6px; padding: 0 8px; font-size: 13px; }
}
@media (max-width: 860px) {
  .co-bandeja { display: block; height: auto; overflow: visible; overflow: clip; border-radius: var(--radio); }
  .co-bandeja::before { border-radius: var(--radio) var(--radio) 0 0; }
  .co-bandeja[data-movil="lista"] .co-hilo { display: none; }
  .co-bandeja[data-movil="hilo"] .co-lista, .co-bandeja[data-movil="hilo"] .co-carpetas { display: none; }
  .co:has(.co-bandeja[data-movil="hilo"]) .co-estado, .co:has(.co-bandeja[data-movil="hilo"]) .co-avisos { display: none; }
  .co-carpetas { border-right: 0; border-radius: var(--radio) var(--radio) 0 0; }
  .co-lista { border-right: 0; border-radius: 0 0 var(--radio) var(--radio); }
  .co-lista-cab { padding: 14px 10px 11px 14px; }
  .co-items, .co-lista-cuerpo { overflow: visible; }
  .co-hilo { border-radius: var(--radio); background: var(--tlc-fondo); }
  .co-hilo-marco { overflow: visible; }
  .co-hilo-cab { position: sticky; top: var(--barra-real, 76px); z-index: 3; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radio) var(--radio) 0 0; }
  .co-atras { display: inline-flex; }
  .co-hilo-titulo { font-size: 17px; }
  .co-hilo-enlaces { width: 100%; padding-left: 44px; }
  .co-control { padding: 10px 12px; }
  .co-control-fila .co-btn-control { flex: 1 1 100%; justify-content: center; }
  /* «⋯» es el último botón de un renglón alineado a la derecha: el menú abre hacia la izquierda (con left: 0 salía de la
     pantalla a 390 px y «Solo lo contesta una persona…» no se podía tocar). */
  .co-mas-hilo .co-mas-menu { left: auto; right: 0; width: min(290px, calc(100vw - 48px)); }
  .co-hilo-cuerpo { overflow: visible; padding: 14px 12px 22px; }
  .co-msj { padding: 12px 13px 14px; }
  .co-msj.sale { margin-left: 14px; }
  .co-msj-chips { width: 100%; justify-content: flex-start; margin-left: 34px; }
  .co-ia-cab { align-items: flex-start; }
  .co-conf { margin-left: 0; width: 100%; }
  .co-conf-barra { flex: 1; }
  .co-editor-hint { display: none; }
  .co-hilo-marco.con-barra { padding-bottom: 0; }
  .co-hilo-barra { position: sticky; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-radius: 0 0 var(--radio) var(--radio); }
  .co-hilo-barra-btns { flex: 1 1 100%; }
  .co-hilo-barra-btns .btn { flex: 1 1 auto; padding: 0 12px; }
  .co-hilo-barra .co-resolver { order: 3; margin-left: 0; flex-basis: 100%; height: 34px; }
  .co-ia-mini span { display: none; }
  .co-ia-mini { padding: 0 8px; }
  .co-conf-ley { text-align: left; }
  /* Franja de estado compacta: buzón + «Revisar» en una fila; bot y modo en otra; los pasos al final */
  .co-estado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; gap: 10px 12px; }
  .co-estado-buzon { grid-column: 1 / 3; grid-row: 1; flex: none; }
  .co-estado-ic { width: 36px; height: 36px; border-radius: 11px; }
  .co-estado-acc { grid-column: 3; grid-row: 1; margin-left: 0; justify-self: end; }
  .co-estado-acc .btn { width: 36px; padding: 0; justify-content: center; }
  .co-estado-acc .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* «Escribir correo» conserva su texto (un lápiz solo junto a la dirección se leía como «editar el buzón»). */
  .co-estado-acc .co-escribir { width: auto; padding: 0 12px; }
  .co-estado-acc .co-escribir span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .co-estado-bot { grid-column: 1; grid-row: 2; }
  .co-estado-modo { grid-column: 2 / -1; grid-row: 2; }
  .co-estado-tope { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: baseline; gap: 8px; }
  .co-estado-modo, .co-estado-tope, .co-estado-bot { padding-left: 0; border-left: 0; min-width: 0; gap: 3px; }
  .co-estado-bot, .co-estado-modo { padding-top: 10px; border-top: 1px solid var(--tlc-border-2); align-self: stretch; }
  .co-modo { max-width: 100%; height: 30px; }
  .co-modo em { display: none; }
  .co-modo span { overflow: hidden; text-overflow: ellipsis; }
  .co-pasos { grid-column: 1 / -1; margin: 0; padding: 10px 0 0; }
  .co-pasos-txt { flex: 1 1 200px; }
  .co-pasos-acc { margin-left: auto; }
  .co-pasos-detalle li { flex-wrap: wrap; }
  .co-pasos-detalle li .btn { width: 100%; }
  .co-aviso { flex-wrap: wrap; align-items: flex-start; }
  .co-aviso-acc { width: 100%; padding-left: 50px; }
  .co-sim-chips { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Celular: «Escribir correo» y «Revisar ahora» en su propio renglón, con su texto (el buzón usa todo el ancho). */
  .co-estado-buzon { grid-column: 1 / -1; }
  .co-estado-acc { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; flex-wrap: nowrap; }
  .co-estado-acc .btn { flex: 1 1 0; min-width: 0; width: auto; padding: 0 10px; }
  .co-estado-acc .btn span { position: static; width: auto; height: auto; overflow: hidden; clip: auto; text-overflow: ellipsis; }
  .co-estado-bot, .co-estado-modo { grid-row: 3; }
  .co-estado-tope { grid-row: 4; }
  /* Las dos carpetas: dos chips a todo lo ancho (sin ícono, para que quepan el texto y el número). */
  .co-carpetas { padding: 10px; }
  .co-pestana { min-height: 42px; padding: 0 6px; font-size: 13px; }
  .co-pestana .ico { display: none; }
  .co-lista-cab { padding: 12px 10px 10px 14px; }
  .co-mostrar { flex: 1 1 100%; order: 3; }
  .co-mostrar .select { flex: 1; max-width: none; }
}

/* ---------- Pagos (js/vistas/pagos.js) ---------- */
.pg { display: flex; flex-direction: column; gap: 16px; }
.pg-aviso { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px; padding: 15px 20px 17px 16px; border-radius: var(--radio); background: linear-gradient(105deg, var(--tlc-navy) 0%, #22346E 55%, var(--tlc-navy-3) 100%); color: rgba(255, 255, 255, .8); box-shadow: 0 14px 30px -20px rgba(20, 32, 72, .8); }
.pg-aviso::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-claro); background-size: 34.64px 60px; mask-image: linear-gradient(90deg, transparent 20%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
.pg-aviso::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.pg-aviso-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(240, 179, 35, .16); color: var(--tlc-gold); }
.pg-aviso-ic .ico { width: 21px; height: 21px; }
.pg-aviso > div > b { display: block; font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.35; }
.pg-aviso > div > span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
.pg-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--tlc-border-2); }
.pg-pestanas { border-bottom: 0; }
.pg-pestanas button .ico { color: var(--tlc-tinta-3); }
.pg-pestanas button[aria-selected="true"] .ico { color: var(--tlc-blue); }
@media (max-width: 640px) { .pg-pestanas { gap: 0; } .pg-pestanas button { padding: 11px 9px; gap: 5px; } .pg-pestanas button .ico { display: none; } }
.pg-total { padding-bottom: 11px; font-size: 12.5px; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; }
.pg-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pg-tarjeta { display: flex; flex-direction: column; padding: 12px; transition: box-shadow var(--t), border-color var(--t); }
.pg-tarjeta:hover { box-shadow: var(--sombra-m); }
.pg-tarjeta.resaltada { border-color: var(--tlc-gold); box-shadow: 0 0 0 3px rgba(240, 179, 35, .35), var(--sombra-m); }
.pg-tarjeta.e-verificado .pg-vista, .pg-tarjeta.e-rechazado .pg-vista { aspect-ratio: 16 / 7; }
.pg-vista { position: relative; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--tlc-border); background: var(--tlc-cream-2); background-image: var(--hex-tenue); background-size: 34.64px 60px; color: var(--tlc-tinta-3); }
button.pg-vista { cursor: zoom-in; }
.pg-vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pg-vista-cargando, .pg-vista.sin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; text-align: center; padding: 10px; }
.pg-vista .ico-xl { color: var(--tlc-beige); }
.pg-vista-lupa { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(28, 43, 94, .9); color: #fff; font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity var(--t), transform var(--t); }
.pg-vista-lupa .ico { width: 14px; height: 14px; color: var(--tlc-gold); }
.pg-vista:hover .pg-vista-lupa, .pg-vista:focus-visible .pg-vista-lupa { opacity: 1; transform: none; }
@media (hover: none) { .pg-vista-lupa { opacity: 1; transform: none; } }
.pg-info { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 6px 4px; }
.pg-quien { display: flex; align-items: center; gap: 10px; }
.pg-quien > div { flex: 1; min-width: 0; line-height: 1.3; }
.pg-quien b { display: block; font-size: 14px; font-weight: 700; color: var(--tlc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-quien small { display: block; font-size: 12px; color: var(--tlc-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-monto { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.pg-monto .num { font-family: var(--tlc-titulo); font-size: 28px; font-weight: 800; letter-spacing: -.015em; color: var(--tlc-navy); line-height: 1.1; }
.pg-monto small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tlc-tinta-2); }
.pg-monto small .ico { color: var(--tlc-blue); }
.pg-datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 12px; border-radius: 12px; background: #FDFBF7; border: 1px solid var(--tlc-border-2); }
.pg-datos dt { font-family: var(--tlc-titulo); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.pg-datos dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--tlc-navy); overflow-wrap: anywhere; }
.pg-datos dd.mono { font-family: var(--tlc-mono); font-size: 12.5px; }
.pg-prueba, .pg-motivo, .pg-ok { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 1.45; }
.pg-prueba { color: var(--tlc-tinta-3); }
.pg-motivo { color: #8F2D29; }
.pg-ok { color: var(--tlc-exito); font-weight: 600; }
.pg-prueba .ico, .pg-motivo .ico, .pg-ok .ico { flex: none; margin-top: 2px; }
.pg-enlaces { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: auto; font-size: 12.5px; }
.pg-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; padding: 12px 4px 2px; border-top: 1px solid var(--tlc-border-2); }
.pg-acciones .btn-primario { flex: 1 1 auto; max-width: 220px; }
.pg-form .pg-resumen { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); }
.pg-resumen > div { flex: 1; min-width: 0; line-height: 1.3; }
.pg-resumen b { display: block; color: var(--tlc-navy); font-size: 14.5px; }
.pg-resumen small { display: block; font-size: 12px; color: var(--tlc-tinta-3); }
.pg-resumen-monto { font-family: var(--tlc-titulo); font-size: 20px; font-weight: 800; color: var(--tlc-navy); }
.pg-casilla { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--tlc-border); background: #fff; cursor: pointer; }
.pg-casilla:has(input:checked) { border-color: var(--tlc-blue); background: var(--tlc-blue-claro); }
.pg-casilla:has(input:disabled) { cursor: not-allowed; opacity: .75; }
.pg-casilla input { margin-top: 2px; flex: none; }
.pg-casilla b { display: block; font-size: 13px; color: var(--tlc-navy); }
.pg-casilla small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--tlc-tinta-3); line-height: 1.4; }
@media (max-width: 640px) {
  .pg-aviso { align-items: flex-start; padding: 14px 14px 16px; }
  .pg-rejilla { grid-template-columns: minmax(0, 1fr); }
  .pg-barra { align-items: stretch; }
  .pg-total { padding: 0 0 10px; }
  .pg-acciones .btn { flex: 1 1 0; max-width: none; }
}

/* Pagos: vista previa del correo (bienvenida o rechazo) con «Para:» y texto editable */
.pg-correo { overflow: hidden; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; box-shadow: var(--sombra-s); }
.pg-correo-meta { margin: 0; padding: 4px 14px; background: var(--tlc-cream-2); border-bottom: 1px solid var(--tlc-border-2); }
.pg-correo-meta > div { display: flex; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.pg-correo-meta > div + div { border-top: 1px solid var(--tlc-border-2); }
.pg-correo-meta dt { width: 50px; flex: none; color: var(--tlc-tinta-3); }
.pg-correo-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--tlc-tinta-2); }
.pg-correo-meta dd b { color: var(--tlc-navy); }
.pg-sin { color: var(--tlc-peligro); font-weight: 700; }
.pg-correo-texto { display: block; width: 100%; min-height: 150px; padding: 12px 14px; border: 0; resize: vertical; background: #fff; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--tlc-navy); }
.pg-correo-texto:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(46, 109, 180, .4); }
.pg-correo-firma { padding: 10px 14px 12px; border-top: 1px dashed var(--tlc-border); background: #FDFBF7; white-space: pre-line; font-size: 12.5px; line-height: 1.55; color: var(--tlc-tinta-3); }
.pg-correo-texto[readonly] { background: #FDFCF9; color: var(--tlc-tinta-2); resize: none; cursor: default; }
.pg-nota { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }
.pg-nota .ico { flex: none; margin-top: 2px; color: var(--tlc-blue); }
.pg-bloqueo { overflow-wrap: anywhere; }
.pg-bienvenida, .pg-mensaje { display: flex; flex-direction: column; gap: 10px; }
.pg-bienvenida[hidden], .pg-mensaje[hidden] { display: none; }

/* ---------- Panel · correos (js/vistas/panel.js) ---------- */
.pn-co-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pn-co-cab .seccion-titulo { margin: 0; }
.pn-co-cab .seccion-titulo .ico { color: var(--tlc-blue); }
.pn-co-cab .enlace { font-size: 12.5px; }
.pn-co-kpi-enlace { display: block; color: inherit; text-decoration: none; border-radius: var(--radio); }
.pn-co-kpi-enlace:hover { text-decoration: none; }
.pn-co-kpi-enlace .kpi { height: 100%; transition: box-shadow var(--t), border-color var(--t); }
.pn-co-kpi-enlace:hover .kpi { box-shadow: var(--sombra-m); border-color: #DDCDA9; }
.pn-co-kpi-enlace.con-pagos .kpi { background: var(--tlc-gold-claro); border-color: #F3DD9E; }
.pn-co-kpi-enlace.con-pagos .kpi-ic { background: #fff; color: var(--tlc-gold-osc); border-color: #F3DD9E; }
.pn-co-kpi-enlace.con-pagos .kpi-pie { color: #6B4B05; }
.pn-co-fila .tarjeta-cuerpo.sin-pad { padding: 8px 0 6px; }
.pn-co-lista .info small { max-width: 100%; }
.pn-co-pagos-total { display: flex; flex-direction: column; padding: 10px 20px 12px; border-bottom: 1px solid var(--tlc-border-2); }
.pn-co-pagos-total .num { font-family: var(--tlc-titulo); font-size: 26px; font-weight: 800; color: var(--tlc-navy); line-height: 1.15; }
.pn-co-pagos-total small { font-size: 12px; color: var(--tlc-tinta-3); }
.pn-co-monto { font-size: 13px; font-weight: 700; color: var(--tlc-navy); }
.pn-rend .segmento button { height: 30px; padding: 0 12px; font-size: 12px; }
@media (max-width: 1100px) {
  .pn-co-kpis .kpi { padding: 14px 14px 12px; }
}

/* ---------- Ficha · correos y perfil (js/vistas/ficha.js) ---------- */
.fi-perfil-rejilla { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fi-perfil-dato { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tlc-border); }
.fi-perfil-dato dt { display: flex; align-items: center; gap: 6px; font-family: var(--tlc-titulo); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.fi-perfil-dato dt .ico { color: var(--tlc-blue); }
.fi-perfil-dato dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--tlc-navy); overflow-wrap: anywhere; }
.fi-perfil-dato dd.fi-perfil-fuente { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--tlc-tinta-3); }
.fi-perfil-fuente .ico { width: 12px; height: 12px; }
.fi-perfil-fuente.f-sofia .ico { color: var(--tlc-navy); }
.fi-perfil-fuente.f-correo .ico { color: var(--tlc-blue); }
.fi-perfil-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fi-perfil-chips li { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 10px; border-radius: 999px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); font-size: 11.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.fi-perfil-chips li .ico { width: 12px; height: 12px; color: var(--tlc-blue); }
.fi-chip-ia { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.fi-chip-ia .ico { width: 11px; height: 11px; color: var(--tlc-gold); }
.fi-ev-correo small .co-cat { vertical-align: 1px; }
.fi-co-hilo, .fi-co-pago { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; text-align: left; color: inherit; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.fi-co-pago { align-items: center; background: #FFFCF4; }
.fi-co-hilo:hover, .fi-co-pago:hover { border-color: #DDCDA9; box-shadow: var(--sombra-m); transform: translateY(-1px); }
.fi-co-hilo-ic, .fi-co-pago-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tlc-blue-claro); color: var(--tlc-blue); }
.fi-co-hilo-ic.sale { background: var(--tlc-navy); color: var(--tlc-gold); }
.fi-co-pago-ic { border-radius: 11px; background: var(--tlc-gold-claro); color: var(--tlc-gold-osc); }
.fi-co-hilo-ic .ico, .fi-co-pago-ic .ico { width: 17px; height: 17px; }
.fi-co-hilo-txt, .fi-co-pago-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fi-co-hilo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fi-co-hilo-cab b { font-size: 13.5px; color: var(--tlc-navy); overflow-wrap: anywhere; }
.fi-co-hilo-cab .gris { font-size: 11.5px; }
.fi-co-hilo-ext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-2); }
.fi-co-hilo .fi-pildoras { margin-top: 2px; align-items: center; }
.fi-co-hilo .fi-pildoras .gris { display: inline-flex; align-items: center; gap: 4px; }
.fi-co-pago-txt b { font-family: var(--tlc-titulo); font-size: 16px; font-weight: 800; color: var(--tlc-navy); }
.fi-co-pago-txt small { font-size: 12px; color: var(--tlc-tinta-3); }
.fi-co-pago .fi-chev { margin-top: 0; }
@media (max-width: 640px) {
  .fi-perfil-rejilla { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Menú multicanal y tarjeta de canales (js/app.js) ---------- */
/* 14 secciones en 4 grupos: un poco más compacto para que quepa a 1440×900 sin desplazar */
.lateral-marca { padding-top: 14px; }
.lateral-marca .capsula-logo img { height: 50px; }
.nav-grupo { padding: 11px 12px 4px; }
.nav-item { height: 36px; }
/* «Pronto»: botón enfocable (aria-disabled) que explica el canal; se ve atenuado pero responde al clic y al teclado */
.nav-pronto { width: 100%; border: 0; background: transparent; text-align: left; color: var(--tlc-tinta-3); cursor: help; }
.nav-pronto:hover { background: var(--tlc-cream-2); color: var(--tlc-tinta-2); }
.nav-pronto .ico { color: var(--tlc-tinta-4); }
.nav-pronto:hover .ico { color: var(--tlc-tinta-3); }
.nav-chip-pronto { margin-left: auto; height: 20px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--tlc-tinta-3); background: #F4F0E7; border: 1px dashed #DCCFB2; }
.int-falta { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.int-falta li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.int-falta .ico { color: var(--tlc-gold-osc); margin-top: 2px; flex: none; }


/* ---------- Sofía · Voz: resumen de lo que sabe (js/vistas/sofia.js) ---------- */
.sf-base-temas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-base-temas .chip { max-width: 100%; height: 28px; font-size: 12px; background: #FDFBF7; }
.sf-base-temas .chip .ico { color: var(--tlc-exito); }
.sf-base-mas { color: var(--tlc-navy); }
.sf-base-pend { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 8px 11px; border-radius: 10px; background: var(--tlc-gold-claro); color: #6B4B05; font-size: 12.5px; line-height: 1.45; }
.sf-base-pend .ico { margin-top: 1px; flex: none; }
.sf-base-nota { margin-top: 12px; }
.sf-base-btn { margin-top: 14px; }
.sf-base-btn .ico:last-child { width: 14px; height: 14px; color: var(--tlc-tinta-3); transition: transform var(--t-rapida); }
.sf-base-btn:hover .ico:last-child { transform: translateX(2px); }


/* Etiqueta de sección pequeña (la usan Correos y Memoria) */
.etiqueta-sec { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tlc-tinta-3); font-weight: 700; font-family: var(--tlc-titulo); }


/* ---------- Correo automático (js/vistas/correo-ajustes.js) ---------- */
/* Reutiliza .sf-barra (cambios sin guardar), .sf-contador y .sf-prog-form de Sofía · Voz */
.ca { display: flex; flex-direction: column; gap: 16px; }
.ca-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 24px; padding: 22px 24px 24px; }
.ca-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-tenue); background-size: 34.64px 60px; mask-image: linear-gradient(100deg, transparent 45%, #000 100%); -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 100%); }
.ca-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.ca-hero-izq { flex: 1; min-width: 0; }
.ca-hero-txt { margin-top: 12px; max-width: 680px; font-size: 13.5px; line-height: 1.6; color: var(--tlc-tinta-2); }
.ca-hero-txt a { font-weight: 600; }
.ca-hero-der { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ca-hero-der { flex-direction: column; align-items: stretch; }
.ca-bot { display: flex; align-items: center; padding: 10px 14px; background: #fff; border: 1px solid var(--tlc-border); border-radius: 14px; box-shadow: var(--sombra); }
.ca-estado { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; }
.ca-estado-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ca-estado-item a { font-weight: 600; }
.ca-email { font-weight: 700; overflow-wrap: anywhere; }
.estado-punto.ca-falta { --punto: var(--tlc-gold); color: var(--tlc-gold-osc); }

/* Modos de respuesta */
.ca-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ca-modo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 16px 14px; border-radius: 16px; border: 1.5px solid var(--tlc-border); background: #fff; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t); }
.ca-modo:hover:not([aria-disabled="true"]) { border-color: #D9C69C; box-shadow: var(--sombra-m); transform: translateY(-1px); }
.ca-modo.activo, .ca-modo.activo:hover { border-color: var(--tlc-navy); box-shadow: 0 0 0 1px var(--tlc-navy), 0 16px 32px -20px rgba(20, 32, 72, .6); background: linear-gradient(180deg, #F5F7FC 0%, #FFFFFF 55%); transform: none; }
.ca-modo[aria-disabled="true"] { cursor: not-allowed; }
.ca-modo.guardando { pointer-events: none; }
.ca-modo.guardando .ca-modo-marca { border-color: var(--tlc-border); border-top-color: var(--tlc-navy); background: transparent; animation: girar .8s linear infinite; }
.ca-modo.guardando .ca-modo-marca .ico { display: none; }
.ca-modo-cab { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.ca-modo-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); color: var(--tlc-navy); transition: background var(--t), color var(--t); }
.ca-modo-ic .ico { width: 20px; height: 20px; }
.ca-modo.activo .ca-modo-ic { background: var(--tlc-navy); border-color: var(--tlc-navy); color: var(--tlc-gold); }
.ca-modo-marca { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tlc-border); display: grid; place-items: center; background: #fff; }
.ca-modo-marca .ico { width: 13px; height: 13px; stroke-width: 2.8; }
.ca-modo.activo .ca-modo-marca { background: var(--tlc-navy); border-color: var(--tlc-navy); color: var(--tlc-gold); }
.ca-modo-tit { margin-top: 6px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 16.5px; line-height: 1.25; color: var(--tlc-navy); }
.ca-modo-etq { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--tlc-gold-claro); color: #7A5605; font-size: 11px; font-weight: 700; }
.ca-modo-txt { font-size: 12.8px; line-height: 1.55; color: var(--tlc-tinta-2); }
.ca-modo-puntos { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ca-modo-puntos span { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }
.ca-modo-puntos .ico { width: 13px; height: 13px; margin-top: 2px; flex: none; color: var(--tlc-exito); }
.ca-modo-pie { margin-top: auto; padding-top: 10px; width: 100%; border-top: 1px dashed var(--tlc-border); font-size: 12.5px; font-weight: 700; }
.ca-modo-actual { display: inline-flex; align-items: center; gap: 6px; color: var(--tlc-navy); }
.ca-modo-actual .ico { color: var(--tlc-exito); }
.ca-modo-espera { font-weight: 600; color: var(--tlc-tinta-3); }
.ca-modo-usar { display: inline-flex; align-items: center; gap: 6px; color: var(--tlc-blue); }
.ca-modo-usar .ico { transition: transform var(--t-rapida); }
.ca-modo:hover .ca-modo-usar .ico { transform: translateX(3px); }
/* Explicación del modo actual */
.ca-explica { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); }
.ca-explica.automatico { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(105deg, var(--tlc-navy) 0%, #22346E 60%, var(--tlc-navy-3) 100%); border-color: transparent; color: #fff; }
.ca-explica.automatico::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-claro); background-size: 34.64px 60px; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.ca-explica.automatico :focus-visible { outline-color: var(--tlc-gold); }
.ca-explica-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--tlc-border); color: var(--tlc-navy); }
.ca-explica.automatico .ca-explica-ic { background: rgba(240, 179, 35, .16); border-color: transparent; color: var(--tlc-gold); }
.ca-explica-txt { flex: 1; min-width: 0; }
.ca-explica-txt b { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 14.5px; line-height: 1.35; color: var(--tlc-navy); }
.ca-explica-txt span { display: block; margin-top: 2px; font-size: 12.8px; line-height: 1.5; color: var(--tlc-tinta-2); }
.ca-explica.automatico .ca-explica-txt b { color: #fff; }
.ca-explica.automatico .ca-explica-txt span { color: rgba(255, 255, 255, .8); }
.ca-faltan { margin-top: 12px; }
.ca-faltan > div { flex: 1; min-width: 0; }
.ca-faltan ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.ca-faltan a { font-weight: 600; color: #5E4507; text-decoration: underline; text-underline-offset: 2px; }

/* Ajustes */
.ca-rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ca-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ca-pila { display: flex; flex-direction: column; gap: 18px; }
.ca-umbral-valor { font-size: 12.5px; color: var(--tlc-tinta-2); white-space: nowrap; }
.ca-umbral-valor b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14.5px; color: var(--tlc-navy); }
.ca-rango { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 2px 0 0; background: transparent; cursor: pointer; }
.ca-rango::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--tlc-navy) 0 var(--lleno, 55%), #EFE8D9 var(--lleno, 55%) 100%); }
.ca-rango::-moz-range-track { height: 6px; border-radius: 999px; background: #EFE8D9; }
.ca-rango::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--tlc-navy); }
.ca-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--tlc-navy); box-shadow: 0 2px 6px rgba(28, 43, 94, .28); }
.ca-rango::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--tlc-navy); }
.ca-rango:disabled { cursor: not-allowed; opacity: .55; }
.ca-rango-marcas { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--tlc-tinta-3); }
.ca-sufijo { position: relative; }
.ca-sufijo .input { padding-right: 64px; }
.ca-sufijo span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--tlc-tinta-3); pointer-events: none; }
.ca-guardas { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; border-radius: 12px; background: #FDFBF7; border: 1px dashed var(--tlc-border); }
.ca-guardas li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-2); }
.ca-guardas .ico { margin-top: 2px; flex: none; color: var(--tlc-exito); }
.ca-enviar { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ca-enviar > .select { align-self: stretch; }
.ca-enviar .ayuda { font-size: 11.5px; line-height: 1.4; color: var(--tlc-tinta-3); }
.ca-enviar-fila { display: flex; gap: 8px; align-self: stretch; }
.ca-enviar-fila .select { flex: 1; min-width: 0; }
.ca-firma { min-height: 100px; }
/* Vista previa de una respuesta */
.ca-correo { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; box-shadow: var(--sombra-s); }
.ca-correo-cab { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--tlc-cream-2); border-bottom: 1px solid var(--tlc-border-2); font-size: 12.5px; }
.ca-correo-cab > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding-right: 0; }
.ca-correo-cab > div:first-child { padding-right: 150px; }
.ca-correo-cab span { width: 50px; flex: none; font-size: 11.5px; color: var(--tlc-tinta-3); }
.ca-correo-cab b { font-weight: 700; color: var(--tlc-navy); white-space: nowrap; }
.ca-correo-cab small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--tlc-tinta-2); }
.ca-correo-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; font-size: 13px; line-height: 1.6; color: var(--tlc-tinta-2); }
.ca-correo-gris { padding: 6px 10px; border-radius: 8px; background: #F7F4EC; font-size: 12.5px; font-style: italic; color: var(--tlc-tinta-3); }
.ca-correo-firma { padding-top: 8px; border-top: 1px dashed var(--tlc-border); white-space: pre-line; color: var(--tlc-navy); }
.ca-correo-chip { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-size: 11px; font-weight: 700; }
.ca-correo-chip .ico { color: var(--tlc-gold); }
.ca-correo-chip.borrador { background: var(--tlc-gold-claro); color: #7A5605; }
.ca-correo-chip.borrador .ico { color: #7A5605; }
/* Avanzado */
.ca-avanzado > summary { list-style: none; cursor: pointer; padding-bottom: 18px; border-radius: var(--radio); }
.ca-avanzado > summary::-webkit-details-marker { display: none; }
.ca-avanzado > summary:hover h3 { color: var(--tlc-blue); }
.ca-avanzado[open] > summary { padding-bottom: 0; }
.ca-chevron { color: var(--tlc-tinta-3); transition: transform var(--t) var(--curva); }
.ca-avanzado[open] .ca-chevron { transform: rotate(180deg); }
.ca-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-chips .chip { max-width: 100%; height: auto; min-height: 30px; padding: 4px 8px 4px 11px; }
.ca-chips .chip .ico:first-child { color: var(--tlc-blue); flex: none; }

@media (max-width: 1100px) {
  .ca-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ca-modos { grid-template-columns: minmax(0, 1fr); }
  .ca-modo { display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; column-gap: 12px; row-gap: 4px; align-items: start; }
  .ca-modo-cab { display: contents; }
  .ca-modo-ic { grid-row: 1 / span 3; }
  .ca-modo-marca { grid-column: 3; grid-row: 1; }
  .ca-modo-tit { grid-column: 2; grid-row: 1; margin-top: 2px; }
  .ca-modo-etq { grid-column: 2; justify-self: start; }
  .ca-modo-txt, .ca-modo-puntos, .ca-modo-pie { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .ca-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 16px 20px; }
  .ca-hero-der { justify-content: stretch; }
  /* .ca-hero-der es columna: una base de 200 px se volvía altura (botón ovalado de 200 px). Solo ancho completo. */
  .ca-hero-der .btn { flex: 0 0 auto; width: 100%; }
  .ca-bot { flex: 0 0 auto; }
  .ca-explica { flex-wrap: wrap; }
  .ca-explica .btn { width: 100%; }
}
@media (max-width: 640px) {
  .ca-modo-puntos { display: none; }
  .ca-modo { padding: 14px; }
  .ca-modo-ic { grid-row: 1 / span 2; }
  .ca-correo-cab > div:first-child { padding-right: 0; flex-wrap: wrap; row-gap: 0; }
  .ca-correo-chip { position: static; margin: 10px 14px 0; }
}


/* ---------- Configuración: secciones, Correo (Gmail) e Inteligencia artificial (js/vistas/configuracion.js) ---------- */
.cf-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cf-tab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--tlc-border); background: #fff; color: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra-s); transition: border-color var(--t-rapida), box-shadow var(--t-rapida), background var(--t-rapida); }
.cf-tab:hover { border-color: #D9C69C; box-shadow: var(--sombra); }
.cf-tab.activo { background: var(--tlc-navy); border-color: var(--tlc-navy); box-shadow: 0 12px 26px -16px rgba(20, 32, 72, .75); }
.cf-tab.activo:focus-visible { outline-color: var(--tlc-gold); }
.cf-tab-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); color: var(--tlc-navy); }
.cf-tab-ic .ico { width: 18px; height: 18px; }
.cf-tab.activo .cf-tab-ic { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: var(--tlc-gold); }
.cf-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-tab-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); }
.cf-tab-det { font-weight: 700; color: var(--tlc-tinta-3); }
.cf-tab.activo .cf-tab-txt b { color: #fff; }
.cf-tab.activo .cf-tab-det { color: rgba(255, 255, 255, .72); }
.cf-tab-estado { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--tlc-tinta-3); }
.cf-tab-estado i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--tlc-tinta-4); }
.cf-tab-estado.ok i { background: #34A36B; }
.cf-tab-estado.alerta i { background: var(--tlc-gold); }
.cf-tab-estado.peligro { color: var(--tlc-peligro); font-weight: 700; }
.cf-tab-estado.peligro i { background: var(--tlc-peligro); }
.cf-tab.activo .cf-tab-estado { color: rgba(255, 255, 255, .78); }
.cf-tab.activo .cf-tab-estado.peligro { color: #FFC2BF; }
.cf-panel { display: flex; flex-direction: column; gap: 16px; outline: none; animation: subir var(--t) var(--curva) both; }
.cf-urls.apilado { grid-template-columns: minmax(0, 1fr); }
.cf-urls.apilado .cf-ejemplo { border-left: 0; padding-left: 0; border-top: 1px solid var(--tlc-border-2); padding-top: 16px; }
.cf-rejilla-cuenta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cf-checks em a { font-weight: 700; }
/* Avisos: instalación, regreso de Google, pausa, alarma grande */
.cf-retorno { align-items: center; }
.cf-retorno-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cf-alarma { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 20px 18px 24px; border-radius: var(--radio); background: #FFF4F3; border: 1.5px solid #E9A9A6; box-shadow: 0 14px 30px -20px rgba(184, 59, 54, .55); }
.cf-alarma::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tlc-peligro); }
.cf-alarma-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--tlc-peligro); color: #fff; }
.cf-alarma-ic .ico { width: 24px; height: 24px; }
.cf-alarma-txt { flex: 1; min-width: 0; }
.cf-alarma-txt h3 { font-size: 18px; font-weight: 800; color: #8F2D29; }
.cf-alarma-txt p { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: #6E2724; }
.cf-alarma-txt .cf-alarma-det { font-size: 12.5px; color: #7E3330; }
.cf-alarma-acc { display: flex; flex-wrap: wrap; gap: 8px; }
/* Guía de Google */
.cf-guia-pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.55; color: var(--tlc-tinta-2); }
.cf-guia-pasos li::marker { color: var(--tlc-gold-osc); font-weight: 700; }
.cf-guia-pasos b { color: var(--tlc-navy); }
.cf-guia-pasos a { font-weight: 600; white-space: nowrap; }
.cf-guia-pasos a .ico { display: inline-block; width: 13px; height: 13px; margin-left: 3px; vertical-align: -2px; }
.cf-guia .cf-guia-pasos { margin: 0; }
.cf-copiable { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 3px 3px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--tlc-border); }
.cf-copiable .mono { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--tlc-navy); }
.cf-plegable { border: 1px solid var(--tlc-border); border-radius: 14px; background: #FDFBF7; }
.cf-plegable > summary, .cf-guia-plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--tlc-navy); border-radius: 12px; }
.cf-plegable > summary { padding: 12px 14px; }
.cf-guia-plegable > summary { color: var(--tlc-blue); }
.cf-plegable > summary::-webkit-details-marker, .cf-guia-plegable > summary::-webkit-details-marker { display: none; }
.cf-plegable > summary .ico, .cf-guia-plegable > summary .ico { transition: transform var(--t) var(--curva); }
.cf-plegable[open] > summary .ico, .cf-guia-plegable[open] > summary .ico { transform: rotate(90deg); }
.cf-plegable > summary:hover, .cf-guia-plegable > summary:hover { color: var(--tlc-blue); }
.cf-guia-plegable[open] > .cf-pasos { margin-top: 18px; }
.cf-plegable-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.cf-plegable-cuerpo .ayuda { font-size: 12px; color: var(--tlc-tinta-3); }
.cf-paso-opcional .cf-paso-num { border-style: dashed; }
.cf-opc { --fondo: var(--tlc-cream-2); --texto: var(--tlc-tinta-2); --punto: var(--tlc-beige); }
.cf-google-btn { height: 46px; padding: 0 24px; font-size: 14.5px; }
.cf-google-btn .ico { width: 19px; height: 19px; }
/* Estado del buzón */
.cf-buzon-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--tlc-border-2); }
.cf-buzon-cab .cf-asistente-txt b { overflow-wrap: anywhere; }
.cf-dato-barra { flex-wrap: wrap; }
.cf-dato-barra .mini-barra { flex-basis: 100%; margin-top: 2px; }
.cf-txt-alerta { color: var(--tlc-gold-osc) !important; }
.cf-lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cf-lista-check li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--tlc-tinta-2); }
.cf-lista-check .ico { margin-top: 3px; flex: none; color: var(--tlc-blue); }
.cf-lista-check b { color: var(--tlc-navy); }
.cf-lista-check a { font-weight: 600; }
.cf-lista-check li.no .ico { color: var(--tlc-exito); }
/* Plegable de spam */
.cf-spam > summary { list-style: none; cursor: pointer; padding-bottom: 18px; border-radius: var(--radio); }
.cf-spam > summary::-webkit-details-marker { display: none; }
.cf-spam > summary:hover h3 { color: var(--tlc-blue); }
.cf-spam[open] > summary { padding-bottom: 0; }
.cf-spam a { overflow-wrap: anywhere; }
.cf-spam:not([open]) > :not(summary) { display: none; }
.cf-spam-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); color: var(--tlc-exito); }
.cf-spam-ic .ico { width: 16px; height: 16px; }
.cf-spam-tit { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cf-chevron { color: var(--tlc-tinta-3); transition: transform var(--t) var(--curva); }
.cf-spam[open] .cf-chevron { transform: rotate(180deg); }
/* URI de redirección: se ve completa (Google exige que coincida letra por letra) */
.cf-uri { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: #FDFBF7; border: 1px solid var(--tlc-border); }
.cf-uri-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.5; color: var(--tlc-navy); user-select: all; }
.cf-uri .btn { flex: none; }
.cf-paso-cuerpo > .ayuda { display: block; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }
@media (max-width: 640px) {
  .cf-uri { flex-direction: column; align-items: stretch; padding: 12px; }
  .cf-uri .btn { width: 100%; justify-content: center; }
}
/* Inteligencia artificial: un mismo modelo (GPT-4.1 mini) en todos los canales */
.cf-ia-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cf-ia-lista li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tlc-border-2); }
.cf-ia-lista li:first-child { border-top: 0; padding-top: 0; }
.cf-ia-lista li:last-child { padding-bottom: 0; }
.cf-ia-lista li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cf-ia-lista b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); }
.cf-ia-lista small { font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.cf-ia-lista .pildora { flex: none; }
.cf-ia-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); color: var(--tlc-navy); }
.cf-ia-ic .ico { width: 17px; height: 17px; }
.cf-ia-lista li.pronto .cf-ia-ic { color: var(--tlc-tinta-3); }
.cf-ia-lista li.pronto b { color: var(--tlc-tinta-2); }

@media (max-width: 1280px) {
  .cf-tab-det { display: none; }
}
@media (max-width: 1100px) {
  .cf-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-tab-det { display: inline; }
  .cf-rejilla-cuenta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cf-alarma { flex-wrap: wrap; padding: 16px 16px 16px 20px; }
  .cf-alarma-acc { width: 100%; }
  .cf-alarma-acc .btn { flex: 1; }
}
@media (max-width: 640px) {
  .cf-tabs { gap: 8px; }
  .cf-tab { padding: 10px; gap: 9px; border-radius: 14px; }
  .cf-tab-ic { width: 32px; height: 32px; border-radius: 10px; }
  .cf-tab-ic .ico { width: 16px; height: 16px; }
  .cf-tab-txt b { font-size: 13px; white-space: normal; line-height: 1.2; }
  .cf-tab-det { display: none; }
  .cf-tab { align-items: flex-start; }
  .cf-tab-estado { white-space: normal; align-items: flex-start; line-height: 1.3; }
  .cf-tab-estado i { margin-top: 4px; }
  .cf-google-btn { width: 100%; }
  .cf-guia-pasos a { white-space: normal; }
}


/* ---------- Menú multicanal y tarjeta de canales (js/app.js) ---------- */
/* 17 secciones en 4 grupos y la tarjeta con los 6 interruptores: más compacto para que todo quepa a 1440×1000. */
.lateral-marca { padding-top: 14px; padding-bottom: 4px; }
.lateral-marca .capsula-logo { padding: 10px 14px 20px; }
.lateral-marca .capsula-logo img { height: 44px; }
.nav-grupo { padding: 10px 12px 3px; }
.nav-item { height: 34px; }
.nav-item > span:not(.nav-cuenta):not(.nav-chip-pronto):not(.sr) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Pronto»: botón enfocable (aria-disabled) que explica el canal; se ve atenuado pero responde al clic y al teclado */
.nav-pronto { width: 100%; border: 0; background: transparent; text-align: left; color: var(--tlc-tinta-3); cursor: help; }
.nav-pronto:hover { background: var(--tlc-cream-2); color: var(--tlc-tinta-2); }
.nav-pronto .ico { color: var(--tlc-tinta-4); }
.nav-chip-pronto { margin-left: auto; height: 20px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--tlc-tinta-3); background: #F4F0E7; border: 1px dashed #DCCFB2; }
/* Más secciones abajo: sombra en el borde del menú cuando hay contenido escondido (fondos "local"/"scroll"). */
.lateral-scroll {
  padding-bottom: 6px;
  background:
    linear-gradient(#FEFDFB 30%, rgba(254, 253, 251, 0)) center top / 100% 28px no-repeat local,
    linear-gradient(rgba(253, 251, 247, 0), #FDFBF7 70%) center bottom / 100% 34px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(28, 43, 94, .16), rgba(28, 43, 94, 0)) center top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(28, 43, 94, .22), rgba(28, 43, 94, 0)) center bottom / 100% 16px no-repeat scroll;
}
.lateral-pie { padding-top: 6px; gap: 10px; }
.lateral .franja-marca { margin-top: 10px; }

/* Tarjeta de canales: cabecera (plegar + «Probar a Sofía») y una fila por bot con su interruptor */
.canales-tarjeta { padding: 6px 6px 6px; }
.cn-cab { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; }
.cn-plegar { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--tlc-tinta-3); cursor: pointer; transition: background var(--t-rapida), color var(--t-rapida); }
.cn-plegar:hover { background: rgba(255, 255, 255, .85); color: var(--tlc-navy); }
.cn-titulo { font-family: var(--tlc-titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.cn-cuenta { height: 18px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: #fff; border: 1px solid var(--tlc-border); font-size: 11px; font-weight: 700; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.cn-cuenta:empty { display: none; }
.cn-chevron { width: 14px !important; height: 14px !important; margin-left: auto; transition: transform var(--t) var(--curva); }
.cn-plegar[aria-expanded="true"] .cn-chevron { transform: rotate(180deg); }
.canales-tarjeta .cn-probar { width: 32px; height: 32px; margin: 0; padding: 0; justify-content: center; flex: none; }
.cn-probar .ico { width: 14px; height: 14px; }
.cn-probar.apagada { background: #ECE6D8; color: var(--tlc-tinta-3); box-shadow: none; }
.cn-probar.apagada:hover:not(:disabled) { background: #E4DCCB; }
.cn-lista { position: relative; z-index: 1; list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-fila { display: flex; align-items: center; gap: 6px; padding-right: 6px; border-radius: 10px; transition: background var(--t-rapida); }
.cn-fila:hover, .cn-fila:focus-within { background: rgba(255, 255, 255, .85); }
.cn-enlace { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 2px 4px 2px 5px; border-radius: 10px; color: inherit; text-decoration: none; }
.cn-enlace:hover { text-decoration: none; }
.cn-ic { position: relative; width: 25px; height: 25px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E9E3D6; color: var(--tlc-tinta-3); transition: background var(--t), color var(--t); }
.cn-ic .ico { width: 14px; height: 14px; }
.cn-fila.on .cn-ic, .cn-mini.on .cn-mini-btn { background: var(--tlc-navy); color: var(--tlc-gold); }
.cn-ic .punto, .cn-mini-btn .punto { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--tlc-cream-2); background: var(--tlc-tinta-4); }
.cn-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.17; }
.cn-txt b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 12.5px; color: var(--tlc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-txt small { font-size: 10.5px; font-weight: 600; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-int.interruptor { width: 30px; height: 18px; }
.cn-int.interruptor::after { top: 2px; left: 2px; width: 14px; height: 14px; }
.cn-int.interruptor:checked::after { transform: translateX(12px); }
.cn-int.interruptor:checked { background: #2A7550; }
.cn-int.interruptor:disabled { opacity: .45; cursor: not-allowed; }
/* Tonos: verde encendido, dorado falta algo o solo pruebas, rojo reconectar, gris apagado */
.cn-fila.tono-ok .punto, .cn-mini.tono-ok .punto { background: #34A36B; }
.cn-fila.tono-alerta .punto, .cn-mini.tono-alerta .punto { background: var(--tlc-gold); }
.cn-fila.tono-peligro .punto, .cn-mini.tono-peligro .punto { background: var(--tlc-peligro); }
.cn-fila.tono-ok small { color: #2A7550; }
.cn-fila.tono-alerta small { color: var(--tlc-gold-osc); }
.cn-fila.tono-peligro small { color: var(--tlc-peligro); font-weight: 700; }
.cn-fila.tono-peligro .cn-ic, .cn-mini.tono-peligro .cn-mini-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tlc-peligro); }
/* Plegada: una tira de seis íconos con su punto de estado */
.cn-lista.plegada { flex-direction: row; justify-content: space-between; gap: 4px; padding: 4px 4px 2px; }
.cn-mini { list-style: none; }
.cn-mini-btn { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #E9E3D6; color: var(--tlc-tinta-3); cursor: pointer; transition: background var(--t), transform var(--t-rapida); }
.cn-mini-btn:hover { transform: translateY(-1px); }
.cn-mini-btn .ico { width: 15px; height: 15px; }
/* Durante la prueba de Sofía en el navegador */
.sofia-tarjeta.en-llamada { border-color: rgba(240, 179, 35, .55); background: #FFF9EA; }
.sofia-tarjeta.en-llamada [data-cn="sofia"] .punto { background: var(--tlc-gold); animation: latido-dorado 2s infinite; }
.sofia-tarjeta.en-llamada [data-cn="sofia"] small { color: var(--tlc-gold-osc); font-variant-numeric: tabular-nums; }
@media (max-height: 1050px) {
  .lateral-marca { padding-top: 10px; }
  .lateral-marca .capsula-logo { padding: 8px 14px 18px; }
  .lateral-marca .capsula-logo img { height: 38px; }
  .nav-grupo { padding: 7px 12px 2px; }
  .nav-item { height: 31px; }
}
@media (max-height: 860px) {
  .lateral-marca { padding-top: 10px; }
  .lateral-marca .capsula-logo { padding: 8px 14px 18px; }
  .lateral-marca .capsula-logo img { height: 36px; }
  .nav-grupo { padding: 7px 12px 2px; }
  .nav-item { height: 31px; }
}
@media (max-height: 790px) {
  .lateral-marca { padding-top: 8px; }
  .lateral-marca .capsula-logo { padding: 6px 12px 16px; }
  .lateral-marca .capsula-logo img { height: 28px; }
  .nav-grupo { padding: 4px 12px 0; }
  .nav-item { height: 29px; }
  .lateral-scroll { padding-top: 0; }
  .lateral-pie { padding-top: 4px; }
  .lateral .franja-marca { margin-top: 8px; }
}

/* Interruptor de un bot (TLC.interruptorCanal): tarjeta lateral, encabezados, memorias y Correos */
.int-canal { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.int-canal .interruptor { width: 40px; height: 23px; }
.int-canal .interruptor:checked { background: #2A7550; }
.int-canal .interruptor:disabled { opacity: .5; cursor: not-allowed; }
.int-canal.compacto .interruptor { width: 34px; height: 20px; }
.int-canal.compacto .interruptor::after { width: 14px; height: 14px; }
.int-canal.compacto .interruptor:checked::after { transform: translateX(14px); }
.int-canal-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; cursor: pointer; }
.int-canal-txt b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 13px; color: var(--tlc-navy); }
.int-canal-txt span { font-size: 12px; font-weight: 600; color: var(--tlc-tinta-3); }
.int-canal.tono-ok .int-canal-txt span { color: #2A7550; }
.int-canal.tono-alerta .int-canal-txt span { color: var(--tlc-gold-osc); }
.int-canal.tono-peligro .int-canal-txt span { color: var(--tlc-peligro); font-weight: 700; }
.co-estado-bot .int-correo-txt span { font-size: 13.5px; font-weight: 700; color: var(--tlc-navy); }
.co-estado-bot .int-canal.tono-ok .int-correo-txt span { color: #2A7550; }
/* En el encabezado de la vista (Llamadas: «Sofía (llamadas)») */
.barra-ints { display: flex; align-items: center; gap: 8px; }
.barra-ints[hidden] { display: none; }
.int-barra { height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra-s); }
.int-barra .int-canal-txt b { font-size: 12px; }
.int-barra .int-canal-txt span { font-size: 11.5px; }
@media (max-width: 1280px) { .int-barra .int-canal-txt b { display: none; } }
@media (max-width: 640px) { .barra-ints { order: 4; } }


/* ---------- En preparación: Conversaciones, WhatsApp y Redes (js/app.js) ---------- */
.ep { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; }
.ep-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 28px; padding: 30px 32px; }
.ep-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-tenue); background-size: 34.64px 60px; mask-image: linear-gradient(100deg, transparent 40%, #000 100%); -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 100%); }
.ep-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.ep-hero-txt { flex: 1; min-width: 0; }
.ep-hero-txt .titular { margin-top: 16px; font-size: 30px; }
.ep-hero-txt p { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.65; color: var(--tlc-tinta-2); }
.ep-puntos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ep-puntos .chip { background: #FDFBF7; }
.ep-puntos .chip .ico { color: var(--tlc-gold-osc); }
.ep-hero-arte { flex: none; }
.ep-hex { width: 132px; height: 152px; display: grid; place-items: center; color: var(--tlc-gold); background: var(--tlc-navy); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: var(--sombra-m); }
.ep-hex .ico { width: 54px; height: 54px; stroke-width: 1.5; }
.ep-canales { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ep-canal { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--tlc-border-2); border-radius: 14px; background: #fff; }
.ep-canal-ic { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #EFE9DC; color: var(--tlc-tinta-3); }
.ep-canal.on .ep-canal-ic { background: var(--tlc-navy); color: var(--tlc-gold); }
.ep-canal-ic .punto { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: var(--tlc-tinta-4); }
.ep-canal.tono-ok .punto { background: #34A36B; }
.ep-canal.tono-alerta .punto { background: var(--tlc-gold); }
.ep-canal.tono-peligro .punto { background: var(--tlc-peligro); }
.ep-canal-txt b { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); }
.ep-canal-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.ep-acciones { margin-top: 16px; }
.ep-nota { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-3); }
.ep-nota .ico { margin-top: 2px; flex: none; color: var(--tlc-blue); }
@media (max-width: 760px) {
  .ep-hero { padding: 20px 18px 22px; }
  .ep-hero-arte { display: none; }
  .ep-hero-txt .titular { font-size: 25px; }
  .ep-canal { grid-template-columns: 34px minmax(0, 1fr); }
  .ep-canal .int-canal { grid-column: 1 / -1; }
  .ep-acciones .btn { flex: 1 1 220px; }
}


/* ---------- Identidad y horario de Sofía dentro de su memoria (js/vistas/sofia.js) ---------- */
.sf-hero-tit { font-size: 19px; font-weight: 800; }
.sf-hero-tit b { color: var(--tlc-navy); text-decoration: underline 3px var(--tlc-gold); text-underline-offset: 5px; text-decoration-skip-ink: none; }
.mb .sf-hero { padding: 18px 22px 20px; }
.mb .sf-hero-txt { margin-top: 8px; }
.ca.embebido { gap: 16px; }
.ca-estado-embebido { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--tlc-border-2); }
.ca-instr-enlace .btn { margin-top: 10px; }


/* ---------- Memoria de cada bot (js/vistas/memoria-bot.js) ---------- */
.mb { display: flex; flex-direction: column; gap: 16px; --t-maestria: var(--tlc-navy); --t-diplomado: var(--tlc-blue); --t-licenciatura: var(--tlc-gold); --t-curso: var(--tlc-sky); }
.t-maestria { --tc: var(--tlc-navy); --tc-txt: #fff; --tc-claro: var(--tlc-navy-claro); }
.t-diplomado { --tc: var(--tlc-blue); --tc-txt: #fff; --tc-claro: var(--tlc-blue-claro); }
.t-licenciatura { --tc: var(--tlc-gold); --tc-txt: var(--tlc-navy); --tc-claro: var(--tlc-gold-claro); }
.t-curso { --tc: var(--tlc-sky); --tc-txt: var(--tlc-navy); --tc-claro: var(--tlc-sky-claro); }

/* Cabecera */
.mb-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 24px; padding: 22px 24px 24px; }
.mb-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-tenue); background-size: 34.64px 60px; mask-image: linear-gradient(100deg, transparent 45%, #000 100%); -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 100%); }
.mb-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.mb-hero-izq { flex: 1; min-width: 0; }
.mb-hero-txt { margin-top: 12px; max-width: 660px; font-size: 13.5px; line-height: 1.6; color: var(--tlc-tinta-2); }
.mb-hero-datos { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 14px; min-height: 26px; }
.mb-dato { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--tlc-border); font-size: 12px; color: var(--tlc-tinta-2); white-space: nowrap; }
.mb-dato b { font-family: var(--tlc-titulo); font-weight: 800; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.mb-dato .ico { color: var(--tlc-gold-osc); }
.mb-dato.mb-ia { font-weight: 700; color: var(--tlc-navy); }
.mb-hero-der { flex: none; width: min(340px, 40%); display: flex; flex-direction: column; gap: 10px; }
.mb-ints { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .92); border: 1px solid var(--tlc-border); box-shadow: var(--sombra-s); }
.mb-ints.varios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.mb-ints-tit { grid-column: 1 / -1; font-family: var(--tlc-titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.mb-int-grande .interruptor { width: 48px; height: 27px; }
.mb-int-grande .interruptor::after { width: 21px; height: 21px; }
.mb-int-grande .interruptor:checked::after { transform: translateX(21px); }
.mb-int-grande .int-canal-txt b { font-size: 15px; }
.mb-int-grande .int-canal-txt span { font-size: 13px; }
.mb-int-sub .interruptor { width: 34px; height: 20px; }
.mb-int-sub .interruptor::after { width: 14px; height: 14px; }
.mb-int-sub .interruptor:checked::after { transform: translateX(14px); }
.mb-int-sub .int-canal-txt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-int-sub .int-canal-txt span { font-size: 11.5px; }
.mb-hero-nota { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }
.mb-hero-nota .ico { margin-top: 2px; flex: none; color: var(--tlc-blue); }
.mb-hero-nota.alerta { color: #6B4B05; }
.mb-hero-nota.alerta .ico { color: var(--tlc-gold-osc); }
.mb-hero-nota .enlace { font-size: 12px; }

/* Pestañas */
.mb-pestanas { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: #EFE8D9; border: 1px solid var(--tlc-border-2); overflow-x: auto; scrollbar-width: none; }
.mb-pestanas::-webkit-scrollbar { display: none; }
.mb-pestana { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; font-weight: 700; font-size: 13.5px; color: var(--tlc-tinta-2); white-space: nowrap; transition: background var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida); }
.mb-pestana .ico { width: 16px; height: 16px; color: var(--tlc-tinta-3); }
.mb-pestana:hover { color: var(--tlc-navy); background: rgba(255, 255, 255, .55); }
.mb-pestana[aria-selected="true"] { background: var(--tlc-navy); color: #fff; box-shadow: 0 6px 14px -8px rgba(28, 43, 94, .7); }
.mb-pestana[aria-selected="true"] .ico { color: var(--tlc-gold); }
.mb-panel:focus { outline: none; }
.mb-sub { display: flex; flex-direction: column; gap: 16px; animation: subir var(--t) var(--curva) both; }

/* Herramientas: filtros por tipo + acciones */
.mb-herr { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.mb-herr-der { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.mb-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-filtro { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--tlc-border); background: #fff; font-size: 12.5px; font-weight: 700; color: var(--tlc-tinta-2); transition: all var(--t-rapida); }
.mb-filtro i { width: 9px; height: 9px; border-radius: 3px; background: var(--tc); transform: rotate(45deg); }
.mb-filtro:hover { border-color: var(--tlc-beige); color: var(--tlc-navy); }
.mb-filtro[aria-pressed="true"] { background: var(--tlc-navy); border-color: var(--tlc-navy); color: #fff; }
.mb-filtro-n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(28, 43, 94, .08); font-size: 11px; font-variant-numeric: tabular-nums; }
.mb-filtro[aria-pressed="true"] .mb-filtro-n { background: rgba(255, 255, 255, .18); }
.segmento .mb-filtro-n { margin-left: 6px; }
.segmento button[aria-pressed="true"] .mb-filtro-n { background: var(--tlc-navy); color: #fff; }
.mb-resumen { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--tlc-tinta-3); }
.mb-resumen b { font-family: var(--tlc-titulo); font-weight: 800; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.mb-resumen .ok b { color: #2A7550; }
.mb-resumen-q { display: inline-flex; align-items: center; gap: 5px; color: var(--tlc-blue); font-weight: 600; }
.mb-aviso-demo { align-items: center; }

/* Fichas de programas (tipo diapositiva) */
.mb-fichas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.mb-ficha-esq { overflow: hidden; }
.mb-ficha { min-width: 0; }
.mb-ficha-caja { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 18px; background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra); overflow: hidden; transition: transform var(--t) var(--curva), box-shadow var(--t), border-color var(--t); }
.mb-ficha-caja:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); border-color: #E3D4B3; }
.mb-ficha-caja:focus-within { border-color: var(--tlc-blue); }
.mb-ficha-cinta { position: relative; height: 54px; flex: none; background: var(--tc); overflow: hidden; }
.mb-ficha-cinta::before { content: ''; position: absolute; inset: 0; background: var(--hex-claro); background-size: 34.64px 60px; opacity: .9; }
.t-licenciatura .mb-ficha-cinta::before, .t-curso .mb-ficha-cinta::before { background: var(--hex-tenue); background-size: 34.64px 60px; }
.mb-ficha-cinta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); opacity: .9; }
.mb-ficha-cinta span { position: absolute; right: 16px; bottom: -14px; width: 46px; height: 52px; display: grid; place-items: center; background: #fff; color: var(--tc); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.t-licenciatura .mb-ficha-cinta span, .t-curso .mb-ficha-cinta span { color: var(--tlc-navy); }
.mb-ficha-cinta span .ico { width: 20px; height: 20px; margin-top: -10px; }
.mb-ficha-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 18px 0; padding-right: 74px; }
.mb-tipo { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--tc); color: var(--tc-txt); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mb-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: #F1EEE7; color: var(--tlc-tinta-2); }
.mb-chip .ico { width: 11px; height: 11px; }
.mb-chip.demo { background: var(--tlc-gold-claro); color: #6B4B05; border: 1px dashed #E7C46A; }
.mb-chip.inactiva { background: #EEE9DE; color: var(--tlc-tinta-3); }
.mb-chip.uso { background: var(--tlc-exito-claro); color: #22603F; }
.mb-chip.pend { background: var(--tlc-gold-claro); color: #6B4B05; }
.mb-chip.novoz { background: var(--tlc-blue-claro); color: #1F4E85; }
.mb-chip.tipo-datos_pago { background: var(--tlc-navy); color: #fff; }
.mb-chip.tipo-comentarios { background: var(--tlc-sky-claro); color: #1F4E85; }
.mb-ficha-nombre { padding: 10px 18px 0; font-size: 17px; font-weight: 800; line-height: 1.25; }
.mb-ficha-nombre button { all: unset; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--tlc-navy); }
.mb-ficha-nombre button::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.mb-ficha-nombre button:focus-visible { outline: none; }
.mb-ficha-nombre button:focus-visible::after { box-shadow: inset 0 0 0 3px rgba(46, 109, 180, .45); }
.mb-ficha-nombre button.sin-nombre { color: var(--tlc-tinta-3); font-style: italic; }
.mb-ficha-caja:hover .mb-ficha-nombre button { color: var(--tlc-blue); }
.mb-ficha-datos { margin: 12px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.mb-ficha-datos > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.mb-ficha-datos dt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.mb-ficha-datos dt .ico { color: var(--tlc-beige-osc); }
.mb-ficha-datos dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mb-ficha-datos dd.falta { color: var(--tlc-gold-osc); font-style: italic; }
.mb-completa { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 6px; }
.mb-barrita { display: block; height: 6px; border-radius: 999px; background: #EFE9DC; overflow: hidden; }
.mb-barrita i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tlc-gold), #E3A417); transition: width var(--t) var(--curva); }
.mb-completa.lista .mb-barrita i, .mb-barrita.lista i { background: linear-gradient(90deg, #34A36B, #2A7550); }
.mb-barrita.grande { height: 8px; }
.mb-completa-txt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-completa-txt b { color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.mb-completa.lista .mb-completa-txt { color: #2A7550; }
.mb-completa.lista .mb-completa-txt b { color: #2A7550; }
.mb-completa .ico { color: #2A7550; }
.mb-ficha-pie { position: relative; z-index: 1; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 10px 10px 18px; border-top: 1px solid var(--tlc-border-2); margin-top: 16px; background: #FDFBF7; }
.mb-ficha-pie { margin-top: auto; }
.mb-completa { margin-bottom: 16px; }
.mb-activo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--tlc-tinta-3); cursor: pointer; user-select: none; }
.mb-activo .interruptor { width: 34px; height: 20px; }
.mb-activo .interruptor::after { width: 14px; height: 14px; }
.mb-activo .interruptor:checked::after { transform: translateX(14px); }
.mb-activo .interruptor:checked { background: #2A7550; }
.mb-activo .interruptor:checked + span { color: #2A7550; }
.mb-ficha-acc { display: inline-flex; gap: 0; }
.mb-ficha-acc .btn-icono.btn-s, .mb-cuadro-btns .btn-icono.btn-s { width: 30px; height: 30px; color: var(--tlc-tinta-3); }
.mb-ficha-acc .btn-icono.btn-s:hover:not(:disabled), .mb-cuadro-btns .btn-icono.btn-s:hover:not(:disabled) { color: var(--tlc-navy); }
.mb-ficha-acc .btn:disabled, .mb-cuadro-btns .btn:disabled { opacity: .3; }
.mb-borrar:hover:not(:disabled) { color: var(--tlc-peligro) !important; background: var(--tlc-peligro-claro) !important; }
.mb-ficha.inactiva .mb-ficha-cinta { filter: grayscale(.85) opacity(.55); }
.mb-ficha.inactiva .mb-ficha-nombre button, .mb-ficha.inactiva .mb-ficha-datos { opacity: .6; }
.mb-ficha.demo .mb-ficha-caja { border-style: dashed; border-color: #E2CF9F; }

/* Lista corta (Sofía) */
.mb-corta > summary { list-style: none; cursor: pointer; padding-bottom: 18px; }
.mb-corta > summary::-webkit-details-marker { display: none; }
.mb-corta[open] > summary { padding-bottom: 0; }
.mb-corta-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--tlc-cream-2); color: var(--tlc-navy); border: 1px solid var(--tlc-border); }
.mb-corta-tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-chevron { transition: transform var(--t); color: var(--tlc-tinta-3); }
.mb-corta[open] .mb-chevron { transform: rotate(180deg); }
.mb-corta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mb-corta-chips .chip { max-width: 100%; }
.mb-corta-chips .chip .ico { color: var(--tlc-beige-osc); }
.mb-corta-guardar { margin-top: 12px; }

/* Selector de bots (copiar) */
.mb-bots-sel { display: grid; gap: 8px; }
.mb-bot-op { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; cursor: pointer; transition: border-color var(--t-rapida), background var(--t-rapida), box-shadow var(--t-rapida); }
.mb-bot-op:hover { border-color: var(--tlc-beige); }
.mb-bot-op input { position: absolute; opacity: 0; pointer-events: none; }
.mb-bot-op:has(input:checked) { border-color: var(--tlc-navy); background: var(--tlc-navy-claro); box-shadow: inset 0 0 0 1px var(--tlc-navy); }
.mb-bot-op:has(input:focus-visible) { box-shadow: var(--anillo); }
.mb-bot-op.vacio { opacity: .55; cursor: not-allowed; }
.mb-bot-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); }
.mb-bot-ic .ico { width: 18px; height: 18px; }
.mb-bot-txt b { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); }
.mb-bot-txt small { display: block; font-size: 12px; color: var(--tlc-tinta-3); }
.mb-bot-check { width: 18px; height: 18px; color: var(--tlc-navy); opacity: 0; }
.mb-bot-op:has(input:checked) .mb-bot-check { opacity: 1; }
.mb-lista-nombres { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--tlc-tinta-2); }
.mb-copiar-lista { min-height: 40px; }
.mb-copiar-items { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.mb-copiar-items .casilla { align-items: flex-start; }
.mb-copiar-items .casilla input { margin-top: 2px; }
.mb-ya { font-style: normal; font-size: 11px; font-weight: 700; color: var(--tlc-blue); }
.mb-ya.pend { color: var(--tlc-gold-osc); }

/* Editor de la ficha (cajón amplio) */
.mb-ed-cab { position: relative; padding-top: 30px; padding-bottom: 18px; }
.mb-ed-cab::after { content: ''; position: absolute; left: 0; top: 3px; bottom: 0; width: 5px; background: var(--tc, var(--tlc-navy)); }
.mb-ed-sobre { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.mb-ed-sobre .ico { color: var(--tlc-gold-osc); }
.mb-ed-cab h2 { margin-top: 6px; }
.mb-ed-completa { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--tlc-tinta-3); }
.mb-ed-completa > span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.mb-ed-completa b { color: var(--tlc-navy); }
.mb-ed { display: flex; flex-direction: column; gap: 18px; }
.mb-ed-sec { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--tlc-border-2); }
.mb-ed-h { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tlc-navy); }
.mb-ed-h .ico { color: var(--tlc-gold-osc); }
.mb-ed-tipos { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-ed-tipos legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.mb-tipos-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-tipo-op { position: relative; cursor: pointer; }
.mb-tipo-op input { position: absolute; opacity: 0; pointer-events: none; }
.mb-tipo-op span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--tlc-border); background: #fff; font-size: 13px; font-weight: 700; color: var(--tlc-tinta-2); transition: all var(--t-rapida); }
.mb-tipo-op span .ico { color: var(--tc); }
.mb-tipo-op:hover span { border-color: var(--tc); }
.mb-tipo-op input:checked + span { background: var(--tc); border-color: var(--tc); color: var(--tc-txt); box-shadow: 0 6px 14px -8px rgba(28, 43, 94, .5); }
.mb-tipo-op input:checked + span .ico { color: inherit; }
.mb-tipo-op input:focus-visible + span { box-shadow: var(--anillo); }
.mb-ed-nombre { height: 46px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 16px; }
.mb-ed-activo { font-size: 13px; color: var(--tlc-tinta-2); }
.mb-ed-activo b { color: var(--tlc-navy); }
.mb-ed-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mb-ed-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mb-ed-txt { min-height: 64px; resize: vertical; }
.mb-ed-falta { display: none; margin-left: 8px; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--tlc-gold-claro); color: #6B4B05; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.vacio > label .mb-ed-falta { display: inline-grid; place-items: center; }
.mb-ed .campo.vacio .textarea { background: #FFFDF6; border-style: dashed; border-color: #E7D3A0; }
.mb-ed .campo.vacio .textarea:focus { border-style: solid; }
.mb-ed-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-3); }
.mb-ed-nota .ico { margin-top: 2px; flex: none; color: #2A7550; }
.mb-ed-aviso .enlace { margin-top: 6px; }
.mb-ed-pie { align-items: center; }
.mb-ed-pie .mb-ed-borrar { margin-right: auto; }
.mb-ed-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tlc-gold-osc); }

/* Instrucciones (cuadros) */
.mb-mem { display: flex; flex-direction: column; gap: 14px; }
.mb-aviso-fijo { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; background: var(--tlc-navy); color: rgba(255, 255, 255, .88); font-size: 13px; line-height: 1.5; position: relative; overflow: hidden; isolation: isolate; }
.mb-aviso-fijo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-claro); background-size: 34.64px 60px; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.mb-aviso-fijo .ico { flex: none; width: 20px; height: 20px; color: var(--tlc-gold); }
.mb-aviso-fijo b { color: #fff; }
.mb-aviso-pend { position: relative; overflow: hidden; display: flex; gap: 14px; padding: 16px 18px 16px 20px; border-radius: var(--radio); background: linear-gradient(100deg, #FFF8E6 0%, #FFFDF7 70%); border: 1px solid #F1DDA4; }
.mb-aviso-pend::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tlc-gold); }
.mb-aviso-pend-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); }
.mb-aviso-pend b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 15px; color: var(--tlc-navy); }
.mb-aviso-pend p { margin-top: 3px; font-size: 13px; line-height: 1.5; color: #5E4507; }
.mb-pend-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mb-completar { max-width: 100%; background: #fff; border-color: #EBD08A; color: var(--tlc-navy); }
.mb-completar .ico { color: var(--tlc-gold-osc); flex: none; }
.mb-cuadros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-cuadro { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 12px 12px 14px; border: 1px solid var(--tlc-border-2); border-radius: 14px; background: #fff; transition: border-color var(--t-rapida), background var(--t-rapida), box-shadow var(--t-rapida); }
.mb-cuadro:hover { border-color: #E3D4B3; box-shadow: var(--sombra-s); }
.mb-cuadro.abierto { background: var(--tlc-cream-2); border-color: var(--tlc-border); box-shadow: var(--sombra); }
.mb-cuadro-num { width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-cream); color: var(--tlc-navy); font-family: var(--tlc-titulo); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.mb-cuadro.abierto .mb-cuadro-num { background: var(--tlc-navy); color: var(--tlc-gold); }
.mb-cuadro-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mb-cuadro-resumen { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 3px 4px; margin: -3px -4px; border-radius: 8px; cursor: pointer; color: inherit; }
.mb-cuadro-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mb-cuadro-tit b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); line-height: 1.3; }
.mb-cuadro-resumen small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 12.5px; color: var(--tlc-tinta-3); line-height: 1.5; }
.mb-cuadro-resumen:hover b { color: var(--tlc-blue); }
.mb-cuadro.inactivo:not(.pendiente) .mb-cuadro-resumen, .mb-cuadro.inactivo:not(.pendiente) .mb-cuadro-num { opacity: .55; }
.mb-cuadro.pendiente { background: #FFFBF0; border-color: #F1DDA4; }
.mb-cuadro.pendiente::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tlc-gold); }
.mb-cuadro.pendiente .mb-cuadro-num { background: var(--tlc-gold); color: var(--tlc-navy); }
.mb-cuadro.pendiente .mb-cuadro-resumen small { color: #6B4B05; }
.mb-cuadro-form .mb-cuadro-titulo { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14.5px; }
.mb-cuadro-texto { min-height: 140px; }
.mb-cuadro-cerrar { display: flex; justify-content: flex-end; }
.mb-cuadro-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mb-cuadro-btns { display: inline-flex; }
.mb-novoz { display: flex; gap: 7px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--tlc-blue-claro); color: #1F4E85; font-size: 12.5px; line-height: 1.45; }
.mb-novoz .ico { flex: none; margin-top: 2px; }
.mb-nota-pie { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-3); }
.mb-nota-pie .ico { flex: none; margin-top: 2px; color: var(--tlc-blue); }
.mb-barra { margin-top: 4px; }

/* Ajustes del bot */
.mb-aj { display: flex; flex-direction: column; gap: 16px; }
.mb-aj-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mb-pila { display: flex; flex-direction: column; gap: 16px; }
.mb-enc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-enc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tlc-border-2); background: #FDFBF7; }
.mb-enc-ic { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #EFE9DC; color: var(--tlc-tinta-3); }
.mb-enc.on .mb-enc-ic { background: var(--tlc-navy); color: var(--tlc-gold); }
.mb-enc-comun { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tlc-gold-claro); color: #6B4B05; font-size: 13px; }
.mb-enc-comun .mb-enc-falta { margin-bottom: 0; }
.mb-enc-ic .punto { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #FDFBF7; background: var(--tlc-tinta-4); }
.mb-enc.tono-ok .punto { background: #34A36B; }
.mb-enc.tono-alerta .punto { background: var(--tlc-gold); }
.mb-enc.tono-peligro .punto { background: var(--tlc-peligro); }
.mb-enc-txt b { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 14.5px; color: var(--tlc-navy); }
.mb-enc-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-3); }
.mb-enc-falta { margin: 8px 0 0; gap: 6px; }
.mb-enc-falta li { font-size: 12.5px; }
.mb-enc .int-canal { margin-top: 4px; }
.mb-numero { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--tlc-blue-claro); color: #1F4E85; font-size: 12.5px; line-height: 1.45; }
.mb-numero > span { flex: 1 1 260px; }
.mb-numero-aviso { color: var(--tlc-peligro); }
.mb-enc-acc { margin-top: 12px; }
.mb-bitacora { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--tlc-border); }
.mb-bitacora .etq { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.mb-bitacora ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mb-bitacora li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tlc-tinta-2); }
.mb-bitacora li i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tlc-tinta-4); }
.mb-bitacora li i.on { background: #34A36B; }
.mb-bitacora time { margin-left: auto; font-size: 11.5px; color: var(--tlc-tinta-3); white-space: nowrap; }
.mb-pasos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mb-pasos li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tlc-tinta-2); }
.mb-pasos li .ico { color: var(--tlc-gold-osc); flex: none; }
.mb-pasos li.ok .ico { color: #2A7550; }
.mb-pasos em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--tlc-gold-osc); }
.mb-pasos li.ok em { color: #2A7550; }
.mb-modelo { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-2); }
.mb-modelo .ico { flex: none; margin-top: 2px; color: var(--tlc-gold-osc); }
.mb-aj .tarjeta-cuerpo > .grupo-btn { margin-top: 12px; }
.mb-modo-grupo { display: flex; flex-direction: column; gap: 8px; }
.mb-modo-grupo > .etq { font-size: 12.5px; font-weight: 700; color: var(--tlc-tinta-2); }
.mb-modo-grupo > .ayuda { font-size: 12px; color: var(--tlc-tinta-3); margin-top: -4px; }
.mb-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mb-modo { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 44px 14px 14px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; color: inherit; transition: border-color var(--t-rapida), box-shadow var(--t-rapida), background var(--t-rapida); }
.mb-modo:hover { border-color: var(--tlc-beige); }
.mb-modo.activo { border-color: var(--tlc-navy); background: var(--tlc-navy-claro); box-shadow: inset 0 0 0 1px var(--tlc-navy); }
.mb-modo-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--tlc-cream-2); color: var(--tlc-navy); }
.mb-modo.activo .mb-modo-ic { background: var(--tlc-navy); color: var(--tlc-gold); }
.mb-modo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-modo-txt b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); }
.mb-modo-txt em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--tlc-gold-osc); }
.mb-modo-txt small { font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.mb-modo-marca { position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--tlc-border); background: #fff; }
.mb-modo.activo .mb-modo-marca { background: var(--tlc-navy); border-color: var(--tlc-navy); color: var(--tlc-gold); }
.mb-modo-marca .ico { width: 13px; height: 13px; }
.mb-comun { display: inline-grid; place-items: center; height: 18px; padding: 0 7px; margin-left: 6px; border-radius: 999px; background: var(--tlc-sky-claro); color: #1F4E85; font-size: 10.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.mb-opciones { display: flex; flex-direction: column; gap: 8px; }
.mb-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; cursor: pointer; transition: border-color var(--t-rapida), background var(--t-rapida); }
.mb-opcion input { margin-top: 3px; accent-color: var(--tlc-navy); width: 16px; height: 16px; flex: none; }
.mb-opcion b { display: block; font-size: 13.5px; color: var(--tlc-navy); }
.mb-opcion small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.mb-opcion.activo { border-color: var(--tlc-navy); background: var(--tlc-navy-claro); }
.mb-casilla { align-items: flex-start; }
.mb-casilla b { display: block; color: var(--tlc-navy); }
.mb-casilla small { display: block; font-size: 12.5px; color: var(--tlc-tinta-3); }
.mb-variantes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-variantes li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mb-var-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-cream); color: var(--tlc-navy); font-family: var(--tlc-titulo); font-weight: 800; font-size: 11.5px; }

@media (max-width: 1100px) {
  .mb-hero { flex-direction: column; align-items: stretch; }
  .mb-hero-der { width: auto; }
  .mb-aj-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mb-hero { padding: 18px 16px 20px; gap: 16px; }
  .mb-hero .capsula-l { font-size: 16px; padding: 9px 18px; }
  .mb-pestana { padding: 0 14px; height: 40px; font-size: 13px; }
  .mb-herr-der { margin-left: 0; width: 100%; }
  .mb-herr-der .btn { flex: 1 1 200px; }
  .mb-filtros { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .mb-filtros::-webkit-scrollbar { display: none; }
  .mb-filtro { flex: none; }
  .mb-fichas { grid-template-columns: minmax(0, 1fr); }
  .mb-ed-campos.tres { grid-template-columns: minmax(0, 1fr); }
  .mb-ed-sec { padding: 16px 14px 18px; }
  .mb-cuadro { grid-template-columns: 26px minmax(0, 1fr); padding: 10px; gap: 10px; }
  .mb-cuadro-acc { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .mb-modos { grid-template-columns: minmax(0, 1fr); }
  .mb-enc { grid-template-columns: 36px minmax(0, 1fr); }
  .mb-enc .int-canal { grid-column: 2; }
  .mb-ints.varios { grid-template-columns: minmax(0, 1fr); }
  .mb-ed-pie { flex-wrap: wrap; }
  .mb-ed-pie .mb-ed-estado { order: -1; width: 100%; }
}
@media (max-width: 640px) {
  .mb-ed-pie .mb-ed-borrar span { display: none; }
  .mb-ed-pie .mb-ed-borrar { width: 40px; padding: 0; }
  .mb .segmento { width: 100%; }
  .mb .segmento button { flex: 1 0 auto; padding: 0 10px; }
}
@media (max-width: 640px) {
  .mb-pestanas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); overflow: visible; }
  .mb-pestana { padding: 0 10px; }
}