/* ── BITÁCORA ──
   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;
}