/* ── BITÁCORA ──
   2026-09-28 | + "Para activar la empresa" en Datos comerciales: el separador del bloque
                Precio (.rol-com-sub), la línea con lo que se cobra (.rol-com-activar) y la
                fila de la tarjeta de vista previa (.rol-pc-act), igual a la de la página de
                planes — roles.js [v2026.09.28-1].
   2026-09-10 | + el disquete de cada tarjeta (.rol-pc-save) y el borde de tarjeta con
                cambios sin guardar (.rol-pc.sucia) — roles.js [v2026.09.10-1].
   2026-09-09 | + la sección "Sin contemplar" de la tarjeta maestra (.rol-com-sv*,
                .rol-com-acc*, .rol-com-sw*, .rol-com-llevar) y el aviso ámbar
                "no distingue" (.rol-com-sinefecto) — roles.js [v2026.09.09-1].
   2026-09-08 (3) | Los chips de plan no se encogen (el texto largo se salía del
                recuadro) y la barra los baja de línea si no caben.
   2026-09-08 (2) | La vitrina completa en "Datos comerciales" (roles.js
                [v2026.09.08-2]): la tarjeta con grupos desplegables, topes,
                leyendas, ✓/✕ clicables; la tarjeta maestra; la vista de
                comparación; el picker de color propio; los formularios de
                creación y los avisos de quitar. Reemplaza entero el bloque
                anterior de la pestaña.
   2026-09-08 | Pestaña "Datos comerciales" del bloque Super Admin (roles.js
                [v2026.09.08-1]): pestañas en la cabecera (.rol-sa-tabs), el
                formulario en tarjetas (.rol-com-*), el desplegable propio, el
                interruptor, la tabla de nombres de prestación y la tarjeta de
                vista previa (.rol-pc-*), que replica la de planes_heavensy_v6.
                + .rol-hidden, utilitario.
   2026-06-04 | Fix: banner upsell del strip a ancho completo (quedaba como
                celda de la grilla de toggles).
   2026-06-04 | Estilos del candado upsell: franja de plan, badges de tab
                (candado / Tu plan), banner de plan superior, hint "Desde X"
                y badge de rol no incluido.
   2026-06-03 | Labels PLAN/ROL en panel SA; chevron como botón circular clickeable;
                card contenedora violeta colapsable para Roles de Empresa.
                Selectores .open precisados a hijo directo (cards anidadas). */
/* ═══════════════════════════════════════════
   HEAVENSY — ROLES Y PERMISOS
   assets/css/roles.css
═══════════════════════════════════════════ */

:root {
  --rol-purple: #8e84fa;
  --rol-blue:   #5a79d4;
  --rol-light:  #91c0ff;
  --rol-border: #e4e9f5;
  --rol-bg:     #f8f9ff;
  --rol-white:  #ffffff;
  --rol-text:   #2d3158;
  --rol-muted:  #9ba3c0;
}

/* ── LAYOUT ── */
.rol-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rol-bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--rol-text);
}

.rol-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 14px;
  background: var(--rol-white);
  border-bottom: 1px solid var(--rol-border);
  flex-shrink: 0;
}

.rol-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rol-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg,#8e84fa,#91c0ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.rol-header h1 {
  font-size: 18px;
  font-weight: 800;
  color: var(--rol-text);
  margin: 0;
}

.rol-header p {
  font-size: 12px;
  color: var(--rol-muted);
  margin: 2px 0 0;
}

.rol-btn-nuevo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg,#8e84fa,#91c0ff);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: opacity .15s;
}
.rol-btn-nuevo:hover { opacity: .88; }

/* ── TABS ── */
.rol-tabs {
  display: flex;
  gap: 0;
  padding: 0 28px;
  background: var(--rol-white);
  border-bottom: 1.5px solid var(--rol-border);
  flex-shrink: 0;
}

.rol-tab-btn {
  padding: 12px 20px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--rol-muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition: all .15s;
}
.rol-tab-btn.active {
  color: var(--rol-purple);
  border-bottom-color: var(--rol-purple);
}
.rol-tab-btn:hover:not(.active) { color: var(--rol-text); }

/* ── BODY ── */
.rol-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rol-tab-content { display: none; flex: 1; overflow: hidden; }
.rol-tab-content.active { display: flex; flex-direction: column; overflow: hidden; }

/* ── ACORDEÓN ── */
.rol-acordeon-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}

#rol-acordeon {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

/* Tarjeta de rol */
.rol-acord-card {
  background: var(--rol-white);
  border: 1.5px solid var(--rol-border);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.rol-acord-card:hover { box-shadow: 0 2px 12px rgba(142,132,250,.1); }

/* Header colapsable */
.rol-acord-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.rol-acord-header:hover { background: var(--rol-bg); }

.rol-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.rol-card-info { flex: 1; min-width: 0; }

.rol-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--rol-text);
}

.rol-card-meta {
  font-size: 11px;
  color: var(--rol-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rol-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rol-badge.sistema { background: rgba(90,121,212,.12); color: var(--rol-blue); }
.rol-badge.custom  { background: rgba(142,132,250,.12); color: var(--rol-purple); }

.rol-acord-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rol-acord-chevron {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rol-muted);
  font-size: 12px;
  transition: transform .2s, background .12s;
  flex-shrink: 0;
}
.rol-acord-card.open > .rol-acord-header .rol-acord-chevron {
  transform: rotate(180deg);
  background: rgba(142,132,250,.1);
  color: var(--rol-purple);
}

/* Body colapsable */
.rol-acord-body {
  display: none;
  padding: 0 18px 18px;
  border-top: 1px solid var(--rol-border);
}
.rol-acord-card.open > .rol-acord-body { display: block; }

.rol-acord-body-inner {
  padding-top: 16px;
}

.rol-btn-sm {
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .12s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rol-btn-edit {
  border: 1.5px solid var(--rol-border);
  background: var(--rol-white);
  color: var(--rol-text);
}
.rol-btn-edit:hover { border-color: var(--rol-purple); color: var(--rol-purple); }

.rol-btn-delete {
  border: 1.5px solid #fecaca;
  background: #fff5f5;
  color: #ef4444;
}
.rol-btn-delete:hover { background: #fee2e2; }

.rol-btn-save {
  border: none;
  background: linear-gradient(135deg,#8e84fa,#91c0ff);
  color: #fff;
}
.rol-btn-save:hover { opacity: .88; }

/* ── MÓDULO CARD ── */
.rol-modulo {
  background: var(--rol-white);
  border: 1.5px solid var(--rol-border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

.rol-modulo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rol-border);
  background: var(--rol-white);
}

.rol-modulo-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}

.rol-modulo-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--rol-text);
  flex: 1;
}


/* Cards de roles en panel global */
.rol-sa-global-panel .rol-role-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border: none;
  overflow: visible;
}
.rol-sa-global-panel .rol-role-tabs-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  overflow: visible;
}
.rol-sa-global-panel .rol-role-tab-wrap {
  flex: 1;
  min-width: 100px;
  background: #fff;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1.5px solid #e5e7eb !important;
  margin-bottom: 0;
  transition: all .15s;
}
.rol-sa-global-panel .rol-role-tab-wrap:hover {
  border-color: var(--role-color) !important;
}
.rol-sa-global-panel .rol-role-tab-wrap.active {
  border-color: var(--role-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border-bottom: 1.5px solid var(--role-color) !important;
}
.rol-sa-global-panel .rol-role-tab {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: none !important;
}
.rol-sa-global-panel .rol-role-tab.active {
  color: var(--role-color);
  border-bottom: none !important;
  background: transparent;
}

/* Panel global SA */
.rol-sa-global-panel {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--rol-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.rol-sa-global-panel .rol-plan-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border: none;
  border-bottom: 0.5px solid var(--rol-border);
  overflow: visible;
}
.rol-sa-global-panel .rol-plan-tab {
  flex: 1;
  min-width: 100px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
  border-bottom: 1.5px solid #e5e7eb;
}
.rol-sa-global-panel .rol-plan-tab:hover {
  border-color: var(--plan-color);
  color: var(--plan-color);
}
.rol-sa-global-panel .rol-plan-tab.active {
  background: #fff;
  border-color: var(--plan-color);
  color: var(--plan-color);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Toggle de sección en header del módulo */
.rol-seccion-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.rol-seccion-toggle input { display: none; }
.rol-seccion-toggle .rol-role-tab-slider { width: 30px; height: 16px; }
.rol-seccion-toggle .rol-role-tab-slider::after { width: 12px; height: 12px; }
.rol-seccion-toggle input:checked + .rol-role-tab-slider { background: var(--sec-color, #9961FF); }
.rol-seccion-toggle input:checked + .rol-role-tab-slider::after { transform: translateX(14px); }

/* Sección desactivada — todo en gris */
.rol-modulo.rol-seccion-off .rol-plan-tabs-bar,
.rol-modulo.rol-seccion-off .rol-role-tabs-bar,
.rol-modulo.rol-seccion-off .rol-plan-panel { opacity: 0.35; pointer-events: none; }

.rol-seccion-activa-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f0ebff;
  border-radius: 8px;
  margin-bottom: 10px;
}
.rol-seccion-activa-label {
  font-size: 12px;
  font-weight: 600;
  color: #7c3aed;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tab de rol con toggle integrado */
.rol-role-tab-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  border-right: 0.5px solid var(--rol-border);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rol-role-tab-wrap:last-child { border-right: none; }

.rol-role-tab-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.rol-role-tab-toggle input { display: none; }
.rol-role-tab-slider {
  width: 24px;
  height: 13px;
  background: #d1d5db;
  border-radius: 10px;
  position: relative;
  transition: background .15s;
  display: block;
}
.rol-role-tab-slider::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  top: 2px; left: 2px;
  transition: transform .15s;
}
.rol-role-tab-toggle input:checked + .rol-role-tab-slider { background: #9961FF; }
.rol-role-tab-toggle input:checked + .rol-role-tab-slider::after { transform: translateX(11px); }

.rol-modulo-toggle-all--header {
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid #c4b5fd !important;
  background: #f5f0ff !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  color: #7c3aed !important;
  transition: all .12s;
}
.rol-modulo-toggle-all--header:hover {
  background: #ede9fe !important;
  text-decoration: none !important;
}

.rol-role-activo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 8px;
  border-bottom: 1px solid #e0e7ff;
  margin-bottom: 8px;
  width: 100%;
}
.rol-role-activo-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  flex: 1;
}

.rol-modulo-toggle-all {
  font-size: 11px;
  color: var(--rol-purple);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  padding: 0;
}
.rol-modulo-toggle-all:hover { text-decoration: underline; }

.rol-modulo-body {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

/* Solo módulo Empresas — columnas iguales en una fila */
[data-mod-id="empresas"] .rol-modulo-body {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/* ── TOGGLE ROW ── */
.rol-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--rol-bg);
  border: 1px solid transparent;
  transition: border-color .12s;
}
.rol-toggle-row:hover { border-color: var(--rol-border); }

.rol-toggle-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--rol-text);
}

/* ── SWITCH ── */
.rol-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.rol-switch input { opacity: 0; width: 0; height: 0; }
.rol-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d1d5e8;
  border-radius: 20px;
  transition: background .2s;
}
.rol-switch-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.rol-switch input:checked + .rol-switch-slider {
  background: linear-gradient(135deg,#8e84fa,#91c0ff);
}
.rol-switch input:checked + .rol-switch-slider::before {
  transform: translateX(16px);
}

/* ── USUARIOS TAB ── */
.rol-usuarios-wrap {
  padding: 20px 28px;
  flex: 1;
  overflow-y: auto;
}

.rol-usuarios-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.rol-usuarios-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--rol-text);
}

.rol-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rol-white);
  border: 1.5px solid var(--rol-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--rol-text);
  width: 220px;
  transition: border-color .15s;
}
.rol-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: var(--rol-text);
  font-family: 'DM Sans', sans-serif;
  flex: 1;
}
.rol-search:focus-within { border-color: var(--rol-purple); }

.rol-table {
  background: var(--rol-white);
  border: 1.5px solid var(--rol-border);
  border-radius: 14px;
  overflow: hidden;
}

.rol-table-head {
  display: grid;
  grid-template-columns: 1fr 1fr 200px 100px;
  padding: 11px 16px;
  background: var(--rol-bg);
  border-bottom: 1px solid var(--rol-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--rol-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rol-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 200px 100px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rol-border);
  align-items: center;
  transition: background .1s;
}
.rol-table-row:last-child { border-bottom: none; }
.rol-table-row:hover { background: var(--rol-bg); }

.rol-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rol-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg,#8e84fa,#91c0ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.rol-user-name  { font-size: 13px; font-weight: 600; color: var(--rol-text); }
.rol-user-email { font-size: 11px; color: var(--rol-muted); margin-top: 1px; }

.rol-select {
  border: 1.5px solid var(--rol-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--rol-text);
  background: var(--rol-white);
  outline: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition: border-color .12s;
  width: 100%;
}
.rol-select:focus { border-color: var(--rol-purple); }

.rol-save-user-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg,#8e84fa,#91c0ff);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: opacity .12s;
}
.rol-save-user-btn:hover { opacity: .85; }
.rol-save-user-btn.saved {
  background: #dcfce7;
  color: #15803d;
}

/* ── CATASTRO TAB ── */
.rol-catalogo-wrap {
  padding: 20px 28px;
  flex: 1;
  overflow-y: auto;
}

.rol-catalogo-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--rol-text);
  margin-bottom: 16px;
}

.rol-catalogo-table-wrap {
  background: var(--rol-white);
  border: 1.5px solid var(--rol-border);
  border-radius: 14px;
  overflow: auto;
}

.rol-catalogo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.rol-catalogo-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--rol-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--rol-bg);
  border-bottom: 1px solid var(--rol-border);
  white-space: nowrap;
}

.rol-catalogo-table th.rol-col { text-align: center; min-width: 90px; }

.rol-catalogo-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--rol-border);
  vertical-align: middle;
}

.rol-catalogo-table tr:last-child td { border-bottom: none; }
.rol-catalogo-table tr:hover td { background: var(--rol-bg); }

.rol-cat-modulo {
  font-weight: 700;
  color: var(--rol-text);
  padding-top: 14px !important;
  background: #f3f4ff !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rol-cat-modulo-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  margin-right: 6px;
  vertical-align: middle;
}

.rol-cat-accion { color: var(--rol-text); padding-left: 28px !important; }

.rol-cat-check {
  text-align: center;
  color: var(--rol-purple);
  font-size: 13px;
}
.rol-cat-check.off { color: #d1d5e8; }

/* ── MODAL ── */
.rol-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45,49,88,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.rol-modal {
  background: var(--rol-white);
  border-radius: 18px;
  width: 440px;
  max-width: 100%;
  box-shadow: 0 20px 60px rgba(45,49,88,.18);
  overflow: hidden;
}

.rol-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rol-border);
}

.rol-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--rol-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.rol-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: var(--rol-bg);
  color: var(--rol-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background .12s;
}
.rol-modal-close:hover { background: #eee; }

.rol-modal-body { padding: 20px 22px; }

.rol-form-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--rol-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.rol-form-input {
  width: 100%;
  border: 1.5px solid var(--rol-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--rol-text);
  background: var(--rol-bg);
  outline: none;
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
  transition: border-color .15s;
}
.rol-form-input:focus { border-color: var(--rol-purple); background: var(--rol-white); }

.rol-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--rol-border);
}

.rol-btn-cancel {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--rol-border);
  background: var(--rol-white);
  color: var(--rol-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

/* ── COLOR PICKER ── */
.rol-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.rol-color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s;
}
.rol-color-dot.selected { border-color: var(--rol-text); transform: scale(1.2); }

/* ── SAVE BAR ── */
.rol-save-bar {
  position: sticky;
  bottom: 0;
  background: var(--rol-white);
  border-top: 1.5px solid var(--rol-border);
  padding: 12px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  z-index: 10;
  box-shadow: 0 -4px 16px rgba(45,49,88,.06);
}

/* ── Tabs de plan dentro del módulo SA ── */
.rol-plan-tabs-bar {
  display: flex;
  border-top: 0.5px solid var(--rol-border);
  background: #f8f9fc;
  overflow-x: auto;
  scrollbar-width: none;
}
.rol-plan-tabs-bar::-webkit-scrollbar { display: none; }

.rol-plan-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  flex-shrink: 0;
}
.rol-plan-tab:hover { color: var(--plan-color, #9ca3af); }
.rol-plan-tab.active {
  color: var(--plan-color, #9ca3af);
  border-bottom-color: var(--plan-color, #9ca3af);
  background: #fff;
}

.rol-plan-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--plan-color, #9ca3af);
  flex-shrink: 0;
  opacity: .5;
}
.rol-plan-tab.active .rol-plan-tab-dot { opacity: 1; }

/* Panels de plan */
.rol-plan-panel { display: none; }
.rol-plan-panel.active { display: block; }

/* Tabs de roles dentro del plan */
.rol-role-tabs-bar {
  display: flex;
  align-items: center;
  background: #f0f2f8;
  border-bottom: 0.5px solid var(--rol-border);
  overflow: visible;
}
.rol-role-tabs-scroll {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.rol-role-tabs-scroll::-webkit-scrollbar { display: none; }

.rol-role-tab {
  padding: 7px 16px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  flex-shrink: 0;
}
.rol-role-tab:hover { color: var(--role-color, #8e84fa); }
.rol-role-tab.active {
  color: var(--role-color, #8e84fa);
  background: #fff;
  border-bottom-color: transparent;
}
.rol-role-tab-wrap.active {
  border-bottom: 2px solid var(--role-color, #8e84fa);
  background: #fff;
}
.rol-role-tab-wrap.active .rol-role-tab {
  background: #fff;
}

/* Panels de roles */
.rol-role-panel { display: none; }
.rol-role-panel.active { display: block; }

.rol-role-panel-actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 16px 2px;
}

/* ── Franja de planes en roles normales ── */
.rol-modulo-plan-strip {
  border-top: 1px dashed var(--rol-border);
  background: #fafbff;
}

.rol-plan-strip-bar {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 0.5px solid var(--rol-border);
}
.rol-plan-strip-bar::-webkit-scrollbar { display: none; }

.rol-plan-strip-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: none;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  color: #b0b9c8;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  flex-shrink: 0;
}
.rol-plan-strip-tab:hover { color: var(--plan-color); }
.rol-plan-strip-tab.active {
  color: var(--plan-color);
  border-bottom-color: var(--plan-color);
  background: #fff;
}
.rol-plan-strip-tab.active .rol-plan-tab-dot { opacity: 1; }

.rol-plan-strip-panel { display: none; }
.rol-plan-strip-panel.active { display: block; }

/* Toggles de solo lectura (view) */
.rol-strip-row { opacity: .75; }
.rol-switch-view { pointer-events: none; }

/* Botón guardar en el header del SA */
.rol-btn-sa-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: none;
  background: #8b5cf6;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.rol-btn-sa-save:hover { background: #7c3aed; }

/* ── Separador y rol Super Admin Heavensy ── */
.rol-sa-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 12px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rol-sa-separador::before,
.rol-sa-separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.rol-sa-separador i {
  color: #9ca3af;
  font-size: 10px;
}

/* Card del rol Heavensy — estilo oscuro/especial */
#rol-acord-HEAVENSY_SUPERADMIN_ROL {
  border: 1px solid #d1d5db;
  background: #f9fafb;
}
#rol-acord-HEAVENSY_SUPERADMIN_ROL .rol-acord-header {
  background: linear-gradient(135deg, #9961FF 0%, #5b8dee 100%);
  border-radius: 10px 10px 0 0;
}
#rol-acord-HEAVENSY_SUPERADMIN_ROL .rol-card-name {
  color: #fff;
}
#rol-acord-HEAVENSY_SUPERADMIN_ROL .rol-badge {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
#rol-acord-HEAVENSY_SUPERADMIN_ROL .rol-card-avatar {
  background: #3b5bdb;
}
#rol-acord-HEAVENSY_SUPERADMIN_ROL .rol-card-meta {
  color: rgba(255,255,255,0.9);
}
#rol-acord-HEAVENSY_SUPERADMIN_ROL .rol-card-meta span {
  color: rgba(255,255,255,0.9);
}

/* ── Límite de creación ── */
.rol-limit-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.rol-limit-label {
  font-size: 11px;
  color: #7D84C1;
  font-weight: 500;
}
.rol-limit-input {
  width: 44px;
  padding: 3px 4px;
  border: 1px solid #e0e7ff;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  background: #f5f3ff;
  outline: none;
  text-align: center;
  font-family: inherit;
}
.rol-limit-input:focus { border-color: #9961FF; background: #fff; }
.rol-limit-input--wide { width: 72px; }
.rol-num-wrap { display: flex; align-items: center; gap: 3px; }
.rol-num-inf-btn {
  background: none; border: 1px solid #e0e7ff; border-radius: 6px;
  color: #9961FF; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 2px 6px; line-height: 1; transition: all .12s;
}
.rol-num-inf-btn:hover { background: #f0ebff; border-color: #9961FF; }

.rol-strip-limit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 8px;
  border-bottom: 0.5px solid #e5e7eb;
  margin-bottom: 6px;
}
.rol-limit-badge {
  font-size: 12px;
  font-weight: 700;
  color: #9961FF;
  background: #f0ebff;
  border-radius: 6px;
  padding: 2px 10px;
}


/* ── Labels de filas del panel SA (PLAN / ROL) ── */
.rol-sa-row-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9961FF;
  margin: 14px 0 6px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rol-sa-row-label:first-child { margin-top: 0; }

/* ── Chevron como botón circular (SA y Roles de Empresa) ── */
.rol-acord-chev-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.rol-acord-chev-btn:hover { background: rgba(255,255,255,0.32); }
.rol-acord-chev-btn i { transition: transform .2s; font-size: 13px; }
.rol-acord-card.open > .rol-acord-header .rol-acord-chev-btn i { transform: rotate(180deg); }

/* ── Card contenedora: Roles de Empresa (mismo header violeta del SA) ── */
#rol-acord-EMPRESA_ROLES > .rol-acord-header {
  background: linear-gradient(135deg, #9961FF 0%, #5b8dee 100%);
  border-radius: 10px 10px 0 0;
}
#rol-acord-EMPRESA_ROLES:not(.open) > .rol-acord-header { border-radius: 10px; }
#rol-acord-EMPRESA_ROLES > .rol-acord-body { background: var(--rol-bg); }
#rol-acord-EMPRESA_ROLES .rol-acord-body-inner > .rol-acord-card { margin-bottom: 12px; }
#rol-acord-EMPRESA_ROLES .rol-acord-body-inner > .rol-acord-card:last-child { margin-bottom: 0; }

/* ── Candado upsell (vista empresa) ── */
.rol-plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f3edff;
  border: 1px solid #d8c6ff;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #5b3fa8;
}
.rol-plan-banner b { font-weight: 700; }
.rol-plan-banner .fa-lock { font-size: 11px; }

.rol-plan-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #5b3fa8;
  border: 1px solid #9961FF;
  border-radius: 8px;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.rol-plan-banner-btn:hover { background: #9961FF; color: #fff; }

.rol-tab-lock { font-size: 10px; margin-right: 5px; opacity: .65; }

.rol-tab-myplan {
  background: #9961FF;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.rol-strip-upsell {
  grid-column: 1 / -1;   /* ancho completo si el body es grid */
  width: 100%;
  flex-basis: 100%;      /* ancho completo si el body es flex */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f3edff;
  border: 1px solid #d8c6ff;
  border-radius: 9px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #5b3fa8;
}
.rol-strip-upsell b { font-weight: 700; }

.rol-hint-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3edff;
  color: #7a52d4;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 6px;
  white-space: nowrap;
}
.rol-hint-upgrade .fa-lock { font-size: 9px; }

.rol-strip-row.rol-row-locked { opacity: .6; }

.rol-badge.rol-badge-noplan {
  background: #f3edff;
  color: #7a52d4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ═══════════════════════════════════════════
   [08-09-2026 (2)] DATOS COMERCIALES — la vitrina completa, editable
   (roles.js [v2026.09.08-2]). Prefijos: .rol-com-* el editor, .rol-pc-* la tarjeta.
   ═══════════════════════════════════════════ */
.rol-hidden { display: none !important; }

.rol-sa-tabs { display: inline-flex; gap: 4px; padding: 3px; background: rgba(255,255,255,.16); border-radius: 9px; margin-right: 10px; }
.rol-sa-tab { border: 0; background: transparent; color: #fff; opacity: .8; padding: 6px 13px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 12.5px; }
.rol-sa-tab.active { background: #fff; color: #7c3aed; opacity: 1; }

.rol-com-cargando, .rol-com-error { padding: 22px; text-align: center; color: #6b7280; font-size: 13px; }
.rol-com-error { color: #b91c1c; }
.rol-com-aviso { border-left: 3px solid #b7791f; background: #fff7e6; color: #5b4a14; border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 11.5px; margin: 10px 14px 0; line-height: 1.5; }
.rol-com-aviso b { color: #b7791f; }
.rol-com-oculto { margin-left: 6px; font-size: 9.5px; font-weight: 600; color: #9ca3af; background: #f3f4f6; border-radius: 999px; padding: 1px 6px; }
/* Los chips no se encogen: con `white-space: nowrap` heredado, encogerlos hacía que
   el texto se saliera del recuadro (se veía en "Secretar-IA Premium"). Si no caben,
   la barra los baja de línea. */
.rol-com-tabs { flex-wrap: wrap; align-items: center; overflow: visible; }
.rol-com-tabs .rol-plan-tab { flex: 0 0 auto; max-width: 100%; }
.rol-com-tab-nuevo { border-style: dashed !important; border-color: #ddd0ff !important; color: #9961FF !important; }
.rol-com-tab-global { border-color: #c9b8ff !important; background: #f8f5ff !important; color: #5b3fa8 !important; }
.rol-com-tab-global.active { background: #efe8ff !important; }
.rol-com-acciones { display: flex; gap: 6px; padding: 10px 14px 0; }
.rol-com-acc { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 5px 11px; cursor: pointer; font: 600 11px inherit; font-family: inherit; color: #6b7280; }
.rol-com-acc:hover { border-color: #9961FF; color: #7c3aed; }

.rol-com-grid { display: grid; grid-template-columns: 1fr 344px; gap: 18px; padding: 12px 14px 16px; }
@media (max-width: 1000px) { .rol-com-grid { grid-template-columns: 1fr; } }
.rol-com-comparar { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 14px; padding: 12px 14px 16px; align-items: start; }
.rol-com-comparar .rol-pc { font-size: 12px; }
.rol-com-comparar .rol-pc-head { padding: 14px; }
.rol-com-comparar .rol-pc-name { font-size: 15px; }
.rol-com-comparar .rol-pc-price b { font-size: 21px; }
.rol-com-oculta { opacity: .6; }
.rol-com-oculta .rol-pc { border-style: dashed; }

.rol-com-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 13px 15px; margin-bottom: 11px; background: #fff; }
.rol-com-card h4 { margin: 0 0 10px; font-size: 12.5px; color: #1e2d5a; display: flex; align-items: center; gap: 8px; }
.rol-com-ic { width: 22px; height: 22px; border-radius: 6px; background: #f5f0ff; color: #9961FF; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.rol-com-f { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 13px; }
.rol-com-full { grid-column: 1 / -1; }
.rol-com-f label { display: block; font-size: 10.5px; color: #6b7280; margin-bottom: 3px; font-weight: 500; }
.rol-com-f input { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 9px; color: #374151; background: #fff; font: inherit; font-size: 12.5px; }
.rol-com-f input:focus { outline: none; border-color: #9961FF; box-shadow: 0 0 0 3px #f5f0ff; }
.rol-com-f input.rol-com-ro { background: #fafafa; color: #9ca3af; font-family: Consolas, monospace; }
.rol-com-hint { font-size: 10px; color: #9ca3af; margin-top: 2px; }
.rol-com-hint b { color: #1e2d5a; }
.rol-com-money { display: flex; gap: 6px; }
.rol-com-money input { flex: 1; }
.rol-com-explica { font-size: 12.5px; line-height: 1.65; color: #6b7280; }
.rol-com-explica p { margin: 0 0 8px; }
.rol-com-explica b { color: #1e2d5a; }
.rol-com-explica-sep { padding-top: 9px; border-top: 1px solid #f1f1f5; }

/* interruptor */
.rol-com-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #374151; padding-top: 5px; }
.rol-com-switch i { width: 33px; height: 18px; border-radius: 999px; background: #d1d5db; position: relative; transition: .15s; flex: none; }
.rol-com-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; }
.rol-com-switch.on i { background: #9961FF; }
.rol-com-switch.on i::after { left: 17px; }

/* desplegable propio (nunca el del sistema; y no .hvy-select, que es de hvy-select.js) */
.rol-com-sel { position: relative; min-width: 78px; }
.rol-com-sel-cur { border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 9px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; font-size: 12.5px; color: #374151; }
.rol-com-sel-cur::after { content: "⌄"; color: #9ca3af; line-height: 0; }
.rol-com-sel-pop { display: none; position: absolute; left: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(31,41,55,.13); z-index: 30; padding: 4px; min-width: 160px; }
.rol-com-sel.open .rol-com-sel-pop { display: block; }
.rol-com-sel-op { padding: 6px 9px; border-radius: 7px; cursor: pointer; font-size: 12.5px; display: flex; justify-content: space-between; gap: 10px; }
.rol-com-sel-op:hover { background: #f5f0ff; }
.rol-com-sel-op.on { color: #7c3aed; font-weight: 600; }
.rol-com-sel-op small { color: #9ca3af; }

/* picker de color propio */
.rol-com-swline { display: flex; gap: 8px; align-items: center; position: relative; }
.rol-com-swatch { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e5e7eb; flex: none; cursor: pointer; }
.rol-com-swatch:hover { border-color: #9961FF; }
.rol-com-pick { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 34px rgba(31,41,55,.18); padding: 11px; width: 240px; }
.rol-com-pick-t { font-size: 9.5px; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.rol-com-pick-cerrar { float: right; color: #c9c9d4; cursor: pointer; }
.rol-com-pick-grad { height: 26px; border-radius: 7px; margin-bottom: 8px; border: 1px solid #ececf2; }
.rol-com-pick-paleta { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 8px; }
.rol-com-pick-paleta span { aspect-ratio: 1; border-radius: 5px; cursor: pointer; border: 1px solid rgba(0,0,0,.06); display: block; }
.rol-com-pick-paleta span.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #7c3aed; }
.rol-com-pick-barra { height: 15px; border-radius: 8px; cursor: crosshair; position: relative; margin-bottom: 8px; border: 1px solid #ececf2; }
.rol-com-pick-tono { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.rol-com-pick-cursor { position: absolute; top: -3px; width: 9px; height: 21px; border-radius: 4px; background: #fff; border: 1.5px solid #7c3aed; transform: translateX(-4.5px); pointer-events: none; }
.rol-com-pick-hex { display: flex; gap: 7px; align-items: center; }
.rol-com-pick-hex input { flex: 1; font-family: Consolas, monospace; font-size: 12px; text-transform: uppercase; border: 1px solid #e5e7eb; border-radius: 7px; padding: 6px 8px; }

/* ── la tarjeta (de un plan o la maestra) ── */
.rol-com-prev { position: sticky; top: 12px; align-self: start; }
.rol-com-prev-t { font-size: 10px; color: #9ca3af; font-weight: 700; letter-spacing: .06em; margin-bottom: 7px; display: flex; justify-content: space-between; }
.rol-com-modo { background: #f5f0ff; color: #7c3aed; border-radius: 999px; padding: 2px 9px; font-size: 9.5px; letter-spacing: 0; }
.rol-pc { font-family: "DM Sans", "Inter", sans-serif; border-radius: 20px; overflow: hidden; border: 1px solid #e8e8f0; background: #fff; box-shadow: 0 6px 24px rgba(30,45,90,.09); }
.rol-pc.feat { box-shadow: 0 8px 30px rgba(124,111,247,.24); border-color: #c9c2ff; }
.rol-pc-maestra { border: 2px dashed #c9b8ff; box-shadow: none; }
.rol-pc-head { padding: 18px; color: #fff; }
.rol-pc-head.maestra { background: #f6f3ff; color: #5b3fa8; border-bottom: 1px solid #eae3ff; }
.rol-pc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rol-pc-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.rol-pc-head.maestra .rol-pc-tag { background: #e6dcff; color: #5b3fa8; }
.rol-pc-badge { font-size: 9.5px; font-weight: 700; background: rgba(255,255,255,.22); padding: 4px 9px; border-radius: 999px; }
.rol-pc-sub { font-size: 10.5px; opacity: .8; margin-top: 8px; }
.rol-pc-name { font-size: 17px; font-weight: 700; margin: 5px 0 6px; display: flex; align-items: center; gap: 5px; }
.rol-pc-price { display: flex; align-items: baseline; gap: 5px; }
.rol-pc-price b { font-size: 25px; font-weight: 700; }
.rol-pc-price span { font-size: 11px; opacity: .75; }
.rol-pc-trial { display: inline-block; margin-top: 7px; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.18); padding: 3px 9px; border-radius: 999px; }
.rol-pc-note { display: inline-block; margin: 7px 0 0 5px; font-size: 10px; background: rgba(255,255,255,.1); padding: 3px 9px; border-radius: 999px; opacity: .85; }
.rol-pc-btn { display: block; width: 100%; margin-top: 11px; border: 0; border-radius: 11px; padding: 10px; font-weight: 700; font-size: 12.5px; cursor: default; background: rgba(255,255,255,.95); font-family: inherit; }
.rol-pc-maestra-nota { font-size: 11px; line-height: 1.5; color: #6d5aa8; margin-top: 7px; }

.rol-pc-topes { padding: 9px 13px; background: #fbfaff; border-bottom: 1px solid #f1f1f5; }
.rol-pc-topes-th { font-size: 9px; color: #a9a9bb; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.rol-pc-tope { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 0; font-size: 11.5px; }
.rol-pc-tope .k { color: #6b7280; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.rol-pc-tope .v { font-weight: 700; color: #1e2d5a; }
.rol-pc-tope .v.inf { color: #7c3aed; }
.rol-pc-tope .v.cero { color: #c9c9d4; }
.rol-pc-tope-sub { font-size: 8.5px; color: #c9c9d4; font-family: Consolas, monospace; display: block; }
.rol-pc-ley { display: block; font-size: 10px; color: #8a8aa0; margin: -2px 0 3px; }
.rol-pc-ley.vacia { color: #d5d5df; font-style: italic; }
.rol-com-num { width: 58px; text-align: right; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 6px; font: 700 11.5px inherit; font-family: inherit; color: #1e2d5a; }
.rol-com-num:focus { outline: none; border-color: #9961FF; }
.rol-com-estrella { cursor: pointer; font-size: 11px; opacity: .35; padding: 0 2px; border-radius: 4px; }
.rol-com-estrella.on { opacity: 1; }

.rol-pc-grupos { padding: 5px 8px 4px; }
.rol-pc-gr { border-bottom: 1px solid #f3f3f7; }
.rol-pc-gr:last-child { border-bottom: 0; }
.rol-pc-gr-h { display: flex; align-items: center; gap: 8px; padding: 7px 5px; border-radius: 8px; cursor: pointer; }
.rol-pc-gr-h:hover, .rol-pc-gr.open .rol-pc-gr-h { background: #faf9ff; }
.rol-pc-chev { color: #c9c9d4; font-size: 9px; width: 9px; text-align: center; transition: transform .16s; }
.rol-pc-gr.open .rol-pc-chev { transform: rotate(90deg); color: #9961FF; }
.rol-pc-gr-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; flex: none; background: #f2f0fb; }
.rol-pc-gr-ic.edit { cursor: pointer; box-shadow: 0 0 0 1px #ddd0ff; }
.rol-pc-gr-ic.edit:hover { box-shadow: 0 0 0 2px #9961FF; }
.rol-pc-gr-c { flex: 1; min-width: 0; }
.rol-pc-gr-t { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; color: #1e2d5a; }
.rol-pc-gr-ley, .rol-pc-it-ley { font-size: 10px; color: #8a8aa0; display: block; margin-top: 1px; }
.rol-pc-gr-ley.vacia, .rol-pc-it-ley.vacia { color: #d5d5df; font-style: italic; }
.rol-com-permisos { color: #c9c9d4 !important; font-family: Consolas, monospace; font-size: 9px !important; }
.rol-pc-gr-ck { font-weight: 700; font-size: 12px; text-align: center; border-radius: 5px; flex: none; }
.rol-pc-gr-ck.si { color: #16a34a; }
.rol-pc-gr-ck.no { color: #d1d5db; }
.rol-pc-gr-ck.parte { color: #b7791f; font-size: 10px; padding: 0 3px; }
.rol-pc-gr-body { display: none; padding: 2px 5px 7px 38px; }
.rol-pc-gr.open .rol-pc-gr-body { display: block; }
.rol-pc-it { display: flex; justify-content: space-between; align-items: flex-start; gap: 7px; padding: 4px 0; font-size: 11.5px; color: #4b5563; border-bottom: 1px solid #f7f7fa; }
.rol-pc-it:last-child { border-bottom: 0; }
.rol-pc-it.off .rol-pc-it-t { opacity: .42; }
.rol-pc-it-c { flex: 1; min-width: 0; }
.rol-pc-it-t { display: flex; align-items: center; gap: 4px; }
.rol-pc-ck { font-weight: 700; font-size: 11px; cursor: pointer; border-radius: 5px; padding: 0 3px; flex: none; }
.rol-pc-ck.si { color: #16a34a; }
.rol-pc-ck.no { color: #d1d5db; }
.rol-pc-ck.parte { color: #b7791f; }
.rol-pc-ck:hover { background: #f5f0ff; }
.rol-pc-it .val { font-weight: 700; font-size: 11px; color: #1e2d5a; }
.rol-pc-it .val.inf { color: #7c3aed; }
.rol-pc-foot { margin: 6px 13px 13px; border-radius: 12px; background: #f7f7fb; padding: 9px 12px; display: flex; gap: 10px; align-items: center; font-size: 10.5px; }
.rol-pc-foot .ic { width: 25px; height: 25px; border-radius: 8px; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.rol-pc-foot b { display: block; color: #1e2d5a; }
.rol-pc-foot span { color: #6b7280; font-size: 10px; }

/* lápiz, candado, edición inline, quitar, agregar */
.rol-com-lap { opacity: 0; cursor: pointer; font-size: 9.5px; padding: 1px 3px; border-radius: 4px; color: #b9b9c8; flex: none; transition: opacity .12s; }
.rol-pc-tag:hover .rol-com-lap, .rol-pc-name:hover .rol-com-lap, .rol-pc-gr-h:hover .rol-com-lap, .rol-pc-it:hover .rol-com-lap, .rol-pc-tope:hover .rol-com-lap, .rol-pc-ley:hover .rol-com-lap { opacity: .8; }
.rol-com-lap:hover { opacity: 1 !important; background: #f0e9ff; color: #7c3aed; }
.rol-com-lap.glob { color: #9961FF; }
.rol-pc-head .rol-com-lap { color: rgba(255,255,255,.8); }
.rol-pc-head .rol-com-lap:hover { background: rgba(255,255,255,.2); color: #fff; }
.rol-com-candado { font-size: 8.5px; color: #d0d0dc; flex: none; }
input.rol-com-edit { border: 1px solid #9961FF; border-radius: 5px; padding: 2px 6px; font: inherit; font-size: inherit; width: 100%; background: #fff; color: #374151; }
input.rol-com-edit:focus { outline: none; }
.rol-pc-head input.rol-com-edit { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); color: #fff; }
.rol-com-borrar { opacity: 0; cursor: pointer; font-size: 10px; padding: 1px 3px; border-radius: 4px; color: #d9a0a0; flex: none; }
.rol-pc-gr-h:hover .rol-com-borrar, .rol-pc-it:hover .rol-com-borrar, .rol-pc-tope:hover .rol-com-borrar { opacity: .75; }
.rol-com-borrar:hover { opacity: 1 !important; background: #fdeaea; color: #dc2626; }
.rol-com-add { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 10.5px; color: #a9a9bb; cursor: pointer; }
.rol-com-add:hover { color: #7c3aed; }
.rol-com-add-gr { margin: 7px 5px 3px; padding: 7px; border: 1px dashed #ddd0ff; border-radius: 9px; justify-content: center; color: #9961FF; font-weight: 600; }
.rol-com-emojis { position: absolute; background: #fff; border: 1px solid #e5e7eb; border-radius: 11px; box-shadow: 0 10px 30px rgba(31,41,55,.16); padding: 8px; z-index: 70; width: 206px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rol-com-emojis.static { position: static; box-shadow: none; border-color: #eee; width: auto; margin-bottom: 7px; }
.rol-com-emojis span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; cursor: pointer; font-size: 15px; }
.rol-com-emojis span:hover { background: #f0e9ff; }

/* globo propio para el ◐ (nunca title= del sistema) */
.rol-com-globo-wrap { position: relative; }
.rol-com-globo { display: none; position: absolute; right: 0; bottom: calc(100% + 6px); background: #1e2d5a; color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 10.5px; font-weight: 400; white-space: nowrap; z-index: 40; box-shadow: 0 6px 18px rgba(30,45,90,.28); }
.rol-com-globo-wrap:hover .rol-com-globo { display: block; }

/* formularios de creación y avisos de borrado */
.rol-com-nuevo { background: #faf8ff; border: 1px solid #ddd0ff; border-radius: 9px; padding: 10px; margin: 4px 0; }
.rol-com-nuevo-plan { max-width: 360px; }
.rol-com-nuevo .t { font-size: 9.5px; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.rol-com-nuevo input { width: 100%; border: 1px solid #e5e7eb; border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12px; margin-bottom: 6px; }
.rol-com-nuevo input:focus { outline: none; border-color: #9961FF; }
.rol-com-permlist { max-height: 140px; overflow-y: auto; border: 1px solid #eee; border-radius: 7px; padding: 4px; background: #fff; margin-bottom: 7px; }
.rol-com-permlist .pm { display: flex; align-items: center; gap: 6px; padding: 3px 5px; font-size: 10.5px; cursor: pointer; border-radius: 5px; }
.rol-com-permlist .pm:hover { background: #f5f0ff; }
.rol-com-permlist .pm .bx { width: 12px; height: 12px; border: 1.5px solid #d1d5db; border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 8px; color: #fff; }
.rol-com-permlist .pm.on .bx { background: #9961FF; border-color: #9961FF; }
.rol-com-permlist .pm code { font-family: Consolas, monospace; color: #6b7280; }
.rol-com-permlist .pm small { color: #b9b9c8; margin-left: auto; }
.rol-com-permlist .mod { font-size: 8.5px; color: #c0c0cc; text-transform: uppercase; padding: 4px 5px 1px; font-weight: 700; }
.rol-com-nuevo .btns { display: flex; gap: 6px; }
.rol-com-nuevo button { border: 0; border-radius: 7px; padding: 6px 11px; font: 700 11.5px inherit; font-family: inherit; cursor: pointer; }
.rol-com-nuevo .ok { background: #9961FF; color: #fff; }
.rol-com-nuevo .no { background: #fff; color: #6b7280; border: 1px solid #e5e7eb; }
.rol-com-aviso-del { background: #fff7e6; border: 1px solid #f0e0bd; border-radius: 8px; padding: 7px 10px; font-size: 10.5px; color: #5b4a14; margin: 4px 0; line-height: 1.5; }
.rol-com-aviso-del b { color: #b7791f; }
.rol-com-aviso-del.morado { background: #f8f5ff; border-color: #ddd0ff; color: #5b3fa8; margin-bottom: 7px; }
.rol-com-aviso-del.morado b { color: #5b3fa8; }
.rol-com-aviso-del .btns { display: flex; gap: 5px; margin-top: 6px; }
.rol-com-aviso-del button { border: 0; border-radius: 6px; padding: 4px 10px; font: 700 10.5px inherit; font-family: inherit; cursor: pointer; }
.rol-com-aviso-del .si { background: #dc2626; color: #fff; }
.rol-com-aviso-del .no { background: #fff; color: #6b7280; border: 1px solid #e5e7eb; }

/* ══ [09-09] SIN CONTEMPLAR — lo que no está en la vitrina ══ */
.rol-com-sv { border-top: 2px solid #f0edff; margin-top: 6px; padding: 11px 12px 8px; background: #fcfbff; }
.rol-com-sv-h { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 0; }
.rol-com-sv-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; flex: none; background: #fff3e0; }
.rol-com-sv-t { flex: 1; font-size: 12.5px; font-weight: 600; color: #1e2d5a; }
.rol-com-sv-n { font-size: 10px; font-weight: 700; color: #b7791f; background: #fff7e6; border-radius: 999px; padding: 1px 7px; }
.rol-com-sv-sub { font-size: 10.5px; color: #9ca3af; line-height: 1.5; margin: 5px 0 8px 32px; }
.rol-com-sv-body { display: none; }
.rol-com-sv.open .rol-com-sv-body { display: block; }
.rol-com-sv.open .rol-pc-chev { transform: rotate(90deg); color: #9961FF; }

.rol-com-mod { font-size: 9px; color: #b9b9c8; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin: 9px 0 2px 4px; display: flex; align-items: center; gap: 6px; }
.rol-com-mod hr { flex: 1; border: 0; border-top: 1px solid #f1f1f5; }
.rol-com-acc { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 7px; font-size: 11.5px; }
.rol-com-acc:hover { background: #fff; }
.rol-com-acc-c { flex: 1; min-width: 0; }
.rol-com-acc-l { color: #374151; }
.rol-com-acc-l b { color: #16a34a; }
.rol-com-acc-k { font-family: Consolas, monospace; font-size: 9px; color: #c9c9d4; display: block; }
.rol-com-acc.movida { opacity: .45; }
.rol-com-acc.movida .rol-com-llevar { visibility: hidden; }
.rol-com-sw { width: 30px; height: 16px; border-radius: 999px; background: #d1d5db; position: relative; flex: none; cursor: pointer; transition: .15s; }
.rol-com-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: .15s; }
.rol-com-sw.on { background: #9961FF; }
.rol-com-sw.on::after { left: 16px; }
.rol-com-sw-l { font-size: 9px; color: #a9a9bb; width: 66px; text-align: right; flex: none; }
.rol-com-sw-l.on { color: #7c3aed; font-weight: 600; }
.rol-com-llevar { border: 1px solid #ddd0ff; background: #fff; color: #9961FF; border-radius: 6px; padding: 3px 8px; font: 600 10px inherit; font-family: inherit; cursor: pointer; flex: none; }
.rol-com-llevar:hover { background: #9961FF; color: #fff; border-color: #9961FF; }
.rol-com-ops { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.rol-com-op { border: 1px solid #e5e7eb; background: #fff; border-radius: 7px; padding: 4px 9px; font-size: 11px; cursor: pointer; }
.rol-com-op.on { border-color: #9961FF; background: #f5f0ff; color: #7c3aed; font-weight: 600; }

/* aviso: la fila no distingue nada entre planes */
.rol-com-sinefecto { font-size: 9px; font-weight: 700; background: #fff7e6; color: #b7791f; border-radius: 999px; padding: 1px 6px; white-space: nowrap; cursor: help; position: relative; margin-left: 4px; }
.rol-com-sinefecto .rol-com-globo { width: 210px; white-space: normal; font-weight: 400; }
.rol-com-sinefecto:hover .rol-com-globo { display: block; }

/* ══ [10-09] EL DISQUETE DE CADA TARJETA ══
   Siempre presente: apagado cuando no hay nada que guardar, sólido cuando sí. El texto
   sale al pasar el mouse, para que ocupe poco mientras no se usa. */
.rol-pc { position: relative; }
.rol-pc-head { position: relative; }

.rol-pc-save {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 999px;
  height: 28px;
  padding: 0 8px;
  cursor: pointer;
  font: 700 10.5px inherit;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  background: rgba(255, 255, 255, .95);
  color: #7c3aed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  transition: gap .18s, padding .18s, opacity .18s, background .15s;
  z-index: 5;
}
.rol-pc-save i { font-size: 12px; flex: none; }
.rol-pc-save .txt { max-width: 0; opacity: 0; transition: max-width .18s, opacity .15s; }
.rol-pc-save:hover .txt { max-width: 120px; opacity: 1; }
.rol-pc-save:hover { gap: 6px; padding: 0 12px 0 10px; }

/* Sin cambios: se ve, pero apagado. */
.rol-pc-save.limpio { opacity: .45; background: rgba(255, 255, 255, .75); box-shadow: none; }
.rol-pc-save.limpio:hover { opacity: .95; background: rgba(255, 255, 255, .95); }

/* Con cambios: sólido y con un halo ámbar que respira, el mismo tono del borde. */
.rol-pc-save:not(.limpio):not(.ok):not(.guardando) { animation: rolLatido 2.2s ease-in-out infinite; }
@keyframes rolLatido {
  0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
  50%      { box-shadow: 0 2px 8px rgba(0, 0, 0, .14), 0 0 0 4px rgba(245, 158, 11, .28); }
}
.rol-pc-save.guardando { background: #fff; color: #9ca3af; pointer-events: none; opacity: 1; }
.rol-pc-save.guardando .txt,
.rol-pc-save.ok .txt { max-width: 120px; opacity: 1; margin-left: 6px; }
.rol-pc-save.ok { background: #16a34a; color: #fff; opacity: 1; padding: 0 12px 0 10px; gap: 6px; }

/* La maestra guarda otra cosa (la vitrina, común a todos los planes): se nota. */
.rol-pc-maestra .rol-pc-save { background: #9961FF; color: #fff; box-shadow: 0 2px 8px rgba(153, 97, 255, .35); }
.rol-pc-maestra .rol-pc-save.limpio { background: #fff; color: #9961FF; opacity: .55; box-shadow: none; }
.rol-pc-maestra .rol-pc-save.limpio:hover { opacity: 1; }
.rol-pc-maestra .rol-pc-save.ok { background: #16a34a; }

/* Tarjeta con cambios sin guardar: se ve de una cuáles tienen trabajo pendiente. */
.rol-pc.sucia { box-shadow: 0 4px 22px rgba(183, 121, 31, .22); }
.rol-pc-maestra.sucia { border-color: #f0c98b; }
/* [28-09-2026] Para activar la empresa (roles.js [v2026.09.28-1]) */
.rol-com-sub { border-top: 1px dashed #ece6ff; margin-top: 4px; padding-top: 9px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9961FF; }
.rol-com-activar { font-size: 11px; }
.rol-pc-act { margin-top: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 10px; padding: 7px 10px; font-size: 11px; line-height: 1.55; }
.rol-pc-act .r { display: flex; justify-content: space-between; gap: 8px; }
.rol-pc-act .r.t { border-top: 1px solid rgba(255,255,255,.3); margin-top: 3px; padding-top: 3px; font-weight: 700; }