/* RL05/RL06 - Estilos adicionales */

.rl05-filter-panel { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 10px; padding: 20px; margin-bottom: 14px; }
.rl05-filter-title { font-size: 13px; font-weight: 700; color: var(--g-text); margin-bottom: 14px; }
.rl05-filter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 20px; margin-bottom: 18px; }
.rl05-field { display: flex; flex-direction: column; gap: 5px; }
.rl05-filter-actions { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--g-surface-sec); }
.rl05-filter-hint { font-size: 11px; color: var(--g-text-muted); margin-left: auto; }

.rl05-empty { text-align: center; padding: 60px 20px; color: var(--g-text-muted); }
.rl05-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: .4; }
.rl05-empty-title { font-size: 14px; font-weight: 600; color: var(--g-text-sec); margin-bottom: 4px; }
.rl05-empty-sub { font-size: 12px; }

.rl05-summary-band { display: flex; gap: 0; border: 1px solid var(--g-border); border-radius: 10px; overflow: hidden; background: var(--g-surface); margin-bottom: 14px; }
.rl05-summary-item { flex: 1; padding: 10px 14px; border-right: 1px solid var(--g-surface-sec); text-align: center; }
.rl05-summary-item:last-child { border-right: none; }
.rl05-summary-item .val { font-size: 20px; font-weight: 700; color: var(--g-text); line-height: 1.2; }
.rl05-summary-item .lbl { font-size: 10px; color: var(--g-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.rl05-summary-item.hl .val { color: var(--g-create); }

.act-view, .act-edit, .act-deactivate, .act-activate, .act-locked { font-family: inherit; font-size: 11px; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.act-view { background: transparent; color: var(--g-text-muted); border: 1px solid transparent; cursor: pointer; }
.act-view:hover { background: var(--g-surface-sec); color: var(--g-text-sec); border-color: var(--g-border); }
.act-edit { background: transparent; color: var(--g-create); border: 1px solid transparent; cursor: pointer; font-weight: 500; }
.act-edit:hover { background: var(--accent-soft); border-color: var(--g-info-border); }
.act-deactivate { background: var(--g-warn-bg); color: var(--g-warn); border: 1px solid var(--g-warn-border); cursor: pointer; font-weight: 600; }
.act-deactivate:hover { background: var(--g-warn-bg); border-color: var(--g-warn); color: var(--g-warn); filter: brightness(0.96); }
.act-activate { background: var(--g-ok-bg); color: var(--g-ok); border: 1px solid var(--g-ok-border); cursor: pointer; font-weight: 600; }
.act-activate:hover { background: var(--g-ok-bg); border-color: var(--g-ok); color: var(--g-ok); filter: brightness(0.96); }
.act-locked { background: transparent; color: var(--g-text-muted); border: 1px solid transparent; cursor: not-allowed; opacity: .45; display: inline-flex; align-items: center; gap: 3px; }

.chip-system, .chip-admin, .chip-user { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.chip-system { background: var(--g-info-bg); color: var(--g-info); }
.chip-admin { background: var(--g-info-bg); color: var(--g-info); }
.chip-user { background: var(--g-ok-bg); color: var(--g-ok); }

.chip-vigente, .chip-vencido, .chip-pend-add, .chip-pend-rem { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.chip-vigente { background: var(--g-ok-bg); color: var(--g-ok); }
.chip-vencido { background: var(--g-warn-bg); color: var(--g-warn); }
.chip-pend-add { background: var(--g-ok-bg); color: var(--g-ok); }
.chip-pend-rem { background: var(--g-err-bg); color: var(--g-err); }

.row-pend-add { background: var(--g-ok-bg); }
.row-pend-add:hover { background: var(--g-ok-bg); filter: brightness(0.97); }
.row-pend-rem { background: var(--g-err-bg); }
.row-pend-rem:hover { background: var(--g-err-bg); filter: brightness(0.97); }
.row-pend-rem td { text-decoration: line-through; text-decoration-color: var(--g-accent); opacity: .65; }
.row-pend-rem td:last-child { text-decoration: none; opacity: 1; }
.row-expired { opacity: .5; }

.perm-icon { font-size: 13px; color: var(--g-text-muted); }
.perm-icon.yes { color: var(--g-create); font-weight: 700; }

.rl06-pending-warning { padding: 8px 18px; background: var(--g-warn-bg); border: 1px solid var(--g-warn-border); border-radius: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--g-warn); margin-bottom: 14px; }
.rl06-sticky-footer { position: sticky; bottom: 0; background: var(--g-surface); border-top: 1px solid var(--g-border); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow); z-index: 50; }
.rl06-pending-summary { display: flex; gap: 10px; font-size: 11px; font-weight: 600; }
.rl06-pending-tag { padding: 3px 10px; border-radius: 5px; }
.rl06-pending-tag.add { background: var(--g-ok-bg); color: var(--g-ok); }
.rl06-pending-tag.rem { background: var(--g-err-bg); color: var(--g-err); }

.rl04-confirm-overlay { position: fixed; inset: 0; background: var(--overlay-scrim); display: none; justify-content: center; align-items: flex-start; padding-top: 120px; z-index: 300; }
.rl04-confirm-overlay.show { display: flex; }
.rl04-confirm-modal { background: var(--g-surface); border-radius: 12px; box-shadow: var(--shadow-lg); width: 440px; overflow: hidden; }
.rl04-confirm-header { padding: 16px 20px 14px; border-bottom: 1px solid var(--g-border); display: flex; align-items: center; gap: 10px; }
.rl04-confirm-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.rl04-confirm-icon.deact { background: var(--g-warn-bg); color: var(--g-warn); }
.rl04-confirm-icon.act { background: var(--g-ok-bg); color: var(--g-ok); }
.rl04-confirm-role-card { background: var(--g-surface-sub); border: 1px solid var(--g-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.rl04-confirm-warning { padding: 10px 14px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
.rl04-confirm-warning.warn { background: var(--g-warn-bg); color: var(--g-warn); border: 1px solid var(--g-warn-border); }
.rl04-confirm-warning.info { background: var(--g-ok-bg); color: var(--g-ok); border: 1px solid var(--g-ok-border); }

.rl-toast { position: fixed; top: 70px; right: 24px; z-index: 400; padding: 12px 18px; border-radius: 8px; font-size: 12px; font-weight: 500; display: none; align-items: center; gap: 8px; box-shadow: var(--shadow); min-width: 300px; border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text); }
.rl-toast.show { display: flex; }
.rl-toast-ok { background: var(--g-ok-bg); color: var(--g-ok); border-color: var(--g-ok-border); }
.rl-toast-err { background: var(--g-err-bg); color: var(--g-err); border-color: var(--g-err-border); }

.rl05-grid-wrap { max-height: none; }
.rl05-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rl05-date, .rl05-desc { font-size: 11px; color: var(--g-text-muted); }
.rl05-mono { font-family: "DM Mono", monospace; }
.rl05-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.rl05-pager-actions { display: flex; gap: 8px; }

.rl06-page { padding-bottom: 70px; }
.rl06-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--g-text-sec); margin-top: 8px; }
.field-disabled .rl-inp { background: var(--g-surface-sec); }
.rl-btn-save { background: var(--g-ok-bg); color: var(--g-ok); border: 1px solid var(--g-ok-border); }
.rl-btn-save:hover { background: var(--g-ok-bg); border-color: var(--g-ok); filter: brightness(0.96); }
.rl-btn-warn-fill { background: var(--g-warn-bg); color: var(--g-warn); border: 1px solid var(--g-warn-border); }
.rl-btn-warn-fill:hover { background: var(--g-warn-bg); border-color: var(--g-warn); filter: brightness(0.96); }

@media (max-width: 980px) {
    .rl05-filter-grid { grid-template-columns: 1fr; }
    .rl05-summary-band { flex-direction: column; }
    .rl06-sticky-footer, .rl05-pager { flex-direction: column; align-items: stretch; }
}