/* ==========================================================================
   APLICATIVO DO MOTORISTA — folha de estilo
   ==========================================================================
   Ate 17/09/2026 este CSS vivia dentro de public/motorista-mobile.js, injetado
   na pagina em 13 blocos de <style>. Foi movido para ca SEM mudar a aparencia.

   Duas coisas precisaram de cuidado, e as duas foram medidas no app de hoje:

   1. ORDEM. Os blocos nao entravam na pagina na ordem em que apareciam no
      arquivo: o tema premium e o tema moderno entravam ANTES do estilo base.
      Aqui eles estao na ordem real de entrada, para a cascata nao mudar.

   2. QUANDO. Cinco blocos estao sempre presentes. Os outros oito so entravam
      quando a tela deles abria — e, antes disso, nao valiam. Se passassem a
      valer desde o inicio, mudariam telas onde nunca estiveram (o fundo da
      lista ficava transparente e o rodape ganhava 104px). Por isso cada um
      deles esta preso a uma classe wc-mm-css-*, que a mesma funcao de antes
      liga na mesma hora de antes.

   Nenhuma regra dependia de valor calculado pelo JavaScript (zero
   interpolacoes). Os comentarios guardam o id antigo de cada bloco.
   ========================================================================== */


/* --------------------------------------------------------------------------
   wcMMQuickFlowFinalV2Style  ·  (entrava junto com o arquivo)
   sempre presente — vem ANTES do tema premium, como acontecia na pagina
   -------------------------------------------------------------------------- */
    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.atual{
      display:block !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      overflow:visible !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.atual>summary{
      display:none !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.atual>.wc-pop-corpo{
      display:block !important;
      padding:0 !important;
      border-top:0 !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.atual>.wc-pop-corpo>.wc-mm-info:first-child{
      display:none !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.bloqueada,
    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.ok:not(.atual){
      display:none !important;
    }

/* --------------------------------------------------------------------------
   wcMMQuickFlowV1Style  ·  (entrava junto com o arquivo)
   sempre presente — vem ANTES do tema premium, como acontecia na pagina
   -------------------------------------------------------------------------- */
    body.wc-motorista-mobile #wcMMEtapasModal .wc-pop-etapa.atual{
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      overflow:visible !important;
    }
    body.wc-motorista-mobile #wcMMEtapasModal .wc-pop-etapa.atual>summary{
      display:none !important;
    }
    body.wc-motorista-mobile #wcMMEtapasModal .wc-pop-etapa.atual>.wc-pop-corpo{
      padding:0 !important;
      border-top:0 !important;
    }
    body.wc-motorista-mobile #wcMMEtapasModal .wc-pop-etapa.atual>.wc-pop-corpo>.wc-mm-info:first-child{
      display:none !important;
    }
    body.wc-motorista-mobile #wcMMEtapasModal .wc-pop-etapa.bloqueada,
    body.wc-motorista-mobile #wcMMEtapasModal .wc-pop-etapa.ok:not(.atual){
      display:none !important;
    }

/* --------------------------------------------------------------------------
   wcMMTripFullscreenStyle  ·  (entrava junto com o arquivo)
   sempre presente — vem ANTES do tema premium, como acontecia na pagina
   -------------------------------------------------------------------------- */
    @media all{
      @media(display-mode:standalone){
        body.wc-motorista-mobile.wc-env-homologation{
          --wc-environment-banner-height:calc(40px + env(safe-area-inset-top));
        }

        body.wc-motorista-mobile .wc-environment-banner{
          padding-top:calc(8px + env(safe-area-inset-top)) !important;
        }
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen{
        inset:0 !important;
        width:100vw !important;
        height:100dvh !important;
        padding:0 !important;
        align-items:stretch !important;
        justify-content:stretch !important;
        overflow:hidden !important;
        background:#f2f6fb !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox{
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        max-height:none !important;
        margin:0 !important;
        padding:0 14px calc(18px + env(safe-area-inset-bottom)) !important;
        border:0 !important;
        border-radius:0 !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        background:
          radial-gradient(circle at 100% 0,rgba(11,111,232,.10),transparent 28%),
          linear-gradient(180deg,#eef5fd 0,#f7f9fc 180px,#f4f7fb 100%) !important;
        box-shadow:none !important;
        overscroll-behavior:contain;
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox > div:first-child{
        min-height:56px !important;
        margin:0 -14px 10px !important;
        padding:calc(8px + env(safe-area-inset-top)) 12px 8px !important;
        display:grid !important;
        grid-template-columns:38px minmax(0,1fr) 38px;
        gap:6px;
        align-items:center !important;
        background:
          radial-gradient(circle at 90% 0,rgba(255,255,255,.17),transparent 30%),
          linear-gradient(135deg,#0b2f5b,#0b6fe8) !important;
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen #mt{
        grid-column:2;
        text-align:center;
        font-size:15px !important;
        line-height:1.2 !important;
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox > div:first-child::before{
        content:"←";
        grid-column:1;
        grid-row:1;
        width:36px;
        height:36px;
        display:grid;
        place-items:center;
        border:1px solid rgba(255,255,255,.22);
        border-radius:11px;
        color:#fff;
        background:rgba(255,255,255,.11);
        font-size:21px;
        line-height:1;
        pointer-events:none;
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox > div:first-child > button{
        position:absolute !important;
        left:12px !important;
        top:calc(8px + env(safe-area-inset-top)) !important;
        z-index:2;
        opacity:0 !important;
      }

      body.wc-motorista-mobile.wc-env-homologation #modal.wc-mm-trip-screen .modalbox > div:first-child{
        padding-top:8px !important;
      }

      body.wc-motorista-mobile.wc-env-homologation #modal.wc-mm-trip-screen .modalbox > div:first-child > button{
        top:8px !important;
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen #mb{
        width:100%;
        max-width:760px;
        margin:0 auto;
      }

      body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal{
        padding-bottom:18px !important;
      }

      @media(min-width:780px){
        body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox > div:first-child{
          padding-left:max(14px,calc((100vw - 760px)/2)) !important;
          padding-right:max(14px,calc((100vw - 760px)/2)) !important;
        }

        body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox > div:first-child > button{
          left:max(14px,calc((100vw - 760px)/2)) !important;
        }
      }
    }

/* --------------------------------------------------------------------------
   wcMMTripCompactV2Style  ·  (entrava junto com o arquivo)
   sempre presente — vem ANTES do tema premium, como acontecia na pagina
   -------------------------------------------------------------------------- */
    html.wc-mm-trip-lock,
    body.wc-mm-trip-lock{
      width:100% !important;
      height:100% !important;
      overflow:hidden !important;
      overscroll-behavior:none;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen{
      position:fixed !important;
      overflow:hidden !important;
    }

    body.wc-motorista-mobile.wc-env-homologation #modal.wc-mm-trip-screen{
      top:var(--wc-environment-banner-height,40px) !important;
      bottom:0 !important;
      height:calc(100dvh - var(--wc-environment-banner-height,40px)) !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox{
      height:100% !important;
      min-height:0 !important;
      overflow-y:auto !important;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen .modalbox::-webkit-scrollbar{
      display:none;
      width:0;
      height:0;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal{
      gap:9px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-resumo{
      padding:11px 12px !important;
      border-radius:15px !important;
      box-shadow:0 8px 20px rgba(11,91,182,.17) !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-resumo::after{
      right:-38px;
      bottom:-48px;
      width:96px;
      height:96px;
      border-width:14px;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-numero{
      font-size:16px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-status{
      padding:4px 8px !important;
      font-size:8px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-cliente{
      margin-top:5px !important;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:10px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-rota{
      grid-template-columns:7px minmax(0,1fr) 7px minmax(0,1fr) !important;
      gap:5px !important;
      align-items:start;
      margin-top:7px !important;
      padding:7px 8px !important;
      border-radius:10px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-rota-dot{
      width:6px !important;
      height:6px !important;
      margin-top:3px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-rota-texto{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:9px !important;
      line-height:1.2 !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-rota-texto strong{
      margin-bottom:1px !important;
      font-size:8px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-meta{
      margin-top:7px !important;
      padding-top:6px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-meta span{
      font-size:7px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-meta strong{
      margin-top:1px !important;
      font-size:9px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-progress{
      padding:9px 5px 6px !important;
      border-radius:14px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-progress::before{
      top:24px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-step-num{
      width:30px !important;
      height:30px !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.bloqueada{
      opacity:.58;
      box-shadow:none !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.bloqueada summary{
      cursor:default !important;
      pointer-events:none;
      background:#f4f6f9 !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen #wcMMEtapasModal .wc-pop-etapa.bloqueada .wc-pop-etapa-sub{
      color:#8793a5 !important;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen [data-wc-photo-slot]:empty{
      display:none;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen [data-wc-photo-slot]:not(:empty),
    body.wc-motorista-mobile #modal.wc-mm-trip-screen [data-wc-proof-step]:not([hidden]){
      display:block;
      margin-top:7px;
    }

    body.wc-motorista-mobile #modal.wc-mm-trip-screen [data-wc-proof-step][hidden]{
      display:none !important;
    }
/* --------------------------------------------------------------------------
   wcMMInternalPremiumStyle  ·  (entrava junto com o arquivo)
   sempre presente
   -------------------------------------------------------------------------- */
    @media all{
      body.wc-motorista-mobile #modal{
        padding:8px !important;
        background:rgba(5,22,42,.64) !important;
        backdrop-filter:blur(7px);
        -webkit-backdrop-filter:blur(7px);
      }

      body.wc-motorista-mobile #modal .modalbox{
        width:min(96vw,540px) !important;
        max-width:540px !important;
        max-height:94vh !important;
        padding:0 14px 16px !important;
        border:1px solid rgba(255,255,255,.72) !important;
        border-radius:24px !important;
        overflow-y:auto !important;
        background:
          linear-gradient(180deg,#eef5fd 0,#f7f9fc 150px,#f6f8fb 100%) !important;
        box-shadow:0 30px 80px rgba(4,21,40,.32) !important;
      }

      body.wc-motorista-mobile #modal .modalbox > div:first-child{
        position:sticky;
        top:0;
        z-index:80;
        min-height:70px;
        margin:0 -14px 14px;
        padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
        align-items:center !important;
        color:#fff;
        background:
          radial-gradient(circle at 88% 0,rgba(255,255,255,.18),transparent 30%),
          linear-gradient(135deg,#0b2f5b,#0b6fe8) !important;
        box-shadow:0 8px 22px rgba(11,47,91,.17);
      }

      body.wc-motorista-mobile #modal #mt{
        margin:0 !important;
        color:#fff !important;
        font-size:17px !important;
        font-weight:900 !important;
        letter-spacing:-.2px;
      }

      body.wc-motorista-mobile #modal .modalbox > div:first-child > button{
        width:40px !important;
        height:40px !important;
        min-width:40px;
        margin:0 !important;
        padding:0 !important;
        border:1px solid rgba(255,255,255,.22) !important;
        border-radius:13px !important;
        color:#fff !important;
        background:rgba(255,255,255,.11) !important;
        font-size:0 !important;
      }

      body.wc-motorista-mobile #modal .modalbox > div:first-child > button::before{
        content:"×";
        font-size:25px;
        line-height:1;
      }

      #wcMMEtapasModal{
        gap:12px !important;
      }

      #wcMMEtapasModal .wc-pop-resumo{
        position:relative;
        padding:17px !important;
        border:0 !important;
        border-radius:18px !important;
        overflow:hidden;
        color:#fff !important;
        background:
          radial-gradient(circle at 94% 8%,rgba(255,255,255,.18),transparent 31%),
          linear-gradient(145deg,#0a3768,#0b6fe8) !important;
        box-shadow:0 12px 27px rgba(11,91,182,.22) !important;
      }

      #wcMMEtapasModal .wc-pop-resumo::after{
        content:"";
        position:absolute;
        right:-25px;
        bottom:-36px;
        width:110px;
        height:110px;
        border:18px solid rgba(255,255,255,.06);
        border-radius:50%;
        pointer-events:none;
      }

      #wcMMEtapasModal .wc-pop-numero{
        color:#fff !important;
        font-size:20px !important;
        letter-spacing:-.4px;
      }

      #wcMMEtapasModal .wc-pop-status{
        padding:6px 10px !important;
        border:1px solid rgba(255,255,255,.20);
        border-radius:999px !important;
        color:#fff !important;
        background:rgba(255,255,255,.14) !important;
        backdrop-filter:blur(8px);
      }

      #wcMMEtapasModal .wc-pop-cliente,
      #wcMMEtapasModal .wc-pop-rota-texto,
      #wcMMEtapasModal .wc-pop-meta strong{
        color:rgba(255,255,255,.92) !important;
      }

      #wcMMEtapasModal .wc-pop-cliente{
        margin-top:9px !important;
        font-size:12px !important;
      }

      #wcMMEtapasModal .wc-pop-rota{
        margin-top:13px !important;
        padding:10px;
        border-radius:12px;
        background:rgba(2,28,57,.18);
      }

      #wcMMEtapasModal .wc-pop-rota-texto strong,
      #wcMMEtapasModal .wc-pop-meta span{
        color:rgba(255,255,255,.62) !important;
      }

      #wcMMEtapasModal .wc-pop-rota-dot{
        background:#7cc4ff !important;
        box-shadow:0 0 0 3px rgba(124,196,255,.14);
      }

      #wcMMEtapasModal .wc-pop-rota-dot.destino{
        background:#62e29c !important;
      }

      #wcMMEtapasModal .wc-pop-meta{
        border-color:rgba(255,255,255,.17) !important;
      }

      #wcMMEtapasModal .wc-pop-progress{
        padding:13px 6px 9px !important;
        border:1px solid #d7e3ef !important;
        border-radius:16px !important;
        background:rgba(255,255,255,.95) !important;
        box-shadow:0 8px 22px rgba(11,47,91,.07);
      }

      #wcMMEtapasModal .wc-pop-progress::before{
        top:28px !important;
        height:3px !important;
        border-radius:999px;
        background:#dfe8f1 !important;
      }

      #wcMMEtapasModal .wc-pop-step{
        gap:7px !important;
        font-size:9px !important;
      }

      #wcMMEtapasModal .wc-pop-step-num{
        width:34px !important;
        height:34px !important;
        border-width:2px !important;
        font-size:11px !important;
        box-shadow:0 3px 9px rgba(16,33,61,.06);
      }

      #wcMMEtapasModal .wc-pop-step.atual .wc-pop-step-num{
        background:linear-gradient(145deg,#075fca,#2188f4) !important;
        box-shadow:0 0 0 5px #e8f3ff,0 7px 15px rgba(11,111,232,.20) !important;
      }

      #wcMMEtapasModal .wc-pop-step.ok .wc-pop-step-num{
        border-color:#16a765 !important;
        background:linear-gradient(145deg,#119251,#24bd73) !important;
        box-shadow:0 5px 12px rgba(22,167,101,.18);
      }

      #wcMMEtapasModal .wc-pop-etapa,
      body.wc-motorista-mobile .wc-mm-etapa{
        border:1px solid #d9e4ef !important;
        border-radius:16px !important;
        background:rgba(255,255,255,.97) !important;
        box-shadow:0 7px 20px rgba(11,47,91,.055);
      }

      #wcMMEtapasModal .wc-pop-etapa[open],
      body.wc-motorista-mobile .wc-mm-etapa[open]{
        border-color:#a9cff8 !important;
        box-shadow:0 10px 26px rgba(11,111,232,.10) !important;
      }

      #wcMMEtapasModal .wc-pop-etapa summary,
      body.wc-motorista-mobile .wc-mm-etapa summary{
        min-height:62px;
        padding:13px 14px !important;
      }

      #wcMMEtapasModal .wc-pop-etapa-icone,
      body.wc-motorista-mobile .wc-mm-etapa-icone{
        width:36px !important;
        height:36px !important;
        border-radius:11px !important;
        color:#0b6fe8 !important;
        background:linear-gradient(145deg,#e7f2ff,#f5f9ff) !important;
        box-shadow:inset 0 0 0 1px rgba(11,111,232,.08);
      }

      #wcMMEtapasModal .wc-pop-etapa.ok .wc-pop-etapa-icone,
      body.wc-motorista-mobile .wc-mm-etapa-ok .wc-mm-etapa-icone{
        color:#087443 !important;
        background:#e7f8ef !important;
      }

      #wcMMEtapasModal .wc-pop-etapa-corpo,
      body.wc-motorista-mobile .wc-mm-etapa-corpo{
        padding:15px !important;
        border-color:#e8eef5 !important;
        background:linear-gradient(180deg,#fbfdff,#fff) !important;
      }

      body.wc-motorista-mobile .wc-mm-acao{
        min-height:48px !important;
        padding:13px 15px !important;
        border-radius:13px !important;
        font-size:13px !important;
        font-weight:900 !important;
        letter-spacing:.05px;
        box-shadow:none;
        transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
      }

      body.wc-motorista-mobile .wc-mm-acao:active{
        transform:scale(.98);
      }

      body.wc-motorista-mobile .wc-mm-acao-primary{
        border:0 !important;
        color:#fff !important;
        background:linear-gradient(135deg,#075dbf,#0b7bf4) !important;
        box-shadow:0 8px 18px rgba(11,111,232,.21) !important;
      }

      body.wc-motorista-mobile .wc-mm-acao-green{
        border:0 !important;
        color:#fff !important;
        background:linear-gradient(135deg,#0d8748,#18b66c) !important;
        box-shadow:0 8px 18px rgba(22,167,101,.20) !important;
      }

      body.wc-motorista-mobile .wc-mm-acao-light{
        border:1px solid #bcd8f5 !important;
        color:#075fbf !important;
        background:#eff7ff !important;
      }

      body.wc-motorista-mobile .wc-mm-acao:disabled{
        color:#97a3b3 !important;
        background:#e9edf2 !important;
        box-shadow:none !important;
      }

      #wcMMEtapasModal .wc-pop-checklist{
        padding:13px !important;
        border:1px solid #d8e4ef;
        border-radius:15px;
        background:#f7faff;
      }

      #wcMMEtapasModal .wc-pop-check-head{
        margin-bottom:10px;
        padding-bottom:10px;
        border-bottom:1px solid #e4ebf3;
      }

      #wcMMEtapasModal .wc-pop-check-item{
        min-height:57px;
        margin-top:8px;
        padding:10px !important;
        border:1px solid #dce5ef !important;
        border-radius:12px !important;
        background:#fff !important;
      }

      #wcMMEtapasModal .wc-pop-check-item.done{
        border-color:#b8e6cd !important;
        background:#f2fbf6 !important;
      }

      #wcMMEtapasModal .wc-pop-check-circle{
        width:31px !important;
        height:31px !important;
        border-radius:10px !important;
      }

      body.wc-motorista-mobile .wc-mm-foto-box{
        padding:14px !important;
        border:1px dashed #aac7e5 !important;
        border-radius:15px !important;
        background:linear-gradient(145deg,#f1f7ff,#fbfdff) !important;
      }

      body.wc-motorista-mobile #evidencePreview,
      body.wc-motorista-mobile #proofImagePreview{
        width:76px !important;
        max-width:76px !important;
        min-height:0 !important;
        margin:8px 0 2px !important;
        display:block !important;
        overflow:hidden !important;
        border-radius:10px !important;
      }

      body.wc-motorista-mobile #evidencePreview:has(img),
      body.wc-motorista-mobile #proofImagePreview:has(img){
        height:76px !important;
        border:2px solid #86d5aa !important;
        box-shadow:0 3px 10px rgba(16,185,129,.14) !important;
      }

      body.wc-motorista-mobile #evidencePreview img,
      body.wc-motorista-mobile #proofImagePreview img{
        display:block !important;
        width:76px !important;
        height:76px !important;
        max-width:76px !important;
        max-height:76px !important;
        object-fit:cover !important;
        border-radius:8px !important;
      }

      body.wc-motorista-mobile .wc-mm-evidencia-card{
        padding:8px !important;
      }

      body.wc-motorista-mobile .wc-mm-evidencia-img{
        width:64px !important;
        height:64px !important;
      }

      body.wc-motorista-mobile .wc-mm-evidencia-img img{
        width:64px !important;
        height:64px !important;
        max-height:64px !important;
        object-fit:cover !important;
      }

      body.wc-motorista-mobile .wc-mm-foto-box input[type=file],
      #wcMMEtapasModal input:not([type=file]),
      #wcMMEtapasModal select,
      #wcMMEtapasModal textarea{
        min-height:48px !important;
        border:1px solid #cfdce9 !important;
        border-radius:12px !important;
        background:#fff !important;
        font-size:13px !important;
        box-shadow:inset 0 1px 2px rgba(16,33,61,.025);
      }

      #wcMMEtapasModal input:focus,
      #wcMMEtapasModal select:focus,
      #wcMMEtapasModal textarea:focus{
        border-color:#3991ee !important;
        box-shadow:0 0 0 4px rgba(11,111,232,.11) !important;
        outline:0 !important;
      }

      #wcMMEtapasModal .wc-mm-nf-resumo{
        display:grid !important;
        grid-template-columns:1fr;
        gap:4px !important;
        padding:12px 13px !important;
        border:1px solid #cfe2f7;
        border-radius:12px !important;
        color:#174a7c !important;
        background:#edf6ff !important;
      }

      #wcMMEtapasModal .wc-mm-nf-resumo strong{
        font-size:12px;
      }

      #wcMMEtapasModal .wc-mm-nf-resumo.wc-mm-nf-pendente{
        background:#fff7ed !important;
        border-color:#fdba74 !important;
      }

      #wcMMEtapasModal .wc-mm-nf-resumo.wc-mm-nf-completo{
        background:#ecfdf3 !important;
        border-color:#86efac !important;
      }

      #wcMMEtapasModal .wc-mm-nf-resumo.wc-mm-nf-alerta{
        box-shadow:inset 4px 0 #dc2626;
      }

      #wcMMEtapasModal .wc-mm-nf-contador{
        display:flex;
        align-items:center;
        min-height:24px;
        padding:4px 8px;
        border-radius:999px;
        font-size:10px;
        font-weight:800;
      }

      #wcMMEtapasModal .wc-mm-nf-contador.ok{
        color:#047857 !important;
        background:#d1fae5;
      }

      #wcMMEtapasModal .wc-mm-nf-contador.pendente{
        color:#9a3412 !important;
        background:#ffedd5;
      }

      #wcMMEtapasModal .wc-mm-nf-contador.alerta{
        color:#b42318 !important;
        background:#fee2e2;
      }

      #wcMMEtapasModal .wc-mm-nf-leitor{
        padding:13px !important;
        border:1px solid #d7e3ef !important;
        border-radius:14px !important;
        background:#fff !important;
        box-shadow:0 6px 18px rgba(11,47,91,.05);
      }

      #wcMMEtapasModal .wc-mm-nf-botoes{
        gap:7px !important;
      }

      #wcMMEtapasModal .wc-mm-nf-item{
        min-height:61px;
        padding:11px !important;
        border-radius:12px !important;
        box-shadow:0 4px 12px rgba(11,47,91,.04);
      }

      #wcMMEtapasModal .wc-mm-nf-check{
        width:30px !important;
        height:30px !important;
        border-radius:10px !important;
      }

      .wc-v2-saldo,
      .wc-des-hero{
        border:0 !important;
        border-radius:18px !important;
        background:
          radial-gradient(circle at 92% 8%,rgba(255,255,255,.20),transparent 32%),
          linear-gradient(145deg,#0a3768,#0b6fe8) !important;
        box-shadow:0 13px 29px rgba(11,91,182,.21) !important;
      }

      .wc-v2-kpi,
      .wc-v2-box,
      .wc-des-kpi,
      .wc-des-statusbox,
      .wc-des-trip,
      .wc-dp-kpi,
      .wc-dp-chart,
      .wc-dp-geral{
        border:1px solid #d8e4ef !important;
        border-radius:15px !important;
        background:linear-gradient(180deg,#fff,#fbfdff) !important;
        box-shadow:0 8px 22px rgba(11,47,91,.065) !important;
      }

      .wc-v2-kpi-value,
      .wc-dp-kpi-value{
        color:#0b2f5b !important;
        font-weight:950 !important;
      }

      .wc-v2-extrato{
        min-height:48px !important;
        border-radius:13px !important;
        color:#075fbf !important;
        background:#eef6ff !important;
      }

      #wcMMDriverInvoice .head{
        padding:16px !important;
        border:0 !important;
        border-radius:16px !important;
        color:#fff !important;
        background:linear-gradient(135deg,#0b2f5b,#0b6fe8) !important;
        box-shadow:0 9px 20px rgba(11,91,182,.18);
      }

      #wcMMDriverInvoice .head span,
      #wcMMDriverInvoice .head .status{
        color:rgba(255,255,255,.78) !important;
      }

      #wcMMDriverInvoice .total{
        padding:12px !important;
        border-radius:13px !important;
        box-shadow:0 5px 15px rgba(11,47,91,.055);
      }

      @media(max-width:380px){
        body.wc-motorista-mobile #modal .modalbox{
          width:98vw !important;
          max-height:96vh !important;
          border-radius:20px !important;
        }

        #wcMMEtapasModal .wc-pop-resumo{
          padding:14px !important;
        }
      }
    }

/* --------------------------------------------------------------------------
   wcMMModernTmsStyle  ·  instalarTemaModerno
   sempre presente
   -------------------------------------------------------------------------- */
      @media all{
        :root{
          --wc-app-primary:#0b6fe8;
          --wc-app-primary-dark:#0758bb;
          --wc-app-navy:#0b2f5b;
          --wc-app-ink:#10213d;
          --wc-app-muted:#667085;
          --wc-app-line:#dce5f0;
          --wc-app-success:#16a765;
          --wc-app-warning:#e58a00;
          --wc-app-surface:#ffffff;
          --wc-app-bg:#f2f6fb;
          --wc-app-shadow:0 10px 30px rgba(11,47,91,.09);
        }

        body.wc-motorista-mobile{
          background:
            radial-gradient(circle at 100% 0,rgba(11,111,232,.11),transparent 30%),
            linear-gradient(180deg,#eef5fd 0,#f6f8fb 230px,#f3f6fa 100%) !important;
        }

        body.wc-motorista-mobile #wcMotoristaMobile{
          background:transparent !important;
          color:var(--wc-app-ink) !important;
          padding:0 15px calc(104px + env(safe-area-inset-bottom)) !important;
        }

        .wc-ap-top,
        .wc-real-top,
        .wc-val-top,
        .wc-des-top{
          min-height:88px !important;
          height:auto !important;
          margin:0 -15px !important;
          padding:calc(12px + env(safe-area-inset-top)) 15px 17px !important;
          border:0 !important;
          border-radius:0 0 24px 24px !important;
          color:#fff !important;
          background:
            radial-gradient(circle at 88% 5%,rgba(255,255,255,.18),transparent 28%),
            linear-gradient(135deg,var(--wc-app-navy),#0b5eb8 58%,var(--wc-app-primary)) !important;
          box-shadow:0 12px 28px rgba(11,47,91,.18) !important;
        }

        .wc-ap-title,
        .wc-real-title,
        .wc-val-title,
        .wc-des-title{
          color:#fff !important;
          font-size:18px !important;
          font-weight:900 !important;
          letter-spacing:-.25px;
          line-height:1.15;
        }

        .wc-mm-modern-subtitle{
          display:block;
          margin-top:5px;
          color:rgba(255,255,255,.74);
          font-size:10px;
          font-weight:650;
          letter-spacing:.1px;
        }

        .wc-mm-modern-brand{
          display:flex;
          align-items:center;
          justify-content:center;
          gap:8px;
          min-width:0;
        }

        .wc-mm-modern-brand img{
          width:44px;
          height:36px;
          object-fit:contain;
          filter:drop-shadow(0 3px 7px rgba(0,0,0,.16));
        }

        .wc-mm-modern-brand-text{
          display:block;
          min-width:0;
          text-align:left;
        }

        .wc-mm-modern-brand-text strong{
          display:block;
          color:#fff;
          font-size:17px;
          font-weight:950;
          letter-spacing:.15px;
          line-height:1;
        }

        .wc-mm-modern-brand-text span{
          display:block;
          margin-top:4px;
          color:rgba(255,255,255,.76);
          font-size:9px;
          font-weight:750;
          letter-spacing:.8px;
          text-transform:uppercase;
        }

        .wc-mm-modern-hero{
          position:relative;
          margin-top:15px;
          padding:16px;
          border:1px solid rgba(203,220,238,.95);
          border-radius:18px;
          overflow:hidden;
          color:var(--wc-app-ink);
          background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,255,.96));
          box-shadow:0 12px 28px rgba(11,47,91,.09);
        }

        .wc-mm-modern-hero::after{
          content:"";
          position:absolute;
          width:115px;
          height:115px;
          right:-42px;
          top:-48px;
          border-radius:50%;
          background:radial-gradient(circle,rgba(11,111,232,.16),rgba(11,111,232,0) 69%);
          pointer-events:none;
        }

        .wc-mm-modern-hero-head{
          display:flex;
          justify-content:space-between;
          align-items:center;
          gap:12px;
        }

        .wc-mm-modern-hero-label{
          color:#667085;
          font-size:10px;
          font-weight:850;
          letter-spacing:.65px;
          text-transform:uppercase;
        }

        .wc-mm-modern-online{
          display:inline-flex;
          align-items:center;
          gap:5px;
          padding:5px 8px;
          border-radius:999px;
          color:#087443;
          background:#e8f8ef;
          font-size:9px;
          font-weight:850;
        }

        .wc-mm-modern-online::before{
          content:"";
          width:6px;
          height:6px;
          border-radius:50%;
          background:#18b66c;
          box-shadow:0 0 0 3px rgba(24,182,108,.12);
        }

        .wc-mm-modern-hero-main{
          display:grid;
          grid-template-columns:minmax(0,1fr) 48px;
          align-items:center;
          gap:12px;
          margin-top:12px;
        }

        .wc-mm-modern-hero-main strong{
          display:block;
          color:var(--wc-app-navy);
          font-size:25px;
          line-height:1;
          font-weight:950;
          letter-spacing:-.7px;
        }

        .wc-mm-modern-hero-main p{
          margin:7px 0 0;
          color:#667085;
          font-size:11px;
          line-height:1.35;
        }

        .wc-mm-modern-truck{
          width:48px;
          height:48px;
          display:grid;
          place-items:center;
          border-radius:14px;
          color:#fff;
          background:linear-gradient(145deg,var(--wc-app-primary),#3994f8);
          box-shadow:0 8px 18px rgba(11,111,232,.24);
        }

        .wc-mm-modern-truck svg{
          width:25px;
          height:25px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        .wc-mm-modern-stats{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:8px;
          margin-top:13px;
          padding-top:12px;
          border-top:1px solid #e7edf4;
        }

        .wc-mm-modern-stat{
          display:flex;
          align-items:center;
          gap:8px;
          color:#667085;
          font-size:10px;
        }

        .wc-mm-modern-stat b{
          display:grid;
          place-items:center;
          min-width:25px;
          height:25px;
          padding:0 6px;
          border-radius:8px;
          color:var(--wc-app-primary);
          background:#eaf3ff;
          font-size:11px;
          font-weight:950;
        }

        .wc-ap-icon-btn,
        .wc-real-icon,
        .wc-real-icon-btn,
        .wc-val-icon,
        .wc-des-icon{
          width:40px !important;
          height:40px !important;
          border:1px solid rgba(255,255,255,.19) !important;
          border-radius:13px !important;
          background:rgba(255,255,255,.10) !important;
          color:#fff !important;
          box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
          backdrop-filter:blur(8px);
          -webkit-backdrop-filter:blur(8px);
        }

        .wc-ap-icon-btn:active,
        .wc-real-icon:active,
        .wc-real-icon-btn:active,
        .wc-val-icon:active,
        .wc-des-icon:active{
          transform:scale(.94);
          background:rgba(255,255,255,.18) !important;
        }

        body.wc-motorista-mobile #wcMMEtapasModal .wc-mm-history-section{
          display:none !important;
        }

        .wc-mm-modern-badge{
          position:absolute;
          top:7px;
          right:7px;
          width:7px;
          height:7px;
          border-radius:50%;
          border:2px solid #0d5fb8;
          background:#ffcc4d;
        }

        .wc-ap-tools{
          margin-top:11px !important;
          padding:7px !important;
          gap:7px !important;
          border:1px solid rgba(207,219,233,.86);
          border-radius:15px;
          background:rgba(255,255,255,.88);
          box-shadow:0 8px 24px rgba(11,47,91,.08);
          backdrop-filter:blur(12px);
          -webkit-backdrop-filter:blur(12px);
        }

        .wc-ap-search{
          height:43px !important;
          border:0 !important;
          border-radius:11px !important;
          background:#f4f7fb !important;
          font-size:13px !important;
        }

        .wc-ap-search:focus{
          background:#fff !important;
          box-shadow:0 0 0 3px rgba(11,111,232,.13) !important;
        }

        .wc-ap-filter{
          width:43px !important;
          height:43px !important;
          border:0 !important;
          border-radius:11px !important;
          color:var(--wc-app-primary) !important;
          background:#eaf3ff !important;
        }

        .wc-ap-tabs{
          gap:8px !important;
          margin:13px 0 15px !important;
          padding:2px 1px;
        }

        .wc-ap-tab{
          height:37px !important;
          padding:0 14px !important;
          border:1px solid var(--wc-app-line) !important;
          border-radius:999px !important;
          background:rgba(255,255,255,.82) !important;
          color:#526175 !important;
          box-shadow:0 3px 10px rgba(16,33,61,.035);
        }

        .wc-ap-tab.active{
          border-color:var(--wc-app-primary) !important;
          color:#fff !important;
          background:linear-gradient(135deg,var(--wc-app-primary),#2689f5) !important;
          box-shadow:0 7px 16px rgba(11,111,232,.22);
        }

        .wc-ap-list{
          gap:11px !important;
          margin-top:16px !important;
        }

        .wc-ap-card{
          position:relative;
          padding:15px 13px !important;
          gap:9px 11px !important;
          border:1px solid rgba(214,225,237,.95) !important;
          border-radius:16px !important;
          background:linear-gradient(180deg,#fff,#fbfdff) !important;
          box-shadow:var(--wc-app-shadow) !important;
          overflow:hidden;
          transition:transform .16s ease,box-shadow .16s ease;
        }

        .wc-ap-card::before{
          content:"";
          position:absolute;
          left:0;
          top:15px;
          bottom:15px;
          width:3px;
          border-radius:0 4px 4px 0;
          background:linear-gradient(var(--wc-app-primary),#4ca0ff);
        }

        .wc-ap-card:active{
          transform:scale(.985);
          box-shadow:0 5px 16px rgba(11,47,91,.08) !important;
        }

        .wc-ap-card-icon{
          width:40px !important;
          height:40px !important;
          border-radius:12px !important;
          color:var(--wc-app-primary) !important;
          background:linear-gradient(145deg,#e8f3ff,#f5f9ff) !important;
          box-shadow:inset 0 0 0 1px rgba(11,111,232,.08);
        }

        .wc-ap-trip-no{
          font-size:14px !important;
          color:var(--wc-app-navy) !important;
        }

        .wc-ap-stage,
        .wc-ap-status{
          border-radius:999px !important;
          padding:5px 9px !important;
        }

        .wc-ap-route{
          margin-top:1px !important;
          padding:8px 9px;
          border-radius:10px;
          background:#f6f8fb;
        }

        .wc-ap-route div{
          font-size:11px !important;
          line-height:1.4 !important;
        }

        .wc-ap-meta{
          color:#7c899c !important;
          font-size:10px !important;
        }

        #wcMMBottomNav{
          height:78px !important;
          padding:8px 8px calc(7px + env(safe-area-inset-bottom)) !important;
          border-top:1px solid rgba(210,221,234,.92) !important;
          background:rgba(255,255,255,.94) !important;
          box-shadow:0 -10px 30px rgba(11,47,91,.10) !important;
        }

        #wcMMBottomNav .wc-mm-nav-btn{
          position:relative;
          min-width:0;
          border-radius:14px !important;
          color:#718096 !important;
          font-size:9px !important;
          transition:background .16s ease,color .16s ease,transform .16s ease;
        }

        #wcMMBottomNav .wc-mm-nav-btn:active{
          transform:scale(.95);
        }

        #wcMMBottomNav .wc-mm-nav-btn.wc-mm-nav-active{
          color:var(--wc-app-primary) !important;
          background:#edf5ff !important;
        }

        #wcMMBottomNav .wc-mm-nav-btn.wc-mm-nav-active::before{
          content:"";
          position:absolute;
          top:-8px;
          width:26px;
          height:3px;
          border-radius:0 0 5px 5px;
          background:var(--wc-app-primary);
        }

        #wcMMBottomNav .wc-mm-nav-icon svg{
          width:22px !important;
          height:22px !important;
          stroke-width:2 !important;
        }

        #wcMMMenuDrawer{
          background:
            radial-gradient(circle at 15% 0,rgba(37,132,239,.24),transparent 30%),
            linear-gradient(180deg,#081b32,#0b2f5b) !important;
        }

        .wc-mm-menu-logo.wc-mm-modern-menu-brand{
          display:block !important;
          padding:0 48px 20px 2px !important;
        }

        .wc-mm-modern-menu-brand img{
          display:block;
          width:146px;
          height:58px;
          object-fit:contain;
          object-position:left center;
          filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
        }

        .wc-mm-modern-menu-brand small{
          display:block;
          margin:-5px 0 0 7px;
          color:#9fc9fa;
          font-size:9px;
          font-weight:750;
          letter-spacing:1.1px;
          text-transform:uppercase;
        }

        .wc-mm-menu-item{
          border-radius:12px !important;
        }

        .wc-val-resumo{
          margin-top:17px !important;
          border-radius:18px !important;
          background:
            radial-gradient(circle at 92% 10%,rgba(255,255,255,.20),transparent 34%),
            linear-gradient(135deg,var(--wc-app-navy),var(--wc-app-primary)) !important;
          box-shadow:0 13px 28px rgba(11,91,182,.20) !important;
        }

        .wc-val-kpi,
        .wc-dp-kpi,
        .wc-dp-chart,
        .wc-dp-geral,
        .wc-val-trip,
        .wc-real-card{
          border-color:rgba(214,225,237,.95) !important;
          border-radius:14px !important;
          background:linear-gradient(180deg,#fff,#fbfdff) !important;
          box-shadow:0 7px 21px rgba(11,47,91,.07) !important;
        }

        body.wc-motorista-mobile .modal{
          background:rgba(6,25,47,.58) !important;
          backdrop-filter:blur(5px);
          -webkit-backdrop-filter:blur(5px);
        }

        body.wc-motorista-mobile .modalbox{
          border:1px solid rgba(255,255,255,.72) !important;
          border-radius:24px !important;
          background:#f7f9fc !important;
          box-shadow:0 30px 70px rgba(6,25,47,.26) !important;
        }

        body.wc-motorista-mobile button.primary,
        body.wc-motorista-mobile .btn.primary{
          border-radius:12px !important;
          background:linear-gradient(135deg,var(--wc-app-primary-dark),var(--wc-app-primary)) !important;
          box-shadow:0 8px 18px rgba(11,111,232,.22) !important;
        }

        @media(min-width:620px){
          body.wc-motorista-mobile #wcMotoristaMobile{
            left:50% !important;
            right:auto !important;
            width:100% !important;
            max-width:620px !important;
            transform:translateX(-50%);
            border-left:1px solid rgba(215,225,237,.75);
            border-right:1px solid rgba(215,225,237,.75);
            box-shadow:0 0 55px rgba(11,47,91,.10);
          }

          #wcMMBottomNav{
            left:50% !important;
            right:auto !important;
            width:100% !important;
            max-width:620px !important;
            transform:translateX(-50%) !important;
          }
        }
      }

/* --------------------------------------------------------------------------
   wcMotoristaMobileStyle  ·  instalarCss
   sempre presente
   -------------------------------------------------------------------------- */
      #wcMotoristaMobile{display:none}

      @media all{
        #wcMMOfflineSyncStatus{
          position:fixed;left:50%;bottom:20px;z-index:100000;
          transform:translateX(-50%);width:max-content;max-width:calc(100vw - 30px);
          padding:10px 14px;border-radius:999px;background:#fff2cc;color:#805b00;
          box-shadow:0 10px 28px rgba(16,42,76,.2);font:700 12px Inter,Arial,sans-serif;text-align:center;
        }
        #wcMMOfflineSyncStatus[data-tipo="ok"]{background:#e8f8ef;color:#087443}
        #wcMMOfflineSyncStatus[data-tipo="error"]{background:#fff0ef;color:#b42318}

        body.wc-motorista-mobile{
          margin:0;
          overflow-x:hidden;
          background:#f4f7fb;
        }

        body.wc-motorista-mobile #app{
          display:none !important;
        }

        body.wc-motorista-mobile #wcMotoristaMobile{
          visibility:visible !important;
          display:block !important;
        }

        body.wc-motorista-mobile .modal{
          visibility:visible !important;
          z-index:1000 !important;
        }

        body.wc-motorista-mobile .modalbox{
          width:96vw !important;
          max-width:520px !important;
          max-height:92vh !important;
          height:auto !important;
        }

        body.wc-motorista-mobile #wcMotoristaMobile{
          position:fixed;
          inset:0;
          width:100%;
          max-width:100vw;
          min-width:0;
          box-sizing:border-box;
          z-index:100;
          overflow-y:auto;
          overflow-x:hidden;
          background:#f4f7fb;
          padding:24px 16px 32px;
          color:#10213d;
          font-family:Inter,Arial,sans-serif;
        }

        .wc-mm-wrap{
          width:100%;
          max-width:560px;
          margin:0 auto;
        }

        .wc-mm-topo{
          display:flex;
          align-items:flex-start;
          justify-content:space-between;
          gap:14px;
          margin-bottom:18px;
        }

        .wc-mm-topo h1{
          margin:0;
          font-size:30px;
          line-height:1.05;
          letter-spacing:-.6px;
          color:#10213d;
        }

        .wc-mm-topo p{
          margin:7px 0 0;
          font-size:15px;
          color:#667085;
        }

        .wc-mm-sair{
          flex:0 0 auto;
          padding:10px 15px;
          border:1px solid #d9e1ec;
          border-radius:12px;
          background:#fff;
          color:#10213d;
          font-weight:700;
          font-size:14px;
        }

        .wc-mm-resumo{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:10px;
          margin:0 0 12px;
        }

        .wc-mm-resumo strong{
          font-size:18px;
        }

        .wc-mm-contador{
          background:#e9f2ff;
          color:#075fbe;
          border-radius:999px;
          padding:7px 11px;
          font-size:13px;
          font-weight:800;
          white-space:nowrap;
        }

        .wc-mm-busca{
          width:100%;
          margin:0 0 18px;
          padding:12px 14px;
          border:1px solid #dce4ef;
          border-radius:12px;
          background:#fff;
          color:#10213d;
          font-size:15px;
          outline:none;
          box-shadow:0 4px 14px rgba(16,33,61,.04);
        }

        .wc-mm-busca:focus{
          border-color:#1473d4;
        }

        .wc-mm-secao{
          margin:0 0 18px;
        }

        .wc-mm-secao-titulo{
          display:flex;
          align-items:center;
          justify-content:space-between;
          margin:0 2px 9px;
          color:#667085;
          font-size:12px;
          font-weight:800;
          text-transform:uppercase;
          letter-spacing:.5px;
        }

        .wc-mm-card{
          width:100%;
          display:grid;
          grid-template-columns:minmax(0,1fr) auto;
          gap:8px 12px;
          text-align:left;
          border:1px solid #e1e7f0;
          border-radius:15px;
          background:#fff;
          padding:14px 15px;
          margin:0 0 9px;
          box-shadow:0 5px 16px rgba(16,33,61,.05);
          color:#10213d;
          cursor:pointer;
        }

        .wc-mm-card:active{
          transform:scale(.992);
        }

        .wc-mm-card-atual{
          border-left:4px solid #1473d4;
          padding-left:12px;
        }

        .wc-mm-linha1{
          min-width:0;
        }

        .wc-mm-numero{
          display:block;
          font-size:16px;
          font-weight:850;
          color:#0c63c7;
          line-height:1.15;
        }

        .wc-mm-cliente{
          display:block;
          margin-top:5px;
          font-size:14px;
          font-weight:800;
          line-height:1.25;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }

        .wc-mm-status{
          align-self:start;
          border-radius:999px;
          padding:6px 9px;
          font-size:11px;
          font-weight:850;
          white-space:nowrap;
        }

        .wc-mm-andamento{
          background:#e8f2ff;
          color:#0969c8;
        }

        .wc-mm-planejada{
          background:#f1f3f6;
          color:#596579;
        }

        .wc-mm-concluida{
          background:#e7f7ed;
          color:#178246;
        }

        .wc-mm-cancelada{
          background:#feecec;
          color:#b42318;
        }

        .wc-mm-rota{
          grid-column:1 / -1;
          display:flex;
          align-items:center;
          gap:7px;
          min-width:0;
          color:#344054;
          font-size:13px;
          font-weight:650;
        }

        .wc-mm-rota span{
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }

        .wc-mm-seta{
          flex:0 0 auto;
          color:#98a2b3;
        }

        .wc-mm-meta{
          grid-column:1 / -1;
          display:flex;
          gap:14px;
          flex-wrap:wrap;
          color:#7b8798;
          font-size:12px;
        }

        .wc-mm-meta b{
          color:#475467;
          font-weight:750;
        }

        .wc-mm-vazio{
          border:1px dashed #ccd6e3;
          background:#fff;
          border-radius:15px;
          padding:28px 18px;
          text-align:center;
          color:#667085;
          font-size:14px;
        }

        .wc-mm-semresultado{
          display:none;
          padding:12px 4px;
          color:#667085;
          text-align:center;
          font-size:13px;
        }

        @media(max-width:390px){
          #wcMotoristaMobile{
            padding-left:13px;
            padding-right:13px;
          }

          .wc-mm-topo h1{
            font-size:28px;
          }

          .wc-mm-card{
            padding-right:12px;
          }
        }
      }

/* --------------------------------------------------------------------------
   wcMMMinhasAprovadoStyle  ·  wcMMMinhasAprovadoCss
   sempre presente
   -------------------------------------------------------------------------- */
      @media all{

        body.wc-motorista-mobile{
          background:#f6f8fc !important;
        }

        body.wc-motorista-mobile #wcMotoristaMobile{
          background:#f6f8fc !important;
          padding:0 14px 100px !important;
        }

        .wc-ap-top{
          height:66px;
          display:grid;
          grid-template-columns:44px 1fr 44px;
          align-items:center;
          gap:8px;
          background:#fff;
          margin:0 -14px;
          padding:8px 14px 0;
          border-bottom:1px solid #edf1f6;
          position:sticky;
          top:0;
          z-index:20;
        }

        .wc-ap-title{
          text-align:center;
          font-size:17px;
          font-weight:850;
          color:#111827;
        }

        .wc-ap-icon-btn{
          width:38px;
          height:38px;
          padding:0;
          margin:0;
          border:0;
          border-radius:10px;
          background:transparent;
          color:#344054;
          display:grid;
          place-items:center;
        }

        .wc-ap-icon-btn svg{
          width:22px;
          height:22px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        .wc-ap-tools{
          display:grid;
          grid-template-columns:1fr 44px;
          gap:8px;
          margin-top:14px;
        }

        .wc-ap-search-wrap{
          position:relative;
        }

        .wc-ap-search-icon{
          position:absolute;
          left:12px;
          top:50%;
          transform:translateY(-50%);
          width:18px;
          height:18px;
          color:#98a2b3;
          pointer-events:none;
        }

        .wc-ap-search{
          width:100%;
          height:42px;
          margin:0 !important;
          padding:0 12px 0 40px !important;
          border:1px solid #dfe5ee !important;
          border-radius:9px !important;
          background:#fff !important;
          font-size:13px !important;
          color:#344054 !important;
          box-shadow:none !important;
        }

        .wc-ap-filter{
          width:44px;
          height:42px;
          padding:0;
          margin:0;
          border:1px solid #dfe5ee;
          border-radius:9px;
          background:#fff;
          display:grid;
          place-items:center;
          color:#667085;
        }

        .wc-ap-filter svg{
          width:19px;
          height:19px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        .wc-ap-tabs{
          display:flex;
          gap:7px;
          margin:10px 0 14px;
          overflow-x:auto;
          scrollbar-width:none;
        }

        .wc-ap-tabs::-webkit-scrollbar{
          display:none;
        }

        .wc-ap-tab{
          border:1px solid #e0e6ef;
          border-radius:7px;
          background:#fff;
          color:#475467;
          height:34px;
          padding:0 12px;
          margin:0;
          white-space:nowrap;
          font-size:11px;
          font-weight:750;
        }

        .wc-ap-tab strong{
          margin-left:5px;
          font-weight:900;
        }

        .wc-ap-tab.active{
          background:#0b6fe8;
          border-color:#0b6fe8;
          color:#fff;
        }

        .wc-ap-list{
          display:grid;
          gap:8px;
        }

        .wc-ap-card{
          width:100%;
          margin:0;
          padding:11px 10px;
          display:grid;
          grid-template-columns:37px minmax(0,1fr) auto;
          gap:7px 9px;
          align-items:start;
          text-align:left;
          border:1px solid #e2e8f0;
          border-radius:9px;
          background:#fff;
          color:#101828;
          box-shadow:0 2px 7px rgba(16,24,40,.035);
        }

        .wc-ap-card-icon{
          grid-row:1 / 4;
          width:34px;
          height:34px;
          border-radius:10px;
          background:#eaf3ff;
          color:#0b6fe8;
          display:grid;
          place-items:center;
          margin-top:2px;
        }

        .wc-ap-card-icon svg{
          width:20px;
          height:20px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        .wc-ap-card-main{
          min-width:0;
        }

        .wc-ap-trip-line{
          display:flex;
          align-items:center;
          gap:6px;
          min-width:0;
        }

        .wc-ap-trip-no{
          font-size:13px;
          font-weight:900;
          color:#1d2939;
          white-space:nowrap;
        }

        .wc-ap-stage{
          display:inline-flex;
          align-items:center;
          height:20px;
          padding:0 7px;
          border-radius:5px;
          background:#fff1d8;
          color:#b86a00;
          font-size:9px;
          font-weight:850;
          white-space:nowrap;
        }

        .wc-ap-stage.entrega{
          background:#e8f7ed;
          color:#18864a;
        }

        .wc-ap-status{
          align-self:start;
          border-radius:5px;
          padding:5px 7px;
          font-size:9px;
          line-height:1;
          font-weight:850;
          white-space:nowrap;
          background:#fff2d8;
          color:#b76a00;
        }

        .wc-ap-status.andamento{
          background:#e9f3ff;
          color:#0b6fe8;
        }

        .wc-ap-route{
          grid-column:2 / 4;
          display:grid;
          gap:2px;
          min-width:0;
          margin-top:-2px;
        }

        .wc-ap-route div{
          display:flex;
          align-items:center;
          min-width:0;
          gap:5px;
          color:#475467;
          font-size:11px;
          line-height:1.25;
        }

        .wc-ap-route span{
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }

        .wc-ap-dot{
          width:5px;
          height:5px;
          border-radius:50%;
          background:#0b6fe8;
          flex:0 0 auto;
        }

        .wc-ap-dot.dest{
          background:#21a366;
        }

        .wc-ap-meta{
          grid-column:2 / 4;
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:10px;
          margin-top:1px;
          color:#98a2b3;
          font-size:9px;
        }

        .wc-ap-empty{
          margin-top:28px;
          text-align:center;
          color:#667085;
          font-size:13px;
          padding:28px 15px;
        }

        #wcMMBottomNav{
          position:fixed !important;
          left:0 !important;
          right:0 !important;
          bottom:0 !important;
          transform:none !important;
          width:100% !important;
          max-width:none !important;
          height:72px !important;
          display:grid !important;
          grid-template-columns:repeat(4,1fr) !important;
          gap:0 !important;
          padding:7px 5px calc(6px + env(safe-area-inset-bottom)) !important;
          border:0 !important;
          border-top:1px solid #e5eaf1 !important;
          border-radius:0 !important;
          background:rgba(255,255,255,.98) !important;
          box-shadow:0 -3px 14px rgba(16,24,40,.05) !important;
          backdrop-filter:blur(12px);
          -webkit-backdrop-filter:blur(12px);
        }

        #wcMMBottomNav .wc-mm-nav-btn{
          border:0 !important;
          background:transparent !important;
          color:#667085 !important;
          padding:3px 1px !important;
          margin:0 !important;
          display:flex !important;
          flex-direction:column !important;
          align-items:center !important;
          justify-content:center !important;
          gap:3px !important;
          font-size:9px !important;
          font-weight:700 !important;
          opacity:1 !important;
        }

        #wcMMBottomNav .wc-mm-nav-btn.wc-mm-nav-active{
          color:#0b6fe8 !important;
          background:transparent !important;
        }

        #wcMMBottomNav .wc-mm-nav-icon{
          width:24px !important;
          height:24px !important;
          padding:0 !important;
          background:transparent !important;
          color:inherit !important;
          display:grid !important;
          place-items:center !important;
        }

        #wcMMBottomNav .wc-mm-nav-icon svg{
          width:20px;
          height:20px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }
      }

/* --------------------------------------------------------------------------
   wcMMMenuLateralStyle  ·  wcMMMenuCss
   sempre presente
   -------------------------------------------------------------------------- */
      @media all{

        #wcMMBottomNav{
          display:none !important;
        }

        body.wc-motorista-mobile #wcMotoristaMobile{
          padding-bottom:28px !important;
        }

        #wcMMMenuOverlay{
          position:fixed;
          inset:0;
          z-index:5000;
          background:rgba(8,18,35,.48);
          opacity:0;
          visibility:hidden;
          transition:opacity .2s ease,visibility .2s ease;
        }

        #wcMMMenuOverlay.aberto{
          opacity:1;
          visibility:visible;
        }

        #wcMMMenuDrawer{
          position:absolute;
          left:0;
          top:0;
          bottom:0;
          width:min(82vw,330px);
          background:#0b1b30;
          color:#fff;
          transform:translateX(-102%);
          transition:transform .24s ease;
          box-shadow:18px 0 45px rgba(0,0,0,.25);
          overflow-y:auto;
          padding:
            calc(24px + env(safe-area-inset-top))
            16px
            calc(22px + env(safe-area-inset-bottom));
        }

        #wcMMMenuOverlay.aberto #wcMMMenuDrawer{
          transform:translateX(0);
        }

        .wc-mm-menu-logo{
          display:flex;
          align-items:center;
          gap:9px;
          padding:3px 8px 22px;
          font-size:23px;
          font-weight:900;
          letter-spacing:-1px;
        }

        .wc-mm-menu-logo-mark{
          width:31px;
          height:31px;
          border-radius:9px;
          display:grid;
          place-items:center;
          background:#0b6fe8;
          font-size:18px;
          font-weight:950;
        }

        .wc-mm-menu-user{
          display:grid;
          grid-template-columns:46px 1fr;
          gap:11px;
          align-items:center;
          padding:12px 9px 18px;
          margin-bottom:8px;
          border-bottom:1px solid rgba(255,255,255,.10);
        }

        .wc-mm-menu-avatar{
          width:44px;
          height:44px;
          border-radius:50%;
          display:grid;
          place-items:center;
          background:#dceaff;
          color:#0b6fe8;
          font-size:17px;
          font-weight:900;
        }

        .wc-mm-menu-name{
          color:#fff;
          font-size:13px;
          font-weight:800;
          line-height:1.25;
        }

        .wc-mm-menu-role{
          color:#9fb0c5;
          font-size:10px;
          margin-top:3px;
        }

        .wc-mm-menu-list{
          display:grid;
          gap:5px;
          padding-top:6px;
        }

        .wc-mm-menu-item{
          width:100%;
          height:49px;
          border:0;
          margin:0;
          padding:0 12px;
          border-radius:8px;
          background:transparent;
          color:#d7e1ee;
          display:grid;
          grid-template-columns:27px 1fr;
          gap:10px;
          align-items:center;
          text-align:left;
          font-size:12px;
          font-weight:700;
        }

        .wc-mm-menu-item svg{
          width:19px;
          height:19px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        .wc-mm-menu-item.ativo{
          background:#0b6fe8;
          color:#fff;
          box-shadow:0 5px 14px rgba(11,111,232,.24);
        }

        .wc-mm-menu-item.reserva{
          color:#8ea0b6;
        }

        .wc-mm-menu-separador{
          height:1px;
          background:rgba(255,255,255,.10);
          margin:12px 7px;
        }

        .wc-mm-menu-close{
          position:absolute;
          top:calc(15px + env(safe-area-inset-top));
          right:13px;
          width:34px;
          height:34px;
          border:0;
          border-radius:9px;
          padding:0;
          background:rgba(255,255,255,.08);
          color:#fff;
          font-size:23px;
          line-height:1;
        }
      }

/* --------------------------------------------------------------------------
   wcMotoristaEtapasStyle  ·  wcMMInstalarEtapasCss
   so vale depois que a tela abre: body.wc-mm-css-etapas
   -------------------------------------------------------------------------- */
      @media all{
        body.wc-mm-css-etapas body.wc-motorista-mobile .modal{
          padding:8px !important;
          align-items:center !important;
        }

        body.wc-mm-css-etapas body.wc-motorista-mobile .modalbox{
          width:min(96vw,500px) !important;
          max-width:500px !important;
          max-height:92vh !important;
          padding:15px !important;
          border-radius:20px !important;
          overflow-y:auto !important;
          background:#f8fafc !important;
        }

        body.wc-mm-css-etapas .wc-mm-trip-head{
          background:#fff;
          border:1px solid #e2e8f0;
          border-radius:15px;
          padding:14px;
          margin-bottom:10px;
        }

        body.wc-mm-css-etapas .wc-mm-trip-head-top{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:10px;
        }

        body.wc-mm-css-etapas .wc-mm-trip-head h2{
          margin:0;
          font-size:20px;
          color:#10213d;
        }

        body.wc-mm-css-etapas .wc-mm-trip-cliente{
          margin-top:7px;
          font-size:13px;
          font-weight:750;
          color:#344054;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }

        body.wc-mm-css-etapas .wc-mm-trip-rota{
          margin-top:5px;
          font-size:13px;
          color:#667085;
        }

        body.wc-mm-css-etapas .wc-mm-etapa{
          background:#fff;
          border:1px solid #e2e8f0;
          border-radius:14px;
          margin-bottom:9px;
          overflow:hidden;
        }

        body.wc-mm-css-etapas .wc-mm-etapa[open]{
          border-color:#b9d6f7;
          box-shadow:0 4px 14px rgba(16,33,61,.05);
        }

        body.wc-mm-css-etapas .wc-mm-etapa summary{
          list-style:none;
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:10px;
          padding:13px 14px;
          cursor:pointer;
          font-weight:850;
          color:#10213d;
        }

        .wc-mm-etapa summary::-webkit-details-marker{
          display:none;
        }

        body.wc-mm-css-etapas .wc-mm-etapa-nome{
          display:flex;
          align-items:center;
          gap:9px;
        }

        body.wc-mm-css-etapas .wc-mm-etapa-icone{
          width:28px;
          height:28px;
          border-radius:50%;
          display:grid;
          place-items:center;
          background:#e9f2ff;
          color:#0969c8;
          font-size:13px;
          font-weight:900;
          flex:0 0 auto;
        }

        body.wc-mm-css-etapas .wc-mm-etapa-ok .wc-mm-etapa-icone{
          background:#e7f7ed;
          color:#178246;
        }

        body.wc-mm-css-etapas .wc-mm-etapa-corpo{
          border-top:1px solid #eef2f6;
          padding:13px 14px 14px;
        }

        body.wc-mm-css-etapas .wc-mm-info{
          font-size:12px;
          line-height:1.45;
          color:#667085;
          margin-bottom:10px;
        }

        body.wc-mm-css-etapas .wc-mm-acao{
          width:100%;
          border:0;
          border-radius:11px;
          padding:12px 14px;
          margin-top:8px;
          font-size:14px;
          font-weight:850;
          cursor:pointer;
        }

        body.wc-mm-css-etapas .wc-mm-acao-primary{
          background:#0969c8;
          color:#fff;
        }

        body.wc-mm-css-etapas .wc-mm-acao-light{
          background:#eef6ff;
          color:#0969c8;
          border:1px solid #cfe2f7;
        }

        body.wc-mm-css-etapas .wc-mm-acao-green{
          background:#168347;
          color:#fff;
        }

        body.wc-mm-css-etapas .wc-mm-foto-box{
          margin-top:10px;
          border:1px dashed #cbd5e1;
          border-radius:12px;
          padding:12px;
          background:#f8fafc;
        }

        body.wc-mm-css-etapas .wc-mm-foto-box input[type=file]{
          margin:0 0 8px !important;
          padding:8px !important;
          background:#fff;
        }

        body.wc-mm-css-etapas .wc-mm-foto-box select{
          display:none !important;
        }

        body.wc-mm-css-etapas .wc-mm-mini-title{
          font-weight:850;
          font-size:13px;
          color:#344054;
          margin-bottom:7px;
        }

        body.wc-mm-css-etapas .wc-mm-historico{
          display:grid;
          gap:8px;
          font-size:12px;
          color:#667085;
        }

        body.wc-mm-css-etapas .wc-mm-historico div{
          display:flex;
          justify-content:space-between;
          gap:12px;
          border-bottom:1px solid #eef2f6;
          padding-bottom:7px;
        }

        .wc-mm-historico div:last-child{
          border-bottom:0;
          padding-bottom:0;
        }

        body.wc-mm-css-etapas .wc-mm-historico b{
          color:#344054;
        }

        body.wc-mm-css-etapas .wc-mm-assinatura-futura{
          margin-top:9px;
          border-radius:10px;
          padding:10px;
          background:#f2f4f7;
          color:#667085;
          font-size:12px;
        }
      }

/* --------------------------------------------------------------------------
   wcMMLixeiraStyle  ·  wcMMInstalarLixeiraCss
   so vale depois que a tela abre: body.wc-mm-css-lixeira
   -------------------------------------------------------------------------- */
      @media all{
        body.wc-mm-css-lixeira .wc-mm-evidencia-card{
          background:#fff;
          border:1px solid #e2e8f0;
          border-radius:12px;
          padding:10px;
          margin-top:9px;
        }

        body.wc-mm-css-lixeira .wc-mm-evidencia-meta{
          display:flex;
          justify-content:space-between;
          gap:10px;
          margin-bottom:8px;
          font-size:11px;
          color:#667085;
        }

        body.wc-mm-css-lixeira .wc-mm-evidencia-meta b{
          color:#344054;
          font-size:12px;
        }

        body.wc-mm-css-lixeira .wc-mm-evidencia-img{
          position:relative;
          overflow:hidden;
          border-radius:10px;
          background:#eef2f6;
        }

        body.wc-mm-css-lixeira .wc-mm-evidencia-img img{
          display:block;
          width:100%;
          max-height:260px;
          object-fit:cover;
          border-radius:10px;
        }

        body.wc-mm-css-lixeira .wc-mm-evidencia-delete{
          position:absolute;
          top:7px;
          right:7px;
          width:30px;
          height:30px;
          display:grid;
          place-items:center;
          padding:0;
          margin:0;
          border:1px solid rgba(255,255,255,.72);
          border-radius:9px;
          background:rgba(15,23,42,.72);
          color:#fff;
          font-size:14px;
          line-height:1;
          cursor:pointer;
          backdrop-filter:blur(4px);
          -webkit-backdrop-filter:blur(4px);
        }

        .wc-mm-evidencia-delete:active{
          transform:scale(.94);
        }

        body.wc-mm-css-lixeira .wc-mm-evidencia-local{
          margin-top:7px;
          font-size:11px;
          color:#7b8798;
        }
      }

/* --------------------------------------------------------------------------
   wcMMBottomNavStyle  ·  wcMMInstalarBarraCss
   so vale depois que a tela abre: body.wc-mm-css-barra
   -------------------------------------------------------------------------- */
      @media all{
        body.wc-mm-css-barra body.wc-motorista-mobile #wcMotoristaMobile{
          padding-bottom:105px !important;
        }

        body.wc-mm-css-barra #wcMMBottomNav{
          position:fixed;
          left:50%;
          bottom:calc(10px + env(safe-area-inset-bottom));
          transform:translateX(-50%);
          width:calc(100% - 20px);
          max-width:540px;
          height:68px;
          z-index:900;
          display:grid;
          grid-template-columns:repeat(4,1fr);
          gap:4px;
          padding:7px;
          border:1px solid #d9e4f0;
          border-radius:19px;
          background:rgba(255,255,255,.96);
          box-shadow:0 10px 30px rgba(16,33,61,.16);
          backdrop-filter:blur(12px);
          -webkit-backdrop-filter:blur(12px);
        }

        body.wc-mm-css-barra .wc-mm-nav-btn{
          border:0;
          background:transparent;
          border-radius:13px;
          padding:5px 2px;
          margin:0;
          color:#667085;
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          gap:3px;
          min-width:0;
          font-size:10px;
          font-weight:750;
          line-height:1;
        }

        body.wc-mm-css-barra .wc-mm-nav-icon{
          width:27px;
          height:25px;
          display:grid;
          place-items:center;
          border-radius:9px;
          font-size:16px;
          font-weight:900;
        }

        body.wc-mm-css-barra .wc-mm-nav-btn.wc-mm-nav-active{
          color:#0869d1;
          background:#eef6ff;
        }

        body.wc-mm-css-barra .wc-mm-nav-btn.wc-mm-nav-active .wc-mm-nav-icon{
          background:#0869d1;
          color:#fff;
        }

        body.wc-mm-css-barra .wc-mm-nav-btn.wc-mm-nav-reserva{
          opacity:.58;
        }

        body.wc-mm-css-barra .wc-mm-realizadas-head{
          display:flex;
          align-items:flex-end;
          justify-content:space-between;
          gap:12px;
          margin-bottom:15px;
        }

        body.wc-mm-css-barra .wc-mm-realizadas-head h1{
          margin:0;
          font-size:27px;
          line-height:1.05;
          color:#10213d;
        }

        body.wc-mm-css-barra .wc-mm-realizadas-head p{
          margin:6px 0 0;
          color:#667085;
          font-size:14px;
        }

        body.wc-mm-css-barra .wc-mm-finalizada-card{
          border-left:4px solid #1b8b50 !important;
        }
      }

/* --------------------------------------------------------------------------
   wcMMRealizadasAprovadoStyle  ·  wcMMRealizadasAprovadoCss
   so vale depois que a tela abre: body.wc-mm-css-realizadas
   -------------------------------------------------------------------------- */
      @media all{

        body.wc-mm-css-realizadas .wc-real-top{
          height:66px;
          display:grid;
          grid-template-columns:44px 1fr 44px;
          align-items:center;
          gap:8px;
          background:#fff;
          margin:0 -14px;
          padding:8px 14px 0;
          border-bottom:1px solid #edf1f6;
          position:sticky;
          top:0;
          z-index:20;
        }

        body.wc-mm-css-realizadas .wc-real-title{
          text-align:center;
          font-size:17px;
          font-weight:850;
          color:#111827;
        }

        body.wc-mm-css-realizadas .wc-real-icon-btn{
          width:38px;
          height:38px;
          border:0;
          padding:0;
          margin:0;
          border-radius:10px;
          background:transparent;
          color:#344054;
          display:grid;
          place-items:center;
        }

        body.wc-mm-css-realizadas .wc-real-icon-btn svg{
          width:21px;
          height:21px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-realizadas .wc-real-tools{
          display:grid;
          grid-template-columns:1fr 44px;
          gap:8px;
          margin-top:14px;
          margin-bottom:14px;
        }

        body.wc-mm-css-realizadas .wc-real-search-wrap{
          position:relative;
        }

        body.wc-mm-css-realizadas .wc-real-search-icon{
          position:absolute;
          left:12px;
          top:50%;
          transform:translateY(-50%);
          width:18px;
          height:18px;
          fill:none;
          stroke:#98a2b3;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
          pointer-events:none;
        }

        body.wc-mm-css-realizadas .wc-real-search{
          width:100%;
          height:42px;
          margin:0 !important;
          padding:0 12px 0 40px !important;
          border:1px solid #dfe5ee !important;
          border-radius:9px !important;
          background:#fff !important;
          color:#344054 !important;
          font-size:13px !important;
          box-shadow:none !important;
        }

        body.wc-mm-css-realizadas .wc-real-filter{
          width:44px;
          height:42px;
          padding:0;
          margin:0;
          border:1px solid #dfe5ee;
          border-radius:9px;
          background:#fff;
          color:#667085;
          display:grid;
          place-items:center;
        }

        body.wc-mm-css-realizadas .wc-real-filter svg{
          width:19px;
          height:19px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-realizadas .wc-real-group{
          margin-bottom:17px;
        }

        body.wc-mm-css-realizadas .wc-real-group-title{
          margin:0 0 8px 2px;
          color:#1d2939;
          font-size:13px;
          font-weight:900;
        }

        body.wc-mm-css-realizadas .wc-real-list{
          display:grid;
          gap:7px;
        }

        body.wc-mm-css-realizadas .wc-real-card{
          width:100%;
          min-height:70px;
          display:grid;
          grid-template-columns:32px minmax(0,1fr) auto;
          gap:6px 9px;
          align-items:start;
          text-align:left;
          padding:10px 10px;
          margin:0;
          border:1px solid #e3e8ef;
          border-radius:8px;
          background:#fff;
          color:#101828;
          box-shadow:0 2px 6px rgba(16,24,40,.025);
        }

        body.wc-mm-css-realizadas .wc-real-check{
          grid-row:1 / 4;
          width:22px;
          height:22px;
          margin-top:2px;
          border-radius:50%;
          background:#e7f7ed;
          color:#20a25b;
          display:grid;
          place-items:center;
        }

        body.wc-mm-css-realizadas .wc-real-check svg{
          width:14px;
          height:14px;
          fill:none;
          stroke:currentColor;
          stroke-width:2.5;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-realizadas .wc-real-line{
          display:flex;
          align-items:center;
          flex-wrap:wrap;
          gap:7px;
          min-width:0;
        }

        body.wc-mm-css-realizadas .wc-real-number{
          color:#1d2939;
          font-size:12px;
          font-weight:900;
        }

        body.wc-mm-css-realizadas .wc-real-done{
          color:#21a366;
          font-size:9px;
          font-weight:850;
          white-space:nowrap;
        }

        body.wc-mm-css-realizadas .wc-real-time{
          align-self:start;
          color:#667085;
          font-size:9px;
          padding-top:3px;
          white-space:nowrap;
        }

        body.wc-mm-css-realizadas .wc-real-route{
          grid-column:2 / 4;
          min-width:0;
          color:#475467;
          font-size:10px;
          line-height:1.35;
        }

        body.wc-mm-css-realizadas .wc-real-route strong{
          display:block;
          color:#344054;
          font-weight:650;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }

        body.wc-mm-css-realizadas .wc-real-route span{
          display:block;
          margin-top:1px;
          color:#667085;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }

        body.wc-mm-css-realizadas .wc-real-meta{
          grid-column:2 / 4;
          display:flex;
          justify-content:space-between;
          gap:8px;
          color:#98a2b3;
          font-size:9px;
        }

        body.wc-mm-css-realizadas .wc-real-empty{
          margin-top:35px;
          padding:32px 15px;
          text-align:center;
          color:#667085;
          font-size:13px;
        }
      }

/* --------------------------------------------------------------------------
   wcMMValoresStyle  ·  wcMMValoresCss
   so vale depois que a tela abre: body.wc-mm-css-valores
   -------------------------------------------------------------------------- */
      @media all{

        body.wc-mm-css-valores .wc-val-top{
          height:66px;
          display:grid;
          grid-template-columns:44px 1fr 44px;
          align-items:center;
          gap:8px;
          background:#fff;
          margin:0 -14px;
          padding:8px 14px 0;
          border-bottom:1px solid #edf1f6;
          position:sticky;
          top:0;
          z-index:20;
        }

        body.wc-mm-css-valores .wc-val-title{
          text-align:center;
          font-size:17px;
          font-weight:850;
          color:#111827;
        }

        body.wc-mm-css-valores .wc-val-icon{
          width:38px;
          height:38px;
          border:0;
          padding:0;
          margin:0;
          border-radius:10px;
          background:transparent;
          color:#344054;
          display:grid;
          place-items:center;
        }

        body.wc-mm-css-valores .wc-val-icon svg{
          width:21px;
          height:21px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-valores .wc-val-resumo{
          margin-top:15px;
          border-radius:14px;
          background:#0b6fe8;
          color:#fff;
          padding:18px 17px;
          box-shadow:0 7px 20px rgba(11,111,232,.18);
        }

        body.wc-mm-css-valores .wc-val-label{
          font-size:11px;
          font-weight:650;
          opacity:.85;
        }

        body.wc-mm-css-valores .wc-val-total{
          margin-top:7px;
          font-size:30px;
          line-height:1;
          font-weight:900;
          letter-spacing:-1px;
        }

        body.wc-mm-css-valores .wc-val-info{
          margin-top:13px;
          padding-top:12px;
          border-top:1px solid rgba(255,255,255,.20);
          font-size:10px;
          line-height:1.45;
          opacity:.88;
        }

        body.wc-mm-css-valores .wc-val-kpis{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:9px;
          margin-top:11px;
        }

        body.wc-mm-css-valores .wc-val-kpi{
          background:#fff;
          border:1px solid #e3e8ef;
          border-radius:10px;
          padding:13px 12px;
        }

        body.wc-mm-css-valores .wc-val-kpi strong{
          display:block;
          color:#1d2939;
          font-size:20px;
          font-weight:900;
        }

        body.wc-mm-css-valores .wc-val-kpi span{
          display:block;
          margin-top:3px;
          color:#667085;
          font-size:10px;
        }

        body.wc-mm-css-valores .wc-val-section-title{
          margin:19px 2px 8px;
          color:#1d2939;
          font-size:13px;
          font-weight:900;
        }

        body.wc-mm-css-valores .wc-val-alert{
          display:grid;
          grid-template-columns:34px 1fr;
          gap:10px;
          align-items:start;
          padding:12px;
          border:1px solid #d9e8fb;
          border-radius:10px;
          background:#f1f7ff;
        }

        body.wc-mm-css-valores .wc-val-alert-icon{
          width:32px;
          height:32px;
          border-radius:9px;
          display:grid;
          place-items:center;
          background:#dcecff;
          color:#0b6fe8;
        }

        body.wc-mm-css-valores .wc-val-alert-icon svg{
          width:18px;
          height:18px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.9;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-valores .wc-val-alert strong{
          display:block;
          color:#184f91;
          font-size:11px;
        }

        body.wc-mm-css-valores .wc-val-alert p{
          margin:4px 0 0;
          color:#54708f;
          font-size:10px;
          line-height:1.45;
        }

        body.wc-mm-css-valores .wc-val-list{
          display:grid;
          gap:7px;
        }

        body.wc-mm-css-valores .wc-val-trip{
          display:grid;
          grid-template-columns:35px minmax(0,1fr);
          gap:9px;
          align-items:center;
          padding:11px;
          border:1px solid #e3e8ef;
          border-radius:9px;
          background:#fff;
        }

        body.wc-mm-css-valores .wc-val-trip-icon{
          width:33px;
          height:33px;
          border-radius:9px;
          display:grid;
          place-items:center;
          background:#eaf3ff;
          color:#0b6fe8;
        }

        body.wc-mm-css-valores .wc-val-trip-icon svg{
          width:18px;
          height:18px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-valores .wc-val-trip-head{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:7px;
        }

        body.wc-mm-css-valores .wc-val-trip-head strong{
          color:#1d2939;
          font-size:11px;
        }

        body.wc-mm-css-valores .wc-val-trip-head span{
          color:#b27300;
          font-size:8px;
          font-weight:850;
          background:#fff3d9;
          padding:4px 6px;
          border-radius:5px;
          white-space:nowrap;
        }

        body.wc-mm-css-valores .wc-val-trip-route{
          margin-top:3px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          color:#667085;
          font-size:9px;
        }

        body.wc-mm-css-valores .wc-val-empty{
          padding:26px 15px;
          text-align:center;
          color:#667085;
          font-size:12px;
        }
      }

/* --------------------------------------------------------------------------
   wcMMValoresCompletoStyle  ·  wcMMValoresCompletoCss
   so vale depois que a tela abre: body.wc-mm-css-valores-completo
   -------------------------------------------------------------------------- */
      @media all{

        body.wc-mm-css-valores-completo .wc-v2-saldo{
          margin-top:14px;
          padding:17px 16px 15px;
          border-radius:10px;
          background:#0b6fe8;
          color:#fff;
          box-shadow:0 5px 16px rgba(11,111,232,.16);
        }

        body.wc-mm-css-valores-completo .wc-v2-saldo-label{
          font-size:11px;
          font-weight:650;
          opacity:.92;
        }

        body.wc-mm-css-valores-completo .wc-v2-saldo-line{
          display:flex;
          align-items:center;
          gap:8px;
          margin-top:7px;
        }

        body.wc-mm-css-valores-completo .wc-v2-saldo-valor{
          font-size:27px;
          line-height:1;
          font-weight:900;
          letter-spacing:-.6px;
        }

        body.wc-mm-css-valores-completo .wc-v2-eye{
          width:18px;
          height:18px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
          opacity:.9;
        }

        body.wc-mm-css-valores-completo .wc-v2-saldo-sub{
          margin-top:10px;
          font-size:9px;
          opacity:.83;
        }

        body.wc-mm-css-valores-completo .wc-v2-kpis{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:8px;
          margin-top:9px;
        }

        body.wc-mm-css-valores-completo .wc-v2-kpi{
          min-height:72px;
          padding:12px 11px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
        }

        body.wc-mm-css-valores-completo .wc-v2-kpi-label{
          color:#667085;
          font-size:9px;
        }

        body.wc-mm-css-valores-completo .wc-v2-kpi-value{
          margin-top:7px;
          color:#1d2939;
          font-size:17px;
          font-weight:900;
        }

        body.wc-mm-css-valores-completo .wc-v2-section{
          margin-top:17px;
        }

        body.wc-mm-css-valores-completo .wc-v2-section h2{
          margin:0 0 8px 2px;
          color:#1d2939;
          font-size:12px;
          font-weight:900;
        }

        body.wc-mm-css-valores-completo .wc-v2-box{
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
          overflow:hidden;
        }

        body.wc-mm-css-valores-completo .wc-v2-empty-row{
          min-height:64px;
          padding:14px 12px;
          display:flex;
          align-items:center;
          gap:10px;
        }

        body.wc-mm-css-valores-completo .wc-v2-empty-icon{
          width:32px;
          height:32px;
          flex:0 0 auto;
          border-radius:9px;
          display:grid;
          place-items:center;
          background:#edf5ff;
          color:#0b6fe8;
        }

        body.wc-mm-css-valores-completo .wc-v2-empty-icon svg{
          width:17px;
          height:17px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-valores-completo .wc-v2-empty-title{
          color:#344054;
          font-size:10px;
          font-weight:800;
        }

        body.wc-mm-css-valores-completo .wc-v2-empty-sub{
          margin-top:3px;
          color:#98a2b3;
          font-size:9px;
          line-height:1.35;
        }

        body.wc-mm-css-valores-completo .wc-v2-history-head{
          display:grid;
          grid-template-columns:1fr auto;
          gap:10px;
          align-items:center;
          min-height:43px;
          padding:0 12px;
          border-bottom:1px solid #edf1f5;
          color:#667085;
          font-size:9px;
        }

        body.wc-mm-css-valores-completo .wc-v2-history-empty{
          min-height:62px;
          display:grid;
          place-items:center;
          padding:12px;
          color:#98a2b3;
          font-size:9px;
          text-align:center;
        }

        body.wc-mm-css-valores-completo .wc-v2-extrato{
          width:100%;
          height:42px;
          margin:9px 0 0;
          border:0;
          border-radius:8px;
          background:#0b6fe8;
          color:#fff;
          font-size:10px;
          font-weight:800;
        }

        body.wc-mm-css-valores-completo .wc-v2-pending{
          margin-top:13px;
          display:flex;
          gap:8px;
          align-items:flex-start;
          color:#667085;
          font-size:9px;
          line-height:1.4;
        }

        body.wc-mm-css-valores-completo .wc-v2-pending svg{
          width:16px;
          height:16px;
          flex:0 0 auto;
          fill:none;
          stroke:#0b6fe8;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }
      }

/* --------------------------------------------------------------------------
   wcMMDesempenhoStyle  ·  wcMMDesempenhoCss
   so vale depois que a tela abre: body.wc-mm-css-desempenho
   -------------------------------------------------------------------------- */
      @media all{

        body.wc-mm-css-desempenho .wc-des-top{
          height:66px;
          display:grid;
          grid-template-columns:44px 1fr 44px;
          align-items:center;
          gap:8px;
          background:#fff;
          margin:0 -14px;
          padding:8px 14px 0;
          border-bottom:1px solid #edf1f6;
          position:sticky;
          top:0;
          z-index:20;
        }

        body.wc-mm-css-desempenho .wc-des-title{
          text-align:center;
          font-size:17px;
          font-weight:850;
          color:#111827;
        }

        body.wc-mm-css-desempenho .wc-des-icon{
          width:38px;
          height:38px;
          border:0;
          padding:0;
          margin:0;
          border-radius:10px;
          background:transparent;
          color:#344054;
          display:grid;
          place-items:center;
        }

        body.wc-mm-css-desempenho .wc-des-icon svg{
          width:21px;
          height:21px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-desempenho .wc-des-hero{
          margin-top:14px;
          padding:17px 16px;
          border-radius:11px;
          background:#0b6fe8;
          color:#fff;
          box-shadow:0 6px 18px rgba(11,111,232,.17);
        }

        body.wc-mm-css-desempenho .wc-des-hero-label{
          font-size:10px;
          opacity:.86;
        }

        body.wc-mm-css-desempenho .wc-des-hero-value{
          margin-top:5px;
          font-size:31px;
          line-height:1;
          font-weight:900;
        }

        body.wc-mm-css-desempenho .wc-des-hero-sub{
          margin-top:7px;
          font-size:9px;
          opacity:.82;
        }

        body.wc-mm-css-desempenho .wc-des-kpis{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:8px;
          margin-top:9px;
        }

        body.wc-mm-css-desempenho .wc-des-kpi{
          min-height:79px;
          padding:12px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
        }

        body.wc-mm-css-desempenho .wc-des-kpi-top{
          display:flex;
          align-items:center;
          gap:7px;
          color:#667085;
          font-size:9px;
        }

        body.wc-mm-css-desempenho .wc-des-kpi-icon{
          width:25px;
          height:25px;
          border-radius:7px;
          display:grid;
          place-items:center;
          background:#edf5ff;
          color:#0b6fe8;
        }

        body.wc-mm-css-desempenho .wc-des-kpi-icon.green{
          background:#e9f7ef;
          color:#219653;
        }

        body.wc-mm-css-desempenho .wc-des-kpi-icon.orange{
          background:#fff4df;
          color:#b87500;
        }

        body.wc-mm-css-desempenho .wc-des-kpi-icon svg{
          width:14px;
          height:14px;
          fill:none;
          stroke:currentColor;
          stroke-width:1.9;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-desempenho .wc-des-kpi strong{
          display:block;
          margin-top:8px;
          color:#1d2939;
          font-size:20px;
          font-weight:900;
        }

        body.wc-mm-css-desempenho .wc-des-section{
          margin-top:18px;
        }

        body.wc-mm-css-desempenho .wc-des-section h2{
          margin:0 0 8px 2px;
          color:#1d2939;
          font-size:12px;
          font-weight:900;
        }

        body.wc-mm-css-desempenho .wc-des-statusbox{
          padding:13px 12px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
        }

        body.wc-mm-css-desempenho .wc-des-status-row{
          display:grid;
          grid-template-columns:88px 1fr 28px;
          gap:8px;
          align-items:center;
          margin-bottom:11px;
        }

        .wc-des-status-row:last-child{
          margin-bottom:0;
        }

        body.wc-mm-css-desempenho .wc-des-status-label{
          color:#475467;
          font-size:9px;
          font-weight:700;
        }

        body.wc-mm-css-desempenho .wc-des-bar{
          height:7px;
          border-radius:999px;
          background:#eef2f6;
          overflow:hidden;
        }

        body.wc-mm-css-desempenho .wc-des-bar span{
          display:block;
          height:100%;
          min-width:0;
          border-radius:999px;
          background:#0b6fe8;
        }

        body.wc-mm-css-desempenho .wc-des-status-row.pendente .wc-des-bar span{
          background:#e9a11b;
        }

        body.wc-mm-css-desempenho .wc-des-status-num{
          color:#344054;
          font-size:9px;
          font-weight:900;
          text-align:right;
        }

        body.wc-mm-css-desempenho .wc-des-list{
          display:grid;
          gap:7px;
        }

        body.wc-mm-css-desempenho .wc-des-trip{
          display:grid;
          grid-template-columns:32px minmax(0,1fr) auto;
          gap:8px;
          align-items:center;
          padding:10px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
        }

        body.wc-mm-css-desempenho .wc-des-trip-check{
          width:29px;
          height:29px;
          border-radius:50%;
          display:grid;
          place-items:center;
          background:#e8f7ee;
          color:#219653;
        }

        body.wc-mm-css-desempenho .wc-des-trip-check svg{
          width:16px;
          height:16px;
          fill:none;
          stroke:currentColor;
          stroke-width:2.2;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-desempenho .wc-des-trip strong{
          display:block;
          color:#1d2939;
          font-size:10px;
        }

        body.wc-mm-css-desempenho .wc-des-trip-route{
          margin-top:3px;
          color:#667085;
          font-size:9px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }

        body.wc-mm-css-desempenho .wc-des-trip-km{
          color:#667085;
          font-size:9px;
          white-space:nowrap;
        }

        body.wc-mm-css-desempenho .wc-des-note{
          margin-top:14px;
          padding:11px;
          display:flex;
          gap:8px;
          border-radius:9px;
          background:#f1f7ff;
          color:#56718f;
          font-size:9px;
          line-height:1.45;
        }

        body.wc-mm-css-desempenho .wc-des-note svg{
          width:16px;
          height:16px;
          flex:0 0 auto;
          fill:none;
          stroke:#0b6fe8;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }

        body.wc-mm-css-desempenho .wc-des-empty{
          padding:25px 12px;
          text-align:center;
          color:#98a2b3;
          font-size:10px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
        }
      }

/* --------------------------------------------------------------------------
   wcMMDesPreviewStyle  ·  wcMMDesPreviewCss
   so vale depois que a tela abre: body.wc-mm-css-desempenho-previa
   -------------------------------------------------------------------------- */
      @media all{

        body.wc-mm-css-desempenho-previa .wc-dp-periodo{
          display:grid;
          grid-template-columns:auto 1fr;
          gap:10px;
          align-items:center;
          margin-top:14px;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-periodo label{
          color:#344054;
          font-size:10px;
          font-weight:750;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-periodo select{
          width:100%;
          height:38px;
          margin:0 !important;
          padding:0 34px 0 11px !important;
          border:1px solid #e1e7ef !important;
          border-radius:8px !important;
          background:#fff !important;
          color:#344054 !important;
          font-size:10px !important;
          box-shadow:none !important;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-kpis{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:8px;
          margin-top:10px;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-kpi{
          min-height:92px;
          padding:12px 11px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-kpi-label{
          color:#667085;
          font-size:9px;
          line-height:1.25;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-kpi-value{
          margin-top:8px;
          color:#1d2939;
          font-size:24px;
          line-height:1;
          font-weight:900;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-kpi-meta{
          margin-top:6px;
          color:#98a2b3;
          font-size:8px;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-chart{
          margin-top:17px;
        }

        .wc-dp-chart h2,
        body.wc-mm-css-desempenho-previa .wc-dp-geral h2{
          margin:0 0 9px 2px;
          color:#1d2939;
          font-size:12px;
          font-weight:900;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-chartbox{
          height:174px;
          padding:14px 10px 10px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
          display:grid;
          grid-template-columns:repeat(7,1fr);
          align-items:end;
          gap:7px;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-dia{
          height:100%;
          display:grid;
          grid-template-rows:1fr auto;
          gap:7px;
          align-items:end;
          text-align:center;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-barwrap{
          height:125px;
          display:flex;
          align-items:flex-end;
          justify-content:center;
          position:relative;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-bar{
          width:19px;
          min-height:3px;
          border-radius:4px 4px 1px 1px;
          background:#0b6fe8;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-barzero{
          width:19px;
          height:3px;
          border-radius:4px;
          background:#dfe7f0;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-barvalue{
          position:absolute;
          bottom:calc(var(--h) + 5px);
          left:50%;
          transform:translateX(-50%);
          color:#344054;
          font-size:8px;
          font-weight:850;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-dayname{
          color:#667085;
          font-size:8px;
          font-weight:700;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-geral{
          margin-top:17px;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-geralbox{
          padding:13px 12px;
          border:1px solid #e1e7ef;
          border-radius:9px;
          background:#fff;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-line{
          margin-bottom:14px;
        }

        .wc-dp-line:last-child{
          margin-bottom:0;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-line-head{
          display:flex;
          justify-content:space-between;
          gap:10px;
          margin-bottom:6px;
          color:#475467;
          font-size:9px;
          font-weight:700;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-line-head strong{
          color:#344054;
          font-size:9px;
          font-weight:900;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-progress{
          height:6px;
          border-radius:999px;
          overflow:hidden;
          background:#edf1f5;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-progress span{
          display:block;
          height:100%;
          border-radius:999px;
          background:#24a05a;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-progress.indisponivel span{
          width:0 !important;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-caption{
          margin-top:12px;
          display:flex;
          gap:7px;
          color:#667085;
          font-size:8px;
          line-height:1.4;
        }

        body.wc-mm-css-desempenho-previa .wc-dp-caption svg{
          width:15px;
          height:15px;
          flex:0 0 auto;
          fill:none;
          stroke:#0b6fe8;
          stroke-width:1.8;
          stroke-linecap:round;
          stroke-linejoin:round;
        }
      }

/* ==========================================================================
   VISUAL DA PREVIA APROVADA — ETAPA 2 (17/09/2026)
   ==========================================================================
   Previa aprovada pelo Covali sem ajustes:
   docs/modelos-visuais/previa-layout-motorista-parte1-2026-09-17.html (7d1c9b2)

   Esta secao muda SO a aparencia das seis telas. Ela vem depois de tudo de
   proposito, e trabalha em cima das classes que o aplicativo JA usa — nenhuma
   funcao, rota, nome de campo, texto ou logica foi tocada para isto existir.

   Codigo de cores, igual ao da previa e valendo em todas as telas:
     verde    = feito          azul     = agora
     laranja  = decisao sua    vermelho = trava
     amarelo  = salvo, ainda nao enviado
   ========================================================================== */

body.wc-motorista-mobile{
  --wcp-bg:#F4F7FC; --wcp-card:#fff; --wcp-ink:#0F1B33; --wcp-muted:#6B778C;
  --wcp-line:#E6EBF2; --wcp-soft:#F1F5FB;
  --wcp-blue:#1D6BF3; --wcp-blue-s:#E6F0FF; --wcp-navy:#2A3180;
  --wcp-green:#12A150; --wcp-green-s:#E3F6EA;
  --wcp-orange:#F2780C; --wcp-orange-s:#FFF0E2;
  --wcp-red:#E5383B; --wcp-red-s:#FDE8E8;
  --wcp-yellow:#8A6D0B; --wcp-yellow-s:#FFF6D6;
  --wcp-f:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
  --wcp-raio:16px; --wcp-raio-g:20px;
  --wcp-sombra:0 1px 2px rgba(15,27,51,.04),0 6px 18px rgba(15,27,51,.05);
}

/* ------------------------------------------------ a) INICIO / LISTA DE COLETAS */
body.wc-motorista-mobile .wc-ap-card{
  background:var(--wcp-card) !important;
  border:1px solid var(--wcp-line) !important;
  border-radius:var(--wcp-raio) !important;
  box-shadow:var(--wcp-sombra) !important;
  padding:14px !important;
  margin-bottom:10px !important;
  width:100% !important;
  text-align:left !important;
}
/* A coleta de agora e a unica com borda azul: e o "um passo de cada vez". */
body.wc-motorista-mobile .wc-ap-card.wc-ap-card-now,
body.wc-motorista-mobile .wc-ap-card[data-wc-atual="1"]{
  border:2px solid var(--wcp-blue) !important;
  box-shadow:0 6px 18px rgba(29,107,243,.15) !important;
}
body.wc-motorista-mobile .wc-ap-card-icon{
  width:44px !important;height:44px !important;border-radius:14px !important;
  background:var(--wcp-orange-s) !important;color:var(--wcp-orange) !important;
  display:grid !important;place-items:center !important;flex:none !important;
}
body.wc-motorista-mobile .wc-ap-trip-no{
  font-size:14.5px !important;font-weight:800 !important;color:var(--wcp-ink) !important;
}
body.wc-motorista-mobile .wc-ap-route{
  color:var(--wcp-muted) !important;font-size:12px !important;
}
body.wc-motorista-mobile .wc-ap-stage,
body.wc-motorista-mobile .wc-ap-status{
  font-size:11px !important;font-weight:800 !important;padding:3px 8px !important;border-radius:20px !important;white-space:nowrap !important;
}

/* ------------------------------------------------------- b) ETAPAS DA COLETA */
body.wc-mm-css-etapas .wc-mm-etapa{
  background:var(--wcp-card) !important;
  border:1px solid var(--wcp-line) !important;
  border-radius:var(--wcp-raio) !important;
  box-shadow:var(--wcp-sombra) !important;
}
body.wc-mm-css-etapas .wc-mm-etapa-icone{
  width:26px !important;height:26px !important;border-radius:50% !important;
  border:2px solid var(--wcp-line) !important;background:var(--wcp-card) !important;
  color:var(--wcp-muted) !important;display:grid !important;place-items:center !important;
  font-size:12px !important;font-weight:800 !important;flex:none !important;
}
body.wc-mm-css-etapas .wc-mm-etapa-titulo{font-size:13.5px !important;font-weight:800}
body.wc-mm-css-etapas .wc-mm-etapa-sub{color:var(--wcp-muted) !important;font-size:12px}

/* ------------------------------------------------------------ c) BIPAR NF-e */
body.wc-mm-css-etapas .wc-mm-nf-leitor{
  background:var(--wcp-card) !important;
  border:1px solid var(--wcp-line) !important;
  border-radius:var(--wcp-raio) !important;
  padding:14px !important;
}
body.wc-mm-css-etapas .wc-mm-nf-leitor input{
  height:52px !important;border-radius:14px !important;border:1.5px solid var(--wcp-line) !important;
  background:var(--wcp-card) !important;padding:0 14px !important;font-size:17px !important;font-weight:700 !important;
  letter-spacing:.04em !important;outline:0 !important;
}
body.wc-mm-css-etapas .wc-mm-nf-leitor input:focus{border-color:var(--wcp-blue)}
body.wc-mm-css-etapas .wc-mm-nf-item{
  background:var(--wcp-card) !important;border:1px solid var(--wcp-line) !important;
  border-radius:14px !important;padding:12px !important;
}
/* NF ja conferida: verde, que na previa quer dizer feito. */
body.wc-mm-css-etapas .wc-mm-nf-item.ok{
  background:var(--wcp-green-s) !important;border-color:#BFE7CE !important;
}
body.wc-mm-css-etapas .wc-mm-nf-item.ok .wc-mm-nf-check{color:var(--wcp-green) !important;font-weight:800}

/* --------------------------------------------------- d) CONFERIR OS VOLUMES */
body.wc-mm-css-etapas .wc-mm-volume-leitor input{
  border-radius:14px !important;border:1.5px solid var(--wcp-line) !important;
  font-size:16px !important;font-weight:700 !important;
}
body.wc-mm-css-etapas .wc-mm-volume-item,
body.wc-mm-css-etapas .wc-mm-volume-linha{
  background:var(--wcp-card) !important;border:1px solid var(--wcp-line) !important;
  border-radius:var(--wcp-raio) !important;padding:10px 12px !important;margin-bottom:8px !important;
}

/* --------------------------------------------------------- e) FOTOS DA CARGA */
body.wc-motorista-mobile .wc-mm-foto-box{
  background:var(--wcp-card) !important;border:1px solid var(--wcp-line) !important;
  border-radius:var(--wcp-raio) !important;
}
body.wc-motorista-mobile .wc-mm-foto-grid{
  display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;
}
body.wc-motorista-mobile .wc-mm-foto-grid img,
body.wc-motorista-mobile .wc-mm-foto-grid .wc-mm-foto-vazia{
  aspect-ratio:1 !important;border-radius:12px !important;object-fit:cover !important;width:100% !important;
}
body.wc-motorista-mobile .wc-mm-foto-grid .wc-mm-foto-vazia{
  background:var(--wcp-soft) !important;border:1.5px dashed var(--wcp-line) !important;
  display:grid !important;place-items:center !important;color:var(--wcp-muted) !important;
}

/* ---------------------------------------------------- f) BOTOES, EM TODAS AS TELAS */
body.wc-motorista-mobile .wc-mm-acao{
  min-height:52px !important;border-radius:var(--wcp-raio) !important;
  font-weight:800 !important;font-size:15px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
}
body.wc-motorista-mobile .wc-mm-acao-primary{
  background:var(--wcp-blue) !important;border:1px solid var(--wcp-blue) !important;color:#fff !important;
}
body.wc-motorista-mobile .wc-mm-acao-green{
  background:var(--wcp-green) !important;border:1px solid var(--wcp-green) !important;color:#fff !important;
}
body.wc-motorista-mobile .wc-mm-acao-light{
  background:var(--wcp-card) !important;border:1.5px solid var(--wcp-line) !important;color:var(--wcp-ink) !important;
}
body.wc-motorista-mobile .wc-mm-acao:disabled{
  background:#C7D0DE !important;border-color:#C7D0DE !important;color:#F4F7FC !important;cursor:not-allowed !important;
}
body.wc-motorista-mobile .wc-mm-secao-titulo,
body.wc-motorista-mobile .wc-mm-mini-title{
  font-weight:800 !important;font-size:13.5px !important;color:var(--wcp-ink) !important;
}
body.wc-motorista-mobile .wc-mm-info{
  background:var(--wcp-card) !important;border:1px solid var(--wcp-line) !important;
  border-radius:var(--wcp-raio) !important;padding:14px !important;
}

/* ==========================================================================
   ETAPA 3 — os oito pontos "NOVO" da previa, ligados ao que o app ja faz
   ==========================================================================
   Cada um destes pontos existia na previa aprovada e nao existia no modelo de
   16/09. Aqui eles ganham a aparencia da previa em cima do estado REAL que o
   aplicativo ja calcula. Nenhuma regra inventa informacao.
   ========================================================================== */

/* 1 — Placa do veiculo no cartao da coleta.
       O valor vem de x.vehicle, que a resposta de /api/trips ja trazia. */
body.wc-motorista-mobile .wc-ap-placa{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  background:var(--wcp-soft) !important;
  border:1px solid var(--wcp-line) !important;
  border-radius:8px !important;
  padding:2px 8px !important;
  font-weight:800 !important;
  font-size:12px !important;
  letter-spacing:.06em !important;
  color:var(--wcp-ink) !important;
}

/* 2 e 3 — Linha do tempo das cinco etapas, incluindo "na base" e "saiu para
   entrega". As classes feita/proxima ja vinham do proprio app; o catalogo das
   cinco etapas ja vem do servidor. Aqui elas so ganham cor e fio. */
body.wc-mm-css-etapas .wc-mm-etapas-lista{
  position:relative !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.wc-mm-css-etapas .wc-mm-etapa{
  position:relative !important;
  display:grid !important;
  grid-template-columns:26px 1fr !important;
  gap:12px !important;
  padding:0 0 16px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.wc-mm-css-etapas .wc-mm-etapa:last-child{padding-bottom:0 !important}
/* O fio que liga uma etapa a seguinte. */
body.wc-mm-css-etapas .wc-mm-etapa::before{
  content:"" !important;
  position:absolute !important;
  left:12px !important; top:26px !important; bottom:0 !important;
  width:2px !important;
  background:var(--wcp-line) !important;
}
body.wc-mm-css-etapas .wc-mm-etapa:last-child::before{display:none !important}
/* VERDE = feito. */
body.wc-mm-css-etapas .wc-mm-etapa.feita .wc-mm-etapa-icone{
  background:var(--wcp-green) !important;
  border-color:var(--wcp-green) !important;
  color:#fff !important;
}
body.wc-mm-css-etapas .wc-mm-etapa.feita::before{background:var(--wcp-green) !important}
/* AZUL = agora. */
body.wc-mm-css-etapas .wc-mm-etapa.proxima .wc-mm-etapa-icone{
  background:var(--wcp-blue) !important;
  border-color:var(--wcp-blue) !important;
  color:#fff !important;
}
body.wc-mm-css-etapas .wc-mm-etapa.proxima .wc-mm-etapa-texto strong{color:var(--wcp-ink) !important}
/* CINZA = ainda vem. */
body.wc-mm-css-etapas .wc-mm-etapa:not(.feita):not(.proxima) .wc-mm-etapa-texto strong{
  color:var(--wcp-muted) !important;
}

/* 4 — Campo da chave de 44 numeros. Continua sendo o mesmo input que o coletor,
       a camera e o teclado ja alimentavam. */
body.wc-mm-css-etapas #wcMMChaveNF{
  height:52px !important;
  border-radius:14px !important;
  border:1.5px solid var(--wcp-line) !important;
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  padding:0 14px !important;
}
body.wc-mm-css-etapas #wcMMChaveNF:focus{border-color:var(--wcp-blue) !important}

/* 5 — NF fora da programacao: LARANJA, porque nao e erro, e decisao do
       motorista. "Adicionar NF" vem em laranja cheio, que e a acao comum. */
body.wc-mm-css-etapas #wcMMNFNaoProgramada .wc-mm-quick-confirm{
  background:var(--wcp-orange-s) !important;
  border:1.5px solid #F7CFA6 !important;
  border-radius:var(--wcp-raio) !important;
  padding:13px !important;
  color:#8A4B06 !important;
}
body.wc-mm-css-etapas #wcMMNFNaoProgramada strong{
  display:block !important;
  color:#8A4B06 !important;
  font-size:13.5px !important;
}
body.wc-mm-css-etapas #wcMMNFNaoProgramada small{
  display:block !important;
  color:#8A4B06 !important;
  margin:3px 0 10px !important;
}
body.wc-mm-css-etapas #wcMMNFNaoProgramada .wc-mm-acao-primary,
body.wc-mm-css-etapas #wcMMNFNaoProgramada .wc-mm-acao-green{
  background:var(--wcp-orange) !important;
  border-color:var(--wcp-orange) !important;
  color:#fff !important;
}

/* 6 — Fila offline: AMARELO, que na previa quer dizer "salvo, ainda nao
       enviado". O aviso ja existia; muda so a aparencia. */
body.wc-motorista-mobile #wcMMOfflineSyncStatus{
  position:fixed !important;
  left:12px !important; right:12px !important; bottom:14px !important;
  z-index:99999 !important;
  background:var(--wcp-yellow-s) !important;
  border:1px solid #EFE0A8 !important;
  border-radius:14px !important;
  padding:11px 13px !important;
  color:var(--wcp-yellow) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  box-shadow:var(--wcp-sombra) !important;
}
body.wc-motorista-mobile #wcMMOfflineSyncStatus[data-tipo="ok"]{
  background:var(--wcp-green-s) !important;
  border-color:#BFE7CE !important;
  color:var(--wcp-green) !important;
}
body.wc-motorista-mobile #wcMMOfflineSyncStatus[data-tipo="error"]{
  background:var(--wcp-red-s) !important;
  border-color:#F6C4C5 !important;
  color:var(--wcp-red) !important;
}

/* 7 — Volume a volume, com o codigo e a NF de origem. A descricao
       "Volume 1/3 da NF 62058" ja e gravada na criacao da viagem. */
body.wc-mm-css-etapas .wc-mm-volume-item,
body.wc-mm-css-etapas .wc-mm-volume-linha{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
body.wc-mm-css-etapas .wc-mm-volume-item.coletado,
body.wc-mm-css-etapas .wc-mm-volume-linha.coletado{
  background:var(--wcp-green-s) !important;
  border-color:#BFE7CE !important;
}
/* Volume que esta na fila do aparelho: amarelo, com a ampulheta. */
body.wc-mm-css-etapas .wc-mm-volume-item.pendente-envio,
body.wc-mm-css-etapas .wc-mm-volume-linha.pendente-envio{
  background:var(--wcp-yellow-s) !important;
  border-color:#EFE0A8 !important;
}
body.wc-mm-css-etapas .wc-mm-volume-item.pendente-envio::before,
body.wc-mm-css-etapas .wc-mm-volume-linha.pendente-envio::before{
  content:"⏳" !important;
  font-size:15px !important;
}
body.wc-mm-css-etapas .wc-mm-volume-item .wc-mm-volume-codigo,
body.wc-mm-css-etapas .wc-mm-volume-linha .wc-mm-volume-codigo{
  color:var(--wcp-muted) !important;
  font-size:11.5px !important;
}

/* 8 — Finalizar travado: VERMELHO, com o motivo visivel. O texto e o mesmo que
       ja existia como title do botao. */
body.wc-motorista-mobile .wc-mm-trava{
  background:var(--wcp-red-s) !important;
  border:1.5px solid #F6C4C5 !important;
  border-radius:var(--wcp-raio) !important;
  padding:13px !important;
  margin-bottom:10px !important;
  color:#9B2226 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}

/* Ponto 7 — a NF de origem do volume, ao lado do codigo. A descricao ja vinha na
   resposta ("Volume 1/3 da NF 62058") e nao aparecia na tela. */
body.wc-mm-css-etapas .wc-mm-volume-origem{
  display:block !important;
  color:var(--wcp-ink) !important;
  font-size:12px !important;
  font-weight:700 !important;
}
body.wc-mm-css-etapas .wc-mm-volume-codigo{
  display:block !important;
  color:var(--wcp-muted) !important;
  font-size:11.5px !important;
  letter-spacing:.03em !important;
}