/* ============================================================
   RESPONSIVE PERFORMANCE OPTIMIZATIONS
   Mobile-First Approach for Initial Screen Load
   ============================================================ */

/* ============================================
   1. GLOBAL RESPONSIVE UTILITIES
   ============================================ */

/* Hide elements not needed on mobile */
@media (max-width: 576px) {
    .hide-mobile {
        display: none !important;
    }

    /* Reduce padding for mobile */
    .container, .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Optimize form elements */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.6rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Touch-friendly button sizing */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem !important;
    }
}

/* Show elements only on mobile */
.show-mobile {
    display: none;
}

@media (max-width: 576px) {
    .show-mobile {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .show-tablet {
        display: block !important;
    }
}

.show-tablet {
    display: none;
}

/* ============================================
   2. IMAGE OPTIMIZATION
   ============================================ */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 576px) {
    /* Reduce image sizes on mobile */
    .img-responsive-sm {
        max-width: 80%;
    }

    /* Lazy loading placeholder */
    img[loading="lazy"] {
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAKPC9zdmc+') center/contain no-repeat;
        background-color: #f0f0f0;
    }
}

/* ============================================
   3. TEXT OPTIMIZATION
   ============================================ */

@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    h2 {
        font-size: 1.25rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    h3 {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-bottom: 0.4rem;
    }

    h4, h5, h6 {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0.3rem;
    }

    p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }

    small {
        font-size: 0.8rem;
    }
}

/* ============================================
   4. SPACING OPTIMIZATION
   ============================================ */

@media (max-width: 576px) {
    /* Reduce padding globally on mobile */
    .p-0 { padding: 0 !important; }
    .p-1 { padding: 0.25rem !important; }
    .p-2 { padding: 0.5rem !important; }
    .p-3 { padding: 0.75rem !important; }

    /* Reduce margins globally on mobile */
    .m-0 { margin: 0 !important; }
    .m-1 { margin: 0.25rem !important; }
    .m-2 { margin: 0.5rem !important; }
    .m-3 { margin: 0.75rem !important; }

    /* Reduce gap in flex containers */
    .gap-2 { gap: 0.5rem !important; }
    .gap-3 { gap: 1rem !important; }
}

/* ============================================
   5. GRID & LAYOUT OPTIMIZATION
   ============================================ */

@media (max-width: 576px) {
    /* Stack columns on mobile */
    .row > [class*="col-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.5rem;
    }

    /* Full-width tables on mobile */
    .table {
        font-size: 0.85rem;
        margin: 0;
    }

    .table thead {
        font-size: 0.8rem;
    }
}

/* ============================================
   6. CARD OPTIMIZATION FOR MOBILE
   ============================================ */

@media (max-width: 576px) {
    .card {
        border-radius: 8px;
        margin-bottom: 0.75rem;
        border: 1px solid #e9ecef;
    }

    .card-body {
        padding: 0.75rem !important;
    }

    .card-header {
        padding: 0.5rem 0.75rem !important;
    }

    .card-footer {
        padding: 0.5rem 0.75rem !important;
    }
}

/* ============================================
   7. MODAL/DIALOG OPTIMIZATION
   ============================================ */

@media (max-width: 576px) {
    .modal-content {
        border-radius: 12px;
        margin: 0.5rem;
    }

    .modal-header {
        padding: 0.75rem !important;
        border-radius: 12px 12px 0 0;
    }

    .modal-body {
        padding: 0.75rem !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .modal-footer {
        padding: 0.75rem !important;
    }
}

/* ============================================
   8. NAVIGATION OPTIMIZATION
   ============================================ */

@media (max-width: 576px) {
    nav {
        font-size: 0.9rem;
    }

    .navbar {
        padding: 0.5rem 0 !important;
    }

    .nav-item {
        padding: 0 0.25rem;
    }

    .nav-link {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.9rem;
    }
}

/* ============================================
   9. FORM OPTIMIZATION
   ============================================ */

@media (max-width: 576px) {
    form {
        padding: 0.5rem;
    }

    .form-group {
        margin-bottom: 0.75rem;
    }

    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .btn-group,
    .btn-toolbar {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ============================================
   10. ACCESSIBILITY & TOUCH
   ============================================ */

/* Ensure touch targets are at least 44x44px */
@media (hover: none) and (pointer: coarse) {
    button, a, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Add more spacing for touch */
    .btn {
        margin: 0.25rem;
    }

    /* Reduce hover effects on touch devices */
    a:hover, button:hover {
        background-color: inherit;
    }
}

/* ============================================
   11. BREAKPOINT ESPECÍFICO 360px
   Dispositivos muy pequeños (360 x 640)
   ============================================ */

@media (max-width: 360px) {
    html {
        font-size: 13px;
    }

    .container, .container-fluid {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .btn {
        min-height: 40px;
        min-width: 40px;
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.1rem; }
    h3 { font-size: 1rem; }
    h4, h5, h6 { font-size: 0.9rem; }

    .row > [class*="col-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .card-body {
        padding: 0.5rem !important;
    }

    .modal-body {
        padding: 0.5rem !important;
        max-height: calc(100vh - 160px);
    }

    .table {
        font-size: 0.78rem;
    }

    .form-control {
        font-size: 16px;
        padding: 0.5rem !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 0.5rem !important;
    }
}

/* ============================================
   12. BREAKPOINTS PANTALLAS GRANDES
   Full HD (1440px - 1920px+)
   ============================================ */

@media (min-width: 1440px) {
    html {
        font-size: 16.5px;
    }

    .container, .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Mejora legibilidad en grids Syncfusion */
    .e-gridheader .e-headercell {
        font-size: 14.5px !important;
    }

    .e-grid .e-rowcell {
        padding: 10px 14px !important;
    }

    /* Botones con mejor proporción */
    .btn-sagem,
    .btn-sagem-action {
        padding: 10px 22px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 16.5px; /* Ajuste moderado para no agrandar demasiado el selector de módulos */
    }

    .container, .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Aprovechar altura de pantalla en grids */
    .e-grid .e-row {
        height: 54px !important;
    }

    .e-gridheader .e-headercell {
        font-size: 15px !important;
        padding: 10px 14px !important;
    }

    /* Mejorar visibilidad de cards en pantallas grandes */
    .card img:not(.gm-style img) {
        height: 130px !important;
    }

    .custom-img {
        height: 180px !important;
    }

    /* Dialogs mejor centrados y más cómodos */
    .modal-popup {
        width: 45% !important;
    }
}

/* Print optimization */
@media print {
    /* Hide UI elements when printing */
    .navbar, .sidebar, .header, .footer {
        display: none !important;
    }

    /* Optimize content for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
}

/* ── Sobrescritura Final de Selección de Filas en Grids (Fondo Claro Resaltado + Texto Oscuro) ── */
/* ── MODO OSCURO: Filas Normales (Fondo Oscuro + Texto Claro) ── */
.dark-mode .e-grid .e-row,
.dark-mode .e-grid .e-rowcell {
    background-color: #18181b !important;
    background: #18181b !important;
    color: #f4f4f5 !important;
}

.dark-mode .e-grid .e-row:nth-child(even),
.dark-mode .e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #121215 !important;
    background: #121215 !important;
}

/* ── MODO OSCURO: Hover en Filas de Grid (Fondo Uniforme Oscuro-Verde + Texto Blanco) ── */
.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover,
.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover .e-rowcell,
.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover td,
html.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover,
html.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover .e-rowcell,
body.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover,
body.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover .e-rowcell {
    background-color: #1e3a2f !important;
    background: #1e3a2f !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover *,
html.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover *,
body.dark-mode .e-grid .e-gridcontent tr.e-row:not(.e-selectedrow):hover * {
    color: #ffffff !important;
}

/* ── MODO OSCURO: Fila Seleccionada en Grid (Fondo Verde Esmeralda Uniforme + Texto Blanco) ── */
.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow,
.dark-mode .e-grid .e-gridcontent tr.e-selectedrow,
.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow td.e-rowcell,
.dark-mode .e-grid .e-gridcontent tr.e-selectedrow td.e-rowcell,
.dark-mode .e-grid .e-gridcontent td.e-selectionbackground,
.dark-mode .e-grid .e-gridcontent td.e-active,
.dark-mode .e-grid .e-rowcell.e-selectionbackground,
.dark-mode .e-grid .e-rowcell.e-active,
.dark-mode .e-grid .e-selectedrow,
.dark-mode .e-grid .e-selectionbackground,
html.dark-mode body.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow,
html.dark-mode body.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow td.e-rowcell,
html.dark-mode body.dark-mode .e-grid .e-gridcontent td.e-selectionbackground,
html.dark-mode body.dark-mode .e-grid .e-gridcontent td.e-active,
html.dark-mode body.dark-mode .e-grid .e-rowcell.e-selectionbackground,
html.dark-mode body.dark-mode .e-grid .e-rowcell.e-active,
html.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow,
html.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow td.e-rowcell,
html.dark-mode .e-grid .e-gridcontent td.e-selectionbackground,
body.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow,
body.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow td.e-rowcell,
body.dark-mode .e-grid .e-gridcontent td.e-selectionbackground,
body.dark-mode .e-grid .e-gridcontent td.e-active {
    background-color: #059669 !important;
    background: #059669 !important;
    color: #ffffff !important;
}

.dark-mode .e-grid .e-gridcontent tr.e-selectedrow *,
.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow *,
html.dark-mode body.dark-mode .e-grid .e-gridcontent tr.e-selectedrow *,
html.dark-mode body.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow *,
html.dark-mode .e-grid .e-gridcontent tr.e-selectedrow td,
body.dark-mode .e-grid .e-gridcontent tr.e-selectedrow td {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.dark-mode .e-grid .e-gridcontent tr.e-selectedrow:hover,
.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow:hover,
.dark-mode .e-grid .e-gridcontent tr.e-selectedrow:hover td,
.dark-mode .e-grid .e-gridcontent tr.e-row.e-selectedrow:hover td,
html.dark-mode body.dark-mode .e-grid .e-gridcontent tr.e-selectedrow:hover,
html.dark-mode .e-grid .e-gridcontent tr.e-selectedrow:hover,
body.dark-mode .e-grid .e-gridcontent tr.e-selectedrow:hover {
    background-color: #047857 !important;
    background: #047857 !important;
    color: #ffffff !important;
}

/* ── Espacio de Filtros debajo de Títulos de Grids (Pizarra Oscuro + Textos Legibles) ── */
.dark-mode .e-grid .e-filterbar,
.dark-mode .e-grid .e-filterbarcell,
.dark-mode .e-grid .e-filterbarcelldisabled,
.dark-mode .e-grid .e-gridheader tr.e-filterbar,
.dark-mode .e-grid .e-gridheader th.e-filterbarcell,
html.dark-mode .e-grid .e-filterbarcell,
body.dark-mode .e-grid .e-filterbarcell {
    background-color: #27272a !important;
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

.dark-mode .e-grid .e-filterbarcell input,
.dark-mode .e-grid .e-filtertext,
.dark-mode .e-grid .e-filterbarcell .e-input,
html.dark-mode .e-grid .e-filterbarcell input,
body.dark-mode .e-grid .e-filterbarcell input {
    background-color: #1f1f23 !important;
    background: #1f1f23 !important;
    color: #ffffff !important;
    border: 1px solid #52525b !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}

.dark-mode .e-grid .e-filterbarcell input::placeholder,
.dark-mode .e-grid .e-filtertext::placeholder {
    color: #a1a1aa !important;
    opacity: 0.85 !important;
}

.dark-mode .e-grid .e-filterbarcell input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
    outline: none !important;
    color: #ffffff !important;
}

.dark-mode .e-grid .e-filterbarcell .e-icons,
.dark-mode .e-grid .e-filterbarcell .e-clear-icon {
    color: #a1a1aa !important;
}

/* ── Pantallas Modales CRUD (SfDialog & Bootstrap Modals) en Modo Oscuro ── */
.dark-mode .e-dialog,
.dark-mode .e-dlg-container .e-dialog,
.dark-mode .modal-dialog .modal-content,
.dark-mode .modal-content,
html.dark-mode .e-dialog,
body.dark-mode .e-dialog,
html.dark-mode .modal-content,
body.dark-mode .modal-content {
    background-color: #18181b !important;
    background: #18181b !important;
    border: 1px solid #27272a !important;
    color: #f4f4f5 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
    border-radius: 12px !important;
}

.dark-mode .e-dlg-header-content,
.dark-mode .modal-header,
html.dark-mode .e-dlg-header-content,
body.dark-mode .e-dlg-header-content {
    background-color: #121215 !important;
    background: #121215 !important;
    border-bottom: 1px solid #27272a !important;
    color: #ffffff !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.dark-mode .e-dlg-header,
.dark-mode .modal-title,
.dark-mode .e-dlg-header * {
    color: #ffffff !important;
}

.dark-mode .e-dlg-container .e-dlg-closeicon-btn,
.dark-mode .e-dialog .e-btn-icon,
.dark-mode .btn-close,
html.dark-mode .btn-close {
    filter: invert(1) brightness(1.8) !important;
    color: #ffffff !important;
}

.dark-mode .e-dlg-content,
.dark-mode .modal-body,
html.dark-mode .e-dlg-content,
body.dark-mode .e-dlg-content {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
}

/* Fieldsets y Secciones internas en Modales CRUD */
.dark-mode .e-dialog fieldset,
.dark-mode .modal-content fieldset,
.dark-mode .e-dialog fieldset[style*="f8f9fa"],
.dark-mode fieldset[style*="background-color"],
html.dark-mode fieldset,
body.dark-mode fieldset {
    background-color: #27272a !important;
    background: #27272a !important;
    border: 1px solid #3f3f46 !important;
    border-radius: 8px !important;
}

.dark-mode .e-dialog legend,
.dark-mode .modal-content legend,
html.dark-mode legend,
body.dark-mode legend {
    color: #10b981 !important;
    font-weight: 700 !important;
    background-color: transparent !important;
}

/* Form Labels y Textos en Modales CRUD */
.dark-mode .e-dialog label,
.dark-mode .e-dialog .form-label,
.dark-mode .modal-content label,
.dark-mode .modal-content .form-label,
html.dark-mode .e-dialog label,
body.dark-mode .e-dialog label {
    color: #e4e4e7 !important;
    font-weight: 600 !important;
}

/* Controls / Inputs en Modales CRUD */
.dark-mode .e-dialog .form-control,
.dark-mode .e-dialog input[type="text"],
.dark-mode .e-dialog textarea,
.dark-mode .e-dialog select,
.dark-mode .modal-content .form-control,
html.dark-mode .e-dialog .form-control,
body.dark-mode .e-dialog .form-control {
    background-color: #1f1f23 !important;
    background: #1f1f23 !important;
    color: #ffffff !important;
    border: 1px solid #3f3f46 !important;
    border-radius: 6px !important;
}

.dark-mode .e-dialog .form-control:focus,
.dark-mode .modal-content .form-control:focus {
    background-color: #27272a !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
}

/* ── Sobrescritura Global DropDownList Items Hover & Active (Verde Corporativo SAGEM) ── */
.e-dropdownbase .e-list-item.e-hover,
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item:hover,
.e-dropdownbase .e-list-item.e-item-focus,
.e-dropdownlist .e-list-item.e-hover,
.e-dropdownlist .e-list-item.e-active,
.e-popup .e-list-item.e-hover,
.e-popup .e-list-item.e-active,
.e-popup .e-list-item:hover,
.e-popup .e-list-item.e-item-focus,
.e-popup .e-list-parent .e-list-item.e-hover,
.e-popup .e-list-parent .e-list-item.e-active,
.e-popup .e-list-parent .e-list-item:hover,
.e-ddl.e-popup .e-list-item.e-hover,
.e-ddl.e-popup .e-list-item.e-active,
.e-combobox.e-popup .e-list-item.e-hover,
.e-combobox.e-popup .e-list-item.e-active,
.e-multiselect.e-popup .e-list-item.e-hover,
.e-multiselect.e-popup .e-list-item.e-active,
.e-autocomplete.e-popup .e-list-item.e-hover,
.e-autocomplete.e-popup .e-list-item.e-active,
.e-list-item.e-hover,
.e-list-item.e-active,
.e-list-item.e-item-focus,
.e-list-item:hover,
html.dark-mode .e-popup .e-list-item.e-hover,
html.dark-mode .e-popup .e-list-item.e-active,
body.dark-mode .e-popup .e-list-item.e-hover,
body.dark-mode .e-popup .e-list-item.e-active,
.dark-mode .e-popup .e-list-item.e-hover,
.dark-mode .e-popup .e-list-item.e-active {
    background-color: #059669 !important;
    background: #059669 !important;
    color: #ffffff !important;
}

.e-popup .e-list-item.e-hover *,
.e-popup .e-list-item.e-active *,
.e-popup .e-list-item:hover *,
.e-dropdownbase .e-list-item.e-hover *,
.e-dropdownbase .e-list-item.e-active *,
.e-list-item.e-hover *,
.e-list-item.e-active *,
html.dark-mode .e-popup .e-list-item.e-hover *,
html.dark-mode .e-popup .e-list-item.e-active *,
body.dark-mode .e-popup .e-list-item.e-hover *,
body.dark-mode .e-popup .e-list-item.e-active * {
    color: #ffffff !important;
}