/* =========================================================
   MáximaHub — Date Range
   Componente global de período
   ========================================================= */

.mh-dr-native{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
}

.mh-dr-shell{
    position:relative;
    width:100%;
}

.mh-dr-trigger{
    width:100%;
    height:32px;
    display:flex;
    align-items:center;
    gap:7px;

    padding:0 9px;

    background:#f7f8fa;
    border:1px solid transparent;
    border-radius:5px;

    color:#253044;
    font-size:10px;
    font-family:inherit;

    cursor:pointer;
    text-align:left;

    transition:.15s ease;
}

.mh-dr-trigger:hover{
    background:#f1f4f8;
}

.mh-dr-trigger.is-open{
    background:#fff;
    border-color:#b9d3fa;
    box-shadow:0 0 0 2px rgba(22,119,255,.07);
}

.mh-dr-trigger-empty{
    color:#8793a5;
}

.mh-dr-trigger .mh-dr-side{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mh-dr-trigger .mh-dr-arrow{
    flex:0 0 auto;
    color:#7b8798;
    font-size:13px;
}

.mh-dr-trigger .mh-dr-icon{
    margin-left:auto;
    flex:0 0 auto;
    opacity:.58;
    font-size:13px;
}


/* POPUP */

.mh-dr-popup{
    position:fixed;
    z-index:999999;

    width:720px;
    max-width:calc(100vw - 24px);

    background:#fff;
    border:0;
    border-radius:10px;

    box-shadow:
        0 14px 38px rgba(20,35,60,.16),
        0 2px 8px rgba(20,35,60,.08);

    overflow:hidden;

    font-family:inherit;
    color:#253044;
}

.mh-dr-content{
    display:grid;
    grid-template-columns:145px 1fr;
}


/* ATALHOS */

.mh-dr-shortcuts{
    padding:14px 10px;
    background:#fafbfc;
    border-right:1px solid #eef1f5;
}

.mh-dr-shortcut-title{
    font-size:10px;
    font-weight:700;
    color:#6b7788;
    margin:0 8px 8px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.mh-dr-shortcut{
    display:block;
    width:100%;
    border:0;
    background:transparent;

    padding:8px 9px;
    margin:1px 0;

    border-radius:5px;

    text-align:left;
    font-family:inherit;
    font-size:11px;
    color:#344054;

    cursor:pointer;
}

.mh-dr-shortcut:hover{
    background:#edf4ff;
    color:#1677ff;
}


/* ÁREA PRINCIPAL */

.mh-dr-main{
    padding:14px 16px 12px;
}

.mh-dr-input-row{
    display:grid;
    grid-template-columns:1fr 76px 20px 1fr 76px;
    gap:6px;
    align-items:center;
    margin-bottom:12px;
}

.mh-dr-date-text,
.mh-dr-time{
    height:31px;
    border:1px solid #e1e6ed;
    background:#fff;
    border-radius:5px;

    padding:0 8px;

    font:inherit;
    font-size:10.5px;
    color:#263247;

    outline:none;
}

.mh-dr-date-text:focus,
.mh-dr-time:focus{
    border-color:#9bc3fb;
    box-shadow:0 0 0 2px rgba(22,119,255,.07);
}

.mh-dr-range-arrow{
    text-align:center;
    color:#8c96a6;
    font-size:14px;
}


/* CALENDÁRIOS */

.mh-dr-calendars{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.mh-dr-calendar{
    min-width:0;
}

.mh-dr-month-head{
    height:30px;
    display:grid;
    grid-template-columns:30px 1fr 30px;
    align-items:center;
    margin-bottom:4px;
}

.mh-dr-month-title{
    text-align:center;
    font-size:11px;
    font-weight:700;
    color:#303b4e;
    text-transform:capitalize;
}

.mh-dr-nav{
    width:28px;
    height:28px;

    border:0;
    background:transparent;
    border-radius:50%;

    cursor:pointer;
    color:#667085;
    font-size:18px;
    line-height:1;
}

.mh-dr-nav:hover{
    background:#f1f4f8;
}

.mh-dr-weekdays,
.mh-dr-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
}

.mh-dr-weekday{
    text-align:center;
    font-size:9px;
    font-weight:600;
    color:#8b95a5;
    padding:5px 0;
}

.mh-dr-day{
    height:30px;

    border:0;
    background:transparent;

    border-radius:50%;

    font-family:inherit;
    font-size:10px;
    color:#344054;

    cursor:pointer;
    position:relative;
}

.mh-dr-day:hover:not(.is-empty){
    background:#edf4ff;
    color:#1677ff;
}

.mh-dr-day.is-empty{
    cursor:default;
}

.mh-dr-day.is-today:not(.is-selected){
    color:#1677ff;
    font-weight:700;
}

.mh-dr-day.is-selected{
    background:#1677ff;
    color:white;
    font-weight:700;
}

.mh-dr-day.is-between{
    background:#eef5ff;
    border-radius:0;
}

.mh-dr-day.is-range-start{
    border-radius:50% 0 0 50%;
}

.mh-dr-day.is-range-end{
    border-radius:0 50% 50% 0;
}

.mh-dr-day.is-range-start.is-range-end{
    border-radius:50%;
}


/* RODAPÉ */

.mh-dr-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:13px;
    padding-top:11px;

    border-top:1px solid #eef1f5;
}

.mh-dr-hint{
    font-size:9.5px;
    color:#8b95a5;
}

.mh-dr-actions{
    display:flex;
    gap:6px;
}

.mh-dr-btn{
    height:30px;
    padding:0 13px;

    border-radius:5px;

    font-family:inherit;
    font-size:10.5px;

    cursor:pointer;
}

.mh-dr-clear{
    border:1px solid #dce2e9;
    background:#fff;
    color:#4b5565;
}

.mh-dr-apply{
    border:1px solid #1677ff;
    background:#1677ff;
    color:#fff;
}


/* RESPONSIVO */

@media(max-width:760px){

    .mh-dr-popup{
        width:calc(100vw - 20px);
        max-height:calc(100vh - 20px);
        overflow:auto;
    }

    .mh-dr-content{
        grid-template-columns:1fr;
    }

    .mh-dr-shortcuts{
        border-right:0;
        border-bottom:1px solid #eef1f5;
        display:flex;
        gap:4px;
        overflow:auto;
    }

    .mh-dr-shortcut-title{
        display:none;
    }

    .mh-dr-shortcut{
        width:auto;
        flex:0 0 auto;
        white-space:nowrap;
    }

    .mh-dr-calendars{
        grid-template-columns:1fr;
    }

    .mh-dr-calendar:last-child{
        display:none;
    }

    .mh-dr-input-row{
        grid-template-columns:1fr 72px;
    }

    .mh-dr-range-arrow{
        display:none;
    }
}

/* faixa visual entre data inicial e final */
.mh-dr-day.is-between{
    background:#eaf3ff!important;
    border-radius:0!important;
    color:#245b9c!important;
}

/* início da faixa */
.mh-dr-day.is-range-start{
    background:#1677ff!important;
    color:#fff!important;
    border-radius:50% 0 0 50%!important;
}

/* fim da faixa */
.mh-dr-day.is-range-end{
    background:#1677ff!important;
    color:#fff!important;
    border-radius:0 50% 50% 0!important;
}

/* quando início e fim são o mesmo dia */
.mh-dr-day.is-range-start.is-range-end{
    border-radius:50%!important;
}

/* aproxima visualmente os dias da faixa */
.mh-dr-days{
    column-gap:0!important;
    row-gap:2px!important;
}

/* MáximaHub — cores oficiais do intervalo */
:root{
    --mh-range:#1677ff;
    --mh-range-soft:rgba(22,119,255,.11);
    --mh-range-soft-hover:rgba(22,119,255,.17);
}

/* caminho entre as datas */
.mh-dr-day.is-between{
    background:var(--mh-range-soft)!important;
    color:#245f9f!important;
    border-radius:0!important;
}

/* primeira data */
.mh-dr-day.is-selected.is-range-start{
    background:var(--mh-range)!important;
    color:#fff!important;
    border-radius:16px 0 0 16px!important;
}

/* última data */
.mh-dr-day.is-selected.is-range-end{
    background:var(--mh-range)!important;
    color:#fff!important;
    border-radius:0 16px 16px 0!important;
}

/* somente um dia */
.mh-dr-day.is-selected.is-range-start.is-range-end{
    border-radius:50%!important;
}

/* passagem do mouse pelo caminho */
.mh-dr-day.is-between:hover{
    background:var(--mh-range-soft-hover)!important;
}

/* botão Aplicar acompanha a mesma identidade */
.mh-dr-apply{
    background:var(--mh-range)!important;
    border-color:var(--mh-range)!important;
}


/* =========================================================
   MáximaHub Date Range — RASTRO CONTÍNUO estilo Shopee
   ========================================================= */

/* calendário sem espaços entre os dias */
.mh-dr-days{
    display:grid!important;
    grid-template-columns:repeat(7,1fr)!important;
    column-gap:0!important;
    row-gap:4px!important;
}

/* dia normal */
.mh-dr-day{
    width:100%!important;
    height:30px!important;
    margin:0!important;
    border-radius:0!important;
    position:relative!important;
    z-index:1!important;
}

/* dias que estão dentro do intervalo */
.mh-dr-day.is-between{
    background:#edf5ff!important;
    color:#3972b8!important;
    border-radius:0!important;
}

/* início */
.mh-dr-day.is-selected.is-range-start{
    background:#1677ff!important;
    color:#fff!important;
    border-radius:16px 0 0 16px!important;
    font-weight:700!important;
}

/* fim */
.mh-dr-day.is-selected.is-range-end{
    background:#1677ff!important;
    color:#fff!important;
    border-radius:0 16px 16px 0!important;
    font-weight:700!important;
}

/* mesmo dia */
.mh-dr-day.is-selected.is-range-start.is-range-end{
    border-radius:16px!important;
}

/* hover dentro da faixa não quebra o rastro */
.mh-dr-day.is-between:hover{
    background:#e4f0ff!important;
    border-radius:0!important;
}

/* hover em dia normal */
.mh-dr-day:not(.is-between):not(.is-selected):hover:not(.is-empty){
    background:#f0f6ff!important;
    border-radius:50%!important;
}

/* dias vazios continuam invisíveis */
.mh-dr-day.is-empty{
    background:transparent!important;
}


/* MáximaHub — cores oficiais do intervalo */
:root{
    --mh-range:#1677ff;
    --mh-range-soft:rgba(22,119,255,.11);
    --mh-range-soft-hover:rgba(22,119,255,.17);
}

/* caminho entre as datas */
.mh-dr-day.is-between{
    background:var(--mh-range-soft)!important;
    color:#245f9f!important;
    border-radius:0!important;
}

/* primeira data */
.mh-dr-day.is-selected.is-range-start{
    background:var(--mh-range)!important;
    color:#fff!important;
    border-radius:16px 0 0 16px!important;
}

/* última data */
.mh-dr-day.is-selected.is-range-end{
    background:var(--mh-range)!important;
    color:#fff!important;
    border-radius:0 16px 16px 0!important;
}

/* somente um dia */
.mh-dr-day.is-selected.is-range-start.is-range-end{
    border-radius:50%!important;
}

/* passagem do mouse pelo caminho */
.mh-dr-day.is-between:hover{
    background:var(--mh-range-soft-hover)!important;
}

/* botão Aplicar acompanha a mesma identidade */
.mh-dr-apply{
    background:var(--mh-range)!important;
    border-color:var(--mh-range)!important;
}

/* =========================================================
   CORREÇÃO FINAL — intervalo visível MáximaHub
   ========================================================= */

.mh-dr-popup .mh-dr-days{
    display:grid!important;
    grid-template-columns:repeat(7,1fr)!important;
    gap:0!important;
}

.mh-dr-popup .mh-dr-day{
    width:100%!important;
    height:30px!important;
    margin:0!important;
}

/* CAMINHO ENTRE AS DATAS */
.mh-dr-popup .mh-dr-day.is-between{
    background:#dceeff!important;
    color:#1769aa!important;
    border-radius:0!important;
}

/* DATA INICIAL */
.mh-dr-popup .mh-dr-day.is-selected.is-range-start{
    background:#159bd3!important;
    color:#fff!important;
    border-radius:16px 0 0 16px!important;
}

/* DATA FINAL */
.mh-dr-popup .mh-dr-day.is-selected.is-range-end{
    background:#159bd3!important;
    color:#fff!important;
    border-radius:0 16px 16px 0!important;
}

/* INÍCIO E FIM NO MESMO DIA */
.mh-dr-popup .mh-dr-day.is-selected.is-range-start.is-range-end{
    border-radius:50%!important;
}

/* NÃO DEIXA HOVER APAGAR O RASTRO */
.mh-dr-popup .mh-dr-day.is-between:hover{
    background:#cce7ff!important;
    color:#125c99!important;
}

/* botão aplicar na mesma identidade */
.mh-dr-popup .mh-dr-apply{
    background:#159bd3!important;
    border-color:#159bd3!important;
}

/* hoje sem interferir na seleção */
.mh-dr-popup .mh-dr-day.is-today:not(.is-selected):not(.is-between){
    color:#159bd3!important;
    font-weight:700!important;
}

/* MáximaHub — rastro com contraste maior */
.mh-dr-popup .mh-dr-day.is-between{
    background:#b9e3f5!important;
    color:#075f87!important;
    font-weight:600!important;
    border-radius:0!important;
}

.mh-dr-popup .mh-dr-day.is-selected.is-range-start,
.mh-dr-popup .mh-dr-day.is-selected.is-range-end{
    background:#159bd3!important;
    color:#fff!important;
    font-weight:700!important;
}

.mh-dr-popup .mh-dr-day.is-between:hover{
    background:#9fd8f0!important;
    color:#064f70!important;
}

/* =========================================================
   MáximaHub — acabamento do rastro por semana
   ========================================================= */

/* mantém o rastro forte aprovado */
.mh-dr-popup .mh-dr-day.is-between{
    background:#b9e3f5!important;
    color:#075f87!important;
    font-weight:600!important;
}

/* início e fim fortes */
.mh-dr-popup .mh-dr-day.is-selected.is-range-start,
.mh-dr-popup .mh-dr-day.is-selected.is-range-end{
    background:#159bd3!important;
    color:#fff!important;
    font-weight:700!important;
}

/* suaviza visualmente as extremidades de cada semana */
.mh-dr-popup .mh-dr-days > .mh-dr-day:nth-child(7n+1).is-between{
    border-radius:15px 0 0 15px!important;
}

.mh-dr-popup .mh-dr-days > .mh-dr-day:nth-child(7n).is-between{
    border-radius:0 15px 15px 0!important;
}

/* início */
.mh-dr-popup .mh-dr-day.is-range-start{
    border-radius:15px 0 0 15px!important;
}

/* fim */
.mh-dr-popup .mh-dr-day.is-range-end{
    border-radius:0 15px 15px 0!important;
}

/* um único dia */
.mh-dr-popup .mh-dr-day.is-range-start.is-range-end{
    border-radius:15px!important;
}


/* =========================================================
   MáximaHub — seletor rolável de horário
   ========================================================= */

.mh-time-field{
    display:flex;
    align-items:center;
    width:112px;
    height:32px;
    border:1px solid #dfe4ea;
    border-radius:5px;
    background:#fff;
    overflow:hidden;
}

.mh-time-field .mh-dr-time{
    width:80px!important;
    min-width:0!important;
    height:30px!important;
    border:0!important;
    outline:0!important;
    padding:0 3px!important;
    text-align:center!important;
    font-size:12px!important;
    background:#fff!important;
}

.mh-time-clock{
    width:30px;
    height:30px;
    border:0;
    border-left:1px solid #e7eaee;
    background:#fff;
    cursor:pointer;
    font-size:18px;
    line-height:28px;
    color:#6b7480;
}

.mh-time-clock:hover{
    background:#f2f8fd;
    color:#159bd3;
}


/* POPUP */

.mh-time-picker{
    display:none;
    position:absolute;
    z-index:999999;
    width:166px;
    background:#fff;
    border:1px solid #dfe3e8;
    border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.16);
    overflow:hidden;
    font-family:Arial,sans-serif;
}

.mh-time-display{
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    color:#32373d;
    border-bottom:1px solid #edf0f3;
    background:#fff;
}

.mh-time-columns{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    height:262px;
}

.mh-time-column{
    overflow-y:auto;
    scrollbar-width:thin;
    border-right:1px solid #eceff2;
    padding:80px 4px;
}

.mh-time-column:last-child{
    border-right:0;
}

.mh-time-item{
    display:block;
    width:100%;
    height:29px;
    padding:0;
    margin:0 0 2px 0;
    border:0;
    border-radius:4px;
    background:#fff;
    color:#333;
    font-size:12px;
    cursor:pointer;
}

.mh-time-item:hover{
    background:#f0f7fc;
}

.mh-time-item.is-selected{
    background:#dcefff;
    color:#1f5077;
    font-weight:700;
}


/* rodapé */

.mh-time-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:44px;
    padding:6px 8px;
    border-top:1px solid #edf0f3;
    background:#fff;
}

.mh-time-now{
    border:0;
    background:transparent;
    color:#159bd3;
    font-size:11px;
    cursor:pointer;
}

.mh-time-ok{
    min-width:35px;
    height:25px;
    padding:0 8px;
    border:0;
    border-radius:4px;
    background:#1677ff;
    color:#fff;
    font-size:12px;
    cursor:pointer;
}

.mh-time-ok:hover{
    filter:brightness(.96);
}



/* =========================================================
   MáximaHub — relógio compacto FINAL
   ========================================================= */

.mh-time-field{
    display:flex!important;
    align-items:center!important;
    width:92px!important;
    height:31px!important;
    background:#fff!important;
    border:1px solid #dfe5ec!important;
    border-radius:5px!important;
    overflow:hidden!important;
}

.mh-time-field .mh-dr-time{
    width:63px!important;
    min-width:0!important;
    height:29px!important;
    padding:0 3px!important;
    border:0!important;
    outline:0!important;
    text-align:center!important;
    font-size:11px!important;
    color:#344054!important;
    background:#fff!important;
}

.mh-time-clock{
    width:28px!important;
    height:29px!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid #e8ecf0!important;
    background:#fff!important;
    color:#667085!important;
    font-size:17px!important;
    cursor:pointer!important;
}

.mh-time-clock:hover{
    background:#edf8fd!important;
    color:#159bd3!important;
}


/* POPUP */

.mh-clock-picker{
    display:none;
    position:absolute;
    z-index:1000000;

    width:180px;

    background:#fff;

    border:1px solid #dfe5ec;
    border-radius:7px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.18);

    overflow:hidden;

    font-family:
        Arial,
        sans-serif;
}


.mh-clock-title{
    padding:10px 12px 8px;

    font-size:11px;
    font-weight:700;

    color:#475467;

    text-align:center;

    border-bottom:1px solid #eef1f4;
}


.mh-clock-values{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:11px 10px 5px;
}


.mh-clock-unit{
    width:50px;

    display:flex;
    flex-direction:column;

    align-items:center;
}


.mh-clock-unit small{
    margin-top:4px;

    font-size:9px;

    color:#98a2b3;
}


.mh-clock-arrow{
    width:36px;
    height:23px;

    padding:0;

    border:0;
    border-radius:4px;

    background:#f5f7fa;

    color:#667085;

    cursor:pointer;

    font-size:10px;
}


.mh-clock-arrow:hover{
    background:#e1f3fb;
    color:#159bd3;
}


.mh-clock-unit input{
    width:42px;
    height:32px;

    margin:3px 0;

    padding:0;

    border:1px solid #d9e0e7;
    border-radius:5px;

    outline:0;

    text-align:center;

    font-size:15px;
    font-weight:700;

    color:#344054;

    background:#fff;
}


.mh-clock-unit input:focus{
    border-color:#159bd3;

    box-shadow:
        0 0 0 2px rgba(21,155,211,.10);
}


.mh-clock-colon{
    margin-top:-7px;

    font-size:20px;
    font-weight:700;

    color:#667085;
}


.mh-clock-preview{
    padding:3px 0 10px;

    text-align:center;

    font-size:15px;
    font-weight:700;

    color:#159bd3;
}


.mh-clock-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:7px 9px;

    border-top:1px solid #eef1f4;
}


.mh-clock-now{
    height:27px;

    padding:0 7px;

    border:0;

    background:transparent;

    color:#159bd3;

    font-size:11px;

    cursor:pointer;
}


.mh-clock-now:hover{
    text-decoration:underline;
}


.mh-clock-ok{
    height:27px;

    padding:0 12px;

    border:0;
    border-radius:4px;

    background:#159bd3;

    color:#fff;

    font-size:11px;
    font-weight:700;

    cursor:pointer;
}


.mh-clock-ok:hover{
    filter:brightness(.95);
}


/* desativa visual do seletor rolável anterior */

.mh-time-picker{
    display:none!important;
}