/* RedControl V31.1 · cierre UX transversal */

/* El foco visible solo debe aparecer en controles interactivos. */
h1:focus, h1:focus-visible,
h2:focus, h2:focus-visible,
h3:focus, h3:focus-visible,
.page-header:focus, .page-header:focus-visible,
.auth-heading:focus, .auth-heading:focus-visible,
.auth-heading h1:focus, .auth-heading h1:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.auth-primary-link,
.auth-form button {
    color: #fff !important;
}

/* Formularios: requerido junto al label sin crear una fila extra. */
.dialog-grid > label,
.form-grid > label,
.inline-entry-grid > label,
.inv-form-grid > label {
    display: block !important;
    min-width: 0 !important;
    color: var(--rc-muted) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 620 !important;
}

.dialog-grid > label > .rz-textbox,
.dialog-grid > label > .rz-textarea,
.dialog-grid > label > .rz-dropdown,
.dialog-grid > label > .rz-numeric,
.dialog-grid > label > .rz-datepicker,
.dialog-grid > label > .rz-password,
.dialog-grid > label > .rc-native-input,
.form-grid > label > .rz-textbox,
.form-grid > label > .rz-textarea,
.form-grid > label > .rz-dropdown,
.form-grid > label > .rz-numeric,
.form-grid > label > .rz-datepicker,
.form-grid > label > .rc-native-input {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
}

.required {
    display: inline !important;
    position: static !important;
    margin: 0 0 0 2px !important;
    padding: 0 !important;
    color: #dc2626 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
}

.rc-native-input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--rc-border-strong, var(--rc-border));
    border-radius: 8px;
    background: var(--rc-surface);
    color: var(--rc-text);
    font: inherit;
    font-size: 12.5px;
    outline: none;
}
.rc-native-input:focus {
    border-color: color-mix(in srgb, var(--rc-primary) 55%, var(--rc-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc-primary) 24%, transparent);
}

/* Switches: toda la tarjeta es clicable, no solo el texto. */
.toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
}
.toggle-grid.compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
.toggle-tile {
    appearance: none;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    background: var(--rc-surface);
    color: var(--rc-text);
    text-align: left;
    cursor: pointer;
}
.toggle-tile:hover { background: color-mix(in srgb,var(--rc-primary) 3%,var(--rc-surface)); }
.toggle-tile > span { display: grid; gap: 2px; min-width: 0; }
.toggle-tile > span > strong { font-size: 11.5px; font-weight: 650; }
.toggle-tile > span > small { color: var(--rc-muted); font-size: 10.5px; line-height: 1.25; }
.toggle-tile .rz-switch { flex: 0 0 auto; pointer-events: none !important; }
.toggle-tile.danger-toggle { border-color: color-mix(in srgb,#ef4444 28%,var(--rc-border)); }

.permission-check.is-disabled { opacity: .58; }
.permission-grid { align-items: stretch; }
.permission-check { min-height: 58px; }

/* Red / servidores */
.network-server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(420px,1fr));
    gap: 14px;
}
.network-server-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px !important;
}
.server-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.server-card-head > div { min-width:0; display:grid; gap:3px; }
.server-card-head strong { font-size:15px; }
.server-card-head small { color:var(--rc-muted); }
.server-function-row { display:flex; flex-wrap:wrap; gap:6px; }
.soft-pill {
    display:inline-flex; align-items:center; min-height:24px; padding:4px 8px;
    border:1px solid var(--rc-border); border-radius:999px; background:var(--rc-surface-soft);
    color:var(--rc-muted); font-size:10.5px; font-weight:650;
}
.soft-pill.warning { color:#9a6500; border-color:#f4d58d; background:#fff8e6; }
.server-route,.server-message { display:block; line-height:1.35; }
.server-message { min-height:16px; }
.success-text { color:#188654 !important; }
.error-text { color:#b54747 !important; }
.server-card-footer { margin-top:auto; padding-top:10px; border-top:1px solid var(--rc-border); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.server-card-footer > small { color:var(--rc-muted); }

.network-state {
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    font-size:10.5px; font-weight:700; color:var(--rc-muted);
}
.network-state i { width:8px; height:8px; border-radius:50%; background:#94a3b8; box-shadow:0 0 0 3px color-mix(in srgb,#94a3b8 15%,transparent); }
.network-state.online { color:#168657; }
.network-state.online i { background:#22a06b; box-shadow:0 0 0 3px rgba(34,160,107,.13); }
.network-state.offline { color:#b54747; }
.network-state.offline i { background:#e05252; box-shadow:0 0 0 3px rgba(224,82,82,.12); }
.network-state.checking { color:#0b86c6; }
.network-state.checking i { background:#0b9bd7; animation:rc-pulse 1s ease-in-out infinite; }
@keyframes rc-pulse { 0%,100%{opacity:.35;transform:scale(.85)} 50%{opacity:1;transform:scale(1.15)} }
.network-testing .rzi { animation:rc-spin .9s linear infinite; }
@keyframes rc-spin { to{transform:rotate(360deg)} }

.empty-panel,.loading-panel { min-height:150px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--rc-muted); }
.empty-panel > .rzi { font-size:28px; }

.server-detail-header .back-link {
    display:inline-flex; align-items:center; gap:5px; margin:0 0 8px; padding:0;
    border:0; background:transparent; color:var(--rc-primary); cursor:pointer; font-size:11px; font-weight:650;
}
.network-kpis .kpi-text { font-size:15px !important; line-height:1.2 !important; }
.network-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.detail-list { display:grid; gap:0; margin:0; }
.detail-list > div { display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--rc-border) 72%,transparent); }
.detail-list dt { color:var(--rc-muted); }
.detail-list dd { margin:0; text-align:right; font-weight:600; }
.big-stat { display:grid; gap:2px; margin:12px 0 18px; }
.big-stat strong { font-size:30px; line-height:1; }
.big-stat span { color:var(--rc-muted); }

.access-list { display:grid; gap:8px; }
.access-row {
    display:grid; grid-template-columns:minmax(220px,1fr) auto auto; align-items:center; gap:14px;
    min-height:66px; padding:11px 12px; border:1px solid var(--rc-border); border-radius:9px; background:var(--rc-surface);
}
.access-row.primary { background:color-mix(in srgb,var(--rc-primary) 3%,var(--rc-surface)); }
.access-row > div:first-child { display:grid; gap:3px; min-width:0; }
.access-row > div:first-child small { color:var(--rc-muted); }
.access-row-status { display:flex; align-items:center; gap:8px; }
.resource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.resource-card { min-height:100px; display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--rc-border); border-radius:10px; background:var(--rc-surface); }
.resource-card > .rzi { font-size:22px; color:var(--rc-primary); }
.resource-card > div { display:grid; gap:3px; }
.resource-card strong { font-size:22px; }
.resource-card span { color:var(--rc-muted); font-size:11px; }
.resource-note { margin-top:12px; color:var(--rc-muted); font-size:11px; }
.empty-inline { padding:28px 12px; text-align:center; color:var(--rc-muted); }

/* Evita que cards compactas corten contenidos secundarios. */
.kpi-card,
.financial-summary-card,
.finance-summary-item,
.role-card,
.server-card { overflow: visible !important; height: auto !important; }

/* Separación consistente entre acciones y contenido siguiente. */
.page-actions { gap:8px !important; }
.page-header + .kpi-grid,
.page-header + .panel,
.page-header + .server-card-grid { margin-top:18px !important; }

@media (max-width: 900px) {
    .toggle-grid,.toggle-grid.compact,.network-overview-grid { grid-template-columns:1fr; }
    .network-server-grid { grid-template-columns:1fr; }
    .access-row { grid-template-columns:1fr; }
    .server-card-footer { align-items:flex-start; flex-direction:column; }
}

/* Identidad institucional: una instalación nueva nunca depende del logo de una empresa concreta. */
.institution-brand { min-height:var(--brand-height); display:flex; align-items:center; max-width:100%; }
.institution-brand img { display:block; max-height:var(--brand-height); max-width:230px; width:auto; object-fit:contain; }
.institution-brand-mark { display:inline-flex; align-items:center; min-height:var(--brand-height); color:var(--rc-text); font-size:22px; line-height:1; font-weight:660; letter-spacing:.02em; }
.institution-brand.dark .institution-brand-mark { color:#f8fafc; }
.institution-brand.compact .institution-brand-mark { width:var(--brand-height); height:var(--brand-height); justify-content:center; border-radius:10px; background:rgba(255,255,255,.08); font-size:17px; }
.institution-brand.compact img { max-width:var(--brand-height); }
.network-spin { animation:rc-spin .9s linear infinite; font-size:24px; }

/* Los switches tradicionales también presentan un área clicable estable. */
.dialog-toggle-row { display:flex; flex-wrap:wrap; gap:10px !important; align-items:stretch !important; }
.dialog-toggle-row > label,
.switch-label,
.setting-switch-card,
.plan-switch-inline {
    cursor:pointer;
}
.dialog-toggle-row > label {
    min-height:44px;
    display:flex !important;
    align-items:center;
    gap:9px;
    padding:8px 10px;
    border:1px solid var(--rc-border);
    border-radius:9px;
    background:var(--rc-surface);
}
.dialog-toggle-row > label:hover { background:color-mix(in srgb,var(--rc-primary) 3%,var(--rc-surface)); }

/* Acciones: nunca deben quedar pegadas al bloque que sigue. */
.dialog-actions { margin-top:18px !important; gap:8px !important; }
.panel-title { gap:14px !important; }
.row-actions { gap:6px !important; }