/* Variables globales */
@import url('https://mli-fjc.localizacionsatelitalgps.com/static/css/googlefont.css');
*{font-family: "Poppins",sans-serif;margin: 0;padding: 0;box-sizing: border-box;}
:root {
    --primary: #1f4087;
    --secondary: rgb(67, 101, 173);
    --tertiary: #d4ddf4;
    --text_1: #2c3e50;
    --text_2: #34495e;
    --text_3: #7f8c8d;
    --border_1: rgba(31, 64, 135, 0.08);
    --border_2: rgba(31, 64, 135, 0.12);
    --border_3: rgba(31, 64, 135, 0.16);
    --background_1: #ffffff;
    --background_2: #f8fafc;
    --background_3: #e2e8f0;
    --box_shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --box_shadow_lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --gradient_primary: linear-gradient(135deg, #1F4087 0%, #4365ad 100%);
    --gradient_soft: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --gradient_danger: linear-gradient(135deg, #e23a3a 0%, #ec5537 100%);
    /* Acciones */
    --check: #10b981;
    --xmark: #ef4444;
    --deny: #8b5cf6;
    --warning: #f59e0b;
}
/* estilo a etiquetas */
b{font-weight: 600;}
img{width: 100%;}
body{display: flex;justify-content: center;inset: 0;width: 100%;height: 100%;margin: auto;font-weight: 400;position: absolute;color: var(--text_1);background: var(--background_2);}
input,select,textarea,button{outline: none;border: none;background: transparent;font-family: inherit;transition: all 0.2s ease;}
button{cursor: pointer;border: 1px solid var(--border_2);border-radius: 8px;font-weight: 500;transition: all 0.2s ease;}
button:hover {transform: translateY(-1px);box-shadow: var(--box_shadow);}
button:active {transform: translateY(0);}
:disabled{cursor: not-allowed;opacity: 0.6;}
.none{display: none !important;}
/* ? SweetAlert Modernizado */
.swal2-cancel.swal2-styled{padding: 0 !important;}
.swal2-confirm.swal2-styled{padding: 0 !important;}
.swal-icon, .swal-text{float: left;}
.swal-icon{width: 40px;height: 40px;line-height: 40px;border-right: 1px solid var(--border_2);border-radius: 8px 0 0 8px;background: rgba(0, 0, 0, 0.05);}
.swal-text{padding: 0 10px;height: 40px;line-height: 40px;font-size: 14px;font-weight: 500;}
body.swal2-toast-shown .swal2-container{width: 380px !important;}
div:where(.swal2-container) h2:where(.swal2-title){font-size: 16px !important;font-weight: 600 !important;padding: 15px !important;border-bottom: 1px solid var(--border_1);color: var(--text_1);}
div:where(.swal2-container) div:where(.swal2-popup){padding: 0 !important;background: var(--background_1) !important;color: var(--text_1) !important;border: none !important;border-radius: 16px !important;box-shadow: var(--box_shadow_lg) !important;}
div:where(.swal2-container) div:where(.swal2-actions){margin: 0 auto !important;gap: 12px;flex-direction: row-reverse;border-top: 1px solid var(--border_1);width: 100% !important;padding: 20px 24px !important;}
div:where(.swal2-container) button:where(.swal2-styled){margin: 0 !important;padding: 12px 24px !important;font-size: 14px !important;font-weight: 500 !important;border: none;border-radius: 8px !important;transition: all 0.2s ease;}
div:where(.swal2-container) .swal2-html-container{padding: 24px !important;font-size: 14px !important;line-height: 1.6;}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){background: var(--gradient_primary) !important;box-shadow: 0 2px 4px rgba(31, 64, 135, 0.2) !important;}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel){background: var(--xmark) !important;box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2) !important;}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){background: var(--deny) !important;box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2) !important;}
div:where(.swal2-container) button:where(.swal2-styled):hover{transform: translateY(-1px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;}
div:where(.swal2-container) .swal2-timer-progress-bar-container{height: 10px;background: rgba(0, 0, 0, 0.1);}
div:where(.swal2-container) div:where(.swal2-timer-progress-bar){height: 100% !important;background: var(--secondary) !important;}
div:where(.swal2-icon){margin: 24px auto 0 !important;}
div:where(.swal2-container){padding: 20px !important;}
div:where(.swal2-container) div:where(.swal2-validation-message){margin: 0 !important;padding: 10px !important;background: var(--background_2) !important;font-size: 12px !important;border-top: 1px solid var(--border_1) !important;}
.swal2-toast div:where(.swal2-html-container){margin: 0 !important;padding: 20px 0 30px 0 !important;}
.swal2-toast .swal2-icon{margin: 0 16px 10px 16px !important;}
.swal2-toast .swal2-close{margin: -5px 10px 10px 10px !important;}
/* SortableJS */
.sortable-chosen {background: var(--background_3);box-shadow: var(--box_shadow);}
.sortable-ghost {opacity: 0.4;}
.sortable_item{width: 100%;padding: 10px;display: flex;align-items: center;gap: 10px;border: 1px solid var(--border_2);border-radius: 8px;background: var(--background_1);}
.sortable_icon{width: 40px;height: 40px;min-width: 40px;border-radius: 8px;background: var(--primary);color: white;display: flex;align-items: center;justify-content: center;font-size: 18px;}
.sortable_text{font-size: 10px;font-weight: 500;color: var(--text_2);line-height: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/* Contenedor */
.container{width: 100%;height: fit-content;display: flex;justify-content: center;position: relative;}
.bowls{width: 100%;display: flex;flex-wrap: wrap;gap: 20px;}
.bowls.x1{width: 100%;padding: 20px;max-width: 1200px;}
.bowls.x2{width: calc(100% - 270px);}
.bowls.x3{width: 100%;padding: 20px;max-width: 800px;}
.bowls.x4{width: 100%;padding: 20px;max-width: 500px;}
.boxes.x1{width: 100%;}
.boxes.x2{width: calc(50% - 12px);}
.boxes:hover {box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);}
.boxes{display: flex;flex-direction: column;border-radius: 16px;color: var(--text_1);box-shadow: var(--box_shadow_lg);background: var(--background_1);border: 1px solid var(--border_1);transition: all 0.3s ease;position: relative;}
.boxes_sort{height: 100%;min-height: 40px;padding: 10px;display: flex;flex-direction: column;gap: 10px;background: var(--background_2);border: 1px dashed var(--border_2);border-radius: 8px;margin: 10px;font-size: 14px;color: var(--primary);align-items: center;}
.boxes_head{width: 100%;height: 60px;min-height: 60px;padding: 0 24px;font-size: 16px;font-weight: 500;display: flex;justify-content: center;align-items: center;color: var(--primary);border-bottom: 1px solid var(--border_1);}
.boxes_body{width: 100%;padding: 24px;display: flex;flex-wrap: wrap;gap: 20px;}
.boxes_foot{width: 100%;padding: 10px;display: flex;border-bottom: 1px solid var(--border_1);gap: 10px;}
.boxes.table{width: calc(100% - 40px);max-width: 700px;margin-top: 20px;}
.boxes.forms{width: calc(100% - 40px);max-width: 600px;margin-top: 20px;}
.boxes.convoy_unassigned{width: 100%;min-width: 250px;max-width: 250px;}
.boxes.convoy_sortable{flex: 1 1 250px;}
.boxes_select {width: 100%;height: 40px;padding: 0 10px;border: 1px solid var(--border_2);border-radius: 8px;font-size: 12px;color: var(--text_2);cursor: pointer;}
.boxes_button {background: var(--gradient_primary);color: white;}
#report_incidence{background: var(--gradient_danger);color: white;}
/* Animaciones mejoradas */
.loader{gap: 60px;inset: 0;width: 100%;height: 100%;margin: auto;z-index: 9999;position: fixed;display: none;flex-direction: column;align-items: center;justify-content: center;background: var(--background_1);backdrop-filter: blur(8px);}
.loader.active{display: flex;}
.loader_1 {width: 120px;height: 120px;border: 6px solid var(--background_3);border-bottom-color: var(--primary);border-radius: 50%;display: inline-block;box-sizing: border-box;animation: rotation 1.2s linear infinite;filter: drop-shadow(0 4px 8px rgba(31, 64, 135, 0.2));}
.loader_2 {position: relative;display: inline-block;}
.loader_2::before {content: 'Cargando';color: var(--primary);font-size: 28px;font-weight: 600;letter-spacing: 2px;display: inline-block;box-sizing: border-box;animation: floating 1.5s ease-in-out infinite alternate;}
.loader_2::after {content: '';left: 0;top: 100%;width: 100%;height: 8px;background: rgba(31, 64, 135, 0.2);position: absolute;filter: blur(6px);border-radius: 50%;box-sizing: border-box;animation: animloader 1.5s ease-in-out infinite alternate;}
/* Animaciones */
@keyframes floating {
    0% {transform: translateY(0);}
    100% {transform: translateY(-30px);}
}
@keyframes animloader {
    0% {transform: scale(0.8);opacity: 0.8;}
    100% {transform: scale(1.3);opacity: 0.4;}
}
@keyframes rotation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
/* Responsive */
@media (max-width: 600px) {
    .bowls.x1{flex-direction: column;}
    .bowls.x2{width: 100%;}
    .boxes.convoy_unassigned{min-width: unset;max-width: unset;}
}
/* --- ESTILOS NUEVOS PARA EL DASHBOARD (BOTONES GRANDES) --- */
.dashboard-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 40px;
    overflow-y: auto;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1200px;
}

.module-card {
    background: var(--background_1);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--border_2);
    box-shadow: var(--box_shadow);
    transition: all 0.3s ease;
    height: 200px;
    color: var(--text_1);
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box_shadow_lg);
    border-color: var(--primary);
}

.module-card:hover .module-icon {
    transform: scale(1.1);
    color: var(--primary);
}

.module-icon {
    font-size: 50px;
    color: var(--text_2);
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.module-title {
    font-size: 18px;
    font-weight: 600;
}

.module-desc {
    font-size: 13px;
    color: var(--text_3);
}

/* Ocultar Iframe por defecto */
#iframeContainer {
    width: 100%;
    height: 100%;
    display: none;
}

/* Responsive para los botones */
@media (max-width: 900px) {
    .modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .modules-grid { grid-template-columns: 1fr; }
}