/* ── DataExplorer.razor ── */
/* Todo el bloque style local (:root --kpi-*, --card-bg, --body-bg, --text-*, .asset-dashboard,
   .dashboard-card, .kpi-stat-card(::after), .kpi-icon-wrapper, .kpi-content, .kpi-value,
   .kpi-label, .accent-primary/success/warning/danger/info, .dashboard-banner, .banner-title,
   .banner-subtitle, .kpi-clickable(:hover), .kpi-active-filter) era un clon completo del
   patron canonico (con drift menor: dashboard-banner margin-bottom 2rem vs 1rem, etc.) —
   eliminado en su totalidad, ya lo cubre components/kpiDashboard.css. El <style> tag se
   borró del .razor (quedaba vacío). Sin selectores propios que mover. */

/* ── ProjectMatrix.razor ── */
/* pm-* namespaced: movido verbatim. Los selectores que tocan .matrix-* o .sticky-col se
   quedan INLINE en el .razor (conflicto conocido con wwwroot/css/access-matrix.css, que
   define .matrix-cell/.matrix-table/.sticky-col/.matrix-module-header/.matrix-status-* y
   se comparte con TrainingMatrixTab — ver comentario en ProjectMatrix.razor). */

.pm-switch { cursor: pointer; width: 2.4em; height: 1.2em; margin-top: 0; margin-left: 0; }
.pm-switch:checked { background-color: var(--atlas-violet-600); border-color: var(--atlas-violet-600); }
.pm-switch:focus { box-shadow: 0 0 0 .15rem rgba(124,58,237,.25); border-color: var(--atlas-violet-600); }

/* Per-project on/off switch (left of the row header). */
.pm-active-switch { cursor: pointer; width: 2.2em; height: 1.1em; }
.pm-active-switch:checked { background-color: var(--atlas-green-600); border-color: var(--atlas-green-600); }
.pm-active-switch:focus { box-shadow: 0 0 0 .15rem rgba(22,163,74,.25); border-color: var(--atlas-green-600); }

/* Inactive project rows: greyed, but the active switch stays vivid so it can be re-enabled. */
.pm-row-inactive { background-color: var(--atlas-gray-50); }
.pm-row-inactive .pm-proj-label { color: var(--atlas-gray-400); }
.pm-inactive-tag { font-size: .65rem; font-weight: 600; text-transform: uppercase; color: var(--atlas-gray-500); background: var(--atlas-gray-200); border-radius: 4px; padding: .05rem .35rem; }

/* Row highlight: clicking anywhere in a project row marks the whole row so its active/inactive
   modules are easy to scan left-to-right. Hover gives a lighter preview of the same cue. */
.pm-row-selected td, .pm-row-selected th { background-color: #ede9fe !important; }

/* Read-only module status badge (mirrors the Access Matrix colours). */
.pm-status-badge { display: inline-block; font-size: .65rem; font-weight: 600; line-height: 1.4; border-radius: 6px; padding: .05rem .4rem; border: 1px solid transparent; }

/* Editable module-status picker (replaces the old read-only badge). Borrows the status
   colours via the matrix-status-* classes; styled compact to keep the header tidy. */
.pm-status-select { font-size: .65rem; font-weight: 600; line-height: 1.4; border-radius: 6px;
    padding: .05rem 1.1rem .05rem .4rem; border: 1px solid transparent; cursor: pointer;
    background-position: right .2rem center; background-size: .6rem; }
.pm-status-select:focus { outline: none; box-shadow: 0 0 0 .15rem rgba(124,58,237,.2); }
.pm-status-select:disabled { opacity: .6; cursor: progress; }

/* Sub-menu caret: the switch stays dead-centre in every cell; the caret is placed just to the
   RIGHT of that centred switch (50% + half the 2.4em switch + a small gap) and vertically centred,
   so it sits right next to its own toggle and at the same height. */
.pm-sub-caret-wrap { position: absolute; left: calc(50% + 22px); top: 50%; transform: translateY(-50%); }

/* Sub-menu caret shown next to a cell's switch when the module has toggleable sub-items. */
.pm-sub-caret { display: inline-flex; align-items: center; gap: .2rem; padding: .02rem .35rem;
    font-size: .62rem; font-weight: 600; line-height: 1.3; color: #6d28d9; background: #f5f3ff;
    border: 1px solid #ddd6fe; border-radius: 999px; cursor: pointer; transition: background .12s, border-color .12s; }
.pm-sub-caret:hover { background: #ede9fe; border-color: #c4b5fd; }
.pm-sub-caret i { font-size: .7rem; }
.pm-sub-caret.pm-sub-caret-trim { color: var(--atlas-amber-700); background: var(--atlas-amber-50); border-color: #fde68a; } /* some sub-items off */
.pm-sub-count-pending { text-decoration: underline; text-underline-offset: 2px; }
/* Existing count badge recoloured (amber) when some sub-items are in Coming Soon / Maintenance. */
.pm-sub-count-offline { color: var(--atlas-amber-700); font-weight: 700; }

/* Full-screen catcher so a click outside the popover closes it. */
.pm-subpop-backdrop { position: fixed; inset: 0; z-index: 1080; background: transparent; }

/* Floating sub-menu editor. Fixed-positioned (set inline from the click point) so the
   horizontally-scrolling matrix never clips it. */
.pm-subpop { position: fixed; z-index: 1081; transform: translateX(-50%); width: 340px; max-height: 320px; overflow-y: auto;
    background: var(--atlas-white); border: 1px solid var(--atlas-gray-200); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: .35rem; }
.pm-subpop-head { font-size: .78rem; font-weight: 700; color: #4c1d95; padding: .25rem .4rem .35rem; border-bottom: 1px solid var(--atlas-slate-100); margin-bottom: .25rem; }
.pm-subpop-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin: 0; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; }
.pm-subpop-row:hover { background: #faf5ff; }
.pm-subpop-row-pending { background: #f5f3ff; }
.pm-subpop-label { font-size: .8rem; color: var(--atlas-gray-700); white-space: nowrap; }
.pm-subswitch { cursor: pointer; width: 2.1em; height: 1.05em; margin: 0; }
.pm-subswitch:checked { background-color: var(--atlas-violet-600); border-color: var(--atlas-violet-600); }
.pm-subswitch:focus { box-shadow: 0 0 0 .15rem rgba(124,58,237,.25); border-color: var(--atlas-violet-600); }
.pm-subpop-foot { font-size: .65rem; color: var(--atlas-gray-400); padding: .3rem .4rem .15rem; border-top: 1px solid var(--atlas-slate-100); margin-top: .25rem; }

/* ── GlobalConfiguration.razor ── */
/* Each embedded matrix's .am-page adds 1.5rem top+bottom padding, which stacked
   left a big gap between the two tables. Move that vertical padding to the wrapper
   and zero it on the embedded pages so they sit right under each other. */
.gc-page { padding: 1.5rem 0; background: var(--atlas-gray-100); min-height: 100%; }
.gc-page .am-page { padding-top: 0; padding-bottom: 0; min-height: 0; }

/* Tight separation between the two stacked matrices. */
.gc-gap { height: 0.75rem; }