/* CARGODEC_OPERACION_CLEAN_V2 */

/* ===============================================
   TARJETA
   =============================================== */

html body #dash .vehicle-grid{
    display:grid !important;
    grid-template-columns:
        repeat(auto-fill,minmax(760px,1fr)) !important;
    gap:16px !important;
    width:100% !important;
    align-items:start !important;
}

html body #dash .opTripCardV2{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}


/* ===============================================
   CABECERA CAMION
   =============================================== */

html body #dash .opTripCardV2 .proVehHead{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;

    width:100% !important;
    min-width:0 !important;

    overflow:visible !important;
}

html body #dash .opTripCardV2 .proVehHead .vehName{
    flex:1 1 auto !important;
    min-width:0 !important;
}


/* R1 */

html body #dash .opTripCardV2
.proVehHead .cargoR1TarjetaBtn,

html body #dash .opTripCardV2
.proVehHead .cargoR1CardButton{

    flex:0 0 auto !important;
    margin-left:auto !important;
}


/* ===============================================
   DODA ARRIBA
   =============================================== */

html body #dash .opTripCardV2 .cargoDodaCleanBtn{

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 42px !important;

    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    height:34px !important;
    min-height:34px !important;

    padding:0 !important;
    margin:0 0 0 5px !important;

    border:1px solid #c9d8ee !important;
    border-radius:9px !important;

    background:#fff !important;
    color:#0b63d1 !important;

    cursor:pointer !important;
    box-shadow:none !important;
}

html body #dash .opTripCardV2 .cargoDodaCleanBtn:hover{
    background:#edf5ff !important;
    border-color:#7eafea !important;
}

html body #dash .opTripCardV2 .cargoDodaCleanBtn svg{

    display:block !important;

    width:19px !important;
    height:19px !important;

    fill:none !important;
    stroke:currentColor !important;

    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}


/* ===============================================
   BARRA INFERIOR
   =============================================== */

html body #dash .opTripCardV2
.vehicleActions.proActions.opFlatActions{

    display:grid !important;

    grid-template-columns:
        1.08fr
        1.15fr
        1.13fr
        1.18fr
        .96fr !important;

    grid-template-rows:auto auto !important;

    gap:0 !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 -10px !important;

    padding:
        8px
        8px
        0 !important;

    border-top:
        1px solid #e5eaf1 !important;

    align-items:center !important;
}


/* DODA ORIGINAL:
   queda en DOM para compatibilidad,
   pero CLEAN lo sube a icono */

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="subirDodaViaje"]{

    display:none !important;
    position:absolute !important;

    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;

    height:0 !important;
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    overflow:hidden !important;
}


/* No dejar impresora DODA suelta */

html body #dash .opTripCardV2
.vehicleActions
.printDodaViajeBtn{

    display:none !important;
    position:absolute !important;

    width:0 !important;
    min-width:0 !important;

    height:0 !important;
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;
}


/* POSICIONES */

html body #dash .opTripCardV2
.vehicleActions
> a[href*="/api/carta-porte/"]{
    grid-column:1 !important;
    grid-row:1 !important;
}

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="copiarCuadroResumen"]{
    grid-column:2 !important;
    grid-row:1 !important;
}

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="agregarLotesViaje"]{
    grid-column:3 !important;
    grid-row:1 !important;
}

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="eliminarViaje"]{

    display:flex !important;
    position:static !important;

    grid-column:4 !important;
    grid-row:1 !important;
}

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="marcarViajeLiberado"]{

    display:flex !important;
    position:static !important;

    grid-column:5 !important;
    grid-row:1 !important;
}


/* RESET DE LOS CINCO VISIBLES */

html body #dash .opTripCardV2
.vehicleActions
> a[href*="/api/carta-porte/"],

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="copiarCuadroResumen"],

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="agregarLotesViaje"],

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="eliminarViaje"],

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="marcarViajeLiberado"]{

    display:flex !important;
    position:static !important;

    align-items:center !important;
    justify-content:center !important;

    flex:initial !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:36px !important;
    min-height:36px !important;

    margin:0 !important;
    padding:0 4px !important;

    border:0 !important;
    border-right:1px solid #e5eaf1 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;

    white-space:nowrap !important;

    overflow:visible !important;
    text-overflow:clip !important;
}


/* ELIMINAR VIAJE */

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="eliminarViaje"]{

    color:#dc2626 !important;
}


/* LIBERADO */

html body #dash .opTripCardV2
.vehicleActions
> button[onclick*="marcarViajeLiberado"]{

    border-right:0 !important;
}


/* ESTADO DODA */

html body #dash .opTripCardV2
.vehicleActions
> .subtle{

    display:block !important;

    grid-column:1 / 6 !important;
    grid-row:2 !important;

    width:100% !important;

    margin:5px 0 0 !important;
    padding:0 !important;

    text-align:center !important;

    font-size:9px !important;
    line-height:1.15 !important;

    overflow:visible !important;
    white-space:normal !important;
}


/* MOVIL */

@media(max-width:900px){

    html body #dash .vehicle-grid{
        grid-template-columns:1fr !important;
    }

    html body #dash .opTripCardV2
    .vehicleActions.proActions.opFlatActions{

        grid-template-columns:
            1fr
            1fr !important;
    }

    html body #dash .opTripCardV2
    .vehicleActions
    > .subtle{

        grid-column:1 / 3 !important;
    }
}