/* Presentation only: keep renderer targets, semantic states and navigation owners.
   The section class adds specificity over the legacy ID/important grid rules. */
#dashboardSection.dashboard-v4-section .dashboard-v4-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "kpis kpis"
        "actions actions"
        "summary summary"
        "rrhh side" !important;
    gap: 10px !important;
}

/* Flatten only the structural div, never the complementary aside landmark. */
#dashboardSection.dashboard-v4-section .dashboard-v4-main {
    display: contents !important;
}

#dashboardSection.dashboard-v4-section .dashboard-v4-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
    align-items: start;
}

#dashboardSection .dashboard-v4-rrhh { grid-area: rrhh; }
#dashboardSection .dashboard-v4-operational { grid-area: summary; }

#dashboardSection.dashboard-v4-section .dashboard-v4-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

#dashboardSection .dashboard-v4-header {
    margin-bottom: 10px;
}

#dashboardSection .dashboard-v4-panel {
    padding: 10px;
    overflow: visible;
    box-shadow: none;
}

#dashboardSection .dashboard-v4-panel-header,
#dashboardSection .dashboard-v4-actions-panel .dashboard-v4-panel-header {
    margin-bottom: 8px;
    gap: 8px;
}

#dashboardSection .dashboard-v4-panel-header > div {
    min-width: 0;
}

#dashboardSection .dashboard-v4-kpi {
    min-height: 0;
    padding: 10px;
    gap: 6px;
    align-items: flex-start;
    box-shadow: none;
}

#dashboardSection .dashboard-v4-kpi-icon {
    width: 24px;
    height: 28px;
    min-width: 24px;
}

/* Restore the full labels/details previously ellipsized by legacy styles. */
#dashboardSection .dashboard-v4-kpi-title,
#dashboardSection .dashboard-v4-kpi small,
#dashboardSection .dashboard-v4-alert-body strong,
#dashboardSection .dashboard-v4-alert-body small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

#dashboardSection .dashboard-v4-kpi-title {
    font-size: 11px;
    letter-spacing: 0.02em;
}

#dashboardSection .dashboard-v4-kpi small {
    font-size: 12px;
}

#dashboardSection .dashboard-v4-actions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(130px, 0.8fr);
    align-items: start;
    gap: 8px;
}

#dashboardSection .dashboard-v4-action,
#dashboardSection .dashboard-v4-secondary-actions summary {
    min-height: 44px;
    padding: 8px;
    overflow-wrap: anywhere;
}

/* In-flow disclosure: opening it never overlays or clips another control. */
#dashboardSection .dashboard-v4-secondary-actions summary {
    cursor: pointer;
    border: 1px solid var(--appearance-line);
    border-radius: 10px;
    background: var(--appearance-raised);
    color: var(--appearance-text);
    font-size: 13px;
}

#dashboardSection .dashboard-v4-secondary-grid {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

#dashboardSection .dashboard-v4-rrhh-grid,
#dashboardSection .dashboard-v4-operational-grid {
    gap: 8px;
}

#dashboardSection .dashboard-v4-mini-panel,
#dashboardSection .dashboard-v4-operational-item {
    padding: 8px;
}

#dashboardSection .dashboard-v4-list {
    gap: 6px;
}

#dashboardSection .dashboard-v4-list-item {
    flex-wrap: wrap;
    padding: 6px;
    gap: 4px;
    min-height: 44px;
}

#dashboardSection .dashboard-v4-list-item > div,
#dashboardSection .dashboard-v4-worker .trabajador-nombre {
    min-width: 0;
    overflow-wrap: anywhere;
}

#dashboardSection .dashboard-v4-list-item .badge {
    white-space: normal;
    overflow-wrap: anywhere;
}

#dashboardSection .dashboard-v4-alert {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 8px;
    gap: 6px;
    margin-bottom: 6px;
    min-height: 44px;
}

#dashboardSection .dashboard-v4-alert:last-child {
    margin-bottom: 0;
}

#dashboardSection .dashboard-v4-alert-icon {
    width: 26px;
    height: 26px;
}

#dashboardSection .dashboard-v4-working #trabajandoAhora {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    max-height: none;
    overflow: visible;
    padding: 0;
}

#dashboardSection .dashboard-v4-worker {
    flex-wrap: wrap;
    padding: 6px 0;
    gap: 4px;
}

#dashboardSection .dashboard-v4-more-workers,
#dashboardSection .trabajando-ahora-vacio {
    grid-column: 1 / -1;
}

/* Reuse theme-aware operational colors rather than legacy light pastels. */
#dashboardSection .dashboard-v4-count {
    color: var(--appearance-success);
}

#dashboardSection .dashboard-v4-more-workers,
#dashboardSection .dashboard-v4-operational-item.primary strong {
    color: var(--appearance-info);
}

#dashboardSection .dashboard-v4-operational-item.success strong {
    color: var(--appearance-success);
}

#dashboardSection .dashboard-v4-operational-item.warning strong {
    color: var(--appearance-warning);
}

#dashboardSection .dashboard-v4-operational-item.danger strong {
    color: var(--appearance-danger);
}

@media (max-width: 1100px) {
    #dashboardSection.dashboard-v4-section .dashboard-v4-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "kpis kpis"
            "actions actions"
            "summary summary"
            "rrhh rrhh"
            "side side" !important;
    }

    #dashboardSection.dashboard-v4-section .dashboard-v4-side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #dashboardSection.dashboard-v4-section .dashboard-v4-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #dashboardSection.dashboard-v4-section .dashboard-v4-rrhh-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #dashboardSection.dashboard-v4-section .dashboard-v4-operational-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #dashboardSection .dashboard-v4-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dashboardSection .dashboard-v4-secondary-actions {
        grid-column: 1 / -1;
    }

    #dashboardSection .dashboard-v4-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dashboardSection .dashboard-v4-working #trabajandoAhora {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    #dashboardSection.dashboard-v4-section .dashboard-v4-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "kpis" "actions" "summary" "rrhh" "side" !important;
    }

    #dashboardSection.dashboard-v4-section .dashboard-v4-side {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #dashboardSection.dashboard-v4-section .dashboard-v4-rrhh-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #dashboardSection .dashboard-v4-kpi {
        flex-wrap: wrap;
    }

    #dashboardSection .dashboard-v4-header,
    #dashboardSection .dashboard-v4-panel-header {
        flex-wrap: wrap;
    }
}