/* ==========================================================
   Responsive Dashboard
========================================================== */
/* ==========================================================
   Sticky Header
========================================================== */
.dt-dashboard-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background:#fff;
    padding:.65rem 1rem;
    border-bottom:1px solid #e5e7eb;
}
/* ==========================================================
   Sticky Toolbar
========================================================== */
.dt-toolbar {
    position: sticky;
    top:0;
    z-index:50;
    background:#fff;
    padding:1rem 1rem;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}
/* ==========================================================
   Sticky Filters
========================================================== */
.dt-filters {
    position: sticky;
    top:105px;
    z-index:40;
    display:flex;
    align-items:center;
    gap:.4rem;
    flex-wrap:wrap;
    background:#fff;
}
/* ==========================================================
   Compact Header
========================================================== */
.dt-dashboard-header h1 {
    margin:0;
    font-size:1.25rem;
    line-height:1.2;
}
.dt-dashboard-header p {
    display:none;
}
/* ==========================================================
   Toolbar
========================================================== */
.dt-toolbar-left {
    flex: 1 0 auto;
}
.dt-toolbar-left,
.dt-toolbar-right {
    display:flex;
    align-items:center;
    gap:.5rem;
}
.dt-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.dt-toolbar-right {
    flex-wrap:wrap;
}
/* Search */
.dt-search {
    height:34px;
    font-size:.85rem;
}
/* ==========================================================
   Filters
========================================================== */
.dt-filter {
    white-space:nowrap;
    font-size:.75rem;
    height:30px;
    padding:0 .75rem;
}
/* ==========================================================
   Cards
========================================================== */
.dt-grid {
    padding-top:.75rem;
    column-gap:.75rem;
}
.dt-card {
    margin-bottom:.75rem;
}
/* ==========================================================
   Tablet
========================================================== */
@media (max-width:1024px) {
    .dt-dashboard {
        padding:10px;
    }
    .dt-filters {
        top:102px;
    }
    .dt-card-title h2 {
        font-size:14px;
    }
    .dt-weather {
        grid-template-columns:1fr;
    }
    .dt-group-header {
        padding:8px;
    }
}
/* ==========================================================
   Mobile
========================================================== */
@media (max-width:600px) {
    .dt-dashboard {
        padding:0;
    }
    .dt-dashboard-header {
        padding:.5rem .75rem;
    }
    .dt-dashboard-header h1 {
        font-size:1rem;
    }
    .dt-toolbar {
        position: sticky;
        top:0;
        z-index:50;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:1rem .5rem;
        background-color: var(--dt-secondary);
    }
    .dt-toolbar-left,
    .dt-toolbar-right {
        width:100%;
    }
    .dt-toolbar-right {
        display: none;
    }
    .dt-search {
        width:100%;
        height: 52px;
    }
    
    /*
       Filtros horizontales
    */
    .dt-filters {
        top:145px;
        overflow-x:auto;
        flex-wrap:wrap;
        padding:.45rem .75rem 0;
        scrollbar-width:none;
    }
    .dt-filters::-webkit-scrollbar {
        display:none;
    }
    .dt-filter {
        flex-shrink:0;
        height:28px;
        padding:0 .65rem;
    }
    .dt-group-header {
        flex-direction:column;
        align-items:flex-start;
    }
    .dt-group-stats {
        width:100%;
        justify-content:flex-start;
    }
    .dt-card {
        border-radius:10px;
    }
    .dt-card-header {
        padding:9px;
    }
    .dt-card-body {
        padding:8px 9px;
    }
    .dt-card-footer {
        padding:7px 9px;
    }
    .dt-grid-groups, .dt-empty, .dt-drawer{
        padding: 8px;
    }
}
/* ==========================================================
   Small mobile
========================================================== */
@media (max-width:380px) {
    .dt-weather {
        grid-template-columns:1fr;
    }
    .dt-card-title {
        flex-direction:column;
        align-items:flex-start;
    }
    .dt-badge {
        margin-top:5px;
    }
    .dt-dashboard-header h1 {
        font-size:.95rem;
    }
   
    .dt-filters {
        top:142px;
    }
}
/* ==========================================================
   Scroll Top
========================================================== */
.dt-scroll-top {
    position:fixed;
    right:20px;
    bottom:20px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#000;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.25s ease;
    z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.dt-scroll-top:hover {
    background:#000;
}
.dt-scroll-top.visible {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
@media(max-width:600px){
    .dt-scroll-top {
        right:14px;
        bottom:14px;
        width:38px;
        height:38px;
        font-size:20px;
    }
}