/* ============================================================================
   291-permisos-revamp.css — Roles y permisos, estilo Notion/Linear
   ----------------------------------------------------------------------------
   POR QUÉ UNA HOJA NUEVA Y NO TOCAR LA DE SIEMPRE.

   El editor de permisos pintaba con clases `.pp-*` que NO son suyas: las usan
   otros ocho archivos —los granulares de deal, CRM, WO, catálogo, costeo,
   invoicer, override de días y cost-harvest— que se pintan DENTRO de este mismo
   editor, en la pestaña Granular. Rediseñar `.pp-table` habría dejado esas ocho
   sub-pantallas rotas sin que nadie las tocara.

   Y hay algo peor: la hoja inyectada `pp-css` esconde, en medio del CSS del
   editor, las reglas que dan altura y ancho a las filas del SIDEBAR DE TODA LA
   APP. Borrarla habría descuadrado el menú entero.

   Así que: prefijo NUEVO (`.rp-*`), hoja aparte, y `pp-css` se queda intacta
   donde está. Lo viejo sigue vivo y sirviendo a quien lo necesita; lo nuevo se
   monta al lado. Suma, no resta.

   TOKENS LOCALES, como en MOD-270. No se usan los globales directamente: se
   declara un juego propio sobre el contenedor y se redefine para modo noche.
   Así el módulo es coherente consigo mismo y no arrastra a nadie.
   ========================================================================== */

#page-config.rp-v2{
    --rp-page:var(--bg); --rp-surf:var(--bg2); --rp-surf-2:var(--bg3);
    --rp-surf-hover:color-mix(in srgb, var(--bg3) 84%, var(--turq));
    --rp-tx:var(--text); --rp-tx-2:var(--dim); --rp-tx-3:color-mix(in srgb, var(--dim) 76%, transparent);
    --rp-bd:var(--border); --rp-bd-soft:color-mix(in srgb, var(--border) 70%, transparent);
    --rp-ac:var(--turq); --rp-ac-soft:color-mix(in srgb, var(--turq) 13%, transparent);
    --rp-ok:var(--green); --rp-ok-soft:color-mix(in srgb, var(--green) 13%, transparent);
    --rp-warn:var(--yellow); --rp-warn-soft:color-mix(in srgb, var(--yellow) 13%, transparent);
    --rp-dan:var(--red); --rp-on-accent:var(--bg); --rp-focus:color-mix(in srgb, var(--turq) 28%, transparent);
    width:100%; height:100%; min-width:0; min-height:0;
    background:var(--rp-page); color:var(--rp-tx); text-transform:none;
}
html[data-mode="noche"] #page-config.rp-v2{
    --rp-surf-hover:color-mix(in srgb, var(--bg3) 76%, var(--turq));
    --rp-ac-soft:color-mix(in srgb, var(--turq) 18%, transparent);
    --rp-ok-soft:color-mix(in srgb, var(--green) 18%, transparent);
    --rp-warn-soft:color-mix(in srgb, var(--yellow) 18%, transparent);
    --rp-focus:color-mix(in srgb, var(--turq) 36%, transparent);
}

/* Este shell reemplaza el `max-width` inline que encajonaba toda Configuración.
   Los dos bloques administrativos permanecen después del editor y siguen siendo
   accesibles con el scroll de la página; la matriz usa su propio scroll. */
/* `min-height` y NO `height`. Con `height:100%` el editor se comía el alto
   entero del contenedor y los dos bloques de administración que van DEBAJO
   —«Limpieza de base de datos» y «Catálogo de productos»— quedaban empujados
   fuera, dependiendo de que el scroll de la página los rescatara. Funciones que
   sólo existen en esta pantalla no pueden depender de eso.

   Con la caja en columna y `min-height:100%`, el editor llena el monitor cuando
   sobra sitio y la caja CRECE cuando hace falta, así que los dos bloques quedan
   siempre alcanzables. */
#page-config.rp-v2 > .rp-config-shell{
    display:flex; flex-direction:column; width:100%; min-height:100%; min-width:0;
}
/* Se oculta el título viejo de la página, no un control: el encabezado nuevo
   dice lo mismo. Dejar los dos habría apilado dos títulos seguidos. */
#page-config.rp-v2 .rp-legacy-intro{ display:none; }
/* El editor se lleva el alto sobrante, con un suelo para que no se aplaste en
   pantallas cortas. Su scroll sigue siendo interno; el de la página es el que
   lleva a los bloques de abajo. */
#page-config.rp-v2 #config-permisos-wrap{
    display:flex; flex-direction:column; width:100%; flex:1 1 auto;
    min-width:0; min-height:min(560px, 100%);
    overflow:hidden; background:var(--rp-page);
}

/* Los controles heredan tipografía y no fuerzan mayúsculas en nombres ni textos largos. */
#page-config.rp-v2 button,
#page-config.rp-v2 input,
#page-config.rp-v2 select{ font:inherit; text-transform:none; }
#page-config.rp-v2 *{ box-sizing:border-box; }
#page-config.rp-v2 button:focus-visible,
#page-config.rp-v2 input:focus-visible,
#page-config.rp-v2 select:focus-visible,
#page-config.rp-v2 [tabindex="0"]:focus-visible{
    outline:2px solid var(--rp-ac); outline-offset:2px; box-shadow:0 0 0 4px var(--rp-focus);
}

/* ── Cabecera y pestañas: dos bandas compactas, sin robar alto a la matriz. */
.rp-head{ display:flex; align-items:center; gap:14px; flex:none; padding:14px 20px 10px; }
.rp-head-txt{ flex:1 1 260px; min-width:0; }
.rp-head h1{ margin:0; color:var(--rp-tx); font-size:19px; font-weight:680; letter-spacing:-.01em; text-transform:none; }
.rp-head p{ margin:3px 0 0; color:var(--rp-tx-2); font-size:12.5px; text-transform:none; }
.rp-save{
    display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:4px 10px;
    border-radius:999px; border:1px solid var(--rp-bd); background:var(--rp-surf); color:var(--rp-tx-2);
    font-size:11.5px; font-weight:600; white-space:nowrap;
}
.rp-save.is-ok{ border-color:color-mix(in srgb, var(--rp-ok) 45%, transparent); background:var(--rp-ok-soft); color:var(--rp-ok); }
.rp-save.is-err{ border-color:color-mix(in srgb, var(--rp-dan) 45%, transparent); color:var(--rp-dan); }
.rp-save:empty{ display:none; }
.rp-btn{
    display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 14px; border-radius:8px;
    cursor:pointer; border:1px solid var(--rp-bd); background:var(--rp-surf); color:var(--rp-tx);
    font-size:12.5px; font-weight:600; transition:background .14s ease,border-color .14s ease;
}
.rp-btn:hover{ background:var(--rp-surf-hover); }
.rp-btn-pri{ border-color:var(--rp-ac); background:var(--rp-ac); color:var(--rp-on-accent); }
.rp-btn-pri:hover{ background:color-mix(in srgb, var(--rp-ac) 86%, var(--rp-tx)); }
.rp-tabs{ display:flex; gap:2px; flex:none; padding:0 20px; border-bottom:1px solid var(--rp-bd); background:var(--rp-page); }
.rp-tab{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:-1px; padding:9px 13px;
    border:0; border-bottom:2px solid transparent; background:transparent; color:var(--rp-tx-2);
    cursor:pointer; font-size:13px; font-weight:600; transition:color .14s ease,border-color .14s ease;
}
.rp-tab:hover{ color:var(--rp-tx); }
.rp-tab.active{ color:var(--rp-ac); border-bottom-color:var(--rp-ac); }
.rp-tab i{ font-size:12px; }

#page-config.rp-v2 #pp-tab-content{ flex:1; min-width:0; min-height:0; padding:12px 16px 16px; overflow:auto; }
#page-config.rp-v2 #pp-tab-content[data-rp-tab="modulos"]{ overflow:hidden; }
.rp-modulos-view{ display:flex; flex-direction:column; width:100%; height:100%; min-width:0; min-height:0; }

/* ── Maestro + detalle. El rail crece con el monitor; la matriz recibe todo el resto. */
.rp-split{
    display:grid; grid-template-columns:clamp(288px,22vw,360px) minmax(0,1fr);
    gap:12px; flex:1; min-width:0; min-height:0;
}
.rp-aside{
    display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden;
    border:1px solid var(--rp-bd); border-radius:10px; background:var(--rp-surf);
}
.rp-buscar{ flex:none; padding:10px; border-bottom:1px solid var(--rp-bd-soft); }
.rp-buscar input{
    width:100%; height:34px; padding:0 11px; border-radius:8px;
    border:1px solid var(--rp-bd); background:var(--rp-surf-2); color:var(--rp-tx);
    font-size:12.5px; outline:none;
}
.rp-buscar input:focus{ border-color:var(--rp-ac); box-shadow:0 0 0 3px var(--rp-focus); }
.rp-lista{ flex:1; min-height:0; overflow:auto; padding:6px; scrollbar-gutter:stable; }
.rp-grupo{ padding:9px 10px 4px; color:var(--rp-tx-3); font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.rp-mod{
    display:flex; align-items:center; gap:9px; width:100%; padding:7px 10px;
    border:0; border-radius:7px; cursor:pointer; background:transparent; color:var(--rp-tx-2);
    font-size:12.5px; font-weight:520; text-align:left; transition:background .12s ease,color .12s ease;
}
.rp-mod:hover{ background:var(--rp-surf-hover); color:var(--rp-tx); }
.rp-mod.active{ background:var(--rp-ac-soft); color:var(--rp-ac); font-weight:640; }
.rp-mod-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-cuenta{
    flex:0 0 auto; padding:1px 7px; border-radius:999px; background:var(--rp-surf-2); color:var(--rp-tx-3);
    font-size:10px; font-weight:650; font-variant-numeric:tabular-nums;
}
.rp-mod.active .rp-cuenta{ background:var(--rp-surf); color:var(--rp-ac); }
.rp-cuenta.todos{ background:var(--rp-ok-soft); color:var(--rp-ok); }
.rp-vacio{ padding:24px 12px; text-align:center; color:var(--rp-tx-3); font-size:12px; }

/* ── Panel: la matriz ocupa el tramo flexible; la ayuda queda como banda inferior. */
#page-config.rp-v2 #pp-mod-panel{
    display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px;
    min-width:0; min-height:0; height:100%;
}
.rp-card{ border:1px solid var(--rp-bd); border-radius:10px; background:var(--rp-surf); overflow:hidden; }
.rp-card + .rp-card{ margin-top:12px; }
#page-config.rp-v2 #pp-mod-panel .rp-card + .rp-card{ margin-top:0; }
.rp-card-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:11px 14px; border-bottom:1px solid var(--rp-bd-soft); }
.rp-card-head h2{ margin:0; flex:1 1 auto; min-width:0; color:var(--rp-tx); font-size:14px; font-weight:650; text-transform:none; }
.rp-chip{
    padding:3px 8px; border-radius:999px; background:var(--rp-surf-2); border:1px solid var(--rp-bd-soft);
    color:var(--rp-tx-2); font-size:10px; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
}
.rp-chip-count{ color:var(--rp-ac); }
.rp-chip-rol{ background:var(--rp-warn-soft); border-color:color-mix(in srgb, var(--rp-warn) 40%, transparent); color:var(--rp-warn); }
.rp-matrix-card{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.rp-matrix-scroll{ flex:1; min-width:0; min-height:0; overflow:auto; scrollbar-gutter:stable; }

/* Cabecera, identidad y fila Todos permanecen visibles mientras se recorre la matriz. */
.rp-tabla{ width:100%; min-width:720px; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:12.5px; }
.rp-tabla th, .rp-tabla td{ padding:0; text-align:center; }
.rp-tabla thead th{
    position:sticky; top:0; z-index:3; padding:9px 8px; border-bottom:1px solid var(--rp-bd);
    background:var(--rp-surf-2); color:var(--rp-tx-2); font-size:10px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.rp-tabla thead th.rp-th-user{ left:0; z-index:4; width:38%; min-width:260px; padding-left:16px; text-align:left; }
.rp-tabla thead th:not(.rp-th-user){ width:15.5%; }
.rp-tabla tbody td{ padding:7px 8px; border-bottom:1px solid var(--rp-bd-soft); background:var(--rp-surf); }
.rp-tabla tbody td:first-child{ position:sticky; left:0; z-index:2; }
.rp-tabla tbody tr:hover td{ background:var(--rp-surf-hover); }
.rp-user{ display:flex; align-items:center; gap:9px; padding-left:8px; text-align:left; color:var(--rp-tx); }
.rp-ini{
    flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
    background:var(--rp-ac-soft); color:var(--rp-ac); font-size:9.5px; font-weight:700; letter-spacing:.02em;
}
.rp-user-copy{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.rp-user-copy b,.rp-user-copy small{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:none; }
.rp-user-copy b{ color:var(--rp-tx); font-size:12.5px; font-weight:600; }
.rp-user-copy small{ margin-top:2px; color:var(--rp-tx-3); font-size:10.5px; font-weight:450; }
.rp-cb{ width:16px; height:16px; cursor:pointer; accent-color:var(--rp-ac); }
.rp-cb:disabled{ cursor:not-allowed; opacity:.35; }
.rp-fila-todos td{
    position:sticky; bottom:0; z-index:3; border-top:1px solid var(--rp-bd); border-bottom:0;
    background:var(--rp-surf-2); font-weight:700;
}
.rp-fila-todos td:first-child{ left:0; z-index:4; }
.rp-fila-todos:hover td{ background:var(--rp-surf-2); }
.rp-todos-lbl{ display:flex; align-items:center; gap:9px; padding-left:8px; text-align:left; color:var(--rp-tx); font-size:12px; }
.rp-todos-lbl small{ color:var(--rp-tx-3); font-size:10.5px; font-weight:500; }

/* ── 4.3.321 · FILAS DE ROL ────────────────────────────────────────────────
   Un rol no es una persona: alcanza a quien entre mañana con ese puesto. La
   fila lo dice con el color de acento y el separador, no con un adorno. */
/* Especificidad, no `!important`: hay una suite que vigila que esta hoja no lo
   use, porque un `!important` aquí significa que algo se movió de sitio y la
   cascada dejó de contar la verdad. `.rp-tabla tbody tr.X td` gana a
   `.rp-tabla tbody td` por peso propio. */
.rp-tabla tbody tr.rp-fila-sep td{
    padding:9px 8px 5px 16px; background:var(--rp-surf-2);
    border-bottom:1px solid var(--rp-bd);
    color:var(--rp-tx-3); font-size:9.5px; font-weight:700; letter-spacing:.09em;
}
.rp-tabla tbody tr.rp-fila-sep small{ color:var(--rp-tx-3); font-weight:500; letter-spacing:.02em; text-transform:none; }
.rp-fila-rol .rp-ini-rol{ background:color-mix(in srgb, var(--rp-ac) 14%, transparent); color:var(--rp-ac); font-size:11px; }
.rp-fila-rol .rp-user-copy b{ letter-spacing:.02em; }

.rp-help-card{ min-height:0; }
.rp-help-card .rp-card-head{ padding:9px 14px; }
.rp-leyenda{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.rp-ley{ min-width:0; padding:10px 12px; border-right:1px solid var(--rp-bd-soft); }
.rp-ley:last-child{ border-right:0; }
.rp-ley b{ display:block; margin-bottom:4px; color:var(--rp-ac); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.rp-ley span{ display:block; color:var(--rp-tx-2); font-size:11.5px; line-height:1.4; text-transform:none; }

/* ── Avisos, tablas simples y estados. */
.rp-nota{
    display:flex; gap:10px; align-items:flex-start; flex:none; padding:9px 12px; margin-bottom:10px;
    border:1px solid var(--rp-bd); border-radius:9px; background:var(--rp-surf); color:var(--rp-tx-2);
    font-size:12px; line-height:1.45;
}
.rp-nota > i{ flex:0 0 auto; margin-top:2px; color:var(--rp-ac); }
.rp-nota b{ color:var(--rp-tx); }
.rp-lista-simple{ width:100%; border-collapse:collapse; font-size:12.5px; }
.rp-lista-simple th{ padding:9px 16px; text-align:left; border-bottom:1px solid var(--rp-bd-soft); color:var(--rp-tx-2); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.rp-lista-simple td{ padding:9px 16px; border-bottom:1px solid var(--rp-bd-soft); color:var(--rp-tx); text-transform:none; }
.rp-lista-simple tbody tr:last-child td{ border-bottom:0; }
.rp-lista-simple tbody tr:hover{ background:var(--rp-surf-hover); }
.rp-mono{ color:var(--rp-tx-2); font-size:11.5px; font-variant-numeric:tabular-nums; }
.rp-reglas{ margin:0; padding:14px 16px 16px 32px; }
.rp-reglas li{ margin-bottom:8px; color:var(--rp-tx-2); font-size:12.5px; line-height:1.6; text-transform:none; }
.rp-reglas li:last-child{ margin-bottom:0; }
.rp-reglas b{ color:var(--rp-tx); }
.rp-reglas code{ padding:1px 5px; border-radius:5px; background:var(--rp-surf-2); font-size:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.rp-cargando{ padding:48px 20px; text-align:center; color:var(--rp-tx-3); font-size:12.5px; }
.rp-veto{ padding:48px 20px; text-align:center; color:var(--dim); font-size:13px; }

/* ── Filas de ajuste (UI global) ──────────────────────────────────────── */
/* Etiqueta a la izquierda, control a la derecha, separadas por una línea fina:
   el patrón de los ajustes de Notion. El interruptor en sí sigue siendo el de
   `pp-css` —funciona y no había razón para rehacerlo—; lo que cambia es la
   fila. Por eso aquí se le da sitio y no se le tocan los colores. */
.rp-filas{ padding:4px 0; }
.rp-fila{
    display:flex; align-items:center; gap:14px;
    padding:11px 16px; border-bottom:1px solid var(--rp-bd-soft);
}
.rp-fila:last-child{ border-bottom:0; }
.rp-fila-txt{ flex:1; min-width:0; color:var(--rp-tx); font-size:12.5px; text-transform:none; }
/* El interruptor maestro apaga la barra entera: si se toca por descuido, medio
   equipo pierde la topbar. Se marca, pero sin gritar. */
.rp-fila-crit{ background:var(--rp-warn-soft); }
.rp-fila .pp-ui-toggle{ flex:0 0 auto; }

/* ── La pestaña Granular ──────────────────────────────────────────────── */
/* Sólo se estiliza la BARRA del selector. Lo que pintan los ocho archivos
   externos dentro de `#pp-gran-content` sigue con sus clases `.pp-*`, que no se
   tocan: no son de este módulo. */
.rp-gran-bar{ display:flex; align-items:center; gap:11px; flex:none; flex-wrap:wrap; margin-bottom:12px; }
.rp-gran-bar label{
    color:var(--rp-tx-2); font-size:10px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase;
}
.rp-gran-bar select{
    min-width:280px; height:34px; padding:0 11px; border-radius:8px;
    border:1px solid var(--rp-bd); background:var(--rp-surf); color:var(--rp-tx);
    font-size:12.5px; cursor:pointer;
}
.rp-gran-bar select:focus{ outline:none; border-color:var(--rp-ac); box-shadow:0 0 0 3px var(--rp-ac-soft); }
#page-config.rp-v2 #pp-tab-content[data-rp-tab="granular"]{ display:flex; flex-direction:column; }
#page-config.rp-v2 #pp-gran-content{ flex:1; min-width:0; min-height:0; overflow:auto; }

/* ══════════════════════════════════════════════════════════════════════════
   PUENTE CON LO VIEJO
   --------------------------------------------------------------------------
   Las ocho sub-pantallas granulares —deal, CRM, WO, catálogo, costeo,
   invoicer, override de días y cost-harvest— se pintan con clases `.pp-*` que
   están definidas en la hoja inyectada `pp-css`, con el estilo brutalista de
   antes: bordes de 1 px sobre `var(--text)`, títulos en negativo, mayúsculas.
   Dentro del contenedor nuevo desentonaban por completo.

   Se resuelve SIN TOCAR ESOS OCHO ARCHIVOS: se las reviste aquí, y sólo
   mientras estén dentro de `#page-config.rp-v2`. Fuera de esta página —si
   alguna vez se reusaran— siguen exactamente como estaban.

   No hace falta `!important` aunque `pp-css` se inyecte después: estos
   selectores llevan un id y ganan por especificidad. Si algún día hiciera
   falta un `!important` aquí, sería señal de que algo se movió de sitio y hay
   que mirarlo, no de que haya que forzarlo.
   ══════════════════════════════════════════════════════════════════════ */
#page-config.rp-v2 .pp-bar{
    display:flex; gap:11px; align-items:center; flex-wrap:wrap;
    margin-bottom:16px; padding:12px 16px;
    border:1px solid var(--rp-bd); border-radius:10px;
    background:var(--rp-surf); color:var(--rp-tx-2);
}
#page-config.rp-v2 .pp-bar-info{ flex:1; font-size:12.5px; line-height:1.55; text-transform:none; }
#page-config.rp-v2 .pp-bar-info b{ color:var(--rp-tx); }

#page-config.rp-v2 .pp-section{
    margin-bottom:16px; border:1px solid var(--rp-bd); border-radius:12px;
    background:var(--rp-surf); overflow-x:auto;
}
#page-config.rp-v2 .pp-section-titulo{
    padding:13px 16px; margin:0;
    border-bottom:1px solid var(--rp-bd-soft); background:transparent;
    color:var(--rp-tx); font-size:14px; font-weight:640;
    letter-spacing:0; text-transform:none;
}

#page-config.rp-v2 .pp-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
#page-config.rp-v2 .pp-table th,
#page-config.rp-v2 .pp-table td{
    border:0; border-bottom:1px solid var(--rp-bd-soft);
    padding:9px 12px; text-align:center;
}
#page-config.rp-v2 .pp-table thead th{
    color:var(--rp-tx-2); font-size:10px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
}
#page-config.rp-v2 .pp-table .pp-th-mod,
#page-config.rp-v2 .pp-table .pp-td-mod{ text-align:left; }
#page-config.rp-v2 .pp-table .pp-th-user{ text-align:center; white-space:nowrap; }
#page-config.rp-v2 .pp-table .pp-td-mod{ color:var(--rp-tx); font-weight:550; text-transform:none; }
#page-config.rp-v2 .pp-table tbody tr:last-child td{ border-bottom:0; }
#page-config.rp-v2 .pp-table tbody tr:hover{ background:var(--rp-surf-hover); }
#page-config.rp-v2 .pp-cb{ accent-color:var(--rp-ac); }

/* Los botones de la casa que usan las ocho pantallas. */
#page-config.rp-v2 .fbtn,
#page-config.rp-v2 .fsel{
    min-height:34px; padding:0 14px; border-radius:8px;
    border:1px solid var(--rp-bd); background:var(--rp-surf); color:var(--rp-tx);
    font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
}
#page-config.rp-v2 .fbtn{ cursor:pointer; }
#page-config.rp-v2 .fbtn:hover{ background:var(--rp-surf-hover); }

/* Los interruptores heredados: se conserva la mecánica y se cambia el color,
   que en `pp-css` viene de `var(--text)` y aquí no existiría. */
#page-config.rp-v2 .pp-ui-slider{
    border:1px solid var(--rp-bd); background:var(--rp-surf-2); border-radius:999px;
}
#page-config.rp-v2 .pp-ui-slider:before{ border-radius:50%; background:var(--rp-tx-3); }
#page-config.rp-v2 .pp-ui-toggle input:checked + .pp-ui-slider{
    border-color:var(--rp-ac); background:var(--rp-ac);
}
#page-config.rp-v2 .pp-ui-toggle input:checked + .pp-ui-slider:before{ background:var(--rp-on-accent); }

/* En pantallas estrechas vuelve el flujo de página. El contrato de escritorio
   mantiene alto heredado; aquí se prioriza que ningún control quede recortado. */
@media (max-width:900px){
    #page-config.rp-v2,
    #page-config.rp-v2 > .rp-config-shell,
    #page-config.rp-v2 #config-permisos-wrap{ height:auto; min-height:100%; overflow:visible; }
    #page-config.rp-v2 #pp-tab-content,
    #page-config.rp-v2 #pp-tab-content[data-rp-tab="modulos"]{ overflow:visible; }
    .rp-head{ align-items:flex-start; flex-wrap:wrap; padding-inline:14px; }
    .rp-head-txt{ flex-basis:100%; }
    .rp-tabs{ padding-inline:10px; overflow-x:auto; }
    .rp-tab{ white-space:nowrap; }
    .rp-modulos-view{ height:auto; }
    .rp-split{ grid-template-columns:minmax(0,1fr); }
    .rp-aside{ max-height:340px; }
    #page-config.rp-v2 #pp-mod-panel{ display:block; height:auto; }
    #page-config.rp-v2 #pp-mod-panel .rp-card + .rp-card{ margin-top:10px; }
    .rp-matrix-scroll{ max-height:520px; }
    .rp-leyenda{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rp-ley:nth-child(2){ border-right:0; }
    .rp-ley:nth-child(-n+2){ border-bottom:1px solid var(--rp-bd-soft); }
    .rp-gran-bar select{ width:100%; min-width:0; }
}