/* ── BITÁCORA ──
   [v2026.10.26-1] emp-ayuda.css
   2026-10-26 | NUEVO. La ayuda de Empresas (emp-ayuda.js [v2026.10.26-1]): el «?» junto a cada título y las piezas
     propias de sus ejemplos (.emy-*: el estado de la empresa, los cupos, el saldo, las vistas, los canales, los temas del
     asistente, los rubros). Lo demás de los ejemplos son las piezas de Configuración (.cfy-* de cfg-ayuda.css) y lo común
     del panel está en hvy-ayuda.css.
───────────────────────────────────────────────────────── */
/* El «?» junto a los títulos: un poco más visible que el de los detalles, porque es la entrada a la ayuda. */
.emp-ay-t { display: inline; }
.emp-ay-t + .emp-ayuda-mini { width: 17px; height: 17px; font-size: 10px; margin-left: 7px; opacity: .75; }
.companies-title .emp-ay-t + .emp-ayuda-mini, .u-list-title .emp-ay-t + .emp-ayuda-mini,
.ryp-head-t h1 .emp-ay-t + .emp-ayuda-mini, .prompts-title .emp-ay-t + .emp-ayuda-mini { width: 20px; height: 20px; font-size: 11px; vertical-align: 3px; }

/* ── Ejemplos ── */
.emy .emy-tit { font-size: 12px; }
.emy-pasos .cfy-paso { width: 46px; }
.emy-pasos .cfy-plbl { font-size: 7.5px; }
.emy-sec { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; color: var(--mu); text-transform: uppercase;
  letter-spacing: .06em; margin-top: 2px; }
.emy-sec > i { color: var(--m); }
.emy .cfy-in.emy-gris { background: #f4f5fa; color: #8a90ad; }
.emy-lk { color: #b45309; font-size: 9px; }

/* El estado de la empresa (y los chips de cobro, que usan los mismos colores) */
.emy-est { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600;
  background: #e3f5ec; color: #17694c; white-space: nowrap; }
.emy-est > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.emy-est.pendiente { background: #fff4e0; color: #b45309; }
.emy-est.suspendida { background: #fdeeee; color: #a12a29; }
.emy-est.deshabilitada { background: #f0f1f5; color: #7a809c; }

/* Cupos: usado/tope con su barrita */
.emy-cupo { display: inline-flex; flex-direction: column; gap: 2px; font-size: 10px; min-width: 34px; }
.emy-cupo > i { display: block; height: 3px; border-radius: 3px; background: #eceff8; overflow: hidden; }
.emy-cupo > i > em { display: block; height: 100%; background: #1D8A63; }
.emy-cupo.alto > i > em { background: #f59e0b; }
.emy-cupo.tope > i > em { background: #e24b4a; }
.emy-cupo.tope b { color: #e24b4a; }

/* Saldo de tokens */
.emy-saldo { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 700; background: #e3f5ec; color: #17694c; white-space: nowrap; }
.emy-saldo.bajo { background: #fff4e0; color: #b45309; }
.emy-saldo.cero { background: #fdeeee; color: #a12a29; }
.emy-saldo.pend { background: #eef0fb; color: #4f5aa8; }
.emy-saldo.plan { background: #fff4e0; color: #b45309; }
.emy-urg td { background: #fffaf0; }

/* Las vistas y su numerito */
.emy-vistas .cfy-tab { position: relative; }
.emy-pip { background: #e24b4a !important; color: #fff; }
.emy-can i { font-size: 12px; color: #d4d8e8; margin-right: 3px; }
.emy-can i.on.fa-whatsapp { color: #25D366; }
.emy-can i.on.fa-instagram { color: #E1306C; }
.emy-can i.on.fa-facebook-messenger { color: #0084FF; }
.emy-ia { display: inline-block; padding: 1px 6px; border-radius: 999px; background: #f0f1f5; color: #7a809c; font-size: 9px; font-weight: 700; }
.emy-ia.on { background: #e3f5ec; color: #1D8A63; }
.emy-per { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; }
.emy-per .off { opacity: .35; }

/* Rubros */
.emy-rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; }
.emy-rubro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border: 1px solid var(--bo);
  border-radius: 9px; background: #fff; text-align: center; }
.emy-rubro > span { font-size: 16px; }
.emy-rubro small { font-size: 8px; color: var(--mu); }
.emy-rubro.on { border-color: var(--m); background: #f7f3ff; }
.emy-rubro.lk { opacity: .55; }
.emy-rubro > i { position: absolute; top: 4px; right: 5px; font-size: 8px; color: #b45309; }

/* Canales y opciones */
.emy-modos, .emy-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.emy-canal .cfy-card-t i { font-size: 13px; }
.emy-sel { border-color: var(--m); background: #faf8ff; }

/* El asistente */
.emy-temas { display: flex; flex-direction: column; gap: 4px; }
.emy-tema { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid #eceff8; border-radius: 8px; background: #fff; }
.emy-tema .cfy-sw-fila { flex: 1; }
.emy-fijo { font-size: 9px; color: var(--mu); display: inline-flex; gap: 3px; align-items: center; }
.emy-abarca { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-left: 2px solid #c4b5fd; background: #faf8ff; border-radius: 0 8px 8px 0; position: relative; }
.emy-abarca > i { position: absolute; top: 6px; right: 7px; font-size: 9px; }
.emy-cli { align-self: flex-end; background: #e7ffdb; border-radius: 10px 10px 2px 10px; }
.emy-emojis { display: flex; gap: 4px; font-size: 14px; }
.emy-capa { display: flex; flex-direction: column; gap: 3px; }
.emy-capa-t { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 10.5px; }
.emy-capa-t > i { color: var(--m); }

/* Usuarios */
.emy-cupo-u { display: flex; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; font-size: 10px; background: #f2fbf5; color: #16a34a; }
.emy-cupo-u.lleno { background: #fff7e6; color: #5b4a14; }
.emy-cupo-u.lleno i { color: #b7791f; }
.emy-recurso { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--bo); border-radius: 10px; background: #fff; transition: all .25s; }
.emy-recurso > i { color: var(--m); font-size: 14px; }
.emy-recurso > span { flex: 1; }
.emy-recurso.on { border-color: var(--m); background: #f7f3ff; }

/* Heavensy */
.emy-ojo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #1e2a5e; color: #fff; font-size: 10px; }
.emy-est-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 6px 0; }
.emy-rojo b, .emy-rojo > i { color: #e24b4a !important; }
.emy-visor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 70px; border: 1px dashed var(--bo);
  border-radius: 8px; color: var(--mu); font-size: 9px; }
.emy-visor i { font-size: 20px; color: #e24b4a; }
.emy-cuatro { grid-template-columns: repeat(4, 1fr); }
.emy-colores { display: flex; gap: 5px; }
.emy-colores span { width: 16px; height: 16px; border-radius: 50%; }
.emy-colores span.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m); }
.emy-plan { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #9961FF, #5b8dee); }
.emy-plan small { font-size: 8.5px; opacity: .9; }
.emy-plan em { font-style: normal; align-self: flex-start; margin-top: 4px; background: #fff; color: #6d3fd6; padding: 3px 9px; border-radius: 999px; font-size: 9px; font-weight: 700; }