:root { --tl-azul: #1f3a5f; --tl-laranja: #fe6601; }
body { background: #f4f6f9; }
.bg-tl { background: var(--tl-azul) !important; }
.text-tl { color: var(--tl-laranja) !important; }
.btn-tl { background: var(--tl-laranja); border-color: var(--tl-laranja); color: #fff; }
.btn-tl:hover, .btn-tl:focus { background: #e05a00; border-color: #e05a00; color: #fff; }
.tl-mark { display: inline-block; background: var(--tl-laranja); color: #fff; font-weight: 800; border-radius: 6px; padding: 0 .35em; letter-spacing: -.5px; }

/* Botões de horário (motorista) */
.hora-step { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid #dee2e6; border-radius: .6rem; background: #fff; margin-bottom: .5rem; }
.hora-step .n { width: 2rem; height: 2rem; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.hora-step.feito .n { background: #198754; color: #fff; }
.hora-step.proximo { border-color: var(--tl-laranja); box-shadow: 0 0 0 .15rem rgba(254,102,1,.25); }
.hora-step .valor { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Rubrica */
.pad-wrap { position: relative; border: 2px dashed #adb5bd; border-radius: .6rem; background: #fff; touch-action: none; }
.pad-wrap canvas { width: 100%; height: 240px; display: block; border-radius: .6rem; }
.pad-wrap .dica { position: absolute; bottom: 52px; left: 10%; right: 10%; border-top: 1px solid #ced4da; pointer-events: none; }
.pin-input { font-size: 2rem; letter-spacing: .6em; text-align: center; font-variant-numeric: tabular-nums; }

/* Ficha */
.ficha { background: #fff; border: 1px solid #ced4da; border-radius: .5rem; padding: 1rem; }
.ficha-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--tl-azul); padding-bottom: .5rem; margin-bottom: .5rem; gap: 1rem; }
.ficha-empresa { font-weight: 700; color: var(--tl-azul); }
.ficha-titulo { font-size: .8rem; font-weight: 600; color: #495057; }
.ficha-num { font-size: 1.2rem; font-weight: 700; }
.ficha-grid { border: 1px solid #dee2e6; border-radius: .35rem; overflow: hidden; }
.ficha-grid .cel { border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; padding: .35rem .6rem; }
.ficha-grid .cel label { display: block; font-size: .68rem; text-transform: uppercase; color: #6c757d; font-weight: 600; }
.ficha .hora { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-tabela th { font-size: .72rem; text-transform: uppercase; color: #6c757d; background: #f8f9fa; }
.ficha-assinatura { text-align: center; }
.ficha-assinatura .rubrica { max-height: 110px; max-width: 320px; }
.ficha-assinatura .linha { border-top: 1px solid #212529; width: 60%; max-width: 360px; margin: 0 auto .25rem; }
.ficha-assinatura .hash { word-break: break-all; font-family: monospace; font-size: .65rem; }

@media print {
  body { background: #fff; }
  .no-print, .navbar, .alert { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  .ficha { border: none; padding: 0; }
  @page { size: A4; margin: 12mm; }
}

/* Logo */
.logo-nav { height: 34px; width: auto; }
.logo-login { max-width: 240px; width: 75%; height: auto; }
.logo-ficha { height: 44px; width: auto; }
@media print { .logo-ficha { height: 40px; } }

/* Tanque interativo (cadastro de caminhões) */
.tanque-box { background: #fff; border: 1px solid #e3e5e8; border-radius: .6rem; padding: .5rem .5rem .2rem; }
.tanque-box svg { display: block; width: 100%; height: auto; max-height: 300px; }
.tanque-box .tk-comp { cursor: pointer; }
.tanque-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-top: .6rem; }
.tanque-cap { background: #f6f7f9; border: 1px solid transparent; border-radius: .5rem; padding: .4rem .6rem; }
.tanque-cap.sel { border-color: var(--tl-laranja); background: #fff6f0; }
.mini-veiculo { display: block; width: 180px; height: auto; }

/* Select com pesquisa (motorista) */
.busca-select { position: relative; }
.busca-botao { min-height: 3.1rem; white-space: normal; overflow-wrap: anywhere; padding-top: .55rem; padding-bottom: .55rem; }
.busca-painel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #ced4da; border-radius: .6rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15); overflow: hidden; }
.busca-lista { max-height: 300px; overflow-y: auto; }
.busca-item { padding: .65rem .9rem; border-bottom: 1px solid #f1f3f5; cursor: pointer; }
.busca-item:last-child { border-bottom: 0; }
.busca-item.ativo, .busca-item:hover { background: #fff3ea; }
.busca-item.escolhido { border-left: 4px solid var(--tl-laranja); }

/* Ficha: cartões no celular, tabela no computador/impressão */
.ficha-cards { display: none; }
.ficha-card { border: 1px solid #dee2e6; border-radius: .45rem; padding: .5rem .6rem; margin-bottom: .45rem; background: #fff; }
.ficha-total { background: #f8f9fa; }
.ficha-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .5rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ficha-card-grid label { display: block; font-size: .66rem; text-transform: uppercase; color: #6c757d; font-weight: 600; line-height: 1.2; }
@media (max-width: 575.98px) {
  .ficha-cards { display: block; }
  .ficha-tabela-wrap { display: none; }
  .ficha { padding: .7rem; }
  .ficha-head { flex-direction: column; align-items: stretch; }
  .ficha-head .text-end { text-align: left !important; display: flex; gap: .5rem; align-items: center; }
  .logo-ficha { height: 36px; }
  .ficha-assinatura .linha { width: 85%; }
}
@media print { .ficha-cards { display: none !important; } .ficha-tabela-wrap { display: block !important; } }
.ficha-tabela-wrap { overflow-x: auto; }
/* textos longos nunca empurram a tela */
.ficha, .card, .list-group-item { overflow-wrap: anywhere; }

/* Indicador de salvamento automático */
.auto-status { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; font-size: .8rem; padding: .35rem .7rem; border-radius: 999px; background: #e8f5ee; color: #146c43; box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }
.auto-status.salvando { background: #eef2f7; color: #495057; }
.auto-status.erro { background: #fdecea; color: #b02a37; }