/* ============================================================
   CHECK Layer — portal.css  (ACT-035)
   Área autenticada (.cl-app). Port ESTRUCTURAL del portal de referencia
   (ds.css v3.1: app shell, main-head, kpis,
   two/tres, list, prof-*, ptabs, opt-card, pk-row, field/input, pill,
   alert, btn) sobre las variables var(--cl-*) de tema.css.
   Reglas: sin hex (salvo blanco), sin movimiento en hover, sin bordes
   en botones con fondo de color. Se carga DESPUÉS de componentes.css.
   ============================================================ */

/* ============================================================
   TIPOGRAFÍA DEL PORTAL
   ============================================================ */
.cl-app { font-size: 15px; color: var(--cl-cuerpo); line-height: 1.6; }
.cl-app h1, .cl-app h2, .cl-app h3, .cl-app h4, .cl-app h5, .cl-app h6 {
  font-family: var(--cl-font-display);
  color: var(--cl-tinta);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
}
.cl-app .text-muted { color: var(--cl-muted-fuerte) !important; }
.cl-muted { color: var(--cl-muted-fuerte); }

/* ============================================================
   SHELL: sidebar + main (escritorio) · topbar + offcanvas (móvil)
   ============================================================ */
.cl-app {
  display: grid;
  grid-template-columns: var(--cl-sidebar-ancho) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  /* La columna de la sidebar queda oscura hasta el final aunque la sidebar (sticky) sea más corta */
  background: linear-gradient(90deg, var(--cl-sidebar-fondo) 0, var(--cl-sidebar-fondo) var(--cl-sidebar-ancho), var(--cl-fondo) var(--cl-sidebar-ancho), var(--cl-fondo) 100%);
}

/* Piel compartida por la sidebar fija y la móvil */
.cl-sidebar, .cl-sidebar-movil {
  background: var(--cl-sidebar-fondo);
  color: var(--cl-sidebar-texto);
}
.cl-sidebar {
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1030;
}
.cl-sidebar-movil {
  width: min(300px, 86vw);
  border: none;
}
.cl-sidebar-movil .offcanvas-body {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cl-sidebar-cerrar {
  display: grid; place-items: center;
  position: absolute; top: 14px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--cl-sidebar-caja);
  border: 0;
  color: #fff;
  font-size: 1rem;
}
.cl-sidebar-cerrar:hover { background: var(--cl-sidebar-hover); }

/* Marca (logo + nombre) */
.cl-marca-portal {
  display: flex; align-items: center; gap: 10px;
  color: #fff;
  padding: 4px 10px 12px;
  text-decoration: none;
  font-family: var(--cl-font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1;
}
.cl-marca-portal:hover { color: #fff; }
.cl-marca-portal svg { flex-shrink: 0; }
.cl-marca-portal .lt { color: var(--cl-sidebar-texto); font-weight: 600; }
.cl-sidebar-movil .cl-marca-portal { padding-right: 48px; }

/* Selector de empresa activa (tenant) dentro de la sidebar */
.cl-tenant { margin: 0 0 10px; }
.cl-tenant__btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--cl-sidebar-borde);
  background: var(--cl-sidebar-caja);
  color: #fff;
  font: 600 13.5px/1.3 var(--cl-font);
  text-align: left;
  cursor: pointer;
}
.cl-tenant__btn:hover { background: var(--cl-sidebar-hover); color: #fff; }
.cl-tenant__btn > .bi-building { color: var(--cl-sidebar-icono); font-size: 1.05rem; flex-shrink: 0; }
.cl-tenant__btn > .bi-chevron-expand { color: var(--cl-sidebar-icono); font-size: .9rem; flex-shrink: 0; }
.cl-tenant__txt { flex: 1; min-width: 0; }
.cl-tenant__txt small {
  display: block;
  font-size: 10.5px; font-weight: 600;
  color: var(--cl-sidebar-seccion);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 2px;
}
.cl-tenant__nombre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-tenant .dropdown-menu { min-width: 240px; }
.cl-tenant .dropdown-item { font-size: 14px; }
.cl-tenant .dropdown-item .bi-check2 { color: var(--cl-teal-texto); }

/* Navegación */
.cl-snav { display: grid; gap: 2px; padding-bottom: 12px; }
.cl-snav a, .cl-snav-btn, .cl-snav-pendiente {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 14px; font-weight: 500;
  color: #fff;
  text-decoration: none;
  background: none; border: none;
  width: 100%; text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}
.cl-snav a:hover, .cl-snav-btn:hover { background: var(--cl-sidebar-hover); color: #fff; }
.cl-snav a.activo { background: var(--cl-grad-primario); color: #fff; font-weight: 600; box-shadow: var(--cl-glow); }
.cl-snav i { font-size: 1.05rem; width: 19px; text-align: center; color: #fff; flex-shrink: 0; line-height: 1; }
/* Pendientes: aún sin página; atenuados y sin interacción */
.cl-snav-pendiente { color: rgba(255, 255, 255, .42); cursor: default; pointer-events: none; user-select: none; }
.cl-snav-pendiente i { color: rgba(255, 255, 255, .38); }
.cl-snav-pendiente small {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 1px 7px;
}
.cl-snav a:hover i, .cl-snav a.activo i, .cl-snav-btn:hover i { color: #fff; }
.cl-snav .cl-sep {
  margin: 8px 12px 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cl-sidebar-seccion);
}
.cl-snav-btn--peligro { background: var(--cl-peligro); color: #fff; margin-top: 6px; }
.cl-snav-btn--peligro i { color: #fff; }
.cl-snav-btn--peligro:hover { background: var(--cl-peligro); color: #fff; filter: brightness(.9); }

/* Caja de plan al pie de la sidebar */
.cl-plan-box {
  margin-top: auto;
  background: var(--cl-sidebar-caja);
  border: 1px solid var(--cl-sidebar-borde);
  border-radius: 9px;
  padding: 12px;
}
.cl-plan-box small { color: var(--cl-sidebar-texto); font-size: 12px; display: block; }
.cl-plan-box b { color: #fff; display: block; margin: 2px 0 8px; font-weight: 700; }
.cl-plan-box .btn { margin-top: 12px; }
.cl-barra { height: 6px; border-radius: 6px; background: var(--cl-sidebar-hover); overflow: hidden; }
.cl-barra i { display: block; height: 100%; background: var(--cl-grad-primario); border-radius: 6px; }

/* Columna principal */
.cl-main { padding: 24px 28px 40px; min-width: 0; }

/* Topbar: sólo móvil */
.cl-app-topbar { display: none; }
.cl-nav-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 8px; border: none;
  background: var(--cl-superficie-2);
  color: var(--cl-tinta);
  font-size: 1.35rem;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .cl-app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: var(--cl-fondo); }
  .cl-sidebar { display: none; }
  .cl-app-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--cl-superficie);
    border-bottom: 1px solid var(--cl-borde);
    position: sticky; top: 0; z-index: 1020;
  }
  .cl-app-topbar .cl-marca-portal { color: var(--cl-tinta); padding: 0; font-size: 19px; }
  .cl-app-topbar .cl-marca-portal:hover { color: var(--cl-tinta); }
  .cl-app-topbar .cl-marca-portal .lt { color: var(--cl-muted-fuerte); }
  .cl-main { padding: 18px 16px 32px; }
}

/* ============================================================
   ENCABEZADO DE PÁGINA (main-head) Y ACCIONES
   ============================================================ */
.cl-main-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.cl-main-head h1 { font-size: 23px; }
.cl-main-head p { color: var(--cl-muted-fuerte); font-size: 14px; margin: 0; }
.cl-head-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Encabezado heredado (Usuarios, Bitácora): alineado al main-head */
.cl-app .cl-encabezado-pagina { margin-bottom: 22px; }
.cl-app .cl-encabezado-pagina h1 { font-size: 23px; }

/* Avatar con gradiente (enlace a Mi cuenta) */
.cl-avatar-grad {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cl-grad-primario);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  font-family: var(--cl-font-display);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(8, 145, 178, .28);
  flex-shrink: 0;
}
.cl-avatar-grad:hover { color: #fff; filter: brightness(1.08); }

/* ============================================================
   TARJETAS, KPIs Y REJILLAS DEL PANEL
   ============================================================ */
.cl-app .card { transition: box-shadow .2s, border-color .2s; }
.cl-app .card:hover { box-shadow: var(--cl-sombra-md); border-color: var(--cl-borde-fuerte); }

.cl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.cl-kpi { padding: 18px; }
.cl-kpi small { color: var(--cl-muted-fuerte); font-size: 13px; }
.cl-kpi b {
  display: block;
  font-family: var(--cl-font-display);
  font-size: 27px; font-weight: 800; line-height: 1.15;
  color: var(--cl-tinta);
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.cl-kpi .d { font-size: 12.5px; display: inline-flex; align-items: flex-start; gap: 5px; color: var(--cl-muted-fuerte); line-height: 1.4; }
.cl-kpi .d i { font-size: .95rem; line-height: 1; margin-top: 2px; }
.cl-t-ok   { color: var(--cl-teal-texto) !important; }
.cl-t-warn { color: var(--cl-advertencia) !important; }
.cl-t-bad  { color: var(--cl-peligro) !important; }
.cl-t-info { color: var(--cl-info) !important; }

.cl-two  { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.cl-tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.cl-two > .card, .cl-tres > .card { display: flex; flex-direction: column; }

.cl-widget { padding: 20px; }
.cl-widget h4, .cl-list h4 {
  font-size: 15px; margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.cl-list h4 { padding: 16px 20px 4px; margin-bottom: 0; }
.cl-widget .mt-auto { margin-top: auto; }

/* Gráfica de barras (30 días) */
.cl-leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cl-muted-fuerte); font-weight: 500; }
.cl-leyenda .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cl-grad-primario); }
.cl-bars { display: flex; align-items: flex-end; gap: 5px; height: 200px; padding-top: 14px; margin-bottom: 26px; }
.cl-bars div { flex: 1; height: 100%; background: var(--cl-superficie-2); border-radius: 4px 4px 2px 2px; position: relative; min-width: 0; }
.cl-bars div.con-datos:hover { background: var(--cl-primario-tinte); }
.cl-bars div i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--cl-grad-primario); border-radius: 4px 4px 0 0; }
.cl-bars div em {
  position: absolute; left: 0; right: 0; top: -18px;
  text-align: center; font-size: 10.5px; font-style: normal; font-weight: 600;
  color: var(--cl-tinta); opacity: 0; transition: opacity .15s;
}
.cl-bars div:hover em { opacity: 1; }
.cl-bars div span { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 10.5px; color: var(--cl-muted-fuerte); white-space: nowrap; }
.cl-chart-pie { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--cl-muted-fuerte); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cl-borde); }
.cl-chart-pie b { color: var(--cl-tinta); font-family: var(--cl-font-display); }
.cl-chart-vacio {
  flex: 1; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cl-muted-fuerte); font-size: 14px; gap: 10px;
}
.cl-chart-vacio i { font-size: 2rem; color: var(--cl-borde-fuerte); line-height: 1; }
.cl-chart-vacio p { margin: 0; }

/* Tarjeta de plan / saldo (barras de consumo) */
.cl-saldo-item { margin-bottom: 14px; }
.cl-saldo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--cl-cuerpo); margin-bottom: 8px; }
.cl-saldo-cab span { display: inline-flex; align-items: center; gap: 7px; }
.cl-saldo-cab span i { color: var(--cl-primario); }
.cl-saldo-cab b { font-family: var(--cl-font-display); color: var(--cl-tinta); font-size: 16px; white-space: nowrap; }
.cl-saldo-cab b small { font-size: 12px; color: var(--cl-muted-fuerte); font-family: var(--cl-font); font-weight: 500; }
.cl-saldo-bar { height: 8px; border-radius: 6px; background: var(--cl-primario-tinte); overflow: hidden; }
.cl-saldo-bar i { display: block; height: 100%; border-radius: 6px; background: var(--cl-grad-primario); }
.cl-saldo-bar i.bajo { background: var(--cl-advertencia); }
.cl-saldo-bar i.agotado { background: var(--cl-peligro); }
.cl-saldo-nota { font-size: 12.5px; color: var(--cl-muted-fuerte); display: flex; gap: 6px; align-items: flex-start; margin: 14px 0; }
.cl-saldo-nota i { flex-shrink: 0; line-height: 1.5; }

/* Listas con fila: estado circular + texto + fecha */
.cl-list { padding: 8px 0; }
.cl-fila { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--cl-borde); font-size: 14px; }
.cl-fila:last-child { border-bottom: none; }
.cl-st {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff; background: var(--cl-primario); font-size: .95rem;
}
.cl-st--ok { background: var(--cl-teal); }
.cl-st--warn { background: var(--cl-advertencia); }
.cl-st--bad { background: var(--cl-peligro); }
.cl-st--info { background: var(--cl-info); }
.cl-st--gris { background: var(--cl-muted); }
.cl-fila__txt { flex: 1; min-width: 0; display: grid; }
.cl-fila__txt b { color: var(--cl-tinta); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-fila__txt small { color: var(--cl-muted-fuerte); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-fila em { font-style: normal; color: var(--cl-muted-fuerte); font-size: 12.5px; white-space: nowrap; }
.cl-vacio-fila { display: flex; align-items: center; gap: 12px; padding: 14px 20px 20px; font-size: 14px; }
.cl-vacio-fila b { display: block; color: var(--cl-tinta); }
.cl-vacio-fila em { font-style: normal; color: var(--cl-muted-fuerte); font-size: 12.5px; }

/* Filas de resultado (etiqueta · número · barra · %) */
.cl-res-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin-bottom: 12px; font-size: 13.5px; color: var(--cl-cuerpo); }
.cl-res-fila > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cl-res-fila > b { color: var(--cl-tinta); font-family: var(--cl-font-display); }
.cl-res-bar { grid-column: 1 / 2; height: 6px; border-radius: 6px; background: var(--cl-superficie-2); overflow: hidden; }
.cl-res-bar i { display: block; height: 100%; border-radius: 6px; background: var(--cl-primario); }
.cl-res-fila small { color: var(--cl-muted-fuerte); font-size: 12px; text-align: right; }
.cl-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--cl-primario); flex-shrink: 0; }
.cl-res-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cl-borde); }
.cl-res-totales small { color: var(--cl-muted-fuerte); font-size: 12px; display: block; }
.cl-res-totales b { display: block; font-family: var(--cl-font-display); font-size: 17px; color: var(--cl-tinta); margin-top: 3px; }
.cl-vacio-txt { font-size: 13.5px; line-height: 1.5; color: var(--cl-muted-fuerte); margin: 0; }

/* Empresas del ámbito (nombre · RFC · barra de empleados) */
.cl-emp { margin-bottom: 12px; }
.cl-emp:last-child { margin-bottom: 0; }
.cl-emp-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13.5px; margin-bottom: 6px; }
.cl-emp-cab .nombre { font-weight: 600; color: var(--cl-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cl-emp-cab .nombre small { display: block; font-weight: 500; font-size: 12px; color: var(--cl-muted-fuerte); letter-spacing: .02em; }
.cl-emp-datos { font-size: 12.5px; color: var(--cl-muted-fuerte); white-space: nowrap; }
.cl-emp-datos b { color: var(--cl-tinta); }
.cl-emp-bar { height: 6px; border-radius: 6px; background: var(--cl-superficie-2); overflow: hidden; }
.cl-emp-bar i { display: block; height: 100%; background: var(--cl-grad-primario); border-radius: 6px; }

@media (max-width: 1250px) {
  .cl-kpis { grid-template-columns: repeat(2, 1fr); }
  .cl-tres { grid-template-columns: 1fr 1fr; }
  .cl-tres > .cl-tres-ancho { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  .cl-kpis { grid-template-columns: repeat(2, 1fr); }
  .cl-two, .cl-tres { grid-template-columns: 1fr; }
  .cl-tres > .cl-tres-ancho { grid-column: auto; }
  .cl-bars { gap: 3px; height: 170px; }
  .cl-bars div span { font-size: 9.5px; }
}
@media (max-width: 575.98px) {
  .cl-kpis { grid-template-columns: 1fr; }
  .cl-main-head h1 { font-size: 21px; }
}

/* ============================================================
   PÍLDORAS DE ESTADO
   ============================================================ */
.cl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--cl-superficie-2); color: var(--cl-cuerpo);
}
.cl-pill i { font-size: .85rem; }
.cl-pill--ok   { background: var(--cl-teal-tinte); color: var(--cl-teal-texto); }
.cl-pill--warn { background: var(--cl-advertencia-tinte); color: var(--cl-advertencia-texto); }
.cl-pill--bad  { background: var(--cl-peligro-tinte); color: var(--cl-peligro-texto); }
.cl-pill--info { background: var(--cl-info-tinte); color: var(--cl-info-texto); }
.cl-pill--primario { background: var(--cl-primario-tinte); color: var(--cl-primario-texto); }
.cl-pill--marca { background: var(--cl-grad-primario); color: #fff; }
.cl-pill--tinta { background: var(--cl-tinta); color: #fff; }
/* Plan contratado (como .pill-plan del portal de referencia /Cuentas): tinte del primario con borde */
.cl-pill--plan { background: var(--cl-primario-tinte); color: var(--cl-primario-texto); border: 1px solid color-mix(in srgb, var(--cl-primario) 35%, #fff); }
.cl-pill--mini { font-size: 10.5px; padding: 1px 7px; margin-left: 6px; background: var(--cl-superficie-2); color: var(--cl-cuerpo); border: 1px solid var(--cl-borde); vertical-align: middle; }
/* Modales de confirmación: el cuerpo siempre alineado a la izquierda (listas de implicaciones, campos) */
.modal .modal-body, .modal .modal-body p, .modal .modal-body ul, .modal .modal-body label { text-align: left; }
.modal .modal-body ul { padding-left: 1.2rem; }
.modal .modal-body ul li { margin-bottom: .3rem; }
/* Botones de acción compactos en tablas (sólo ícono, con title) */
.cl-btn-ico { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
/* Filas de tabla con texto secundario debajo del principal */
.cl-tabla .cl-sub { display: block; font-size: 12.5px; color: var(--cl-muted); margin-top: 2px; }

/* ============================================================
   BOTONES DEL PORTAL (geometría de CFDI: 46 px, radio 8, sin borde)
   ============================================================ */
.cl-app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border-radius: 8px; border: none;
  font-weight: 600; font-size: 14.5px; line-height: 1;
  white-space: nowrap;
}
.cl-app .btn i { font-size: 1.05em; line-height: 1; }
.cl-app .btn i.me-1 { margin-right: 0 !important; }
.cl-app .btn-sm { height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 7px; }
.cl-app .btn-lg { height: 54px; padding: 0 28px; font-size: 16px; border-radius: 9px; }
.cl-app .btn-block { width: 100%; }
.cl-app .btn-link {
  height: auto; padding: 0; display: inline; border-radius: 0;
  color: var(--cl-primario-texto); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.cl-app .btn-link:hover { color: var(--cl-primario-hover); }
.cl-app .btn-danger {
  --bs-btn-bg: var(--cl-peligro); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--cl-peligro-texto); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cl-peligro-texto); --bs-btn-active-color: #fff;
}
/* Suave: tinte de marca con texto de marca (btn-soft de CFDI) */
.btn-cl-suave {
  --bs-btn-bg: var(--cl-primario-tinte);
  --bs-btn-color: var(--cl-primario-texto);
  --bs-btn-hover-bg: color-mix(in srgb, var(--cl-primario-tinte) 80%, var(--cl-primario));
  --bs-btn-hover-color: var(--cl-primario-texto);
  --bs-btn-active-bg: color-mix(in srgb, var(--cl-primario-tinte) 80%, var(--cl-primario));
  --bs-btn-active-color: var(--cl-primario-texto);
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent;
  font-weight: 600;
}
.cl-app .dropdown-item { font-size: 14px; }

/* ============================================================
   FORMULARIOS DEL PORTAL (field / input / input-ic de CFDI)
   ============================================================ */
.cl-field { margin-bottom: 16px; }
.cl-field label, .cl-app .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--cl-grafito); margin-bottom: 7px; }
.cl-app .form-control, .cl-app .form-select {
  height: 48px; min-height: 48px;
  border: 1.5px solid var(--cl-borde-fuerte);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--cl-tinta);
  background: var(--cl-superficie);
  transition: border-color .18s, box-shadow .18s;
}
.cl-app textarea.form-control { height: auto; padding: 12px 14px; }
.cl-app .form-control:focus, .cl-app .form-select:focus { border-color: var(--cl-primario); box-shadow: 0 0 0 4px var(--cl-anillo); }
.cl-app .form-control:disabled, .cl-app .form-control[readonly] { background: var(--cl-superficie-2); color: var(--cl-muted-fuerte); }
.cl-app .form-control::placeholder { color: var(--cl-muted); }
.cl-input-ic { position: relative; display: block; }
.cl-input-ic > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 1.05rem; line-height: 1;
  color: var(--cl-muted); pointer-events: none;
}
.cl-input-ic .form-control { padding-left: 42px; }
.cl-app .validation-message, .cl-app .text-danger.small { color: var(--cl-peligro); font-size: 13px; margin-top: 6px; display: block; }
.cl-app .validation-message:empty { display: none; }
.cl-codigo {
  font-family: var(--cl-font-display) !important;
  font-size: 26px !important; font-weight: 700;
  letter-spacing: .4em; text-align: center;
  height: 60px !important;
}
.cl-codigo::placeholder { color: var(--cl-borde-fuerte); font-weight: 600; letter-spacing: .4em; }

/* ============================================================
   AVISOS (alert de CFDI: icono + título + texto)
   ============================================================ */
.cl-alerta {
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--cl-borde);
  background: var(--cl-superficie-2);
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 18px;
  font-size: 14px; color: var(--cl-cuerpo);
}
.cl-alerta > i { font-size: 1.5rem; line-height: 1; flex-shrink: 0; color: var(--cl-primario); }
.cl-alerta h5 { font-size: 15.5px; margin-bottom: 4px; }
.cl-alerta p { margin: 0; font-size: 14px; }
.cl-alerta p + p { margin-top: 6px; }
.cl-alerta a { color: var(--cl-primario-texto); font-weight: 600; }
.cl-alerta--ok   { border-color: color-mix(in srgb, var(--cl-teal) 35%, transparent); background: var(--cl-teal-tinte); }
.cl-alerta--ok > i { color: var(--cl-teal-texto); }
.cl-alerta--bad  { border-color: color-mix(in srgb, var(--cl-peligro) 30%, transparent); background: var(--cl-peligro-tinte); }
.cl-alerta--bad > i { color: var(--cl-peligro); }
.cl-alerta--warn { border-color: color-mix(in srgb, var(--cl-advertencia) 35%, transparent); background: var(--cl-advertencia-tinte); }
.cl-alerta--warn > i { color: var(--cl-advertencia); }
.cl-alerta--info { border-color: color-mix(in srgb, var(--cl-info) 30%, transparent); background: var(--cl-info-tinte); }
.cl-alerta--info > i { color: var(--cl-info); }
/* Alertas Bootstrap heredadas (Usuarios, Bitácora) alineadas en geometría */
.cl-app .alert { border-radius: 10px; padding: 14px 16px; font-size: 14px; }

/* ============================================================
   MI CUENTA (prof-head · ptabs · prof-body · prof-sec · opt-card · pk-row)
   ============================================================ */
.cl-prof-head {
  display: flex; flex-direction: row; align-items: center; gap: 20px;
  padding: 24px 26px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--cl-superficie) 0%, color-mix(in srgb, var(--cl-primario-tinte) 38%, var(--cl-superficie)) 100%);
}
.cl-prof-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--cl-grad-primario); color: #fff;
  display: grid; place-items: center;
  font: 700 24px var(--cl-font-display); letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(8, 145, 178, .28);
}
.cl-prof-id { min-width: 0; }
.cl-prof-id h2 { font-size: 21px; margin-bottom: 2px; word-break: break-word; }
.cl-prof-id p { color: var(--cl-muted-fuerte); font-size: 14px; margin: 0 0 10px; }
.cl-prof-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.cl-ptabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 6px;
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: 12px;
}
.cl-ptabs a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--cl-cuerpo); text-decoration: none; white-space: nowrap;
}
.cl-ptabs a i { font-size: 1rem; line-height: 1; }
.cl-ptabs a:hover { background: var(--cl-superficie-2); color: var(--cl-tinta); }
.cl-ptabs a.activo { background: var(--cl-primario); color: #fff; }

.cl-prof-body { padding: 26px 28px; }
.cl-prof-sec + .cl-prof-sec { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--cl-borde); }
.cl-prof-sec-head { margin-bottom: 20px; }
.cl-prof-sec-head h3 { font-size: 18px; margin-bottom: 4px; }
.cl-prof-sec-head p { color: var(--cl-muted-fuerte); font-size: 14px; max-width: 640px; margin: 0; }
.cl-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cl-prof-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-prof-inline > .cl-input-ic { flex: 1; min-width: 220px; }
.cl-prof-acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--cl-borde); }
.cl-prof-body ol, .cl-prof-body ul { color: var(--cl-cuerpo); font-size: 14px; padding-left: 18px; }
.cl-prof-body li { margin-bottom: 8px; }
.cl-prof-body kbd { background: var(--cl-superficie-2); color: var(--cl-tinta); padding: 2px 6px; border-radius: 5px; font-size: 13px; }

/* Datos de sólo lectura (clave · valor) */
.cl-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; }
.cl-kv label { display: block; font-size: 12px; font-weight: 600; color: var(--cl-muted-fuerte); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.cl-kv .v { font-size: 14.5px; color: var(--cl-tinta); font-weight: 500; }
.cl-kv .v small { color: var(--cl-muted-fuerte); font-weight: 400; }
.cl-kv ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cl-kv li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cl-tinta); }

/* Tarjetas de opción (2FA, datos personales) */
.cl-opt-cards { display: grid; gap: 14px; }
.cl-opt-card { display: flex; gap: 16px; padding: 18px 20px; border: 1px solid var(--cl-borde); border-radius: 12px; background: var(--cl-superficie); }
.cl-opt-ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cl-superficie-2); color: var(--cl-primario);
  display: grid; place-items: center; flex-shrink: 0; font-size: 1.2rem;
}
.cl-opt-ic--ok { background: var(--cl-teal-tinte); color: var(--cl-teal-texto); }
.cl-opt-ic--warn { background: var(--cl-advertencia-tinte); color: var(--cl-advertencia-texto); }
.cl-opt-ic--bad { background: var(--cl-peligro-tinte); color: var(--cl-peligro-texto); }
.cl-opt-body { flex: 1; min-width: 0; }
.cl-opt-body h4 { font-size: 15.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-opt-body p { font-size: 14px; color: var(--cl-muted-fuerte); margin: 0 0 10px; }
.cl-opt-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Llaves de acceso (passkeys) */
.cl-pk-list { display: grid; gap: 10px; margin-bottom: 14px; }
.cl-pk-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--cl-borde); border-radius: 12px; background: var(--cl-superficie); flex-wrap: wrap; }
.cl-pk-body { flex: 1; min-width: 160px; display: grid; }
.cl-pk-body b { color: var(--cl-tinta); }
.cl-pk-body small { font-size: 12.5px; color: var(--cl-muted-fuerte); }
.cl-pk-acts { display: flex; gap: 8px; }

/* Códigos de recuperación */
.cl-codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.cl-codigos code {
  display: block; padding: 10px 12px; border-radius: 8px;
  background: var(--cl-superficie-2); color: var(--cl-tinta);
  font-size: 15px; font-weight: 600; letter-spacing: .06em; text-align: center;
}

@media (max-width: 640px) {
  .cl-prof-grid { grid-template-columns: 1fr; }
  .cl-prof-head { flex-direction: column; text-align: center; align-items: center; }
  .cl-prof-pills { justify-content: center; }
  .cl-prof-body { padding: 20px 16px; }
  .cl-prof-acts { justify-content: stretch; }
  .cl-prof-acts .btn { width: 100%; }
  .cl-ptabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .cl-opt-card { flex-direction: column; }
}


/* ============================================================
   ACT-053 — PIEL DEL PORTAL = SISTEMA DE DISEÑO DE REFERENCIA (ds.css v3.1)
   Paleta exacta de CFDI (azul #2563eb -> cian #06b6d4, deep #061225,
   tinta #0b1220) aplicada SOLO al area autenticada y a sus modales/offcanvas.
   El sitio publico conserva su identidad.
   ============================================================ */
.cl-app, .cl-dlg-modal, .cl-sidebar-movil, .cl-dropdown-menu {
  --cl-fondo:            #f6f8fc;
  --cl-superficie:       #ffffff;
  --cl-superficie-2:     #f1f5fb;
  --cl-borde:            #e6eaf2;
  --cl-borde-fuerte:     #d5dce8;
  --cl-tinta:            #0b1220;
  --cl-cuerpo:           #475467;
  --cl-muted:            #94a3b8;
  --cl-muted-fuerte:     #6b7280;
  --cl-primario:         #2563eb;
  --cl-primario-hover:   #1d4ed8;
  --cl-primario-tinte:   #eaf1ff;
  --cl-primario-texto:   #1d4ed8;
  --cl-teal:             #10b981;
  --cl-teal-hover:       #059669;
  --cl-teal-tinte:       #dcfce7;
  --cl-teal-texto:       #15803d;
  --cl-info:             #0369a1;
  --cl-info-tinte:       #e0f2fe;
  --cl-info-texto:       #0369a1;
  --cl-advertencia:      #f59e0b;
  --cl-advertencia-tinte:#fef3c7;
  --cl-advertencia-texto:#b45309;
  --cl-peligro:          #ef4444;
  --cl-peligro-tinte:    #fee2e2;
  --cl-peligro-texto:    #b91c1c;
  --cl-grafito:          #334155;
  --cl-gris-tinte:       #f1f5fb;
  --cl-gris-texto:       #475569;
  --cl-anillo:           rgba(37, 99, 235, .14);
  --cl-borde-boton:      #d5dce8;
  --cl-sidebar-fondo:    #061225;
  --cl-sidebar-texto:    #a9b7cc;
  --cl-sidebar-icono:    #8fa1bd;
  --cl-sidebar-seccion:  #5f6f88;
  --cl-sidebar-borde:    rgba(255, 255, 255, .08);
  --cl-sidebar-caja:     rgba(255, 255, 255, .05);
  --cl-sidebar-hover:    rgba(255, 255, 255, .06);
  --cl-grad-primario:    linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --cl-grad-hover:       linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%);
  --cl-glow:             0 10px 26px rgba(37, 99, 235, .32);
  --cl-sombra-sm:        0 1px 2px rgba(11, 18, 32, .04), 0 4px 14px rgba(11, 18, 32, .05);
  --cl-sombra-md:        0 8px 30px rgba(11, 18, 32, .08), 0 2px 6px rgba(11, 18, 32, .04);
  --cl-sombra-lg:        0 24px 60px rgba(11, 18, 32, .14);
}
.cl-app { background: linear-gradient(90deg, var(--cl-sidebar-fondo) 0, var(--cl-sidebar-fondo) var(--cl-sidebar-ancho), var(--cl-fondo) var(--cl-sidebar-ancho), var(--cl-fondo) 100%); }
.cl-app .card { border-radius: 12px; box-shadow: var(--cl-sombra-sm); border-color: var(--cl-borde); }
.cl-app .card:hover { box-shadow: var(--cl-sombra-sm); border-color: var(--cl-borde); } /* CFDI: sin movimiento ni cambio en hover */

/* Sidebar: textos como CFDI (gris azulado; blanco solo en hover/activo y en la marca) */
.cl-sidebar .cl-marca-portal .lt, .cl-sidebar-movil .cl-marca-portal .lt { color: #8fa1bd; }
.cl-snav a, .cl-snav-btn { color: var(--cl-sidebar-texto); font-weight: 500; }
.cl-snav i { color: var(--cl-sidebar-texto); }
.cl-snav a:hover, .cl-snav-btn:hover { background: var(--cl-sidebar-hover); color: #fff; }
.cl-snav a.activo { background: var(--cl-grad-primario); color: #fff; box-shadow: var(--cl-glow); }
.cl-snav-pendiente { color: rgba(169, 183, 204, .45); }
.cl-snav-pendiente i { color: rgba(169, 183, 204, .4); }
.cl-snav-pendiente small { color: rgba(169, 183, 204, .6); border-color: rgba(169, 183, 204, .3); }
.cl-snav-btn--peligro { background: rgba(239, 68, 68, .14); color: #fecaca; margin-top: 6px; }
.cl-snav-btn--peligro i { color: #fecaca; }
.cl-snav-btn--peligro:hover { background: rgba(239, 68, 68, .26); color: #fff; filter: none; }
.cl-plan-box small { color: #8fa1bd; }
.cl-barra { background: rgba(255, 255, 255, .1); }
.cl-tenant__btn { color: #fff; }

/* Botones (geometria y colores de CFDI: primario con gradiente y glow, secundario blanco con sombra suave y borde fino) */
.cl-app .btn-cl-primario, .cl-dlg-modal .btn-cl-primario {
  background-image: var(--cl-grad-primario); box-shadow: var(--cl-glow); border: none; color: #fff;
}
.cl-app .btn-cl-primario:hover, .cl-dlg-modal .btn-cl-primario:hover { background-image: var(--cl-grad-hover); color: #fff; }
.cl-app .btn-cl-secundario, .cl-dlg-modal .btn-cl-secundario {
  background: #fff; color: var(--cl-tinta); border: 1px solid var(--cl-borde-fuerte); box-shadow: var(--cl-sombra-sm);
}
.cl-app .btn-cl-secundario:hover, .cl-dlg-modal .btn-cl-secundario:hover { background: #f4f7fb; color: var(--cl-primario-hover); border-color: var(--cl-borde-fuerte); }
.cl-app .btn-danger, .cl-dlg-modal .btn-danger { background: var(--cl-peligro); border: none; color: #fff; box-shadow: none; }
.cl-app .btn-danger:hover, .cl-dlg-modal .btn-danger:hover { background: #dc2626; color: #fff; }
.cl-app .btn-sm { height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 7px; }
.cl-app .btn-sm.cl-btn-ico { width: 38px; padding: 0; }
.cl-app .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--cl-anillo); }

/* Acciones en tablas y cabeceras: SIEMPRE con separacion entre botones */
.cl-tabla td.text-end { white-space: nowrap; }
.cl-tabla td.text-end > .btn + .btn, .cl-tabla td.text-end > form + .btn, .cl-tabla td.text-end > .btn + form,
.cl-tabla td.text-end > a + button, .cl-tabla td.text-end > button + a { margin-left: 8px; }
.cl-tabla td.text-end > form.d-inline { margin-left: 8px; }
.cl-tabla td.text-end .modal { white-space: normal; }
.cl-acts { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cl-tabla thead th { background: var(--cl-superficie-2); color: #334155; font-size: 12.5px; letter-spacing: .03em; }
.cl-tabla tbody td { color: #334155; }
.cl-tabla tbody tr:hover { background: #fafbfe; }
.cl-tabla tbody tr:last-child td { border-bottom: none; }
.cl-tabla .cl-sub { color: var(--cl-muted-fuerte); }

/* ---------- Dialogo de confirmacion (replica de .dlg del portal de referencia) ---------- */
.cl-dlg-modal .modal-dialog { max-width: 460px; margin: 16px auto; }
.cl-dlg-modal .modal-content.cl-dlg {
  border: none; border-radius: 14px;
  padding: 28px 26px 22px;
  box-shadow: var(--cl-sombra-lg);
  text-align: center;
  position: relative;
  background: #fff;
}
.cl-dlg-modal.fade .modal-dialog { transition: transform .18s ease, opacity .18s ease; transform: translateY(8px) scale(.98); }
.cl-dlg-modal.show .modal-dialog { transform: none; }
.cl-dlg-cerrar {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--cl-superficie-2); color: #334155;
  display: grid; place-items: center; font-size: .95rem; cursor: pointer;
}
.cl-dlg-cerrar:hover { background: #e6eaf2; }
.cl-dlg-ic {
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.8rem; line-height: 1;
}
.cl-dlg--info .cl-dlg-ic { background: var(--cl-grad-primario); }
.cl-dlg--ok   .cl-dlg-ic { background: #10b981; }
.cl-dlg--warn .cl-dlg-ic { background: #f59e0b; }
.cl-dlg--bad  .cl-dlg-ic { background: #ef4444; }
.cl-dlg h3 { font-size: 19px; margin: 0 0 8px; color: var(--cl-tinta); }
.cl-dlg-cuerpo { color: var(--cl-cuerpo); font-size: 14.5px; line-height: 1.6; }
.cl-dlg-cuerpo p { margin: 0 0 10px; overflow-wrap: anywhere; }
.cl-dlg-cuerpo p:last-child { margin-bottom: 0; }
.cl-dlg-cuerpo b { color: var(--cl-tinta); }
.cl-dlg-cuerpo ul { text-align: left; margin: 0 0 12px; padding-left: 1.15rem; font-size: 13.5px; }
.cl-dlg-cuerpo ul li { margin-bottom: .35rem; }
.cl-dlg-cuerpo ul li::marker { color: var(--cl-primario); }
.cl-dlg-cuerpo .small, .cl-dlg-cuerpo small { font-size: 13px; color: var(--cl-muted-fuerte); }
.cl-dlg-form { text-align: left; margin-top: 14px; }
.cl-dlg-form .form-label { font-size: 13px; font-weight: 600; color: #334155; margin: 10px 0 6px; }
.cl-dlg-form .form-control, .cl-dlg-form .form-select { height: 44px; min-height: 44px; font-size: 14.5px; border: 1.5px solid var(--cl-borde-fuerte); border-radius: 8px; padding: 0 14px; }
.cl-dlg-form .form-control:focus, .cl-dlg-form .form-select:focus { border-color: var(--cl-primario); box-shadow: 0 0 0 4px var(--cl-anillo); }
.cl-dlg-form .mb-2 { margin-bottom: 0 !important; }
.cl-dlg-acts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.cl-dlg-acts .btn { min-width: 130px; height: 46px; padding: 0 20px; border-radius: 8px; font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center; }
.modal-backdrop.show { background: rgba(6, 18, 37, .6); opacity: 1; }
@media (max-width: 575.98px) {
  .cl-dlg-modal .modal-dialog { margin: 12px; }
  .cl-dlg-modal .modal-content.cl-dlg { padding: 24px 18px 18px; }
  .cl-dlg-acts .btn { width: 100%; }
}

/* ---------- Responsivo / PWA: objetivos tactiles y tablas en movil ---------- */
@media (max-width: 991.98px) {
  .cl-app { background: var(--cl-fondo); } /* sin la columna oscura de la sidebar: en movil la sidebar es un cajon */
}
@media (max-width: 767.98px) {
  .cl-main-head { margin-bottom: 16px; }
  .cl-head-acts { width: 100%; }
  .cl-head-acts .btn { flex: 1; }
  .cl-widget { padding: 16px; }
  .cl-tabla-scroll .cl-tabla { min-width: 720px; }
  .cl-tabla tbody td { padding: .7rem .75rem; }
}


/* ============================================================
   ACT-054 — Componentes interactivos: fondo modal, Ventana (.fin-modal de CFDI),
   DialogoHost (misma piel .cl-dlg), resultado de acceso creado, listas de empresas
   ============================================================ */
.cl-mb { position: fixed; inset: 0; background: rgba(6, 18, 37, .6); backdrop-filter: blur(4px); z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cl-mb .cl-dlg { background: #fff; border-radius: 14px; width: 100%; max-width: 460px; padding: 28px 26px 22px; box-shadow: var(--cl-sombra-lg); text-align: center; position: relative; animation: clDlgIn .18s ease; }
@keyframes clDlgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.cl-ventana { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; box-shadow: var(--cl-sombra-lg); animation: clDlgIn .18s ease; outline: none; }
.cl-ventana-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--cl-borde); flex-shrink: 0; }
.cl-ventana-head h5 { font-size: 16px; margin: 0; color: var(--cl-tinta); }
.cl-ventana-cerrar { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--cl-superficie-2); color: #334155; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.cl-ventana-cerrar:hover { background: #e6eaf2; }
.cl-ventana-body { padding: 20px 22px; overflow: auto; }
.cl-ventana-body .cl-field { margin-bottom: 14px; }
.cl-ventana-body .form-control, .cl-ventana-body .form-select { height: 44px; min-height: 44px; font-size: 14.5px; }
.cl-ventana-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--cl-borde); flex-shrink: 0; flex-wrap: wrap; }
.cl-pw-row { display: flex; gap: 8px; }
.cl-pw-row .form-control { flex: 1; }
.cl-chk { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--cl-tinta); margin-top: 4px; line-height: 1.4; font-weight: 500; }
.cl-chk input { margin-top: 3px; accent-color: var(--cl-primario); }
.cl-emp-lista { display: grid; gap: 4px; margin: 6px 0 6px 22px; }
.cl-listo { text-align: center; }
.cl-listo-ic { width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 14px; background: #dcfce7; color: #15803d; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.cl-listo h3 { font-size: 18px; margin: 0 0 6px; }
.cl-listo p { font-size: 14px; color: var(--cl-cuerpo); max-width: 460px; margin: 0 auto 16px; line-height: 1.5; }
.cl-cred { text-align: left; margin: 0 auto 10px; max-width: 460px; }
.cl-cred label { display: block; font-size: 11px; color: var(--cl-muted-fuerte); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.cl-cred-v { display: flex; align-items: center; gap: 8px; background: var(--cl-superficie-2); border: 1px solid var(--cl-borde); border-radius: 8px; padding: 8px 10px; }
.cl-cred-v code { flex: 1; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--cl-tinta); word-break: break-all; }
.cl-fila-titular td { background: #f8fbff; }
@media (max-width: 575.98px) {
  .cl-mb { padding: 0; align-items: stretch; }
  .cl-ventana { max-width: none; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
  .cl-ventana-foot .btn { flex: 1; }
  .cl-pw-row { flex-direction: column; }
}


/* ============================================================
   ACT-055 — Ventana con altura fija (cabecera y pie quietos, scroll sólo en el cuerpo),
   sección "Empresas que puede ver y operar", switch "también es empleado"
   ============================================================ */
.cl-ventana { max-width: 680px; }
.cl-ventana--fija { height: min(760px, 92vh); height: min(760px, 92dvh); }
.cl-ventana--fija .cl-ventana-body { flex: 1; min-height: 0; }
.cl-ventana-body { scrollbar-width: thin; }
.cl-ventana .cl-field > label, .cl-ventana .cl-label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 7px; }
.cl-ventana .cl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cl-ventana .cl-grid-3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 14px; }
.cl-ventana .cl-ayuda { display: block; font-size: 12.5px; color: var(--cl-muted-fuerte); margin-top: 6px; line-height: 1.45; }

/* Sección de empresas: etiqueta ligera (no es un título), caja con aire, lista siempre visible */
.cl-emp-sec { margin: 4px 0 18px; }
.cl-emp-sec .cl-emp-titulo { font-size: 13.5px; font-weight: 500; color: var(--cl-cuerpo); margin-bottom: 8px; }
.cl-emp-box { border: 1px solid var(--cl-borde); border-radius: 10px; background: var(--cl-superficie-2); padding: 12px 14px; }
.cl-emp-box .cl-chk { margin: 0; padding: 7px 4px; font-weight: 500; }
.cl-emp-box .cl-chk--todas { border-bottom: 1px solid var(--cl-borde); margin-bottom: 6px; padding-bottom: 10px; font-weight: 600; color: var(--cl-tinta); }
.cl-emp-box .cl-chk--todas small { display: block; font-weight: 400; color: var(--cl-muted-fuerte); font-size: 12.5px; }
.cl-emp-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin: 0; }
.cl-emp-lista .cl-chk { font-weight: 400; color: var(--cl-tinta); }
.cl-chk input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; }

/* Switch (Bootstrap form-switch con la paleta del portal) */
.cl-switch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cl-borde); border-radius: 10px; background: #fff; margin: 4px 0 14px; }
.cl-switch .form-check { margin: 0; padding-left: 2.6em; min-height: 0; }
.cl-switch .form-check-input { width: 2.2em; height: 1.2em; margin-top: 0; cursor: pointer; }
.cl-switch .form-check-input:checked { background-color: var(--cl-primario); border-color: var(--cl-primario); }
.cl-switch .form-check-input:focus { box-shadow: 0 0 0 4px var(--cl-anillo); border-color: var(--cl-primario); }
.cl-switch .form-check-input:disabled { opacity: .6; }
.cl-switch-txt { flex: 1; min-width: 0; }
.cl-switch-txt b { display: block; font-size: 14px; color: var(--cl-tinta); font-weight: 600; }
.cl-switch-txt small { display: block; font-size: 12.5px; color: var(--cl-muted-fuerte); line-height: 1.4; }
.cl-sub-sec { border-left: 3px solid var(--cl-primario-tinte); padding-left: 14px; margin: 0 0 16px; }
.cl-sub-sec .cl-field { margin-bottom: 12px; }
.cl-sub-sec .cl-field:last-child { margin-bottom: 0; }
.cl-dato-ligado { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--cl-cuerpo); background: var(--cl-superficie-2); border: 1px solid var(--cl-borde); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.cl-dato-ligado i { color: var(--cl-primario); margin-top: 2px; }
.cl-dato-ligado b { color: var(--cl-tinta); }

@media (max-width: 575.98px) {
  .cl-ventana--fija { height: 100vh; height: 100dvh; }
  .cl-ventana .cl-grid-2, .cl-ventana .cl-grid-3 { grid-template-columns: 1fr; }
  .cl-emp-lista { grid-template-columns: 1fr; }
}


/* ---------- ACT-056: editor de jornada interactivo (días como fichas), tarjetas con acciones ---------- */
.cl-dias { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-dia { margin: 0 !important; padding: 7px 12px !important; border: 1px solid var(--cl-borde); border-radius: 999px; background: #fff; font-weight: 500 !important; cursor: pointer; }
.cl-dia.activo { background: var(--cl-primario-tinte); border-color: color-mix(in srgb, var(--cl-primario) 35%, #fff); color: var(--cl-primario-texto); }
.cl-dia input { display: none; }
.cl-widget-acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.cl-widget .cl-field:last-of-type { margin-bottom: 0; }
.cl-ventana .cl-vent-sec { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-muted-fuerte); margin: 6px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--cl-borde); }
.cl-ventana .cl-vent-sec:not(:first-child) { margin-top: 18px; }
.cl-implicaciones { text-align: left; margin: 0 0 12px; padding-left: 1.15rem; font-size: 13.5px; color: var(--cl-cuerpo); }
.cl-implicaciones li { margin-bottom: .35rem; }
.cl-implicaciones li::marker { color: var(--cl-primario); }

/* ACT-056: en móvil la primera columna (persona/empresa) no se parte en varias líneas */
@media (max-width: 767.98px) { .cl-tabla tbody td:first-child { min-width: 230px; } }

/* ACT-056: las columnas de las rejillas pueden encoger (las tablas con scroll no ensanchan la página) */
.cl-two > *, .cl-tres > * { min-width: 0; }

/* ---------- ACT-057: aviso permanente de sesión de soporte ("Entrar como") ---------- */
.cl-soporte-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: 10px; background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12; font-size: 14px; }
.cl-soporte-banner > i { font-size: 1.4rem; color: #ea580c; }
.cl-soporte-banner > div { flex: 1; min-width: 220px; }
.cl-soporte-banner b { color: #7c2d12; }
.cl-soporte-banner form { margin: 0; }

/* ---------- ACT-057: logotipo de empresa (widget de carga + ventana de recorte) ---------- */
.cl-logo-widget { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--cl-borde); border-radius: 12px; background: var(--cl-superficie-2); }
.cl-logo-prev { width: 88px; height: 88px; border-radius: 14px; background: #fff; border: 1px solid var(--cl-borde); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; font: 700 26px var(--cl-font-display); color: var(--cl-primario); }
.cl-logo-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-logo-txt { flex: 1; min-width: 0; }
.cl-logo-txt b { display: block; font-size: 14px; color: var(--cl-tinta); }
.cl-logo-txt small { display: block; font-size: 12.5px; color: var(--cl-muted-fuerte); line-height: 1.45; margin-bottom: 8px; }
.cl-logo-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-logo-mini { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--cl-borde); background: #fff; object-fit: cover; flex-shrink: 0; }
.cl-logo-ini { width: 36px; height: 36px; border-radius: 9px; background: var(--cl-primario-tinte); color: var(--cl-primario-texto); display: grid; place-items: center; font: 700 13px var(--cl-font-display); flex-shrink: 0; }
.cl-recorte-fondo { z-index: 1070; }
.cl-recorte-ayuda { font-size: 13.5px; color: var(--cl-muted-fuerte); margin: 0 0 14px; line-height: 1.5; }
.cl-recorte-lienzo { position: relative; width: 300px; height: 300px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #e6eaf2; touch-action: none; }
.cl-recorte-lienzo canvas { display: block; cursor: grab; }
.cl-recorte-lienzo canvas:active { cursor: grabbing; }
.cl-recorte-marco { position: absolute; inset: 0; border: 2px solid rgba(37, 99, 235, .9); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); pointer-events: none; }
.cl-recorte-zoom { display: flex; align-items: center; gap: 12px; max-width: 300px; margin: 16px auto 0; color: var(--cl-muted-fuerte); }
.cl-recorte-zoom input[type=range] { flex: 1; accent-color: var(--cl-primario); }
.cl-recorte-acts2 { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 575.98px) { .cl-logo-widget { flex-direction: column; align-items: flex-start; } .cl-recorte-lienzo { width: 260px; height: 260px; } }

/* ============================================================
   ACT-059 — /Empresas: banner suave, tarjeta de cuenta a toda altura
   ============================================================ */
.cl-banner-suave { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin: 0 0 14px;
  background: linear-gradient(135deg, var(--cl-primario-tinte), var(--cl-superficie-2)); border: 1px solid var(--cl-borde); color: var(--cl-tinta); }
.cl-banner-suave > i { font-size: 20px; color: var(--cl-primario); line-height: 1; margin-top: 2px; flex: none; }
.cl-banner-suave b { display: block; font-size: 14px; margin-bottom: 2px; }
.cl-banner-suave span { display: block; font-size: 13px; color: var(--cl-muted-fuerte); line-height: 1.45; }
.cl-grid-2--estirar > .cl-field { display: flex; flex-direction: column; }
.cl-dato-ligado--lleno { flex: 1; }
.cl-dato-ligado--lleno > div { display: flex; flex-direction: column; gap: 4px; }
.cl-dato-ligado--lleno b { font-size: 14px; }
.cl-dato-ligado--lleno span { color: var(--cl-cuerpo); }
.cl-dato-ligado--lleno small { color: var(--cl-muted-fuerte); font-size: 12px; margin-top: 4px; line-height: 1.4; }

.cl-grid-2--estirar .cl-logo-widget { flex: 1; }

/* ============================================================
   ACT-060 — Mi cuenta · pestaña Cuenta y «Tu plan» (réplica .tuplan de referencia)
   ============================================================ */
.cl-cta-card { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--cl-borde); border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, var(--cl-primario-tinte) 100%); }
.cl-cta-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--cl-grad-primario); color: #fff; display: grid; place-items: center; font-size: 26px; flex: none; box-shadow: 0 10px 24px rgba(37, 99, 235, .24); }
.cl-cta-txt { flex: 1; min-width: 0; }
.cl-cta-label { display: block; font-size: 12px; font-weight: 600; color: var(--cl-muted-fuerte); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.cl-cta-nombre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cl-cta-nombre .cl-input-ic { flex: 1 1 260px; min-width: 0; }
.cl-cta-nombre .cl-input-ic .form-control { font-size: 17px; font-weight: 600; color: var(--cl-tinta); }
.cl-cta-h4 { font-size: 20px; font-weight: 700; color: var(--cl-tinta); margin: 2px 0 10px; word-break: break-word; }
.cl-cta-card .cl-prof-pills .cl-pill { background: #fff; border: 1px solid var(--cl-borde); color: var(--cl-cuerpo); }
.cl-cta-card .cl-prof-pills .cl-pill--info { background: var(--cl-primario-tinte); border-color: transparent; color: var(--cl-primario); }
.cl-cta-card .cl-prof-pills .cl-pill--ok { background: #dcfce7; border-color: transparent; color: #15803d; }
.cl-cta-kv { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--cl-borde); border-radius: 12px; background: var(--cl-superficie-2); }
.cl-cta-kv .v small { display: block; font-weight: 400; color: var(--cl-muted-fuerte); font-size: 12.5px; line-height: 1.4; }
.cl-cta-kv .v.cl-num small { display: inline; font-size: 13px; }
.cl-tuplan { display: flex; align-items: center; gap: 12px; border: 1px solid var(--cl-borde); border-radius: 12px; padding: 14px 16px; background: var(--cl-superficie-2); }
.cl-tuplan.con-plan { border-color: #a7f3d0; background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%); }
.cl-tp-ic { width: 42px; height: 42px; border-radius: 10px; background: #e2e8f0; color: #334155; display: grid; place-items: center; font-size: 21px; flex-shrink: 0; }
.con-plan .cl-tp-ic { background: #a7f3d0; color: #047857; }
.cl-tp-txt { display: grid; min-width: 0; }
.cl-tp-txt b { font-size: 15.5px; color: var(--cl-tinta); }
.cl-tp-txt small { font-size: 13px; color: var(--cl-cuerpo); line-height: 1.5; }
.cl-tp-txt a { color: var(--cl-primario); font-weight: 600; }
.cl-tabla--pagos { margin-top: 14px; font-size: 14px; }
@media (max-width: 640px) {
  .cl-cta-card { flex-direction: column; gap: 12px; padding: 16px; }
  .cl-cta-nombre .btn { width: 100%; }
}