/* ── BITÁCORA ──
   2026-10-08 | Un tope "Sin tope" ya no sale cortado ("Sin to|") en Comparar planes: el campo
                deshabilitado no guarda el lugar de las flechitas del número y el texto va
                centrado (.rol-mz-tope input:disabled). Lo vio Alberto en Enterprise Full.
   2026-10-07 (2) | Planes y Roles y Permisos pasan a ser dos pestañas de arriba (roles.js
                [v2026.10.07-2]): + .ryp-candado, la nota de la página Planes para quien no es
                Super Admin. Resumen de planes: el aviso de cambios sin publicar lleva el interruptor
                "Lo publicado / Con los cambios sin publicar" (.rs-ver; en morado mientras se ven
                los cambios, .rs-aviso.borr), el punto de la pestaña de un plan con cambios
                (.rs-tab-punto) y la marca "Sin publicar" (.rs-badge.borr) — roles.js
                [v2026.10.07-2].
   2026-10-07 | ROLES Y PERMISOS POR PESTAÑAS (roles.js [v2026.10.07-1], preview completo v5
                aprobado por Alberto el 07-10): + la página (.ryp-*: cabecera, pestañas, vistas,
                tablas, Vista del administrador, Super Admin), lo nuevo de la matriz (.rol-mz-*:
                barra de cambios, topes con ∞, "todos los planes", cargo fuera del plan, lo que
                ve la empresa), la ventana de un cargo (.rol-cargo-*) y el Resumen de planes
                (.rs-*: un plan a la vez en pestañas, con Módulos, Topes y Cargos).
                − lo que ya no se usa: la barra de pestañas y la lista de usuarios de la página
                vieja (pages/roles.html, que se retira), Catastro (pasa a Tabla del plan) y
                Datos comerciales entero (.rol-com-*, .rol-pc-*, .rol-sa-tabs, .rol-hidden; la
                pestaña pasa a Resumen de planes).
   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; }

/* ── 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);
}

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

/* ═══════════════════════════════════════════
   [07-10-2026] ROLES Y PERMISOS POR PESTAÑAS (roles.js [v2026.10.07-1], preview completo v5)
   .ryp-* la página y sus vistas; .rol-mz-* la matriz; .rol-cargo-* la ventana de un cargo;
   .rs-* el Resumen de planes.
   ═══════════════════════════════════════════ */
.ryp-oculto { display: none !important; }
.ryp-page { min-height: 100%; flex-shrink: 0; background: var(--rol-bg); font-family: 'DM Sans', sans-serif; color: var(--rol-text); }
.ryp-head { display: flex; align-items: center; gap: 14px; padding: 18px 24px 14px; background: #fff; }
.ryp-head-t { flex: 1; min-width: 0; }
.ryp-head-t h1 { margin: 0; font: 600 18px 'Poppins', sans-serif; color: var(--rol-text); }
.ryp-head-t p { margin: 2px 0 0; font-size: 12.5px; color: var(--rol-muted); }
.ryp-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 10px; padding: 9px 16px; font: 600 13px 'DM Sans', sans-serif; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #8e84fa, #5a79d4); box-shadow: 0 4px 12px rgba(142,132,250,.3); }
.ryp-btn:disabled { opacity: .7; cursor: default; }
.ryp-btn .rp-punto, .ryp-btn .rol-mz-punto { display: none; width: 7px; height: 7px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.ryp-btn.rp-sucio .rp-punto, .ryp-btn.rol-mz-sucio .rol-mz-punto { display: inline-block; }
.ryp-nav { display: flex; gap: 6px; padding: 0 24px 14px; background: #fff; border-bottom: 1px solid var(--rol-border); overflow-x: auto; }
.ryp-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--rol-border); background: #fff; border-radius: 10px; padding: 8px 14px;
  font: 600 12.5px 'DM Sans', sans-serif; color: #7D84C1; cursor: pointer; white-space: nowrap; transition: all .15s; }
.ryp-tab:hover { border-color: #c9c4fb; color: #6d63e8; }
.ryp-tab.on { background: linear-gradient(135deg, #8e84fa, #5a79d4); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(142,132,250,.28); }
.ryp-tab i { font-size: 12px; }
.ryp-punto { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; border: 2px solid #fff; }
.ryp-para { padding: 12px 24px 0; font-size: 12.5px; color: #6b7194; }
.ryp-para:empty { display: none; }
.ryp-para i { color: #8e84fa; margin-right: 5px; }
.ryp-cuerpo { padding: 12px 24px 28px; }
.ryp-error { padding: 22px; text-align: center; color: #b91c1c; font-size: 13px; background: #fff; border: 1.5px dashed #fecaca; border-radius: 12px; }
.ryp-error i { margin-right: 6px; }
.ryp-candado { padding: 22px; text-align: center; color: #6b7194; font-size: 13px; background: #fafbff; border: 1.5px dashed #e4e9f5; border-radius: 12px; }
.ryp-candado i { margin-right: 6px; color: #9ba3c0; }
.ryp-vista { display: inline-flex; gap: 4px; padding: 4px; background: #f1effd; border-radius: 10px; margin-bottom: 6px; }
.ryp-vista button { border: 0; background: transparent; font: 600 12px 'DM Sans', sans-serif; color: #6052cb; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.ryp-vista button.on { background: #fff; color: #7c3aed; box-shadow: 0 1px 4px rgba(96,82,203,.18); }
.ryp-nota { font-size: 12px; color: #9ba3c0; margin: 10px 2px; }
.ryp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ryp-chips button { border: 1px solid #e4e9f5; background: #fff; border-radius: 20px; padding: 5px 11px; font: 600 12px 'DM Sans', sans-serif; color: #5a79d4; cursor: pointer; }
.ryp-chips button.on { background: #5a79d4; color: #fff; border-color: #5a79d4; }
.ryp-comp-cab { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; font-size: 12.5px; color: #6b7194; }
.ryp-tabla-wrap { overflow: auto; border: 1.5px solid var(--rol-border); border-radius: 12px; background: #fff; max-height: 620px; }
.ryp-tabla { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.ryp-tabla th { position: sticky; top: 0; background: #f8f9ff; color: #2d3158; font-weight: 600; text-align: center; padding: 10px 8px; border-bottom: 1.5px solid var(--rol-border); z-index: 1; white-space: nowrap; }
.ryp-tabla th small { display: block; font-size: 10px; color: #b45309; font-weight: 500; }
.ryp-tabla th.fuera { color: #9ba3c0; }
.ryp-tabla td { padding: 6px 8px; border-bottom: 1px solid #f1f3fa; text-align: center; color: #2d3158; vertical-align: middle; }
.ryp-tabla th.izq, .ryp-tabla td.izq { text-align: left; padding-left: 14px; }
.ryp-tabla td.izq { color: #4b5175; }
.ryp-tabla td.fuera { color: #d4d8e8; background: #fbfbfe; }
.ryp-tabla tr.mod td { background: #fbfbff; font-weight: 600; color: #2d3158; padding: 9px 14px; text-align: left; }
.ryp-comp th .rol-plan-tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.ryp-comp .rol-switch { margin: 0 auto; }
.ryp-comp tr.sel td { background: #f7f5ff; }
.ryp-cargo-pt { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 7px; }
.ryp-si { color: #10b981; font-weight: 700; }
.ryp-no { color: #c4c9e0; }
.ryp-sin { color: #7c3aed; font-weight: 700; }
.ryp-admin-planes { font-size: 12.5px; color: #6b7194; margin: 2px 0 10px; }
.ryp-admin-planes:empty { display: none; }
.ryp-admin-planes button { border: 1px solid #e4e9f5; background: #fff; border-radius: 20px; padding: 4px 11px; margin: 0 2px; font: 600 12px 'DM Sans', sans-serif; color: #5a79d4; cursor: pointer; }
.ryp-admin-planes button.on { background: #5a79d4; color: #fff; border-color: #5a79d4; }
.ryp-sa { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.ryp-sa-card { background: #fff; border: 1.5px solid var(--rol-border); border-radius: 14px; padding: 18px; }
.ryp-sa-t { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ryp-sa-t b, .ryp-sa-pers b { display: block; color: #2d3158; font-size: 14px; }
.ryp-sa-t small, .ryp-sa-pers small { color: #9ba3c0; font-size: 12px; }
.ryp-sa-av { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #8e84fa, #5a79d4); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 16px 'Poppins', sans-serif; flex-shrink: 0; }
.ryp-sa-av.chico { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; }
.ryp-sa ul { margin: 0; padding: 0; list-style: none; }
.ryp-sa li { display: flex; gap: 10px; font-size: 13px; color: #4b5175; padding: 6px 0; line-height: 1.45; }
.ryp-sa li i { color: #8e84fa; width: 16px; margin-top: 3px; }
.ryp-sa-sub { font: 600 11px 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8e84fa; margin-bottom: 10px; }
.ryp-sa-pers { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.ryp-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #5a79d4; cursor: pointer; }
@media (max-width: 760px) { .ryp-sa { grid-template-columns: 1fr; } .ryp-head { flex-wrap: wrap; } }

/* La matriz */
.rol-mz-barra { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; color: #92400e; font-size: 12.5px; position: sticky; top: 0; z-index: 5; }
.rol-mz-barra > i { color: #d97706; }
.rol-mz-barra span { flex: 1; }
.rol-mz-descartar, .rol-mz-guardar { border: 0; border-radius: 8px; padding: 6px 12px; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.rol-mz-descartar { background: #fff; color: #92400e; border: 1px solid #fde68a; }
.rol-mz-guardar { background: #d97706; color: #fff; }
.rol-mz-candado { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 16px; color: #f59e0b; font-size: 11px; }
.rol-sa-global-role-wrap.rol-mz-fuera .rol-role-tab { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.rol-sa-global-panel .rol-role-tab-wrap { min-width: 150px; }
.rol-mz-vacio { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 18px; border: 1.5px dashed #e4e9f5; border-radius: 12px; color: #6b7194; font-size: 13px; line-height: 1.5; background: #fff; }
.rol-mz-vacio > i { font-size: 20px; color: #c4c9e0; margin-top: 2px; }
.rol-mz-vacio b { color: #2d3158; }
.rol-mz-cont { margin-left: auto; margin-right: 10px; font: 600 11px 'DM Sans', sans-serif; color: #9ba3c0; background: #f4f6fb; border-radius: 10px; padding: 2px 8px; }
.rol-mz-cont.todo { color: #059669; background: #ecfdf5; }
.rol-modulo.rol-mz-modulo-off .rol-modulo-body { opacity: .55; }
.rol-mz-siempre { display: inline-block; margin-left: 8px; font: 600 10px 'DM Sans', sans-serif; color: #7c3aed; background: #f3f0ff; border-radius: 8px; padding: 1px 7px; vertical-align: 1px; }
.rol-modulo-body { grid-auto-flow: dense; }
.rol-toggle-row.rol-mz-fila-tope { grid-column: span 2; }
.rol-mz-tope { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rol-mz-tope input { width: 86px; text-align: right; }
.rol-mz-tope input:disabled { background: #f4f6fb; color: #9ba3c0; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.rol-mz-tope input:disabled::-webkit-inner-spin-button,
.rol-mz-tope input:disabled::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }   /* sin flechitas: "Sin tope" cabe entero */
.rol-mz-tope input:disabled::placeholder { color: #7c3aed; font-weight: 600; }
.rol-mz-tope.chico { justify-content: center; }
.rol-mz-tope.chico input { width: 64px; padding: 4px 6px; font-size: 12px; }
.rol-mz-tope.chico .rol-mz-inf { width: 26px; height: 26px; font-size: 13px; }
.rol-mz-inf { border: 1.5px solid #e4e9f5; background: #fff; color: #9ba3c0; border-radius: 7px; width: 30px; height: 28px; font-size: 15px; cursor: pointer; }
.rol-mz-inf.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rol-toggle-row.rol-mz-en-cero { background: #fffbeb; }
.rol-mz-hint { display: block; font-size: 11px; color: #b45309; margin-top: 2px; }
.rol-mz-hint.gris { color: #9ba3c0; }
/* Lo que ve una empresa */
.rol-mz-emp-lista .rol-acord-card { margin-bottom: 10px; }
.rol-mz-emp-mod { margin-bottom: 10px; }
.rol-mz-emp-mod-t { font: 600 12px 'DM Sans', sans-serif; color: #2d3158; margin: 10px 0 4px; display: flex; gap: 6px; align-items: center; }
.rol-tope-chip { font: 600 12px 'DM Sans', sans-serif; color: #5a79d4; background: #eef2ff; border-radius: 8px; padding: 2px 9px; }
.rol-tope-chip.no { color: #9ba3c0; background: #f4f6fb; }
.rol-hint-upgrade.rol-hint-no { color: #9ba3c0; }

/* Cargos: lápiz, nuevo, desactivados y su ventana */
.rol-mz-lapiz { border: 0; background: transparent; color: #b4b9d6; font-size: 10.5px; padding: 3px 5px; border-radius: 6px; cursor: pointer; margin-left: auto; }
.rol-mz-lapiz:hover { color: #7c3aed; background: #f3f0ff; }
.rol-mz-lapiz + .rol-role-tab-toggle, .rol-mz-lapiz + .rol-mz-candado { margin-left: 2px; }
.rol-mz-cargos-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 14px; }
.rol-mz-nuevo-cargo { flex: 0 0 auto; border: 1.5px dashed #c9c4fb; background: #fff; color: #7c3aed; border-radius: 10px; padding: 6px 12px; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.rol-mz-nuevo-cargo:hover { background: #f7f5ff; }
.rol-mz-inactivo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed #e5e7eb; border-radius: 10px; padding: 6px 10px; font-size: 11.5px; color: #9ba3c0; text-decoration: line-through; }
.rol-mz-inactivo button { text-decoration: none; border: 0; background: #f3f0ff; color: #7c3aed; border-radius: 6px; padding: 2px 8px; font: 600 11px 'DM Sans', sans-serif; cursor: pointer; }
.rol-cargo-campo { margin-bottom: 14px; }
.rol-cargo-campo small { font-weight: 400; color: #9ba3c0; text-transform: none; letter-spacing: 0; }
.rol-cargo-codigo { font-size: 11.5px; color: #9ba3c0; margin: -8px 0 14px; }
.rol-cargo-codigo code { font: 600 11.5px ui-monospace, monospace; color: #5a4fcf; background: #f3f0ff; border-radius: 5px; padding: 1px 6px; }
.rol-cargo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rol-cargo-chips button { border: 1px solid #e4e9f5; background: #fff; border-radius: 20px; padding: 5px 11px; font: 600 12px 'DM Sans', sans-serif; color: #5a79d4; cursor: pointer; }
.rol-cargo-chips button.on { background: #5a79d4; color: #fff; border-color: #5a79d4; }
.rol-cargo-ayuda { font-size: 12px; color: #8b90a8; margin: 8px 0 0; line-height: 1.45; }
.rol-cargo-ayuda i { color: #8e84fa; margin-right: 4px; }
.rol-cargo-quitar { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #f8f9ff; font-size: 12.5px; color: #6b7194; }
.rol-cargo-quitar span { flex: 1; }
.rol-cargo-quitar.bloq { background: #fffbeb; color: #92400e; }
.rol-cargo-quitar.bloq > i { color: #d97706; }
.rol-cargo-quitar.conf { background: #fef2f2; color: #991b1b; }
.rol-cargo-btn-link { border: 0; background: transparent; color: #dc2626; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.rol-cargo-btn-peligro { border: 0; background: #dc2626; color: #fff; border-radius: 8px; padding: 7px 12px; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.rol-cargo-error { color: #dc2626; font-size: 12px; min-height: 14px; margin-top: 8px; }

/* ═══ Resumen de planes: un plan a la vez, en pestañas ═══ */
.rs-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:4px 0 12px}
.rs-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid var(--rol-border);background:#fff;border-radius:12px;
  padding:9px 12px 9px 16px;cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;overflow:hidden;transition:all .15s}
.rs-tab::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--rs-c1),var(--rs-c2))}
.rs-tab:hover{border-color:#c9c4fb}
.rs-tab.on{background:linear-gradient(135deg,var(--rs-c1),var(--rs-c2));border-color:transparent;box-shadow:0 4px 14px rgba(90,121,212,.28)}
.rs-tab.on::before{display:none}
.rs-tab-n{font:600 13px 'Poppins',sans-serif;color:#2d3158}
.rs-tab-p{font-size:12px;font-weight:600;color:#6b7194}
.rs-tab-p small{font-weight:500;color:#9ba3c0}
.rs-tab.on .rs-tab-n,.rs-tab.on .rs-tab-p,.rs-tab.on .rs-tab-p small{color:#fff}
.rs-tab-x{font-size:10px;font-weight:700;color:#b91c1c;background:#fee2e2;border-radius:6px;padding:0 6px}
.rs-aviso{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 8px 8px 13px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:12.5px;margin-bottom:12px}
.rs-aviso > span:first-child{flex:1;min-width:220px}
.rs-aviso.borr{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.rs-ver{display:inline-flex;gap:3px;padding:3px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06);border-radius:9px}
.rs-ver button{border:0;background:transparent;font:600 12px 'DM Sans',sans-serif;color:#92400e;padding:5px 11px;border-radius:7px;cursor:pointer;white-space:nowrap}
.rs-aviso.borr .rs-ver button{color:#6d28d9}
.rs-ver button.on{background:#fff;color:#7c3aed;box-shadow:0 1px 4px rgba(96,82,203,.18)}
.rs-tab-punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f59e0b;margin-left:6px;vertical-align:2px}
.rs-tab.on .rs-tab-punto{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.rs-badge.borr{background:#fef3c7;color:#92400e}
.rs-plan{background:#fff;border:1.5px solid var(--rol-border);border-radius:16px;overflow:hidden}
.rs-cab{display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(135deg,var(--rs-c1),var(--rs-c2));color:#fff}
.rs-cab > div:first-child{flex:1;min-width:0}
.rs-nombre{font:600 16px 'Poppins',sans-serif}
.rs-cod{font-size:11.5px;opacity:.85;margin-top:1px}
.rs-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rs-badge{font:600 11px 'DM Sans',sans-serif;border-radius:20px;padding:3px 10px;background:rgba(255,255,255,.22);color:#fff;white-space:nowrap}
.rs-badge.no{background:#fee2e2;color:#b91c1c}
.rs-badge.gris{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.rs-badge.oro{background:#fef3c7;color:#92400e}
.rs-badge.ia{background:#fff;color:#4f46e5}
.rs-cuerpo{display:grid;grid-template-columns:270px 1fr;gap:20px;padding:16px 20px}
.rs-izq .pc-card{max-width:270px}
.rs-pie{text-align:center;font-size:11.5px;color:#9ba3c0;margin:8px 0 14px}
.rs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.rs-stat{background:#f8f9ff;border:1px solid #eef0fa;border-radius:12px;padding:9px 12px}
.rs-stat b{display:block;font:700 19px 'Poppins',sans-serif;color:#2d3158}
.rs-stat span{font-size:11.5px;color:#7d84a6}
.rs-bloque h4{margin:0 0 8px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8e84fa}
.rs-bloque h4 i{margin-right:4px}
.rs-fila{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px dashed #eef0fa;color:#4b5175}
.rs-fila span:last-child{text-align:right;color:#2d3158;font-weight:600}
.rs-fila small{color:#9ba3c0;font-weight:500}
.rs-subs{display:inline-flex;gap:4px;padding:4px;background:#f1effd;border-radius:10px;margin-bottom:10px}
.rs-subs button{border:0;background:transparent;font:600 12px 'DM Sans',sans-serif;color:#6052cb;padding:6px 12px;border-radius:7px;cursor:pointer}
.rs-subs button small{font-weight:700;color:#9b93d8;margin-left:2px}
.rs-subs button.on{background:#fff;color:#7c3aed;box-shadow:0 1px 4px rgba(96,82,203,.18)}
.rs-sub-cuerpo{border:1px solid #eef0fa;border-radius:12px;padding:12px;min-height:420px}
.rs-mod-ico{width:22px;height:22px;border-radius:6px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;flex-shrink:0}
/* Módulos: lista y detalle */
.rs-md{display:grid;grid-template-columns:230px 1fr;gap:14px}
.rs-md-lista{display:flex;flex-direction:column;gap:1px}
.rs-mi{display:flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:8px;padding:4px 8px;cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif}
.rs-mi:hover{background:#f7f5ff}
.rs-mi.on{background:#efebff}
.rs-mi.no{opacity:.5}
.rs-mi-n{flex:1;font-size:12.5px;font-weight:600;color:#2d3158}
.rs-mi-c{font-size:11px;font-weight:700;color:#7d84a6}
.rs-md-det{background:#fbfaff;border-radius:10px;padding:12px 14px;align-self:start;position:sticky;top:8px}
.rs-md-cab{display:flex;align-items:center;gap:8px}
.rs-md-cab b{font-size:14px;color:#2d3158}
.rs-md-cab span:last-child{margin-left:auto;font-size:12px;color:#7d84a6;font-weight:600}
.rs-barra{height:4px;border-radius:4px;background:#ecebf8;margin:9px 0 10px;overflow:hidden}
.rs-barra span{display:block;height:100%;border-radius:4px}
.rs-accs{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.rs-acc{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#2d3158}
.rs-acc i{color:#10b981;font-size:10px;width:12px}
.rs-acc.no{color:#b4b9d6}
.rs-acc.no i{color:#d4d8e8}
.rs-acc .rs-v{margin-left:auto;font-weight:700;color:#5a4fcf}
/* Topes */
.rs-topes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rs-tope{display:flex;align-items:center;gap:9px;border:1px solid #eef0fa;border-radius:10px;padding:8px 10px}
.rs-tope.no{opacity:.6}
.rs-tope-n{flex:1;font-size:12.5px;color:#2d3158;font-weight:600}
.rs-tope-n small{display:block;font-size:11px;color:#9ba3c0;font-weight:500}
.rs-tope b{font:700 14px 'Poppins',sans-serif;color:#5a4fcf;white-space:nowrap}
.rs-tope.no b{color:#b4b9d6;font:600 12px 'DM Sans',sans-serif}
/* Cargos */
.rs-cargos-l{display:flex;flex-direction:column;gap:6px}
.rs-cargo-f{display:flex;align-items:center;gap:10px;border:1px solid #eef0fa;border-radius:10px;padding:8px 12px}
.rs-cargo-f.no{opacity:.55}
.rs-cargo-av{width:28px;height:28px;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;font:700 12px 'Poppins',sans-serif}
.rs-cargo-n{flex:1;font-size:13px;font-weight:600;color:#2d3158}
.rs-cargo-n small{display:block;font-size:11.5px;color:#9ba3c0;font-weight:500}
.rs-cargo-e{font-size:12px;font-weight:600;color:#047857}
.rs-cargo-f.no .rs-cargo-e{color:#9ba3c0}
@media (max-width:980px){.rs-cuerpo{grid-template-columns:1fr}.rs-md{grid-template-columns:1fr}.rs-stats{grid-template-columns:1fr 1fr}.rs-accs,.rs-topes{grid-template-columns:1fr}}