/* Roles y permisos (panel web). */

.roles-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.roles-list { display: grid; gap: 10px; position: sticky; top: 16px; }
.role-card { display: grid; gap: 10px; width: 100%; padding: 14px 16px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radio-lg, 18px); transition: border-color .15s, box-shadow .15s, transform .12s; }
.role-card:hover { border-color: var(--acero-300); }
.role-card:active { transform: scale(.99); }
.role-card[aria-current="true"] { border-color: var(--vc-oro, #FDB207); box-shadow: 0 0 0 3px var(--oro-100); }
.rc-top { display: flex; align-items: center; gap: 12px; }
.rc-top > svg { color: var(--acero-400); flex: none; }
.rc-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--acero-50); color: var(--acero-700); border: 1px solid var(--acero-100); }
.rc-ic.is-locked { background: var(--oro-50); color: var(--oro-texto, #8A5A00); border-color: var(--oro-100); }
.rc-name { font-family: var(--titulo); font-weight: 800; font-size: 1rem; }
.rc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.rc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Sin overflow: hidden, para que el pie con «Guardar» se quede a la vista al bajar. */
.role-editor .re-foot { border-radius: 0 0 var(--radio-lg, 18px) var(--radio-lg, 18px); }
.re-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 0; }
.re-head h2 { font-size: 1.375rem; }
.re-back { display: none; }
.re-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; background: #fff; border-top: 1px solid var(--acero-100); box-shadow: 0 -10px 24px -18px rgba(11, 12, 14, .35); }

.pm-group { border-top: 1px solid var(--acero-100); }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; }
.pm-head h4 { font-family: var(--titulo); font-weight: 800; font-size: 0.9375rem; }
.pm-badge { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.pm-web { background: var(--info-50); color: var(--info); }
.pm-movil { background: var(--ok-50); color: var(--ok); }
.pm-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 68px); gap: 4px 6px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--acero-100); }
.pm-row.is-on { background: #FFFDF6; }
.pm-cols { background: var(--acero-50); padding-top: 8px; padding-bottom: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acero-500); text-align: center; }
.pm-cols span:first-child { text-align: left; }
.pm-fn { display: grid; gap: 2px; min-width: 0; }
.pm-fn b { font-size: 0.9063rem; }
.pm-fn .small { line-height: 1.35; }
.pm-cell { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 40px; cursor: pointer; border-radius: 10px; }
.pm-cell:hover { background: var(--oro-50); }
.pm-cell input { width: 22px; height: 22px; margin: 0; cursor: pointer; accent-color: var(--vc-oro-hondo, #C98E00); }
.pm-cell input:disabled { cursor: default; }
.pm-all { border-left: 1px dashed var(--acero-200); border-radius: 0 10px 10px 0; }
.pm-na { color: var(--acero-300); cursor: default; }
.pm-na:hover { background: none; }
.pm-lbl { display: none; font-size: 0.6875rem; font-weight: 600; color: var(--acero-600); }

@media (max-width: 900px) {
  .roles-layout { grid-template-columns: minmax(0, 1fr); }
  .roles-list { position: static; }
  .roles-layout.has-sel .roles-list { display: none; }
  .roles-layout:not(.has-sel) .roles-editor { display: none; }
  .re-back { display: block; margin-left: -8px; }
}
@media (max-width: 640px) {
  .pm-cols { display: none; }
  .pm-row { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 12px 14px; }
  .pm-fn { grid-column: 1 / -1; margin-bottom: 4px; }
  .pm-cell { background: var(--acero-50); padding: 6px 0; min-height: 52px; }
  .pm-all { border-left: 0; border-radius: 10px; background: var(--oro-50); }
  .pm-lbl { display: block; }
  .pm-head { padding: 14px 14px 10px; }
  .re-head { padding: 14px 14px 0; }
  .re-foot { padding: 10px 14px calc(10px + var(--safe-b, 0px)); bottom: calc(68px + var(--safe-b, 0px)); }
}