/* ===================================================
   Helpers responsive compartidos entre modulos.
   Los breakpoints especificos de sidebar/topbar viven
   en MainLayout.razor.css / NavMenu.razor.css.
   =================================================== */

/* --- Header de listado (Patron A) --- */
@media (max-width: 639.98px) {
    .ds-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ds-page-header-actions {
        justify-content: stretch;
    }

    .ds-page-header-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* --- Filtros colapsables en mobile --- */
@media (max-width: 767.98px) {
    .ds-filter-panel-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- KPI grid en mobile: 2 columnas minimo --- */
@media (max-width: 479.98px) {
    .ds-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Tamanos minimos clickeables en touch --- */
@media (max-width: 767.98px) {
    .btn, .ds-pagination-btn {
        min-height: 2.75rem;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 2.75rem;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    .modal-dialog { margin: 0.75rem; }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-responsive {
        border-radius: var(--radius-sm);
        -webkit-overflow-scrolling: touch;
    }

    .pagination {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .card-header.d-flex,
    .card-footer > .d-flex,
    .list-group-item > .d-flex,
    .alert > .d-flex,
    .alert.d-flex,
    .ds-mobile-wrap {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .action-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .action-buttons {
        width: 100%;
    }

    .action-buttons .btn {
        flex: 1;
        justify-content: center;
    }

    .ds-filter-panel-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ds-filter-panel-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .ds-detail-grid {
        grid-template-columns: 1fr;
    }

    .ds-page-title {
        font-size: clamp(1.25rem, 7vw, 1.5rem);
        overflow-wrap: anywhere;
    }

    .card-header h2,
    .card-header h5,
    .card-header h6,
    .modal-title,
    .ds-detail-item strong,
    .context-item strong {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 639.98px) {
    .summary-row {
        grid-template-columns: 1fr;
    }

    .form-section,
    .form-card,
    .legacy-form-section,
    .detail-row,
    .edit-section,
    .info-card,
    .table-shell,
    .chart-shell {
        padding: 1rem;
    }

    .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
        margin: 0;
    }

    .action-buttons {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .login-container,
    .cambiar-password-container,
    .auth-loading-state {
        padding: 1rem;
    }

    .login-form,
    .cambiar-password-form,
    .login-header,
    .cambiar-password-header {
        padding: 1.35rem;
    }
}