/* ============================================
   companies.css
   Estilos del módulo de Empresas
   Heavensy Admin
   ── BITÁCORA ──
   [v2026.09.28-2] companies.css
   2026-09-28 (2) | El plan sin asistente en el panel (companies.js [v2026.09.28-4]): + .cp-saldo.s-plan
     (el saldo gris con candado ámbar: no apaga ni enciende nada), .cp-saldo.s-pend (gris
     con punto gris: por activar y sin saldo, todavía no parte) y el candado del rótulo del
     interruptor del asistente (.cp-ia-lb .fa-lock).
   [v2026.09.28-1] companies.css
   2026-09-28 | EDITAR EMPRESA Y EL PLAN (companies.js [v2026.09.28-3]): + .w-plan-fila (el
     selector con candado y "Cambiar de plan" a su lado), .w-plan-estado (lo que está en
     curso, con el aviso ámbar de Pagos: .mp-cp-aviso de pagos.css), .w-plan-nota (por
     activar) y .w-plan-sol (para Heavensy: la solicitud de la empresa con sus botones).
   [v2026.09.20-4] companies.css
   2026-09-20 (4) | + .cp-thord: la columna que se puede ordenar tocando su título, en todas
     las tablas del panel (regla nueva, 20-09; companies.js [v2026.09.20-3]). La flecha vive
     en la columna: apagada mientras no se usa, encendida y en violeta en la que manda. El
     bloque ORDENAR de la derecha de las pestañas queda sin contenido y se retira su hueco.
   [v2026.09.20-3] companies.css
   2026-09-20 (3) | El PIE de la tabla de Costo IA se ve como lo que es: un resumen del mes.
     La fila de totales se escribió en companies.js pero este archivo no tenía NINGUNA regla
     para tfoot, así que salía igual que las demás y se leía como una empresa llamada
     "7 empresas con consumo". Ahora lleva fondo propio, línea gruesa de separación,
     negrita y el rótulo de la izquierda en mayúsculas; y no se ilumina al pasar el mouse,
     porque no es una fila que se pueda tocar.
   [v2026.09.20-2] companies.css
   2026-09-20 (2) | La barra de pestañas queda pegada a la de filtros: tenía 4px de margen
     arriba y las dos líneas se tocaban. Sube a 16px, que es el aire que ya usan los otros
     bloques del panel. Se retira .cp-costo-btns: los dos botones del gasto real pasan a
     btn-secondary y btn-primary (las clases reales del panel), que ya traen su forma.
   [v2026.09.20-1] companies.css
   2026-09-20 | + Estilos de la vista COSTO IA (companies.js [v2026.09.20-1]): las cuatro
     cifras del mes, la tabla con su chip de estado (sano · margen justo · en pérdida ·
     interna) y el pie con la conciliación contra Anthropic y el gasto real del mes.
     Nombres propios (cp-ccaja, cp-cfila, cp-cet, cp-ccampo) para no pisar .cp-caja,
     .cp-fila, .cp-et ni .cp-campo, que ya existen en este archivo con otro significado.
   [v2026.09.16-3] companies.css
   2026-09-16 (3) | + Historial de comprobantes en el pop-up de revision (.cp-hist*): lista bajo
     el visor con miniatura, etiqueta de estado (actual ambar, rechazado rojo, reemplazado gris)
     y motivo; aviso .cp-visor-anterior; .cp-inactivo para las acciones mientras se ve uno anterior.
   [v2026.09.16-2] companies.css
   2026-09-16 (2) | + Revisar comprobante: el pop-up ancho (.cp-modal-ancho) con el visor del
     archivo, la lista de chequeo, los botones Revisar / Marcar pagado / Rechazar y el cuadro
     del motivo. Colores de estado del sitio: ambar lo que espera, verde confirmar, rojo
     rechazar.
   [v2026.09.16-1] companies.css
   2026-09-16 | + .cp-saldo: el chip del saldo de tokens en Consumo y Atencion, con sus tres
     estados (s-ok verde, s-bajo ambar, s-cero rojo) y el punto de color. Mismos colores
     que los chips de estado del panel.
   [v2026.09.15-2] companies.css
   2026-09-15 (2) | + Tokens de cortesia en el pop-up de abonar (.cp-regalo, .cp-monto-mt,
     .cp-et-nota, .cp-motivo), el motivo en el historial (.cp-hist-motivo) y .cp-oculto.
     FIX de un choque de nombres: `.cp-seg` es tambien el segmento de la barra de consumo,
     y sus reglas `.cp-seg i` (absoluto, con fondo) y `.cp-seg span` (9,5 px) deformaban
     los iconos y el candado DENTRO del selector del pop-up. Se acotan con .cp-modal.
   [v2026.09.15-1] companies.css
   2026-09-15 | + Pagos y Comisiones: chips de estado fijos (.cp-est-fijo, sin desplegable),
     codigo de persona, botones de cobro, el candado de la fila de Heavensy y el pop-up
     .cp-modal* (cobrar, abonar, reparto). El pop-up sigue la paleta del modulo; cuando el
     del calendario se extraiga a un estilo comun, este se cambia por ese.
   [v2026.09.14-2] companies.css
   2026-09-14 (2) | + la graduacion por gasto de IA: barra de color al borde de la fila y
     fondo, subiendo con el porcentaje. Tres pasos, no dos: 70% ambar suave, 90% ambar
     fuerte, 100% rojo. Asi se distingue "ojo con esta" de "esta se paso" sin leer el
     numero.
   [v2026.09.14-1] companies.css
   2026-09-14 | + la columna ESTADO IA: un interruptor pequeño y discreto, que es lo que
     corresponde a un control de fila. El apagado por falta de cuota va en un rojo suave —
     no lo apagó nadie, se cortó solo — y el que alguien apagó, en gris.
     + los encabezados con algo más de peso: eran más chicos que el contenido y tan
     tenues que se perdían.
   [v2026.09.13-14] companies.css
   2026-09-13 (14) | + .w-cont-car: el contador de caracteres de los campos del asistente,
     en ambar al acercarse al tope y rojo al llegar. Un tope sin contador se descubre al
     guardar, cuando ya se escribio de mas.
   [v2026.09.13-13] companies.css
   2026-09-13 (13) | + .w-cerrado y .w-hint-cerrado: como se ve un canal ya conectado, que
     no se puede modificar. El campo va en gris con su candado; el aviso cambia de azul
     informativo a ambar de advertencia.
   [v2026.09.13-12] companies.css
   2026-09-13 (12) | El globo de los pasos bloqueados del asistente pasa al flotante de
     hvy-permisos: dentro del paso, el panel lo recortaba. Se conservan los estilos de
     .hvy-candado-globo para el stepper por si otra pantalla los usa — no estorban y
     retirarlos sin comprobarlo es lo que rompe cosas.
   [v2026.09.13-11] companies.css
   2026-09-13 (11) | + .cp-pp: el selector de cuantas filas por pagina, junto a la
     paginacion.
   [v2026.09.13-10] companies.css
   2026-09-13 (10) | + .cp-th2 y .cp-th-u: los encabezados en dos lineas, con la UNIDAD
     debajo en gris. Se retira .cp-per-mes: el mes ya no va en los encabezados porque la
     franja de arriba lo dice en grande.
     + .cp-usd y .cp-apx: el costo de IA en su propia columna.
   [v2026.09.13-9] companies.css
   2026-09-13 (9) | + .cp-periodo: la franja que dice de cuando es el consumo, pegada bajo
     las pestañas como si fuera parte de la misma pieza. Y .cp-per-mes, el mes en ambar
     que llevan los encabezados de las columnas del periodo.
   [v2026.09.13-8] companies.css
   2026-09-13 (8) | Se retira .cp-tip: los globos de la tabla pasan al flotante de
     hvy-permisos. Dentro de la celda la tabla los recortaba y con una sola empresa se
     veia un trozo asomando bajo la fila. Mismo problema y misma solucion que el globo del
     menu el 12-09.
   [v2026.09.13-7] companies.css
   2026-09-13 (7) | El globo (.cp-tip) admite un <b> como titulo: lo usa el desglose del
     almacenamiento, que separa lo que llega de clientes de lo que sube la empresa.
   [v2026.09.13-6] companies.css
   2026-09-13 (6) | + .cp-mb-mes / .cp-mb-tot: el almacenamiento del mes y, debajo, el
     total acumulado — que es lo que ocupa en Cloudinary y lo que cuesta.
   [v2026.09.13-5] companies.css
   2026-09-13 (5) | El chip del PLAN pasa a redondeado, como el de estado: iban en la misma
     fila con formas distintas y no combinaban.
   2026-09-13 (4) | + .cp-tip: el globo que explica que significa cada estado. "Suspendida"
     y "deshabilitada" se parecen y no son lo mismo — una dejo de pagar, la otra se apago a
     mano. Es el globo de Heavensy, no el `title` del sistema (regla del 04-09).
     + el color de cada PLAN, en escala: gris el gratis, lila mas oscuro cuanto mas alto.
   [v2026.09.13-3] companies.css
   2026-09-13 (3) | Las pestañas pasan a CARPETAS: la activa se funde con la tabla, las
     inactivas quedan hundidas en gris. Con el subrayado solo se notaba la activa.
     + el grupo de ORDENAR con marco y fondo propios, y la opcion activa en blanco: eran
     botones de texto sueltos que se perdian.
   [v2026.09.13-2] companies.css
   2026-09-13 (2) | LAS PESTAÑAS PASAN A SUBRAYADO (Alberto: "tampoco se notan, los
     filtros se notan mas"). Eran botones de barra gris compitiendo de igual a igual con
     un selector de filtro, cuando son la decision mas importante de la pantalla: cambian
     la tabla entera. Ahora van grandes, en negrita y con su linea lila.
     + la barra de busqueda con marco y etiqueta propios, para que se vea que es otra
     cosa; y el ORDEN se mete dentro de la barra de pestañas, a la derecha, porque
     pertenece a la tabla que se esta viendo y no a la busqueda.
   [v2026.09.13-1] companies.css
   2026-09-13 | + .cp-chev: la flecha del boton "Mas filtros", que gira al abrir. Sin una
     señal, el bloque se despliega abajo y no se nota — sobre todo si se esta mirando la
     tabla.
   [v2026.09.12-3] companies.css
   2026-09-12 (3) | + .cp-cargando: el spinner del panel mientras llega la respuesta.
     Atenuar la zona no bastaba — no se distingue de una pantalla trabada.
   [v2026.09.12-2] companies.css
   2026-09-12 (2) | + .cp-orden button.apagado: los ordenes que no se pueden cumplir
     —gasto, almacenamiento y conversaciones, que no se miden todavia— se ven apagados en
     vez de esconderse. Se nota que existen y que llegaran; ofrecerlos y que no ordenen
     confunde mas.
   [v2026.09.12-1] companies.css
   2026-09-12 | + el panel de empresas con sus TRES VISTAS: pestañas, filtros
     avanzados, fichas de lo filtrado, barra de orden, los medidores de cupo y la
     paginacion. Va con companies.html y companies.js [v2026.09.12-1].
     Los desplegables son <select> normales en el marcado y hvySelectifyAll los convierte
     en el de Heavensy: nada de controles del sistema (regla del 04-09).
   [v2026.09.11-2] companies.css
   2026-09-11 (2) | + .review-sin-plan: el bloque de la Revision para lo que el plan de
     la empresa no incluye. Antes esos campos salian vacios y se leian como un olvido.
   [v2026.09.11-1] companies.css
   2026-09-11 | + el candado de los pasos que el plan no incluye (Canales y Asistente
     IA): el candadito sobre el círculo del número —igual que en los íconos del menú
     lateral— y su globo. Va con companies.js [v2026.09.11-2].
     Dos detalles del marcado existente que había que cubrir: .step no era
     position:relative (el candadito se habría posicionado respecto de la página) y
     .wizard-steps lleva overflow-x:auto, que recortaba el globo al salirse.
     NO se toca .step.locked, que es otra cosa: marca los pasos aún no alcanzados en la
     creación. Un paso puede estar alcanzado y aun así fuera del plan.
   [v2026.09.09-1] companies.css
   2026-09-09 | El botón "Nueva empresa" lleva candado cuando el plan no incluye
     `empresas.gestionar` (companies.js [v2026.09.09-1]). El aspecto del candado
     (.hvy-bloqueado) vive en assets/css/hvy-permisos.css, que es común: lo usan también
     usuarios y lo usará el resto de la Fase 4.
[v2026.09.02-2] companies.css
   2026-09-02 (2) | + .form-group .w-addr-select: el <button> que genera hvy-select para
                región y comuna toma el mismo borde, padding, radio y tipografía que los
                inputs del wizard, a lo ancho del grupo y con la flecha a la derecha,
                para que se vea como el selector de Plan. Sin esto salía como texto
                suelto sin caja. Mismo mecanismo que .sec-add-uni en el acordeón.
   [v2026.09.02-1] companies.css
   2026-09-02 | + .form-grid-3 (tres columnas, una en pantallas chicas), .w-opcional y
                .w-hint para el bloque Dirección de Datos básicos. Va con companies.html
                [v2026.09.02-1].
   [v2026.08.03-1] companies.css
   2026-08-03 | + .form-action-block: un bloque de acción con su explicación, separado de
                los campos que vienen abajo. Nace del botón «Conectar con Meta» del paso
                Canales, que no tenía dónde vivir: metido dentro de un .form-hint-box
                estrujaba el texto contra el botón, y suelto quedaba pegado a los campos.
                No lleva estilos propios de fondo ni borde a propósito — la acción es el
                botón y la explicación es un .form-hint-box normal; esta clase solo
                resuelve la separación, que es lo único que faltaba.
   2026-08-03 | + .form-hint-box.error: el mismo recuadro en rojo, para cuando el hint
                pasa a mostrar un fallo. Existe para que el JS cambie una clase en vez de
                escribir colores en línea: así el rojo del panel se define en un solo
                lugar y no queda un #c0392b suelto dentro de un archivo .js.
   [v2026.06.28-3] companies.css
   2026-06-28 | Estados de la barra de pasos del wizard: .step.locked (bloqueado, gris, no
                clickeable), .step.available (desbloqueado, anillo morado) y ✓ en .step.done.
   2026-06-28 | .input-error: marca en rojo (borde + fondo) los campos inválidos en la validación.
   [v2026.06.23-1] companies.css
   2026-06-23 | C2-ter: edición inline en el acordeón — botón lápiz (.sec-chip-ed) en
                cada chip y fila de edición (.sec-edit, reusa .sec-add) para
                especialidades y servicios.
   [v2026.06.20-5] companies.css
   2026-06-20 | hvy-select en el acordeón: borde/padding/radius de unidad/padre
                pasan a las CLASES (.sec-add-uni/.sec-add-padre) para que el
                <button> que genera hvy-select (hereda la clase) quede estilado.
   [v2026.06.20-4] companies.css
   2026-06-20 | Look Heavensy en el acordeón: especialidad = pill morado sólido
                (#9961FF, paraguas/primario), servicio = pill blanco con borde
                (detalle/secundario); inputs y selects alineados al control canónico
                del sistema (6px, #e5e7eb, texto #374151, focus #9961FF).
   [v2026.06.20-3] companies.css
   2026-06-20 | C2-bis: estilos de grupos de servicio por padre (.sec-srv-grupo*) y
                dropdown de especialidad padre (.sec-add-padre).
   [v2026.06.20-2] companies.css
   2026-06-20 | Servicios: estilo del dropdown de unidad (.sec-add-uni).
   [v2026.06.20-1] companies.css
   2026-06-20 | Fase C2: estilos del acordeón de categoría (.sec-acc-*, .sec-chip*,
                .sec-add*) para el editor de especialidades + servicios. Imita el
                pill .tp-cat-chip; servicios en azul para distinguirlos.
   [v2026.06.09-1] companies.css
   2026-06-09 | Nuevo estilo .tp-cat-chip para los chips de categoría del
                preview del wizard (pill con degradado morado, punto de color
                y micro-animación al hover). Paleta de marca #9961FF.
============================================ */

/* ── Root ────────────────────────────────── */
.companies-root {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

/* ── Vistas ──────────────────────────────── */
.view { display: none; flex: 1; overflow-y: auto; }
.view.active { display: flex; flex-direction: column; }

/* ── Listado ─────────────────────────────── */
.list-content {
  padding: 20px 24px;
  flex: 1;
}

.companies-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.companies-title {
  font-size: 16px;
  font-weight: 700;
  color: #3b4a6b;
}
.companies-subtitle {
  font-size: 12px;
  color: #7D84C1;
  margin-top: 2px;
}

/* ── Stats ───────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
#st-plans-bar {
  grid-template-columns: repeat(6, 1fr) !important;
}
.stat {
  background: #fff;
  border: 0.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}
.stat-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-val {
  font-size: 20px;
  font-weight: 700;
  color: #3b4a6b;
  margin-top: 2px;
}
.stat-val.green { color: #10b981; }
.stat-val.red   { color: #ef4444; }

/* ── Filtros ─────────────────────────────── */
.filters-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-input {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  outline: none;
  min-width: 180px;
}
.filter-input:focus { border-color: #9961FF; }
.filter-select {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: #9961FF; }

/* ── Tabla ───────────────────────────────── */
.table-wrap {
  background: #fff;
  border: 0.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.companies-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.companies-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: #7D84C1;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #EFF6FF;
  border-bottom: 1px solid #C9D9FF;
}
.companies-table tbody tr {
  border-bottom: 0.5px solid #f3f4f6;
  transition: background .1s;
}
.companies-table tbody tr:hover { background: #fafafa; }
.companies-table tbody td {
  padding: 10px 14px;
  color: #374151;
  vertical-align: middle;
}

/* ── Celdas especiales ───────────────────── */
.company-name-cell { font-weight: 600; color: #3b4a6b; }
.company-id-cell   { font-size: 10px; color: #9ca3af; margin-top: 1px; }
.badge-rubro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: #E1DEFF;
  color: #7c3aed;
}
.badge-plan {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: #dbeafe;
  color: #1d4ed8;
}
.wa-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.wa-indicator.ok   { color: #10b981; }
.wa-indicator.miss { color: #d1d5db; }

/* ── Toggle switch ───────────────────────── */
.switch { position:relative; display:inline-block; width:34px; height:18px; }
.switch input { opacity:0; width:0; height:0; }
.slider {
  position:absolute; cursor:pointer; inset:0;
  background:#d1d5db; border-radius:18px;
  transition:.2s;
}
.slider:before {
  position:absolute; content:'';
  height:13px; width:13px;
  left:2px; bottom:2.5px;
  background:#fff; border-radius:50%;
  transition:.2s;
}
.switch input:checked + .slider { background:#9961FF; }
.switch input:checked + .slider:before { transform:translateX(15px); }

/* ── Acciones ────────────────────────────── */
.btn-icon {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: #7D84C1;
  border-radius: 5px;
  font-size: 12px;
  transition: background .12s, color .12s;
}
.btn-icon:hover { background: #EFF6FF; color: #9961FF; }
.btn-icon.danger:hover { background: #fef2f2; color: #ef4444; }
.btn-icon-hvy { color: #3b5bdb; display: none; }
.heavensy-mode .btn-icon-hvy { display: inline-flex; }
.btn-icon-hvy:hover { background: #dbe4ff; color: #2f4cc4; }

/* ── Empty / Loading ─────────────────────── */
.companies-empty, .companies-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 0;
  color: #9ca3af;
  font-size: 13px;
}
.companies-empty i, .companies-loading i { font-size: 28px; }

/* ── Botones base ────────────────────────── */
.btn-primary {
  padding: 7px 16px;
  background: #9961FF;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
}
.btn-primary:hover { background: #7D84C1; }
.btn-primary:disabled { opacity: .6; cursor: default; }

.btn-secondary {
  padding: 7px 14px;
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
}
.btn-secondary:hover { background: #f9fafb; }

.btn-sm { padding: 5px 10px; font-size: 11px; }

/* ── WIZARD ──────────────────────────────── */
.wizard-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}
.wizard-topbar-title {
  font-size: 14px;
  font-weight: 700;
  color: #3b4a6b;
}

/* Steps */
.wizard-steps {
  display: flex;
  align-items: center;
  padding: 16px 24px 12px;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  gap: 0;
  overflow-x: auto;
}
.step {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s;
}
.step.active { opacity: 1; }
.step.done   { opacity: .75; }
.step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step.active .step-num { background: #9961FF; color: #fff; }
.step.done   .step-num { background: #10b981; color: #fff; }
/* Estados de pasos (wizard crear empresa) [v2026.06.28-3] */
.step.locked    { opacity: .4; cursor: not-allowed; }
.step.available { opacity: 1; }
.step.available .step-num {
  background: #f1ecfb; color: #9961FF;
  box-shadow: inset 0 0 0 2px #9961FF;   /* anillo morado: "ya puedes entrar" */
}
.step.available .step-label { color: #9961FF; }
.step.done .step-num { font-size: 0; }            /* oculta el número */
.step.done .step-num::after { content: '\2713'; font-size: 13px; }  /* muestra ✓ */
.step-label {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.step-line {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
  min-width: 20px;
  max-width: 60px;
}

/* Panels */
.wizard-panel { display: none; flex-direction: column; flex: 1; }
.wizard-panel.active { display: flex; }
.panel-content {
  padding: 20px 24px;
  flex: 1;
  overflow-y: auto;
}

/* Form */
.form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #7D84C1;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-full { grid-column: 1 / -1; }
/* [02-09-2026] Bloque Dirección: tres columnas. */
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 18px; }
@media (max-width: 720px) { .form-grid-3 { grid-template-columns: 1fr; } }
.w-opcional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9BA3C0; }
/* El botón de hvy-select hereda .w-addr-select del <select>: mismo cuerpo que un input. */
.form-group .w-addr-select {
  width: 100%; padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 7px;
  font-size: 12px; color: #374151; background: #fff; outline: none; cursor: pointer;
  text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: inherit; transition: border-color .12s;
}
.form-group .w-addr-select:focus { border-color: #9961FF; }
.form-group .w-addr-select[disabled],
.form-group .w-addr-select[aria-disabled="true"] { color: #9BA3C0; background: #fafafa; cursor: default; }
.w-hint { margin-top: 6px; font-size: 11.5px; color: #7D84C1; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  font-size: 12px;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color .12s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #9961FF; }
.form-group input.error,
.form-group select.error { border-color: #ef4444; }
.form-hint {
  font-size: 10px;
  color: #9ca3af;
}
.form-hint-box {
  background: #EFF6FF;
  border: 0.5px solid #C9D9FF;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11px;
  color: #7D84C1;
  margin-top: 14px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.form-hint-box.error {
  background: #FFF3F0;
  border-color: #F0C0B0;
  color: #C0392B;
}

/* Acción + su explicación, separadas de los campos que vienen debajo.
   El .form-hint-box interior ya aporta su propio margin-top. */
.form-action-block { margin-bottom: 16px; }
.form-check { justify-content: center; }
.check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

/* Nav footer */
.nav-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid #f3f4f6;
  background: #fff;
  position: sticky;
  bottom: 0;
}

/* ── Rubro grid ──────────────────────────── */
.rubro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.rubro-card {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  background: #fff;
}
.rubro-card:hover { border-color: #9961FF; background: #faf8ff; }
.rubro-card.active {
  border-color: #9961FF;
  background: #f5f0ff;
  box-shadow: 0 0 0 3px rgba(153,97,255,.1);
}
.rubro-icon  { font-size: 24px; margin-bottom: 6px; }
.rubro-name  { font-size: 12px; font-weight: 700; color: #3b4a6b; }
.rubro-desc  { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* Template preview */
.template-preview {
  background: #EFF6FF;
  border: 0.5px solid #C9D9FF;
  border-radius: 10px;
  padding: 14px 16px;
}
.tp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tp-badge {
  background: #9961FF;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.tp-mode {
  font-size: 10px;
  color: #7D84C1;
  font-weight: 600;
}
.tp-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.tp-label-chip {
  background: #fff;
  border: 0.5px solid #C9D9FF;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  color: #374151;
}
.tp-label-chip span { color: #9961FF; font-weight: 700; }
/* Chips de categoría del sector (preview del wizard) */
.tp-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tp-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #f4ecff 0%, #e9dcff 100%);
  border: 1px solid #d9c7ff;
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #6b3fc4;
  box-shadow: 0 1px 2px rgba(153, 97, 255, 0.12);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor: default;
}
.tp-cat-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9961FF;
  box-shadow: 0 0 0 2px rgba(153, 97, 255, 0.18);
  flex: none;
}
.tp-cat-chip:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ede1ff 0%, #ddc9ff 100%);
  box-shadow: 0 3px 8px rgba(153, 97, 255, 0.22);
}
.tp-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tp-module {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.tp-module.on  { background: #dcfce7; color: #15803d; }
.tp-module.off { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }

/* ── Review ──────────────────────────────── */
.review-section {
  background: #fff;
  border: 0.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.review-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #7D84C1;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.review-row { display: flex; flex-direction: column; gap: 1px; }
.review-label { font-size: 10px; color: #9ca3af; }
.review-val   { font-size: 12px; color: #374151; font-weight: 500; }
.review-val.empty { color: #d1d5db; font-style: italic; }

/* Error banner */
.wizard-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #dc2626;
  margin-top: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Ajustar márgenes Roles y Catastro dentro de companies ── */
#cp-panel-roles .rol-header,
#cp-panel-catastro .rol-header { padding: 12px 20px 10px; }
#cp-panel-roles .rol-acordeon-wrap,
#cp-panel-catastro .rol-catalogo-wrap { padding: 12px 16px; }
#cp-panel-roles #rol-acordeon {
  max-width: 100%;
  margin: 0;
}
#cp-panel-roles .rol-tab-content,
#cp-panel-roles .rol-body { overflow-y: auto; }

/* ── Tab nav principal (Empresas / Usuarios / Roles) ── */
.cp-main-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  padding: 0 20px;
  flex-shrink: 0;
}

.cp-main-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #9ba3c0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  font-family: inherit;
  white-space: nowrap;
}
.cp-main-tab:hover  { color: #7D84C1; }
.cp-main-tab.active { color: #8e84fa; border-bottom-color: #8e84fa; }
.cp-main-tab i      { font-size: 12px; }

/* ── Botón visor Heavensy / Usuario ── */
.cp-view-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  align-self: center;
}
.cp-view-toggle--heavensy {
  background: #3b5bdb;
  color: #fff;
}
.cp-view-toggle--heavensy:hover { background: #2f4cc4; }
.cp-view-toggle--usuario {
  background: #f0ebff;
  color: #7c3aed;
  border: 1px solid #c4b5fd;
}
.cp-view-toggle--usuario:hover { background: #e5d8ff; }

.cp-panel           { display: none; flex: 1; flex-direction: column; overflow-y: auto; min-height: 0; }
.cp-panel.active    { display: flex; }
/* ════════════════════════════════════════════════════════════
   ACORDEÓN de categoría — especialidades + servicios (Fase C2)
   [v2026.06.20-1] companies.css
   ════════════════════════════════════════════════════════════ */
.sec-acc-tog {
  width: 26px; height: 26px;
  border: 1px solid #e3e1f3; border-radius: 8px;
  background: #fff; color: #9961FF; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; transition: background .15s, border-color .15s; flex: none;
}
.sec-acc-tog:hover { background: #faf8ff; border-color: #9961FF; }
.sec-prof-row.open { background: #faf8ff; border-radius: 10px; }

.sec-acc-panel {
  margin: 2px 0 14px 34px;
  padding: 12px 14px;
  background: #faf9ff;
  border: 1px solid #ece5ff;
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.sec-acc-sub { display: flex; flex-direction: column; gap: 8px; }
.sec-acc-h {
  font-size: 12px; font-weight: 800; color: #2b3556;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.sec-hint { font-size: 10.5px; font-weight: 500; color: #9096b0; font-style: italic; }

.sec-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sec-empty { font-size: 12px; color: #9096b0; }

.sec-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #9961FF 0%, #7d5bff 100%);
  border: none; border-radius: 999px;
  padding: 5px 9px 5px 13px;
  font-size: 11px; font-weight: 600; color: #fff;
  box-shadow: 0 1px 3px rgba(153, 97, 255, 0.28);
}
.sec-chip-srv {
  background: #fff;
  border: 1px solid #e3d9ff; color: #6b3fc4;
  box-shadow: none;
}
.sec-chip-x {
  border: none; background: transparent; cursor: pointer;
  color: inherit; opacity: .55; font-size: 11px; line-height: 1;
  padding: 0 2px; transition: opacity .12s;
}
.sec-chip-x:hover { opacity: 1; color: #dc2626; }

.sec-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.sec-add input,
.sec-add .sec-add-uni,
.sec-add .sec-add-padre {
  padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px;
  font-size: 12px; color: #374151; background: #fff; outline: none;
}
.sec-add input { min-width: 160px; }
.sec-add .sec-add-uni,
.sec-add .sec-add-padre { cursor: pointer; }
.sec-add input:focus,
.sec-add .sec-add-uni:focus,
.sec-add .sec-add-padre:focus { border-color: #9961FF; }
.sec-add .sec-add-dur { min-width: 0; width: 72px; }

/* ── C2-bis: grupos de servicio por padre + dropdown padre [v2026.06.20-3] ── */
.sec-srv-grupo { margin-bottom: 8px; }
.sec-srv-grupo-h {
  font-size: 11px; font-weight: 700; color: #6b6f86;
  display: flex; align-items: center; gap: 6px; margin: 4px 0 5px;
}
.sec-add .sec-add-padre { max-width: 180px; }

/* ── C2-ter: edición inline (lápiz) de especialidad/servicio [v2026.06.23-1] ── */
.sec-chip-ed {
  border: none; background: transparent; cursor: pointer; color: inherit;
  opacity: .5; font-size: 11px; line-height: 1; padding: 0 1px; transition: opacity .12s;
}
.sec-chip-ed:hover { opacity: 1; }
.sec-edit {
  flex-basis: 100%;
  background: #faf9ff; border: 1px solid #e3d9ff; border-radius: 10px;
  padding: 8px 10px; margin: 2px 0;
}
/* Validación: campo inválido (marcado en rojo) [v2026.06.28-1] */
.input-error,
input.input-error,
select.input-error {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.12) !important;
}

/* ══ [11-09] LOS PASOS QUE EL PLAN NO INCLUYE ═══════════════════════════════
   El candado y su globo base viven en hvy-permisos.css. Acá, lo propio del stepper. */

/* El candadito necesita este ancla; el globo también. */
.step { position: relative; }

/* .wizard-steps rueda en horizontal y recortaría el globo. El overflow-x se conserva
   para pantallas angostas; el eje Y queda visible. */
.wizard-steps { overflow-y: visible; }

/* El paso con candado: apagado pero legible, y sigue navegando — al entrar se explica
   qué es y desde qué plan se consigue, igual que en el menú lateral. */
.step.hvy-bloqueado { opacity: 1; cursor: pointer; }
.step.hvy-bloqueado .step-num {
  background: #fafafc !important;
  border-color: #e5e7eb !important;
  color: #c9c9d4 !important;
}
.step.hvy-bloqueado .step-label { color: #c9c9d4; }

/* El candadito, sobre la esquina del círculo. Mismo tamaño y color que el del menú.
   `display` va con !important y selector de dos clases: Font Awesome pone
   .fas { display: inline-block } y carga después, así que un display suelto pierde —
   es lo que pasó en el menú lateral el 11-09. */
.step .step-cand {
  display: block !important;
  position: absolute;
  left: 16px;
  top: -4px;
  width: 13px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  font-size: 8px;
  color: #b7791f;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #f0e0bd;
  z-index: 2;
}

/* El globo sale HACIA ABAJO: el stepper está arriba del todo y no hay sitio encima. */
.step.hvy-bloqueado .hvy-candado-globo {
  left: 0;
  right: auto;
  top: calc(100% + 9px);
  transform: none;
}
.step.hvy-bloqueado .hvy-candado-globo::before {
  left: 16px;
  right: auto;
  top: -7px;
  transform: rotate(45deg);
}
.step.hvy-bloqueado:hover { z-index: 210; }

/* [11-09] En la Revisión, lo que el plan de la empresa no incluye. */
.review-sin-plan {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  background: #fcfcfe;
  border: 1px dashed #e0d5ff;
  border-radius: 10px;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.5;
}
.review-sin-plan i { color: #b7791f; font-size: 12px; margin-top: 2px; flex: none; }
.review-sin-plan b { color: #6b7280; }

/* ══ [12-09] EL PANEL DE EMPRESAS ═══════════════════════════════════════════ */

/* Las tres vistas, como CARPETAS: la activa se funde con la tabla —se ve que manda sobre
   lo de abajo— y las inactivas quedan hundidas. El subrayado marcaba solo la activa y las
   otras dos parecían texto suelto. */
.cp-vistas-bar { margin: 16px 0 0; }   /* [20-09 (2)] aire con la barra de filtros */
/* La barra: pestañas a la izquierda, orden a la derecha, y la línea que las une por
   debajo — es lo que hace que la activa se vea unida a la tabla. */
.cp-vistas-bar { display: flex; align-items: flex-end; border-bottom: 2px solid #e4e7f2; padding-bottom: 0; }
.cp-vistas { display: flex; gap: 2px; align-items: center; }
.cp-vistas button {
  border: 2px solid transparent; border-bottom: 0;
  background: #f4f5fa; border-radius: 10px 10px 0 0;
  padding: 10px 17px; margin-bottom: -2px;
  font: 700 12.5px 'DM Sans', sans-serif; color: #8b90a8; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.cp-vistas button:hover { background: #eef0f6; color: #6b7280; }
.cp-vistas button.on { background: #fff; border-color: #e4e7f2; color: #7c3aed; padding-bottom: 12px; }
.cp-vistas button i { font-size: 12px; }
.cp-vistas-bar .cp-sp { flex: 1; }
.cp-vistas-bar .cp-orden { margin: 0 2px 7px 0; }
.cp-pip { background: #C98A16; color: #fff; border-radius: 999px; font-size: 9px; font-weight: 800; padding: 1px 5px; }
.cp-pip:empty { display: none; }

/* Más filtros */
.cp-nmas { background: #9961FF; color: #fff; border-radius: 999px; font-size: 9px; font-weight: 800; padding: 1px 5px; margin-left: 5px; }
.cp-nmas:empty { display: none; }
.cp-mas {
  display: none; gap: 18px; flex-wrap: wrap; align-items: flex-end;
  background: #fbfbff; border: 1px solid #eef0f6; border-radius: 11px;
  padding: 12px 14px; margin-bottom: 11px;
}
.cp-mas.ver { display: flex; }

/* La flecha: gira al abrir, para que se note que el bloque se desplegó. */
.cp-chev { font-size: 9px; opacity: .5; margin-left: 5px; transition: transform .15s; }
#cp-btn-mas.on .cp-chev { transform: rotate(180deg); opacity: .9; }
.cp-campo { display: flex; flex-direction: column; gap: 5px; }
.cp-campo label { font-size: 9.5px; font-weight: 700; color: #9ca3af; letter-spacing: .05em; }
.cp-fila { display: flex; gap: 6px; align-items: center; }
.cp-num { width: 82px !important; }
.cp-u { font-size: 11px; color: #b8bed0; }

/* Las fichas de lo que hay filtrado */
.cp-fichas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.cp-fichas:empty { display: none; }
.cp-ficha {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f5f0ff; border: 1px solid #e0d5ff; color: #7c3aed;
  border-radius: 999px; padding: 4px 8px 4px 11px; font-size: 11px; font-weight: 600;
}
.cp-ficha button { border: 0; background: transparent; color: #b9a7e8; cursor: pointer; font-size: 11px; padding: 0 2px; }
.cp-ficha button:hover { color: #7c3aed; }

/* El orden */
/* Ordenar: un grupo con marco y fondo, para que se vea que las opciones van juntas. Eran
   botones de texto sueltos y se perdían entre la tabla y las pestañas. */
.cp-orden { display: inline-flex; align-items: center; gap: 3px;
  background: #f8f9fd; border: 1px solid #eef0f6; border-radius: 9px; padding: 3px;
  margin-left: auto; flex-wrap: wrap; }
.cp-orden .lb { font-size: 9px; font-weight: 700; color: #b8bed0; letter-spacing: .06em;
  padding: 0 8px 0 7px; }
.cp-orden button { border: 0; background: transparent; border-radius: 7px; padding: 6px 11px;
  font: 600 11.5px 'DM Sans', sans-serif; color: #8b90a8; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; }
.cp-orden button:hover { background: #eef0f6; color: #6b7280; }
.cp-orden button.on { background: #fff; color: #7c3aed; box-shadow: 0 1px 2px rgba(30,45,90,.10); }
.cp-orden button i { font-size: 9px; opacity: .7; }
/* Un orden que no se puede cumplir: apagado, no escondido. Se ve que existe y que
   llegará — ofrecerlo y que no ordene confunde más. */
.cp-orden button.apagado { color: #d5d7e2; cursor: default; }
.cp-orden button.apagado:hover { background: transparent; color: #d5d7e2; }

/* El estado: cuatro, no dos. "Desactivada" tapaba tres situaciones distintas y cada una
   pide una accion diferente. */
.cp-est { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 4px 9px 4px 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  cursor: pointer; border: 0; flex: none; font-family: 'DM Sans', sans-serif; }
.cp-est .p { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cp-est.activa        { background: #E1F5EE; color: #1D8A63 } .cp-est.activa .p        { background: #1D8A63 }
.cp-est.pendiente     { background: #FAEEDA; color: #854F0B } .cp-est.pendiente .p     { background: #C98A16 }
.cp-est.suspendida    { background: #FDECEA; color: #B3261E } .cp-est.suspendida .p    { background: #B3261E }
.cp-est.deshabilitada { background: #f2f2f6; color: #6b7194 } .cp-est.deshabilitada .p { background: #b8bed0 }
.cp-est i { font-size: 7.5px; opacity: .45; }

/* Canales */
.cp-canal { width: 24px; height: 24px; border-radius: 8px; display: inline-grid;
  place-items: center; font-size: 11.5px; }
.cp-canal.on.wa { background: #e3f7ea; color: #1D8A63 }
.cp-canal.on.ig { background: #fdeaf3; color: #c13584 }
.cp-canal.on.me { background: #e6f0ff; color: #0084ff }
.cp-canal.off   { background: #f4f5fa; color: #d5d7e2 }

/* Nombre e identificador */
.cp-nom b { display: block; color: #1e2d5a; font-size: 12.5px; line-height: 1.3; }
.cp-nom small { color: #b8bed0; font-size: 9.5px; letter-spacing: .03em; }

/* Cuando un dato NO EXISTE todavia. No es cero: es que nadie lo ha contado. */
.cp-sindato { color: #c9c9d4; font-size: 11px; font-style: italic; }

/* ── Vista ATENCIÓN ── */
.cp-grupo { margin-bottom: 18px; }
.cp-grupo:last-child { margin-bottom: 0; }
.cp-ghead { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cp-ghead h3 { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #1e2d5a; margin: 0; }
.cp-gcnt { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.cp-g-aten .cp-gcnt { background: #FAEEDA; color: #854F0B }
.cp-g-ok   .cp-gcnt { background: #E1F5EE; color: #1D8A63 }
.cp-g-off  .cp-gcnt { background: #f2f2f6; color: #6b7194 }
.cp-ghead .ln { flex: 1; height: 1px; background: #f0f1f7; }
.cp-gfilas { display: flex; flex-direction: column; gap: 6px; }
.cp-gr { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 11px; border: 1px solid #f0f1f7; background: #fff; }
.cp-gr:hover { border-color: #e0d5ff; }
.cp-gr.urg { border-color: #f0dcb4; background: #fffdf8; }
.cp-gr-n { width: 180px; flex: none; }
.cp-gr-por { flex: 1; font-size: 11.5px; color: #8b90a8; min-width: 0; }
.cp-gr-por b { color: #854F0B; font-weight: 600; }
.cp-gr-d { display: flex; gap: 12px; align-items: center; font-size: 11px; color: #9ca3af; flex: none; }

/* ── Vista CONSUMO ── */
.cp-lista { display: flex; flex-direction: column; }
.cp-lrow { display: flex; align-items: center; gap: 13px; padding: 12px 8px; border-bottom: 1px solid #f4f5fa; }
.cp-lrow:hover { background: #fcfcff; }
.cp-lrow.pend { background: #fffdf8; }
.cp-lname { width: 168px; flex: none; }
.cp-stack { flex: 1; min-width: 0; }
.cp-stack-top { display: flex; justify-content: space-between; font-size: 9.5px;
  color: #b8bed0; font-weight: 700; letter-spacing: .04em; margin-bottom: 5px; gap: 10px; }
.cp-stack-bar { display: flex; gap: 3px; height: 22px; }
.cp-seg { position: relative; background: #f4f5fa; border-radius: 5px; flex: 1;
  overflow: hidden; display: grid; place-items: center; }
.cp-seg i { position: absolute; left: 0; top: 0; bottom: 0; background: #dde2f5; border-radius: 5px; }
.cp-seg.alto i { background: #F6E3BE }
.cp-seg.tope i { background: #F8D5D1 }
.cp-seg span { position: relative; font-size: 9.5px; font-weight: 700; color: #6b7194; }
.cp-lgasto { width: 96px; flex: none; text-align: right; }
.cp-lgasto b { display: block; font-size: 12px; color: #4b5563; }
.cp-lgasto small { color: #b8bed0; font-size: 10px; }

/* Paginación */
.cp-pag { display: flex; align-items: center; gap: 9px; padding-top: 13px; margin-top: 4px;
  border-top: 1px solid #f0f1f7; font-size: 11.5px; color: #9ca3af; flex-wrap: wrap; }
.cp-pag .sp { flex: 1; }
.cp-pag button { border: 1px solid #eef0f6; background: #fff; border-radius: 8px;
  min-width: 30px; height: 30px; padding: 0 9px; font: 600 11.5px 'DM Sans', sans-serif;
  color: #6b7280; cursor: pointer; }
.cp-pag button:hover:not(:disabled) { border-color: #c9b8ff; color: #7c3aed; }
.cp-pag button.on { background: #9961FF; border-color: #9961FF; color: #fff; }
.cp-pag button:disabled { opacity: .4; cursor: default; }

/* El botón de la acción que toca según el estado. Solo lo ve Heavensy. */
.cp-bacc { border: 1.5px solid #C98A16; background: #FFFCF5; color: #854F0B;
  border-radius: 8px; padding: 6px 12px; font: 700 10.5px 'DM Sans', sans-serif;
  cursor: pointer; white-space: nowrap; }
.cp-bacc:hover { background: #FAEEDA; }

/* [12-09] Mientras se pide. Flota sobre la zona para que no dependa del alto que tenga
   la lista en ese momento: con una sola empresa, un spinner centrado en el bloque
   quedaría pegado arriba. */
.cp-cargando {
  display: none;
  position: absolute;
  left: 50%;
  top: 90px;
  transform: translateX(-50%);
  z-index: 5;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #7d84c1;
  box-shadow: 0 4px 16px rgba(30,45,90,.10);
}
.cp-cargando.ver { display: block; }
.cp-cargando i { margin-right: 7px; color: #9961FF; }
#companies-lista { position: relative; }   /* el ancla del spinner */

/* [13-09] La barra de búsqueda, con marco y etiqueta propios: antes flotaba suelta junto
   a las pestañas y las dos cosas parecían lo mismo. */
.filters-bar {
  background: #fbfbff;
  border: 1px solid #eef0f6;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 4px;
  position: relative;
}
.filters-bar::before {
  content: "BUSCAR Y FILTRAR";
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: #b8bed0;
  letter-spacing: .07em;
  margin-bottom: 9px;
}
.cp-mas { margin-top: 10px; margin-bottom: 4px; }

/* [13-09] La tabla de Consumo. Los encabezados eran lo que faltaba: sin ellos, las
   barras con "Equipo 2/∞" dentro no se entendían. */
.cp-tabla th.c, .cp-tabla td.c { text-align: center; }
.cp-tabla th.r, .cp-tabla td.r { text-align: right; }
/* Una línea fina separa los grupos de columnas: cupos, uso y gasto. */
.cp-tabla .cp-gt { border-left: 1px solid #eef0f6; }

/* El cupo: número grande, y barra solo cuando hay tope que llenar. */
.cp-cupo { text-align: center; min-width: 58px; }
.cp-cupo .n { font-size: 13px; font-weight: 700; color: #4b5563; letter-spacing: -.02em; }
.cp-cupo .n small { font-weight: 400; color: #c9c9d4; font-size: 10.5px; }
.cp-cupo .bar { height: 3px; border-radius: 2px; background: #eef0f6; margin-top: 4px; overflow: hidden; }
.cp-cupo .bar i { display: block; height: 100%; background: #a8b0d8; border-radius: 2px; }
.cp-cupo.alto .n { color: #854F0B } .cp-cupo.alto .bar i { background: #C98A16 }
.cp-cupo.tope .n { color: #B3261E } .cp-cupo.tope .bar i { background: #B3261E }

/* La fila de una empresa que espera algo: fondo cálido, para que salte sin gritar. */
.cp-tabla tr.cp-urg td { background: #fffdf8; }
.cp-tabla tr.cp-urg:hover td { background: #fffbf0; }
.cp-por { font-size: 11.5px; color: #8b90a8; }
.cp-por b { color: #854F0B; font-weight: 600; }

/* El gasto, en primer plano: es el dato que da nombre a la vista. */
.cp-tabla .cp-gasto-mt { font-size: 13px; font-weight: 700; color: #1e2d5a; display: block; }
.cp-tabla .cp-gasto-usd { font-size: 11px; color: #7d84c1; font-weight: 600; }

/* [13-09 (2)] Aquí vivía el globo del estado (.cp-tip). Se retiró: vivía dentro de la
   celda y la tabla lo recortaba —con una sola empresa se veía un trozo asomando bajo la
   fila—. Ahora usa el globo FLOTANTE de hvy-permisos (.hvy-tip), que se coloca donde
   quepa. El texto viaja en `data-tip` y lo engancha _cpEngancharTips.
   Se conserva el estilo del <b> dentro del globo, que usa el desglose del
   almacenamiento. */
.hvy-tip b { display: block; color: #1e2d5a; font-weight: 700; font-size: 11.5px; margin-bottom: 4px; }

/* ══ [13-09] EL COLOR DE CADA PLAN ══════════════════════════════════════════
   Redondeado como el chip de estado, para que los dos combinen en la misma fila.
   Y en escala: gris el gratis y lila más intenso cuanto más alto el plan, para que se lea
   de un vistazo quién paga más sin tener que leer el texto. */
.cp-tabla .plan-badge {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  padding: 4px 11px;
  font: 700 10.5px 'DM Sans', sans-serif;
  white-space: nowrap;
  letter-spacing: .01em;
}
.plan-badge.cp-plan-gratis     { background: #f2f2f6; color: #7b8194; }
.plan-badge.cp-plan-automate   { background: #e6f0ff; color: #2c6bb8; }
.plan-badge.cp-plan-secretaria { background: #eef1ff; color: #6d74b8; }
.plan-badge.cp-plan-enterprise { background: #e9e2ff; color: #6d3fd4; }
.plan-badge.cp-plan-full       { background: #9961FF; color: #fff; }

/* [13-09] El almacenamiento: el mes arriba, el total debajo en gris. */
.cp-mb-mes { display: block; font-size: 12.5px; font-weight: 600; color: #4b5563; }
.cp-mb-tot { display: block; font-size: 10px; color: #b8bed0; margin-top: 1px; }

/* ══ [13-09] LA FRANJA DE PERÍODO ═══════════════════════════════════════════
   Bajo las pestañas y sin borde arriba, para que se lea como parte de la misma pieza.
   En palabras y no como un selector: el período cambia qué significan todos los números
   de la tabla, así que tiene que ser difícil de pasar por alto. */
.cp-periodo {
  display: flex; align-items: center; gap: 10px;
  background: #fbfbff; border: 1px solid #eef0f6; border-top: 0;
  border-radius: 0 0 11px 11px;
  padding: 9px 14px; margin-bottom: 10px;
}
.cp-periodo:empty { display: none; }
.cp-per-txt { font-size: 11.5px; color: #8b90a8; }
.cp-per-txt b { color: #1e2d5a; font-weight: 700; }
.cp-per-sp { flex: 1; }
.cp-per-nav {
  width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent;
  color: #b8bed0; cursor: pointer; font-size: 11px;
}
.cp-per-nav:hover:not(:disabled) { background: #eef0f6; color: #7c3aed; }
.cp-per-nav:disabled { opacity: .35; cursor: default; }
.cp-per-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.cp-per-chips button {
  border: 1px solid #eef0f6; background: #fff; border-radius: 8px; padding: 5px 11px;
  font: 600 11px 'DM Sans', sans-serif; color: #8b90a8; cursor: pointer;
}
.cp-per-chips button:hover { border-color: #c9b8ff; color: #7c3aed; }
.cp-per-chips button.on { background: #f5f0ff; border-color: #9961FF; color: #7c3aed; }

/* [13-09 (10)] Encabezados en dos líneas: el nombre y, debajo, la unidad en gris. Dice
   qué son los datos —"Equipo / personas"— sin repetir el mes que la franja ya escribe. */
.cp-tabla.cp-th2 th {
  padding-top: 9px; padding-bottom: 9px; vertical-align: bottom; line-height: 1.3;
  /* Un poco más de cuerpo, pero el COLOR es el de la tabla de siempre (#7D84C1): eran
     más chicos que el contenido y se perdían, y eso se arregla con el tamaño, no
     cambiando la paleta. */
  font-size: 10.5px;
  border-bottom: 1.5px solid #e4e7f2;
}
.cp-tabla .cp-th-u {
  display: block; font-size: 9px; font-weight: 500; color: #a8b0d8;
  letter-spacing: 0; text-transform: none; margin-top: 2px;
}

/* El costo de IA en su columna. El "~" ámbar avisa de que es estimado. */
.cp-usd { font-size: 12.5px; font-weight: 700; color: #4b5563; }
.cp-apx { color: #c9a227; font-weight: 700; }

/* [13-09] Cuántas filas por página. Junto a la paginación, que es donde se busca. */
.cp-pp { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #b8bed0; margin-right: 4px; }
.cp-pp button {
  border: 1px solid #eef0f6; background: #fff; border-radius: 7px;
  min-width: 28px; height: 26px; padding: 0 7px;
  font: 600 11px 'DM Sans', sans-serif; color: #8b90a8; cursor: pointer;
}
.cp-pp button:hover { border-color: #c9b8ff; color: #7c3aed; }
.cp-pp button.on { background: #f5f0ff; border-color: #9961FF; color: #7c3aed; }

/* ══ [13-09] UN CANAL CONECTADO NO SE TOCA ══════════════════════════════════
   Cambiar un identificador o un token en caliente deja a la empresa sin recibir
   mensajes. El campo se ve cerrado, pero sigue siendo `readOnly` y no `disabled`: un
   campo deshabilitado no se envía al guardar y se perdería el dato. */
input.w-cerrado, textarea.w-cerrado {
  background: #f8f9fd;
  color: #8b90a8;
  border-color: #eef0f6;
  cursor: not-allowed;
  /* El candadito, dentro del propio campo. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23c9a227'%3E%3Cpath d='M144 144v48h160v-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192v-48C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64h16z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
  padding-right: 32px !important;
}
input.w-cerrado:focus { outline: none; box-shadow: none; }

/* El botón de conectar, cuando ya no se puede. */
#btn-meta-signup.hvy-bloqueado { opacity: .45; cursor: not-allowed; }

/* El aviso pasa de azul informativo a ámbar de advertencia. */
.form-hint-box.w-hint-cerrado {
  background: #FFFCF5;
  border-color: #f0dcb4;
  color: #854F0B;
}
.form-hint-box.w-hint-cerrado i { color: #C98A16; }

/* [13-09] El contador de caracteres, debajo de su campo. Discreto mientras sobra sitio;
   ámbar al acercarse y rojo al llegar — así se ve venir antes de guardar. */
.w-cont-car {
  text-align: right;
  font-size: 10.5px;
  font-weight: 600;
  color: #c9c9d4;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;   /* que no baile al cambiar de cifra */
}
.w-cont-car.alto { color: #854F0B; }
.w-cont-car.tope { color: #B3261E; }

/* La caja de la base de conocimiento cuando el plan no la trae. */
.prompt-layer.hvy-bloqueado { opacity: .6; }
.prompt-layer.hvy-bloqueado .prompt-layer-head::after {
  content: "\f023";                     /* el candado de Font Awesome */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #C98A16;
  font-size: 10px;
  margin-left: 7px;
}

/* ══ [14-09] EL INTERRUPTOR DEL ASISTENTE ═══════════════════════════════════
   Pequeño y discreto: es un control de fila, no el protagonista de la pantalla. */
.cp-ia { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cp-sw {
  width: 30px; height: 17px; border-radius: 999px; background: #d9dbe6;
  position: relative; cursor: pointer; border: 0; flex: none; transition: background .18s;
}
.cp-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: left .18s;
}
.cp-sw.on { background: #1D8A63; }
.cp-sw.on::after { left: 15px; }
/* Apagado por falta de cuota: no lo apagó nadie, se cortó solo. En rojo suave, que lo
   distingue del gris de "alguien lo apagó" sin gritar. */
.cp-sw.sincuota { background: #d99b95; }
.cp-sw:disabled { opacity: .5; cursor: not-allowed; }
.cp-ia-lb { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; color: #c9c9d4; }
.cp-ia-lb.on { color: #1D8A63; }

/* ══ [14-09] CÓMO VA DE GASTO DE IA ═════════════════════════════════════════
   Una barra de color al borde de la fila y un fondo, subiendo de intensidad con el
   porcentaje. Quien se está pasando salta a la vista al abrir la pantalla, sin tener que
   ir leyendo la columna de tokens fila por fila. */
.cp-tabla td:first-child { position: relative; }
.cp-tabla tr[class*="cp-q-"] td:first-child::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 4px; border-radius: 0 3px 3px 0;
}
/* 70% — todavía hay margen, pero conviene mirarla. */
.cp-tabla tr.cp-q-aviso td:first-child::before { background: #E3B85C; }
.cp-tabla tr.cp-q-aviso td { background: #FFFDF8; }
/* 90% — está por acabarse. */
.cp-tabla tr.cp-q-alto td:first-child::before { background: #C98A16; }
.cp-tabla tr.cp-q-alto td { background: #FFFAF0; }
/* 100% — se pasó, y hoy se le sigue sirviendo. */
.cp-tabla tr.cp-q-tope td:first-child::before { background: #B3261E; }
.cp-tabla tr.cp-q-tope td { background: #FDF1EF; }

/* La fila de Atención ya tenía su fondo cálido; el del gasto manda, que es más urgente. */
.cp-tabla tr.cp-urg[class*="cp-q-"] td { background: inherit; }
.cp-tabla tr.cp-urg.cp-q-aviso td { background: #FFFDF8; }
.cp-tabla tr.cp-urg.cp-q-alto  td { background: #FFFAF0; }
.cp-tabla tr.cp-urg.cp-q-tope  td { background: #FDF1EF; }

/* [15-09] PAGOS Y COMISIONES — a agregar a companies.css. El pop-up es provisional
   hasta igualarlo contra calendario.css. */
.cp-est-fijo { cursor: default; }
.cp-nom .cp-cod { font-family: ui-monospace, Menlo, monospace; letter-spacing: .03em; }
.cp-fecha { display: block; font-size: 12px; }
.cp-medio { display: block; font-size: 11px; color: #9ca3af; }
.cp-acc { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.cp-acc .btn-sm { padding: 6px 11px; font-size: 12px; }
.cp-lock { display: inline-flex; } .cp-lock button { opacity: .55; cursor: not-allowed; }
.cp-lock .fa-lock { color: #C98A16; font-size: 10px; margin-left: 3px; }
.cp-btn-tokens { background: #F3EEFF; border-color: #F3EEFF; color: #7c3aed; }
.cp-btn-tokens:hover { background: #EAE2FF; }

/* pop-up */
.cp-modal-velo { position: fixed; inset: 0; background: rgba(31,36,51,.35); display: none;
  align-items: center; justify-content: center; z-index: 1000; }
.cp-modal-velo.ver { display: flex; }
.cp-modal { width: 540px; max-width: calc(100vw - 32px); background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(31,36,51,.25); overflow: hidden; font-family: 'DM Sans', sans-serif; }
.cp-modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e4e7f2; }
.cp-modal header h3 { margin: 0; font-size: 16px; color: #1f2433; }
.cp-modal header small { display: block; color: #6b7280; margin-top: 2px; }
.cp-modal-x { border: 0; background: none; font-size: 22px; color: #9ca3af; cursor: pointer; line-height: 1; }
.cp-modal-cuerpo { padding: 18px 20px; display: grid; gap: 12px; }
.cp-modal footer { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid #e4e7f2; background: #f9f9fc; }
.cp-modal footer > span { color: #9ca3af; font-size: 12px; }
.cp-modal footer > div { display: flex; gap: 8px; }
.cp-ficha-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; background: #f9f9fc;
  border: 1px solid #eef0f6; border-radius: 10px; padding: 12px 14px; }
.cp-ficha-pago small { display: block; color: #9ca3af; font-size: 11px; margin-bottom: 2px; }
.cp-ficha-pago b { font-weight: 700; color: #1f2433; }
.cp-ficha-pago .monto b { font-size: 20px; color: #7c3aed; }
.cp-et { font-weight: 700; font-size: 12px; color: #6b7280; display: block; margin-top: 2px; }
.cp-seg { display: flex; border: 1px solid #e4e7f2; border-radius: 9px; overflow: hidden; }
.cp-seg button { flex: 1; border: 0; background: #fff; padding: 9px 10px; font: 700 12.5px 'DM Sans', sans-serif;
  color: #6b7280; cursor: pointer; border-right: 1px solid #e4e7f2; }
.cp-seg button:last-child { border-right: 0; }
.cp-seg button.on { background: #F3EEFF; color: #7c3aed; }
.cp-dest { display: flex; align-items: center; gap: 10px; border: 1px solid #e4e7f2; border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.cp-dest i { color: #9ca3af; } .cp-dest b { margin-left: auto; }
.cp-monto { position: relative; }
.cp-monto::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-weight: 700; }
.cp-monto input { width: 100%; box-sizing: border-box; border: 1px solid #e4e7f2; border-radius: 9px; padding: 9px 12px 9px 28px;
  font: 700 18px 'DM Sans', sans-serif; color: #1f2433; }
.cp-monto input:focus { outline: 2px solid #F3EEFF; border-color: #7c3aed; }
.cp-rapidos { display: flex; gap: 6px; }
.cp-equiv { color: #6b7280; font-size: 12.5px; min-height: 16px; } .cp-equiv b { color: #1f2433; }
.cp-aviso { display: none; background: #FAEEDA; color: #854F0B; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
.cp-aviso.ver { display: block; }
.cp-reparto { display: grid; }
.cp-linea { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #e4e7f2; font-size: 13px; }
.cp-linea.total { border-bottom: 0; font-weight: 700; }
.cp-hist { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp-hist th { text-align: left; color: #8b90a8; font-size: 11px; padding: 6px 4px; border-bottom: 1px solid #e4e7f2; }
.cp-hist td { padding: 8px 4px; border-bottom: 1px solid #f1f2f7; } .cp-hist .r { text-align: right; }

/* ── [15-09 (2)] Pop-up: cortesía, candado del envío y choque de .cp-seg ─────────── */
/* .cp-seg también es el segmento de la barra de consumo: dentro del pop-up se anulan
   sus reglas de icono y de texto. */
.cp-modal .cp-seg i { position: static; background: none; border-radius: 0; }
.cp-modal .cp-seg span { position: static; font-size: inherit; font-weight: inherit; color: inherit; }
.cp-modal .cp-seg .cp-lock { flex: 1; display: flex; }
.cp-modal .cp-seg .cp-lock button { width: 100%; }
.cp-modal .cp-seg .cp-lock .fa-lock { color: #C98A16; font-size: 10px; margin-left: 4px; }
.cp-bloque-modo { display: grid; gap: 12px; }
.cp-oculto { display: none !important; }
.cp-et-nota { font-weight: 500; color: #9ca3af; }
.cp-monto-mt::before { content: none; }
.cp-monto-mt::after { content: "Mt"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-weight: 700; }
.cp-monto.cp-monto-mt input { padding-left: 12px; padding-right: 46px; }
.cp-regalo { display: flex; gap: 10px; background: #F3EEFF; color: #5b2bb5; border-radius: 9px; padding: 10px 12px; font-size: 12.5px; }
.cp-regalo i { margin-top: 2px; }
.cp-motivo { width: 100%; box-sizing: border-box; border: 1px solid #e4e7f2; border-radius: 9px; padding: 9px 12px; font: 500 13.5px 'DM Sans', sans-serif; color: #1f2433; }
.cp-motivo:focus { outline: 2px solid #F3EEFF; border-color: #7c3aed; }
.cp-hist-motivo { display: block; color: #9ca3af; font-size: 11px; margin-top: 2px; }

/* ── [16-09] Saldo de tokens ───────────────────────────────────────────────── */
.cp-saldo { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; cursor: default; }
.cp-saldo i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cp-saldo.s-ok   { background: #E1F5EE; color: #1D8A63; } .cp-saldo.s-ok i   { background: #1D8A63; }
.cp-saldo.s-bajo { background: #FAEEDA; color: #854F0B; } .cp-saldo.s-bajo i { background: #C98A16; }
.cp-saldo.s-cero { background: #FDECEA; color: #B3261E; } .cp-saldo.s-cero i { background: #B3261E; }
/* [28-09-2026 (2)] Su plan no trae asistente: gris, con el candado en lugar del punto. */
.cp-saldo.s-plan { background: #f2f2f6; color: #6b7194; }
.cp-saldo.s-pend { background: #f2f2f6; color: #6b7194; } .cp-saldo.s-pend i { background: #b8bed0; }
.cp-saldo.s-plan i.fa-lock { width: auto; height: auto; border-radius: 0; background: none; color: #C98A16; font-size: 9px; }
.cp-ia-lb .fa-lock { color: #C98A16; font-size: 7.5px; margin-left: 2px; }

/* ── [16-09 (2)] Revisar comprobante ───────────────────────────────────────── */
.cp-modal.cp-modal-ancho { width: 940px; }
.cp-modal-ancho .cp-modal-cuerpo { display: block; }
.cp-rev-cuerpo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.cp-rev-cuerpo .cp-et { margin: 12px 0 6px; }
.cp-visor { border: 1px solid #e4e7f2; border-radius: 10px; background: #f6f7fb; display: flex; flex-direction: column; overflow: hidden; }
.cp-visor-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #e4e7f2; background: #fff; font-size: 12px; color: #6b7280; }
.cp-visor-img { flex: 1; display: grid; place-items: center; padding: 12px; min-height: 420px; }
.cp-visor-img img { max-width: 100%; max-height: 460px; box-shadow: 0 4px 14px rgba(31,36,51,.12); border-radius: 4px; }
.cp-visor-img iframe { width: 100%; height: 460px; border: 0; background: #fff; border-radius: 4px; }
.cp-ver-comp { color: #7c3aed; font-weight: 700; text-decoration: none; font-size: 12px; white-space: nowrap; }
.cp-ver-comp.cp-off { pointer-events: none; opacity: .35; }
.cp-chequeo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cp-chequeo li { display: flex; gap: 8px; align-items: flex-start; color: #4b5563; font-size: 12.5px; }
.cp-chequeo i { color: #7c3aed; margin-top: 2px; }
.cp-rev-rechazo { background: #FDECEA; border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.cp-rev-rechazo .cp-et { color: #B3261E; margin-top: 0; }
.cp-btn-rev { background: #FAEEDA !important; border-color: #F0D9A8 !important; color: #854F0B !important; }
.cp-badge-rev { background: #C98A16; color: #fff; border-radius: 999px; font-size: 10px; padding: 0 6px; line-height: 16px; }
.cp-btn-ok { background: #1D8A63 !important; border-color: #1D8A63 !important; }
.cp-btn-ok:hover { background: #17724f !important; }
.cp-btn-mal { color: #B3261E !important; }
.cp-rechazado { color: #B3261E; cursor: default; }
.cp-chip-ok { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; background: #E1F5EE; color: #1D8A63; }
.cp-chip-ok i { width: 7px; height: 7px; border-radius: 50%; background: #1D8A63; display: inline-block; }
.cp-modal button.cp-oculto { display: none !important; }
@media (max-width: 900px) { .cp-rev-cuerpo { grid-template-columns: 1fr; } }

/* ── [16-09 (3)] Historial de comprobantes ─────────────────────────────────── */
.cp-hist { margin-top: 12px; border: 1px solid #e4e7f2; border-radius: 10px; overflow: hidden; }
.cp-hist-tit { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f9f9fc; border-bottom: 1px solid #e4e7f2; font-weight: 700; font-size: 12px; color: #6b7280; }
.cp-hist-fila { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid #f1f2f7; cursor: pointer; }
.cp-hist-fila:last-child { border-bottom: 0; } .cp-hist-fila:hover { background: #fcfcfe; } .cp-hist-fila.on { background: #F3EEFF; }
.cp-hist-mini { width: 38px; height: 38px; border-radius: 6px; background: #f2f2f6 center / cover no-repeat; flex: none; border: 1px solid #e4e7f2; }
.cp-hist-mini.gris { filter: grayscale(1); opacity: .7; }
.cp-hist-txt { flex: 1; min-width: 0; font-size: 12px; }
.cp-hist-txt b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-hist-txt small { color: #9ca3af; }
.cp-hist-motivo { color: #B3261E; display: block; margin-top: 2px; }
.cp-hist-etiq { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap; background: #f2f2f6; color: #6b7194; }
.cp-hist-etiq.actual { background: #FAEEDA; color: #854F0B; } .cp-hist-etiq.rechazado { background: #FDECEA; color: #B3261E; }
.cp-visor-anterior { background: #FDECEA; color: #8a1f18; font-size: 12px; padding: 7px 12px; border-bottom: 1px solid #f3c6c2; }
.cp-inactivo { opacity: .45; pointer-events: none; }

/* ── COSTO IA (solo Heavensy) ────────────────────────────────────────────────
   [20-09-2026] Lo que la IA cuesta de verdad frente a lo que se cobra. */

/* Las cuatro cifras del mes */
.cp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.cp-kpi { border: 1px solid #e4e7f2; border-radius: 11px; padding: 12px 14px; background: #fff; }
.cp-kpi small { display: block; color: #8b90a8; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cp-kpi b { display: block; font-size: 22px; margin-top: 4px; }
.cp-kpi span { color: #9ca3af; font-size: 11.5px; }
.cp-c-verde { color: #1D8A63; } .cp-c-rojo { color: #B3261E; }
.cp-c-ambar { color: #854F0B; } .cp-c-violeta { color: #7c3aed; }
.cp-sub { display: block; color: #9ca3af; font-size: 11px; }

/* Avisos de la vista: precios faltantes y conciliación */
.cp-costo-aviso { border-radius: 9px; padding: 9px 12px; font-size: 12.5px; margin: 10px 0; background: #f4f6fd; color: #5b6180; }
.cp-costo-aviso.ok { background: #E1F5EE; color: #1D8A63; }
.cp-costo-aviso.mal { background: #FDECEA; color: #8a1f18; }
.cp-costo-aviso i { margin-right: 6px; }

/* El estado de cada empresa */
.cp-costo-est { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: default; }
.cp-costo-est.e-ok { background: #E1F5EE; color: #1D8A63; }
.cp-costo-est.e-bajo { background: #FAEEDA; color: #854F0B; }
.cp-costo-est.e-mal { background: #FDECEA; color: #B3261E; }
.cp-costo-est.e-hvy { background: #F3EEFF; color: #6d5bd0; }
.cp-costo-est.e-gris { background: #f1f2f7; color: #8b90a8; }

/* [20-09 (4)] Ordenar tocando el título de la columna. La flecha se ve apagada mientras
   esa columna no manda, para que se note que se puede tocar sin gritarlo. */
.cp-tabla th.cp-thord { cursor: pointer; user-select: none; white-space: nowrap; }
.cp-tabla th.cp-thord:hover { color: #7c3aed; }
.cp-tabla th.cp-thord i { margin-left: 5px; font-size: 9px; opacity: .3; transition: opacity .12s; }
.cp-tabla th.cp-thord:hover i { opacity: .6; }
.cp-tabla th.cp-thord.on { color: #7c3aed; }
.cp-tabla th.cp-thord.on i { opacity: 1; }
.cp-tabla th.cp-thord .cp-th-u { color: inherit; opacity: .75; }
/* El bloque ORDENAR quedó vacío: que no deje un hueco entre las pestañas y el borde. */
.cp-vistas-bar .cp-orden:empty { display: none; }

/* El pie de la tabla: es un RESUMEN del mes, no una fila más. Fondo propio, línea gruesa
   que lo separa de los datos y negrita, como en el preview aprobado. Sin esto se leía como
   una empresa llamada "7 empresas con consumo". */
.cp-tabla tfoot td {
  background: #f4f6fd;
  border-top: 2px solid #d8ddf2;
  border-bottom: 0;
  font-weight: 800;
  font-size: 13.5px;
  color: #1f2433;
  padding-top: 12px;
  padding-bottom: 12px;
}
.cp-tabla tfoot td:first-child { color: #5b6180; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.cp-tabla tfoot .cp-sub { font-weight: 600; color: #8b90a8; }
.cp-tabla tfoot tr:hover td { background: #f4f6fd; }   /* el resumen no se ilumina al pasar */

/* El pie: conciliación y gasto real */
.cp-costo-pie { display: grid; grid-template-columns: 1fr 340px; gap: 16px; margin-top: 16px; }
.cp-ccaja { border: 1px solid #e4e7f2; border-radius: 11px; padding: 14px 16px; background: #fff; }
.cp-ccaja h4 { margin: 0 0 8px; font-size: 13.5px; }
.cp-cfila { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f4f5f9; font-size: 12.5px; }
.cp-cfila:last-of-type { border-bottom: 0; }
.cp-cet { display: block; font-weight: 700; font-size: 11.5px; color: #6b7280; margin: 10px 0 4px; }
.cp-ccampo { width: 100%; box-sizing: border-box; border: 1px solid #e4e7f2; border-radius: 9px; padding: 9px 12px; font: 600 13px 'DM Sans', sans-serif; color: #1f2433; }
.cp-ccampo:focus { outline: none; border-color: #c9b8ff; }
.cp-costo-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; align-items: center; }

@media (max-width: 1100px) {
  .cp-kpis { grid-template-columns: repeat(2, 1fr); }
  .cp-costo-pie { grid-template-columns: 1fr; }
}

/* ── [28-09-2026] El plan en Editar empresa ── */
.w-plan-fila { display: flex; align-items: center; gap: 8px; }
.w-plan-fila .exc-custom-select-wrap { flex: 1; min-width: 0; }
.w-plan-cambiar { white-space: nowrap; }
#w-plan-trigger.hvy-bloqueado { background: #fafafc; }
.w-plan-estado:empty { display: none; }
.w-plan-estado { margin-top: 10px; }
.w-plan-estado .mp-cp-aviso, .w-plan-estado .mp-rechazo { margin-bottom: 0; }
.w-plan-nota { display: flex; gap: 8px; align-items: flex-start; background: #EFF6FF; border: .5px solid #C9D9FF; border-radius: 8px;
  padding: 9px 12px; font-size: 11.5px; color: #4b5b8c; line-height: 1.45; }
.w-plan-nota i { color: #7D84C1; margin-top: 2px; }
.w-plan-sol { display: flex; gap: 12px; align-items: center; background: #FFFCF5; border: 1px solid #F3DDB3; color: #6b4a10;
  border-radius: 12px; padding: 11px 14px; font-size: 12px; line-height: 1.45; }
.w-plan-sol > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #FAEEDA; color: #C98A16; }
.w-plan-sol > div:not(.w-plan-sol-acc) { flex: 1; min-width: 0; }
.w-plan-sol b { color: #5c3d07; }
.w-plan-sol small { display: block; color: #8a6a2c; margin-top: 2px; }
.w-plan-sol-acc { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .w-plan-fila { flex-wrap: wrap; } .w-plan-cambiar { width: 100%; justify-content: center; }
  .w-plan-sol { flex-wrap: wrap; } .w-plan-sol-acc { width: 100%; }
}