/* RedControl V31.2 · permisos granulares + pulido UX */

/* Navegación interna: evita apariencia de botones HTML pegados al panel. */
.section-tabs {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 16px 0 14px !important;
    padding: 4px !important;
    border: 1px solid var(--rc-border) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb,var(--rc-surface) 92%,var(--rc-bg)) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
}
.section-tabs > button {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--rc-muted) !important;
    font: inherit !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.section-tabs > button:hover { background: color-mix(in srgb,var(--rc-primary) 6%,var(--rc-surface)) !important; color: var(--rc-text) !important; }
.section-tabs > button.active {
    background: color-mix(in srgb,var(--rc-primary) 10%,var(--rc-surface)) !important;
    color: var(--rc-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rc-primary) 24%,var(--rc-border)) !important;
}
.section-tabs > button .rzi { font-size: 17px !important; }
.section-tabs + .panel,
.section-tabs + .network-overview-grid,
.section-tabs + .resource-grid { margin-top: 0 !important; }

/* Encabezados y acciones con respiración estable. */
.page-heading,
.page-header { margin-bottom: 16px !important; }
.page-heading .heading-actions,
.page-header .page-actions,
.panel-title .row-actions,
.panel-title > .rz-button,
.clean-panel-title > .rz-button { margin-left: 10px !important; }
.heading-actions,
.page-actions,
.row-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }

/* Acciones de servidor separadas del borde inferior de las cards. */
.network-server-card .server-card-footer { padding-top: 13px !important; margin-top: 4px !important; }
.server-detail-header { margin-bottom: 14px !important; }
.server-detail-header .page-actions { padding-top: 6px !important; }
.access-list { margin-top: 12px !important; }
.access-row { gap: 16px !important; padding: 13px 14px !important; }
.access-row .row-actions { justify-content: flex-end !important; }
.network-state.inactive { color: var(--rc-muted) !important; }
.network-state.inactive i { background: #94a3b8 !important; box-shadow: 0 0 0 3px rgba(148,163,184,.12) !important; }

/* Formularios: requerida siempre en la misma línea del label. */
.dialog-grid > label,
.form-grid > label { line-height: 1.3 !important; }
.dialog-grid > label > .required,
.form-grid > label > .required { display: inline !important; margin-left: 2px !important; vertical-align: baseline !important; }
.dialog-grid > label > .field-unit,
.form-grid > label > .field-unit { margin-left: 4px !important; }

/* Permisos: grupos más legibles sin convertir el diálogo en una lista interminable. */
.permission-module { margin-top: 14px !important; }
.permission-module > h4 {
    margin: 0 0 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--rc-border) !important;
    color: var(--rc-muted) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}
.permission-grid { gap: 8px !important; }
.permission-check { min-height: 52px !important; padding: 9px 10px !important; border-radius: 8px !important; }
.permission-check span { min-width: 0 !important; }
.permission-check small { line-height: 1.25 !important; }

.inline-note.compact-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    background: var(--rc-surface-soft);
    color: var(--rc-muted);
    font-size: 10.5px;
    line-height: 1.35;
}
.inline-note.compact-note .rzi { margin-top: 1px; font-size: 16px; }

/* Los controles interactivos conservan foco; títulos/contenedores nunca reciben borde azul. */
.page-heading h1:focus,
.page-heading h1:focus-visible,
.compact-heading:focus,
.compact-heading:focus-visible,
.panel-title:focus,
.panel-title:focus-visible,
.section-tabs:focus,
.section-tabs:focus-visible { outline: none !important; box-shadow: none !important; }

@media (max-width: 760px) {
    .section-tabs { display: flex !important; width: 100% !important; }
    .section-tabs > button { flex: 1 1 auto !important; justify-content: center !important; }
    .access-row .row-actions { justify-content: flex-start !important; }
}