.people-ops-enterprise-chrome {
    margin-bottom: 1.25rem;
}

.people-ops-enterprise-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.people-ops-enterprise-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.people-ops-enterprise-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.people-ops-enterprise-badge--protected {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.35);
}

.people-ops-enterprise-badge--ready {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.people-ops-enterprise-badge--warning {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.people-ops-enterprise-badge--blocked {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.people-ops-enterprise-badge--restricted {
    background: rgba(149, 165, 166, 0.15);
    color: #bdc3c7;
}

.people-ops-enterprise-readiness-summary {
    margin: 0;
    font-size: 0.9rem;
}

.people-ops-module-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--holos-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

.people-ops-module-nav-group-title {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--holos-muted, #95a5a6);
}

.people-ops-module-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.people-ops-module-nav-link {
    font-size: 0.85rem;
    color: var(--holos-text, inherit);
    text-decoration: none;
    padding: 0.15rem 0;
    border-bottom: 1px solid transparent;
}

.people-ops-module-nav-link:hover {
    color: #3498db;
}

.people-ops-module-nav-link.is-active {
    color: #3498db;
    font-weight: 600;
    border-bottom-color: rgba(52, 152, 219, 0.45);
}

.people-ops-enterprise-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.people-ops-enterprise-summary .sys-health-grid {
    margin-bottom: 0;
}

.people-ops-enterprise-filters .holos-filter-bar,
.people-ops-enterprise-filters .people-ops-form {
    gap: 0.75rem;
}

.people-ops-enterprise-detail {
    min-height: 2rem;
}

.people-ops-protected-action[disabled] {
    cursor: not-allowed;
    opacity: 0.72;
}

.people-ops-protected-action--uat {
    cursor: pointer;
    opacity: 1;
    border-color: rgba(46, 204, 113, 0.35);
}

.people-ops-protected-action--uat .people-ops-protected-action-tag {
    background: rgba(46, 204, 113, 0.22);
    color: #7dcea0;
}

.people-ops-overtime-uat-banner {
    border-color: rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.12);
    color: var(--holos-text, #ecf0f1);
}

.people-ops-attendance-uat-banner {
    border-color: rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.12);
    color: var(--holos-text, #ecf0f1);
}

.people-ops-scheduling-uat-banner {
    border-color: rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.12);
    color: var(--holos-text, #ecf0f1);
}

.people-ops-payroll-uat-banner {
    border-color: rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.12);
    color: var(--holos-text, #ecf0f1);
}

.people-ops-assets-documents-uat-banner {
    border-color: rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.12);
    color: var(--holos-text, #ecf0f1);
}

.people-ops-operational-activation-banner {
    border-color: rgba(52, 152, 219, 0.45);
    background: rgba(52, 152, 219, 0.12);
    color: var(--holos-text, #ecf0f1);
}

.people-ops-scheduling-operational-execute {
    border-color: rgba(46, 204, 113, 0.35);
}

.people-ops-operational-activation-table .people-ops-activation-status--ready {
    color: #7dcea0;
}

.people-ops-operational-activation-table .people-ops-activation-status--blocked {
    color: #f5b041;
}

.people-ops-uat-result-banner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(46, 204, 113, 0.35);
    background: rgba(46, 204, 113, 0.1);
    color: var(--holos-text, #ecf0f1);
}

.people-ops-uat-result-banner__footer {
    font-size: 0.85rem;
    color: var(--holos-muted, #95a5a6);
}

.people-ops-enterprise-empty {
    padding: 1.25rem;
    border: 1px dashed rgba(149, 165, 166, 0.35);
    border-radius: 0.5rem;
    text-align: center;
    color: var(--holos-muted, #95a5a6);
}

.people-ops-protected-action-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(149, 165, 166, 0.2);
    color: #bdc3c7;
    vertical-align: middle;
}

.people-ops-flow-sequence-block {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.people-ops-flow-sequence-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.people-ops-flow-step-list {
    margin: 0;
    padding-left: 1.25rem;
}

.people-ops-flow-step-link {
    font-weight: 500;
}

.people-ops-matrix-status {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.people-ops-matrix-status--operational-real { background: rgba(46, 204, 113, 0.18); color: #27ae60; }
.people-ops-matrix-status--action-required { background: rgba(243, 156, 18, 0.18); color: #d68910; }
.people-ops-production-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.people-ops-matrix-status--active { background: rgba(46, 204, 113, 0.18); color: #27ae60; }
.people-ops-matrix-status--uat-active { background: rgba(46, 204, 113, 0.12); color: #1e8449; }
.people-ops-matrix-status--protected { background: rgba(46, 204, 113, 0.08); color: #196f3d; border: 1px solid rgba(46, 204, 113, 0.28); }
.people-ops-matrix-status--preview { background: rgba(46, 204, 113, 0.12); color: #1e8449; }
.people-ops-matrix-status--disabled { background: rgba(46, 204, 113, 0.08); color: #196f3d; border: 1px solid rgba(46, 204, 113, 0.28); }
.people-ops-matrix-status--futurephase { background: rgba(46, 204, 113, 0.08); color: #196f3d; }
.people-ops-matrix-status--missing { background: rgba(149, 165, 166, 0.15); color: #7f8c8d; }

.people-ops-action-matrix-table th,
.people-ops-action-matrix-table td {
    font-size: 0.82rem;
    vertical-align: top;
}

.people-ops-future-go-list {
    margin: 0;
    padding-left: 1.25rem;
}

.people-ops-protected-label-samples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Epic A — Workspace Shell Contract (R1–R9) */
.people-ops-workspace-shell {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.people-ops-shell-business-title {
    margin: 0;
    font-size: 1.35rem;
}

.people-ops-shell-attention {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 0.75rem 1rem;
}

.people-ops-shell-handoff {
    padding: 0.5rem 0;
}

.people-ops-shell-technical summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.people-ops-shell-audit {
    font-size: 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--holos-border, rgba(255, 255, 255, 0.06));
}

/* .people-ops-enterprise-nav ahora es solo un marcador semántico; el layout real de la
   sub-navegación lo controla el CSS scoped .poc-nav de PeopleOpsEnterpriseChrome. */

.people-ops-enterprise-nav-section--engineering {
    opacity: 0.85;
}

.people-ops-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.people-ops-hub-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1rem;
    transition: border-color 0.15s ease;
}

.people-ops-hub-card:hover {
    border-color: rgba(52, 152, 219, 0.45);
}

.people-ops-hub-card-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.people-ops-hub-card-attention {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #f39c12;
}

.people-ops-restricted-action-notice {
    padding: 1rem;
    margin-top: 1rem;
}

.people-ops-restricted-action-title {
    margin-top: 0;
}

/* Epic B Phase 2C — Payroll Review Workspace scaffold */
.people-ops-payroll-review-desk {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.people-ops-payroll-mode-bar {
    padding: 0.85rem 1rem;
}

.people-ops-payroll-mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 0.75rem;
}

.people-ops-payroll-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.people-ops-payroll-filters {
    margin-bottom: 0.5rem;
}

.people-ops-payroll-view-count {
    margin: 0;
    font-size: 0.85rem;
}

.people-ops-payroll-dept-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.people-ops-payroll-dept-chip {
    border: 1px solid var(--holos-border, rgba(255, 255, 255, 0.12));
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.people-ops-payroll-dept-chip.is-active {
    border-color: rgba(52, 152, 219, 0.55);
    background: rgba(52, 152, 219, 0.12);
}

.people-ops-payroll-review-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.9fr);
    gap: 0.85rem;
    align-items: start;
}

@media (max-width: 960px) {
    .people-ops-payroll-review-split {
        grid-template-columns: 1fr;
    }
}

.people-ops-payroll-grid-pane {
    padding: 0.75rem;
    overflow: hidden;
}

.people-ops-payroll-grid-toolbar {
    margin-bottom: 0.5rem;
}

.people-ops-payroll-expand-columns {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.people-ops-payroll-grid-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.people-ops-payroll-grid {
    min-width: 960px;
    font-size: 0.82rem;
}

.people-ops-payroll-grid-row {
    cursor: pointer;
}

.people-ops-payroll-grid-row.selected {
    background: rgba(52, 152, 219, 0.12);
}

.people-ops-payroll-row--advertencia {
    background: rgba(243, 156, 18, 0.06);
}

.people-ops-payroll-row--bloqueado {
    background: rgba(231, 76, 60, 0.06);
}

.people-ops-payroll-row--rrhh {
    background: rgba(155, 89, 182, 0.06);
}

.people-ops-payroll-col-sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--holos-surface, #1e1e1e);
}

.people-ops-payroll-col-sticky-right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--holos-surface, #1e1e1e);
}

.people-ops-payroll-col-select {
    min-width: 2rem;
}

.people-ops-payroll-col-employee {
    min-width: 10rem;
    left: 2rem;
}

.people-ops-payroll-col-preparacion {
    min-width: 7rem;
    right: 2rem;
}

.people-ops-payroll-col-open {
    min-width: 2rem;
    right: 0;
    text-align: center;
    color: var(--holos-muted, #95a5a6);
}

.people-ops-preparacion-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.people-ops-preparacion--listo {
    background: rgba(46, 204, 113, 0.18);
    color: #27ae60;
}

.people-ops-preparacion--advertencia {
    background: rgba(243, 156, 18, 0.18);
    color: #d68910;
}

.people-ops-preparacion--bloqueado {
    background: rgba(231, 76, 60, 0.18);
    color: #c0392b;
}

.people-ops-preparacion--rrhh {
    background: rgba(155, 89, 182, 0.18);
    color: #8e44ad;
}

.people-ops-payroll-unwired {
    color: var(--holos-muted, #95a5a6);
}

.people-ops-payroll-panel {
    border: 1px solid var(--holos-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.65rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

.people-ops-payroll-panel--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
}

.people-ops-payroll-panel-identity {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--holos-border, rgba(255, 255, 255, 0.06));
}

.people-ops-payroll-panel-name {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.people-ops-payroll-panel-meta {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.people-ops-payroll-panel-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.people-ops-payroll-panel-nav a {
    color: #3498db;
    text-decoration: none;
}

.people-ops-payroll-panel-section {
    margin-bottom: 0.75rem;
}

.people-ops-payroll-panel-section summary {
    cursor: pointer;
    list-style: none;
}

.people-ops-payroll-panel-section summary::-webkit-details-marker {
    display: none;
}

.people-ops-payroll-field-list {
    margin: 0;
}

.people-ops-payroll-subfields {
    padding-left: 1rem;
}

.people-ops-payroll-cxc-line {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.people-ops-payroll-attendance-summary {
    padding-top: 0.25rem;
    border-top: 1px solid var(--holos-border, rgba(255, 255, 255, 0.06));
}

.people-ops-payroll-panel-listo {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

/* Master-detail estructuralmente sin solape:
   - .poq-md es SU PROPIO grid de 2 columnas (equipo+roster | detalle sticky).
   - Las secciones de abajo (HE, estado de la quincena) viven FUERA del grid,
     a ancho completo — es imposible que el panel sticky se les monte encima. */
.people-ops-quincenal-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.poq-md {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.poq-md-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Rediseño tipo Excel: selectores (depto + colaborador) en una fila a ancho completo;
   el detalle de marcas es el protagonista, a ancho completo debajo. */
.poq-selectors {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.poq-select-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1 1 220px;
    min-width: 220px;
}
.poq-select-lbl {
    font-size: .78rem;
    font-weight: 600;
    color: #64748b;
}

/* Marcas editables en la columna MARCAS (RRHH corrige ahí mismo). */
.poq-marks-cell { white-space: nowrap; }
.poq-mark { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; }
.poq-mark-dir { font-size: .66rem; font-weight: 700; color: #64748b; }
.poq-mark-input {
    width: 74px; height: 30px; padding: 2px 6px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: .82rem; font-variant-numeric: tabular-nums;
}
.poq-mark-input:focus { outline: 2px solid #93c5fd; border-color: #3b82f6; }
.poq-mark--fixed .poq-mark-input { border-color: #b45309; background: #fffbeb; }
.poq-mark-flag { color: #b45309; font-size: .82rem; cursor: help; }

/* Resumen del período por banda (misma vista, sin panelones abajo). */
.poq-band-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: .75rem; font-size: 13px; }
.poq-band-summary-lbl { font-weight: 600; color: #64748b; }
.poq-band-chip { background: #f1f5f9; border-radius: 8px; padding: 3px 10px; }
.poq-band-chip--night { background: #eef2ff; color: #3730a3; }

/* Badge de novedad del día (incapacidad/vacaciones/PSG/permiso) junto a las marcas. */
.poq-novedad { display: inline-block; border-radius: 8px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.poq-novedad--incapacity { background: #fef2f2; color: #b91c1c; }
.poq-novedad--vacation { background: #ecfdf5; color: #047857; }
.poq-novedad--psg { background: #fffbeb; color: #b45309; }
.poq-novedad--leave { background: #eff6ff; color: #1d4ed8; }

.people-ops-quincenal-detail {
    position: static;
    overflow: visible;
}

/* El drill-down lleva la vista al panel recién llenado (scrollIntoView): este margen evita
   que la barra superior fija tape el título del panel al aterrizar. */
#poq-collaborators-panel,
#poq-detail-panel { scroll-margin-top: 96px; }

/* El roster no empuja la página: scrollea dentro de su propio panel. */
.people-ops-quincenal-collaborators .poq-list { max-height: 56vh; overflow-y: auto; }
.people-ops-quincenal-team-list { max-height: 24vh; overflow-y: auto; }

@media (max-width: 900px) {
    .poq-md { grid-template-columns: 1fr; }
    .people-ops-quincenal-detail { position: static; max-height: none; overflow: visible; }
    .people-ops-quincenal-collaborators .poq-list { max-height: none; }
    .people-ops-quincenal-team-list { max-height: none; }
}

/* KPI stat cards — reemplazan los volcados de "Total: N · Listos: N ..." */
.poq-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .6rem;
    margin: .85rem 0 1rem;
}
.poq-stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .65rem .8rem;
    border: 1px solid var(--holos-border, #e2e8f0);
    border-radius: .6rem;
    background: var(--holos-card, #fff);
    border-left: 3px solid var(--holos-border-strong, #cbd5e1);
}
.poq-stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--holos-text, #0f172a); }
.poq-stat-label { font-size: .72rem; color: var(--holos-muted, #64748b); text-transform: uppercase; letter-spacing: .02em; }
.poq-stat--ok { border-left-color: #10b981; }
.poq-stat--ok .poq-stat-value { color: #047857; }
.poq-stat--warn { border-left-color: #f59e0b; }
.poq-stat--warn .poq-stat-value { color: #b45309; }
.poq-stat--danger { border-left-color: #ef4444; }
.poq-stat--danger .poq-stat-value { color: #b91c1c; }

/* Notas de panel más compactas (dejan de parecer volcado de texto) */
.people-ops-quincenal-overtime-approvals > p.muted,
.people-ops-quincenal-detail .people-ops-quincenal-salary-affectations > p.muted {
    font-size: .8rem;
    margin: .15rem 0;
}

/* ── KPIs de la quincena ── */
.poq-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.poq-kpi {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .85rem 1rem;
    background: var(--holos-card, #fff);
    border: 1px solid var(--holos-border, #e2e8f0);
    border-radius: 12px;
}
.poq-kpi-val { font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--holos-text, #0f172a); }
.poq-kpi-val.poq-warn { color: #b45309; }
.poq-kpi-lbl { font-size: .8rem; color: var(--holos-muted, #64748b); }

/* Cabecera del panel de detalle (master-detail): persona + neto arriba, visible al instante. */
.poq-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 0 .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--holos-border, #e2e8f0);
}
.poq-detail-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.poq-detail-name { font-size: 1rem; font-weight: 600; color: var(--holos-text, #0f172a); line-height: 1.2; }
.poq-detail-sub { font-size: .78rem; color: var(--holos-muted, #64748b); }
.poq-detail-net { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.poq-detail-net-val { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; color: var(--holos-brand-primary, #1d4ed8); line-height: 1; }
.poq-detail-net-warn { font-size: 1.05rem; font-weight: 600; color: #b45309; line-height: 1; }
.poq-detail-net-lbl { font-size: .72rem; color: var(--holos-muted, #94a3b8); margin-top: 3px; }

/* Bloqueadores + acción requerida del colaborador seleccionado — junto a la persona. */
.poq-detail-blockers {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: -0.25rem 0 .85rem;
}
.poq-detail-action { font-size: .78rem; color: var(--holos-muted, #64748b); }

/* Variantes de chip de estado por fila */
.poq-chip--ok { background: #ecfdf5; color: #047857; }
.poq-chip--danger { background: #fef2f2; color: #b91c1c; }

/* Banda única de contexto (período + estado + fechas + aviso) — delgada, una fila. */
.poq-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 14px;
    margin-bottom: 1rem;
}
.poq-toolbar-status { font-size: .78rem; color: var(--holos-muted, #64748b); }
.poq-toolbar-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--holos-muted, #64748b);
    margin: 0;
}
.poq-toolbar-date .holos-input { width: auto; padding: 4px 8px; font-size: .82rem; }
.poq-toolbar-note {
    margin-left: auto;
    font-size: .72rem;
    color: var(--holos-muted, #94a3b8);
    text-align: right;
    max-width: 52ch;
}

/* ── Lista limpia de colaboradores ── */
.people-ops-quincenal-collaborators .poq-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: .6rem;
}
.poq-list { display: flex; flex-direction: column; }
.poq-list-cols,
.poq-row {
    display: grid;
    /* El nombre manda: columna flexible; chip y neto se dimensionan a su contenido. */
    grid-template-columns: minmax(0, 1fr) max-content max-content 18px;
    gap: 10px;
    align-items: center;
}
.poq-list-cols {
    padding: 6px 10px;
    font-size: .72rem;
    color: var(--holos-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--holos-border, #e2e8f0);
}
.poq-row {
    width: 100%;
    text-align: left;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--holos-border, #e2e8f0);
    cursor: pointer;
    transition: background .12s ease;
    font: inherit;
    color: inherit;
}
.poq-row:hover { background: var(--holos-surface, #f8fafc); }
.poq-row.is-open { background: var(--holos-brand-primary-soft, #eff6ff); box-shadow: inset 3px 0 0 var(--holos-brand-primary, #2563eb); }
.poq-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.poq-avatar {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--holos-surface, #f1f5f9);
    border: 1px solid var(--holos-border, #e2e8f0);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 600; color: var(--holos-brand-primary, #2563eb);
}
.poq-who-text { display: flex; flex-direction: column; min-width: 0; }
/* La IDENTIDAD nunca se trunca: con homónimos, el nombre completo + Nº + departamento
   son lo que distingue a la persona. Envuelven a 2 líneas si hace falta. */
.poq-name { font-size: .9rem; font-weight: 500; color: var(--holos-text, #0f172a); line-height: 1.25; overflow-wrap: anywhere; }
.poq-sub { font-size: .72rem; color: var(--holos-muted, #64748b); overflow-wrap: anywhere; }
.poq-net { font-size: .9rem; font-weight: 500; text-align: right; color: var(--holos-text, #0f172a); }
.poq-caret { color: var(--holos-muted, #94a3b8); text-align: center; }
.poq-chip {
    display: inline-flex; align-items: center;
    width: fit-content;
    font-size: .72rem; padding: 2px 8px; border-radius: 999px;
}
.poq-chip--accent { background: var(--holos-brand-primary-soft, #eff6ff); color: var(--holos-brand-primary, #2563eb); }
.poq-chip--warn { background: #fffbeb; color: #b45309; }

/* Paneles secundarios plegables (divulgación progresiva) */
.people-ops-quincenal-layout details.poq-advanced {
    grid-column: 1 / -1;
    border: 1px solid var(--holos-border, #e2e8f0);
    border-radius: 12px;
    background: var(--holos-card, #fff);
    padding: 0 1rem;
}
.people-ops-quincenal-layout details.poq-advanced > summary {
    cursor: pointer;
    padding: .85rem .25rem;
    font-weight: 500;
    color: var(--holos-text, #0f172a);
    list-style: none;
}
.people-ops-quincenal-layout details.poq-advanced > summary::-webkit-details-marker { display: none; }
.people-ops-quincenal-layout details.poq-advanced > summary::before { content: "▸ "; color: var(--holos-muted, #94a3b8); }
.people-ops-quincenal-layout details.poq-advanced[open] > summary::before { content: "▾ "; }

/* Cabeceras de panel + captions + tags (reemplazan los volcados dl/ul) */
.poq-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: .5rem; }
.poq-caption { font-size: .8rem; color: var(--holos-muted, #64748b); margin: .1rem 0 .85rem; }
.poq-pill {
    display: inline-flex; align-items: center;
    font-size: .72rem; padding: 3px 10px; border-radius: 999px;
    background: var(--holos-surface, #f1f5f9); color: var(--holos-muted, #475569);
    white-space: nowrap;
}
.poq-pill--ok { background: #ecfdf5; color: #047857; }
.poq-pill--danger { background: #fef2f2; color: #b91c1c; }
.poq-pill--info { background: #eff6ff; color: #1d4ed8; }
.poq-pill--warn { background: #fffbeb; color: #b45309; }
.poq-subcell { font-size: .75rem; margin-top: 2px; }
.poq-ot-actions { white-space: nowrap; }
.poq-ot-btn {
    border-radius: .5rem; padding: .35rem .7rem; font-size: .78rem; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
}
.poq-ot-btn + .poq-ot-btn { margin-left: .4rem; }
.poq-ot-btn--pay { background: #059669; color: #fff; }
.poq-ot-btn--pay:hover { background: #047857; }
.poq-ot-btn--block { background: #fff; color: #b91c1c; border-color: #fecaca; }
.poq-ot-btn--block:hover { background: #fef2f2; }
.poq-ot-btn--link { background: none; border: none; color: #2563eb; padding: 0; font-weight: 500; }
.poq-ot-btn--link:hover { text-decoration: underline; }

.poq-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.poq-note-col { display: flex; flex-direction: column; gap: .4rem; }
.poq-note-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--holos-muted, #64748b); }
.poq-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.poq-tag {
    display: inline-flex; align-items: center;
    font-size: .78rem; padding: 3px 10px; border-radius: 8px;
    background: var(--holos-surface, #f1f5f9); color: var(--holos-text, #0f172a);
    border: 1px solid var(--holos-border, #e2e8f0);
}
.poq-tag--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.poq-tag--accent { background: var(--holos-brand-primary-soft, #eff6ff); color: var(--holos-brand-primary, #1d4ed8); border-color: #bfdbfe; }

.people-ops-quincenal-team-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 2px;
}

/* Lista de equipos estilo Deel: filas planas, hover suave, activo azul tenue con borde fino.
   `button.` en el selector para ganarle al comodín [class*="chip"]{border-radius:999px} de
   holos-refined.css (carga después) que convertía estas tarjetas en óvalos. */
button.people-ops-quincenal-team-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    background: transparent;
    color: var(--holos-text, #0f172a);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

button.people-ops-quincenal-team-chip:hover {
    background: #f8fafc;
    box-shadow: none;
}

button.people-ops-quincenal-team-chip strong { font-size: .875rem; font-weight: 600; line-height: 1.35; }
button.people-ops-quincenal-team-chip .muted { font-size: .75rem; line-height: 1.4; color: #667085; }

button.people-ops-quincenal-team-chip.is-active {
    background: var(--holos-brand-primary-soft, #eff6ff);
    border-color: #bfdbfe;
    box-shadow: none;
}

.poq-team-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.poq-team-count {
    font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
}
button.people-ops-quincenal-team-chip.is-active .poq-team-count { background: #dbeafe; color: #1d4ed8; }

.people-ops-quincenal-collaborators tr { cursor: pointer; }
.people-ops-quincenal-collaborators tr.is-selected {
    background: var(--holos-brand-primary-soft, #eff6ff);
    box-shadow: inset 3px 0 0 var(--holos-brand-primary, #2563eb);
}

/* La tabla de aprobaciones de HE también se opera por selección de fila — sin este bloque la
   fila elegida no daba NINGUNA señal visible (visto en vivo 2026-07-13). */
.people-ops-quincenal-overtime-approvals tbody tr { cursor: pointer; }
.people-ops-quincenal-overtime-approvals tbody tr:hover { background: #f8fafc; }
.people-ops-quincenal-overtime-approvals tbody tr.is-selected {
    background: var(--holos-brand-primary-soft, #eff6ff);
    box-shadow: inset 3px 0 0 var(--holos-brand-primary, #2563eb);
}

/* ============================================================================
   FASE 0 — Fix de causa raíz de tarjetas-KPI y encabezados en TODO People Ops.
   Las clases sys-health-* vivían SCOPED en Health.razor (solo aplicaban ahí) y
   h2-section no existía en ningún CSS cargado → los stats se apilaban como
   titulares gigantes en ~30 páginas. Estas reglas globales los convierten en
   tarjetas-KPI reales sin tocar cada página.
   ============================================================================ */

.sys-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}

.sys-health-card {
    background: var(--holos-card, #fff);
    border: 1px solid var(--holos-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Etiqueta del KPI (el <h2> dentro de la tarjeta): pequeña y tenue, no un titular. */
.sys-health-card h2,
.sys-health-card > h2.h2-section {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--holos-muted, #64748b);
}

/* Valor del KPI (el <p class="h2-section"> dentro de la tarjeta): número grande. */
.sys-health-card .h2-section,
.sys-health-card p.h2-section {
    margin: 0;
    font-size: 24px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--holos-text, #0f172a);
}

.sys-health-dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.65rem;
    font-size: 0.82rem;
}
.sys-health-dl dt { color: var(--holos-muted, #64748b); font-weight: 500; }
.sys-health-dl dd { margin: 0; color: var(--holos-text, #0f172a); word-break: break-word; }

/* Encabezados de sección (h2-section / h3-section) FUERA de una tarjeta KPI:
   estilo de título de sección real, no número gigante. */
h2.h2-section,
.h2-section {
    margin: 0 0 0.6rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--holos-text, #0f172a);
    letter-spacing: -0.01em;
}
h3.h3-section,
.h3-section {
    margin: 0 0 0.5rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--holos-text, #0f172a);
}

/* Chips de departamento: tokens claros + tope de ancho para que no se estiren en óvalos. */
.people-ops-payroll-dept-chip {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-color: var(--holos-border, #e2e8f0);
    background: var(--holos-card, #fff);
    color: var(--holos-text, #334155);
}
.people-ops-payroll-dept-chip.is-active {
    border-color: var(--holos-brand-primary, #2563eb);
    background: var(--holos-brand-primary-soft, #eff6ff);
    color: var(--holos-brand-primary, #1d4ed8);
}


/* ── holos-detail-grid: pares etiqueta/valor en tarjetas de detalle (incidentes, casos).
   Sin esto, el <dl> se apila como chorizo vertical desperdiciando el ancho (queja arquitecto). ── */
.holos-detail-grid {
    margin: 0 0 .75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .55rem .9rem;
}
.holos-detail-grid > div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.holos-detail-grid dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--holos-muted, #64748b);
}
.holos-detail-grid dd {
    margin: 0;
    font-size: .88rem;
    color: var(--holos-text, #0f172a);
    word-break: break-word;
}

/* ── Fade en los bordes de la barra de pills del módulo: el corte a media palabra
   se lee como error; el degradado dice "hay más, scrolleá". ── */
.poc-scroll {
    -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 22px), transparent);
}

/* ============================================================================
   CAPA DEEL COMPARTIDA (2026-07-13) — TODO /people-ops la hereda vía la clase
   .people-ops-scope que MainLayout estampa por ruta. Tablas legibles, tarjetas
   planas, encabezados quietos. Las pills genéricas ya existen: .poq-pill--ok /
   --danger / --info / --warn.
   ============================================================================ */
.people-ops-scope .holos-table { border-collapse: collapse; }
.people-ops-scope .holos-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: #667085;
    padding: .55rem .75rem;
    white-space: nowrap;
    background: transparent;
    border-bottom: 1px solid #eaecf0;
}
.people-ops-scope .holos-table td {
    padding: .6rem .75rem;
    font-size: .875rem;
    vertical-align: middle;
}
.people-ops-scope .holos-table tbody tr + tr td { border-top: 1px solid #f2f4f7; }
.people-ops-scope .holos-table tbody tr:hover { background: #f8fafc; }
.people-ops-scope section.card,
.people-ops-scope .card {
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.people-ops-scope .h2-section { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.people-ops-scope .muted { color: #667085; }

/* Fila de totales del detalle diario — la respuesta a "¿cuántas horas trabajó?" */
.people-ops-scope .holos-table tfoot .poq-day-totals td {
    border-top: 2px solid #e2e8f0;
    background: #f8fafc;
    font-variant-numeric: tabular-nums;
}

/* ── Matriz de programación de turnos (colaborador × fecha) ── */
.roster-matrix-wrap { overflow-x: auto; margin-top: .85rem; border: 1px solid var(--holos-border, rgba(148,163,184,.25)); border-radius: 10px; scrollbar-width: thin; }
.roster-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.roster-matrix th, .roster-matrix td { border-bottom: 1px solid var(--holos-border, rgba(148,163,184,.2)); padding: 6px 6px; text-align: center; white-space: nowrap; }
.roster-matrix thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; background: var(--holos-card, #fff); position: sticky; top: 0; z-index: 2; }
.roster-matrix .rm-who { position: sticky; left: 0; z-index: 3; background: var(--holos-card, #fff); text-align: left; min-width: 180px; border-right: 1px solid var(--holos-border, rgba(148,163,184,.35)); }
.roster-matrix thead .rm-who { z-index: 4; }
.roster-matrix .rm-name { font-weight: 600; }
.roster-matrix .rm-meta { font-size: 11px; color: #94a3b8; }
.roster-matrix .rm-wknd { background: rgba(148,163,184,.07); }
.roster-matrix .rm-tot { position: sticky; right: 0; background: var(--holos-card, #fff); font-weight: 600; font-variant-numeric: tabular-nums; border-left: 1px solid var(--holos-border, rgba(148,163,184,.35)); text-align: right; }
.roster-matrix td.rm-cell { padding: 4px 3px; min-width: 86px; }
.rm-pick { width: 100%; min-height: 30px; border-radius: 6px; font-size: 12px; text-align: center; cursor: pointer; padding: 3px 2px; }
.rm-pick.rm-shift, .rm-pill.rm-shift { background: #e6f1fb; color: #0c447c; border: 1px solid #b5d4f4; }
.rm-pick.rm-empty { color: #94a3b8; border: 1px dashed rgba(148,163,184,.55); background: transparent; }
.rm-pill { display: inline-block; border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.rm-pill.rm-empty { color: #94a3b8; }
.roster-matrix tfoot td { font-variant-numeric: tabular-nums; color: #64748b; font-size: 12px; }
.roster-matrix tfoot .rm-who { font-weight: 600; color: inherit; }
.roster-matrix tfoot td.rm-low { color: #a32d2d; font-weight: 700; }
.rm-pick.rm-dayoff, .rm-pill.rm-dayoff { background: #faeeda; color: #854f0b; border: 1px solid #fac775; }
.rm-pick.rm-rest, .rm-pill.rm-rest { background: #f1efe8; color: #5f5e5a; border: 1px solid #d3d1c7; }
.rm-pick.rm-psg, .rm-pill.rm-psg { background: #faece7; color: #993c1d; border: 1px solid #f0997b; }

/* PSG propuestos por jefatura (3b): franja de decisión RRHH en la Revisión quincenal. */
.poq-psg-strip { border-left: 4px solid #f0997b; }
.poq-psg-rows { display: flex; flex-direction: column; gap: 6px; }
.poq-psg-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid #f1efe8; }
.poq-psg-row:last-child { border-bottom: none; }
.poq-psg-who { font-weight: 600; min-width: 180px; }
.poq-psg-dept { color: #5f5e5a; min-width: 140px; }
.poq-psg-dates { background: #faece7; color: #993c1d; border-radius: 999px; padding: 2px 10px; font-size: 0.85rem; }
.poq-psg-actions { margin-left: auto; display: flex; gap: 8px; }

/* Pantallas DENSAS a lo ancho (quincenal y matriz de roster): en un monitor 1920 el tope global de
   1440px botaba ~480px mientras la tabla pedía scroll — acá el ancho ES información (14 días de
   columnas, 12 columnas de horas). Solo estas dos pantallas; el resto del shell mantiene su tope
   de lectura. */
.holos-enterprise-shell .holos-content:has(.people-ops-quincenal-layout),
.holos-enterprise-shell .holos-content:has(.roster-matrix) {
    max-width: 1880px;
}