/* Comercial > Desempenho — Custo adicional do motorista. Copiado de godi-php
   views/desempenhocomercial/custoAdicionalMotorista.php e partials/vale_custo.php (o vale também
   aparece em Gerente > Autoriza Custo Adicional). */
.ca-vale{
    --v-papel: var(--oe-papel, #ffffff); --v-tinta: var(--oe-tinta, #15233b); --v-grafite: var(--oe-grafite, #56616f);
    --v-linha: var(--oe-linha, #dfe4eb); --v-acao: var(--oe-acao, var(--godi-base, #004080)); --v-ok: var(--oe-ok, #1d7a55);
    --v-atencao: var(--oe-atencao, #8a5300); --v-fundo: var(--ca-vale-fundo, var(--oe-folha, #eef1f5));
    position: relative; background: var(--v-papel); color: var(--v-tinta); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 35, 59, .06), 0 18px 40px -30px rgba(21, 35, 59, .45);
}
body.dark-mode .ca-vale{
    --v-papel: var(--oe-papel, #343a40); --v-tinta: var(--oe-tinta, #e8ecf2); --v-grafite: var(--oe-grafite, #aab4c0);
    --v-linha: var(--oe-linha, #4b545c); --v-acao: var(--oe-acao, color-mix(in srgb, var(--godi-base, #004080) 30%, #ffffff));
    --v-ok: var(--oe-ok, #52c493); --v-atencao: var(--oe-atencao, #f2b552); --v-fundo: var(--ca-vale-fundo, var(--oe-folha, #454d55));
}
.ca-vale__topo{ display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: 0; padding: .85rem 1.1rem .75rem; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v-grafite); }
.ca-vale__topo b{ color: var(--v-acao); font-weight: 800; }
.ca-vale__picote{ position: relative; height: 0; margin: 0 1.1rem; border-top: 2px dashed var(--v-linha); }
.ca-vale__picote::before, .ca-vale__picote::after{ content: ''; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--v-fundo); }
.ca-vale__picote::before{ left: calc(-1.1rem - 9px); }
.ca-vale__picote::after{ right: calc(-1.1rem - 9px); }
.ca-vale__corpo{ padding: 1rem 1.1rem 1.15rem; }
.ca-vale__valor{ margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--v-tinta); overflow-wrap: anywhere; }
.ca-vale__valor small{ margin-right: .3rem; font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--v-grafite); }
.ca-vale__motivo{ margin: .65rem 0 0; font-family: 'Literata', Georgia, serif; font-size: 1rem; line-height: 1.45; color: var(--v-tinta); overflow-wrap: anywhere; }
.ca-vale dl{ margin: 1rem 0 0; display: grid; gap: .6rem; }
.ca-vale dt{ font-size: .5625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v-grafite); }
.ca-vale dd{ margin: .12rem 0 0; font-size: .875rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ca-vale .ca-mono{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: .8125rem; }
.ca-vale .ca-falta{ color: var(--v-grafite); font-weight: 500; font-style: italic; }
.ca-vale .ca-negativo{ color: #b3261e; font-weight: 700; }
body.dark-mode .ca-vale .ca-negativo{ color: #ff8f85; }
.ca-vale__rodape{ display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: 1.1rem; }
.ca-vale__ref{ margin: 0; font-size: .6875rem; color: var(--v-grafite); line-height: 1.5; }
.ca-carimbo{ flex: 0 0 auto; max-width: 11rem; margin: 0; padding: .35rem .6rem; border: 2px solid currentColor; border-radius: 6px; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; text-align: center; transform: rotate(-5deg); }
.ca-carimbo[data-estado="falta"]{ color: var(--v-grafite); border-style: dashed; transform: none; font-weight: 700; letter-spacing: .04em; text-transform: none; font-size: .75rem; }
.ca-carimbo[data-estado="pronto"]{ color: var(--v-atencao); }
.ca-carimbo[data-estado="direto"], .ca-carimbo[data-estado="autorizado"]{ color: var(--v-ok); }
.ca-carimbo[data-estado="autorizado"]{ border-width: 3px; font-size: .8125rem; }
.ca-carimbo--batida{ animation: ca-carimbo .32s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ca-carimbo{ from{ transform: rotate(-12deg) scale(1.5); opacity: 0; } to{ transform: rotate(-5deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .ca-carimbo--batida{ animation: none; } }
@media (max-width: 767.98px){ .ca-vale__valor{ font-size: 1.8rem; } }
/* Só desta tela: números do desempenho no cabeçalho, prévia do custo, selo "da ordem" e a lista de
   custos já lançados na lateral. */
.ca-numeros{ display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 0; }
.ca-numeros div{ min-width: 0; }
.ca-numeros dt{ font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-grafite); }
.ca-numeros dd{ margin: .15rem 0 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ca-numeros .ca-negativo{ color: var(--oe-pend); }
.ca-motorista{ margin: 0 0 .5rem; font-size: 1rem; color: var(--oe-grafite); }
.ca-motorista strong{ color: var(--oe-tinta); }
.ca-previa{ margin: .25rem 0 0; font-size: .875rem; color: var(--oe-grafite); font-variant-numeric: tabular-nums; }
.ca-previa strong{ color: var(--oe-tinta); }
.ca-previa[hidden]{ display: none; }
.ca-selo{ display: inline-block; margin-left: .5rem; padding: .05rem .45rem; border-radius: 5px; font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: .15em; color: var(--oe-acao); background: color-mix(in srgb, var(--oe-acao) 12%, transparent); }
.ca-ou{ display: flex; align-items: center; gap: .75rem; grid-column: 1 / -1; margin: .25rem 0 -.25rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-grafite); }
.ca-ou::before, .ca-ou::after{ content: ''; flex: 1; border-top: 1px solid var(--oe-linha); }
.oe textarea.oe-input{ min-height: 6rem; resize: vertical; line-height: 1.5; padding-top: .7rem; }

.ca-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ca-item{ padding: .75rem .85rem; border: 1px solid var(--oe-linha); border-radius: 12px; background: var(--oe-papel); }
.ca-item__topo{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .5rem; }
.ca-item__valor{ font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-situacao{ white-space: nowrap; }
.ca-item__motivo{ margin: .35rem 0 0; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.ca-item__detalhe{ margin: .3rem 0 0; font-size: .75rem; color: var(--oe-grafite); }
.ca-item__rodape{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
.ca-situacao{ display: inline-block; padding: .12rem .5rem; border-radius: 6px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ca-situacao--espera{ color: var(--oe-atencao); background: color-mix(in srgb, var(--oe-atencao) 12%, transparent); }
.ca-situacao--ok{ color: var(--oe-ok); background: color-mix(in srgb, var(--oe-ok) 12%, transparent); }
.ca-situacao--pago{ color: var(--oe-grafite); background: color-mix(in srgb, var(--oe-tinta) 8%, transparent); }
.ca-remover{ display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: 0 .65rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--oe-pend); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.ca-remover:hover, .ca-remover:focus-visible{ border-color: color-mix(in srgb, var(--oe-pend) 40%, transparent); background: color-mix(in srgb, var(--oe-pend) 7%, transparent); }
.ca-vazio{ margin: 0; padding: 1rem; text-align: center; color: var(--oe-grafite); background: var(--oe-suave); border-radius: 12px; font-size: .875rem; }

#custoAdicional .oe-barra__acoes{ margin-left: auto; }

@media (max-width: 1199.98px){
    /* Em telas menores o vale vem depois do formulário (é o resultado do que se digita). */
    #custoAdicional .oe-lateral{ order: 0; display: flex; flex-direction: column; }
}
@media (max-width: 767.98px){
    .ca-numeros{ gap: .75rem 1.25rem; }
    /* Barra fixa enxuta no celular: textos curtos e o botão principal ocupando a largura. */
    #custoAdicional .oe-barra__acoes{ width: 100%; flex-wrap: nowrap; }
    #custoAdicional .oe-barra__acoes .oe-botao{ white-space: nowrap; }
    #custoAdicional .oe-barra__acoes .oe-botao--principal{ flex: 1; justify-content: center; }
    #custoAdicional .ca-longo{ display: none; }
}