/* Aba Carregamento (ts/modules/log/log-carregamento.ts). Prefixo ca-. Segue o tom areia do sistema e o tema escuro. */
/* Tema claro igual ao quadro da Gestão de Fretes (bg-slate-100/70 e borda slate-200 no tema areia padrão, tema-areia.css). */
#contentCarregamento { --ca-card: #fff; --ca-borda: #e6e0d6; --ca-txt: #334155; --ca-suave: #64748b; --ca-azul: #152e50; --ca-ouro: #fac043; --ca-grade: #f4f1ea; --ca-col: rgba(244,241,234,0.70); }
html[data-tema-app="escuro"] #contentCarregamento { --ca-card: #10233d; --ca-borda: #1e3556; --ca-txt: #cbd5e1; --ca-suave: #8fa6c8; --ca-azul: #e6eefb; --ca-grade: #17294a; --ca-col: #0d1c33; }
.ca-pagina { display: flex; flex-direction: column; gap: 14px; color: var(--ca-txt); font-size: 14px; width: 100%; max-width: 1760px; margin: 0 auto; }   /* ultrawide: para em 1760px, centralizado (como Chat e Fechamento) */
.ca-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ca-kpi { background: var(--ca-card); border: 1px solid var(--ca-borda); border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.ca-kpi b { display: block; font-size: 26px; line-height: 1; color: var(--ca-azul); letter-spacing: -.02em; white-space: nowrap; }
.ca-kpi small { font-size: 11.5px; font-weight: 800; color: var(--ca-suave); text-transform: uppercase; letter-spacing: .03em; }
.ca-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.ca-ic-cinza { background: #e9edf3; color: #152e50; } .ca-ic-ouro { background: #fdf0cf; color: #a16207; } .ca-ic-verde { background: #dcf5ec; color: #047857; } .ca-ic-verm { background: #fee2e2; color: #b91c1c; } .ca-ic-azul { background: #e0e9fb; color: #1d4ed8; }
html[data-tema-app="escuro"] .ca-ic { background: rgba(255,255,255,.08); }
.ca-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ca-seg { display: inline-flex; background: var(--ca-grade); border-radius: 12px; padding: 3px; }
.ca-seg button { border: 0; background: transparent; font: inherit; font-weight: 800; font-size: 12.5px; color: var(--ca-suave); padding: 6px 14px; border-radius: 9px; cursor: pointer; }
.ca-seg button.on { background: var(--ca-card); color: var(--ca-azul); box-shadow: 0 1px 2px rgba(21,46,80,.12); }
.ca-busca { display: flex; align-items: center; gap: 8px; height: 36px; width: 280px; max-width: 100%; padding: 0 12px; border-radius: 11px; background: var(--ca-card); border: 1px solid var(--ca-borda); color: var(--ca-suave); }
.ca-busca input { border: 0; outline: 0; font: inherit; font-size: 13px; flex: 1; min-width: 0; background: transparent; color: var(--ca-azul); }
.ca-data { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 12px; background: var(--ca-grade); color: var(--ca-suave); border: 2px solid transparent; }
.ca-data.on { border-color: #fac043; background: var(--ca-card); color: var(--ca-azul); }
.ca-data input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; width: 118px; }
.ca-antigas { height: 34px; padding: 0 12px; border-radius: 11px; border: 1px dashed #d97706; background: #fffbeb; color: #92400e; font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; }
.ca-dica { margin-left: auto; font-size: 12px; color: var(--ca-suave); }
/* Quadro: sempre 4 colunas lado a lado, que só encolhem com a tela (abaixo do mínimo a área rola para o lado). A altura é o que sobra da
   janela (ajustarAlturaCarregamento) e cada coluna rola por dentro, igual ao quadro de fretes de terceiros. */
.ca-rolagem { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.ca-quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-width: 1040px; height: 100%; }
.ca-col { background: var(--ca-col); border: 1px solid var(--ca-borda); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ca-col > header { flex: none; padding: 14px 16px 12px; display: flex; align-items: center; gap: 10px; background: #152e50; color: #fff; border-top: 5px solid var(--c); }
.ca-col > header h2 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.ca-col > header > div { min-width: 0; }
.ca-col > header small { color: #b8c7de; font-size: 12px; display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-n { margin-left: auto; background: rgba(255,255,255,.14); border-radius: 999px; font-weight: 900; min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.ca-lista { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ca-col > header h2 i { margin-right: 7px; color: var(--c); }
.ca-card { background: var(--ca-card); border: 1px solid var(--ca-borda); border-left: 6px solid var(--k); border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(21,46,80,.06); }
.ca-t1 { display: flex; align-items: baseline; gap: 8px; } .ca-t1 b { font-size: 15px; color: var(--ca-azul); min-width: 0; overflow-wrap: anywhere; }
.ca-h { margin-left: auto; font-size: 17px; font-weight: 900; color: var(--ca-azul); flex: none; }
.ca-sub { display: flex; gap: 6px 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; color: var(--ca-suave); font-size: 12.5px; }
.ca-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 900; text-transform: uppercase; color: #fff; }
.ca-quem { font-weight: 700; color: var(--ca-azul); } .ca-quem i { margin-right: 5px; color: var(--ca-suave); font-size: 11px; }
.ca-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 800; background: var(--ca-grade); color: var(--ca-azul); white-space: nowrap; }
.ca-chip i { font-size: 10px; color: var(--ca-suave); }
.ca-chip.ca-mudo { color: var(--ca-suave); font-weight: 700; } .ca-chip.ca-atr { background: #fef3c7; color: #92400e; } .ca-chip.ca-ok { background: #dcfce7; color: #166534; } .ca-chip.ca-ok i { color: #16a34a; } .ca-chip.ca-liv { background: #e0e9fb; color: #1d4ed8; }
.ca-obs { margin: 8px 0 0; font-size: 12.5px; color: var(--ca-txt); background: var(--ca-grade); border-radius: 10px; padding: 7px 10px; }
.ca-acoes { display: flex; gap: 8px; margin-top: 12px; }
.ca-b { flex: 1; min-height: 38px; line-height: 1.15; padding: 4px 8px; border-radius: 11px; border: 1px solid var(--ca-borda); background: var(--ca-card); font: inherit; font-weight: 800; font-size: 13px; color: var(--ca-azul); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; }
.ca-b:hover { filter: brightness(.96); }
.ca-b.ca-ini { background: #fac043; border-color: #fac043; color: #152e50; } .ca-b.ca-fim { background: #059669; border-color: #059669; color: #fff; } .ca-b.ca-env { background: #152e50; border-color: #152e50; color: #fac043; }
.ca-b.ca-peq { flex: none; width: 40px; color: var(--ca-suave); padding: 0; }
.ca-fixo { flex: 1; min-height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 800; font-size: 13px; }
.ca-fixo.ca-ok { background: #dcfce7; color: #166534; }
.ca-tempo { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ca-tempo b { font-variant-numeric: tabular-nums; color: var(--ca-azul); font-size: 15px; min-width: 52px; }
.ca-tempo small { color: var(--ca-suave); font-size: 12px; white-space: nowrap; }
.ca-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--ca-grade); overflow: hidden; } .ca-bar-verde i { background: linear-gradient(90deg, #059669, #34d399) !important; }
.ca-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 5px; }
.ca-pulso { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; animation: ca-p 1.6s infinite; flex: none; }
@keyframes ca-p { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.6); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
.ca-vazio { text-align: center; color: var(--ca-suave); padding: 30px 10px; font-size: 13px; } .ca-vazio i { display: block; font-size: 26px; opacity: .45; margin-bottom: 8px; }
.ca-lb { display: block; font-size: 11.5px; font-weight: 800; color: #64748b; text-transform: uppercase; margin-bottom: 4px; }
.ca-in { width: 100%; height: 40px; border-radius: 11px; border: 1px solid #e6e0d6; padding: 0 12px; font: inherit; font-size: 14px; color: #152e50; outline: none; } .ca-in:focus { border-color: #fac043; box-shadow: 0 0 0 3px rgba(250,192,67,.25); }
.ca-ta { height: 76px; padding: 10px 12px; resize: none; }
@media (max-width: 1100px) { .ca-dica { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .ca-pulso { animation: none; } }

/* Total de itens e atrasadas no cabeçalho da coluna; botão de ordenar a coluna */
.ca-col > header small.ca-tot { color: #dbe6f7; font-weight: 800; }
.ca-tot-atr { color: #fca5a5; }
.ca-ord { flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 999px; border: 0; background: rgba(255,255,255,.1); color: #b8c7de; cursor: pointer; }
.ca-ord:hover, .ca-ord.on { background: #fac043; color: #152e50; }
.ca-ord + .ca-n { margin-left: 0; }
/* Carga atrasada: fundo avermelhado discreto */
.ca-card.ca-late { background: #fff6f6; border-color: #fca5a5; }
html[data-tema-app="escuro"] .ca-card.ca-late { background: #2a1620; border-color: #7f1d1d; }
/* Arrastar entre colunas */
.ca-card[draggable="true"] { cursor: grab; }
.ca-card.ca-arrastando { opacity: .45; }
.ca-col.ca-alvo { outline: 3px dashed #fac043; outline-offset: -3px; }

/* Andamento da Expedição (SQL 105): pausa, equipe, conferência e fotos vindos do celular. */
.ca-pausa { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 800; }
.ca-pausa-longa { background: #fee2e2; color: #b91c1c; }
.ca-tempo-pausa b { color: #b45309; } .ca-tempo-pausa .ca-pulso { animation: none; background: #b45309; }
.ca-chip-bt { border: 0; cursor: pointer; font: inherit; } .ca-chip-bt:hover { filter: brightness(.95); }

/* Cartão clicável: abre os detalhes do carregamento (carregamentoDetalhes). */
.ca-card[data-ca-det] { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ca-card[data-ca-det]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgb(21 46 80 / .28); }
.ca-card[draggable="true"]:active { cursor: grabbing; }
/* Janela de detalhes. */
.ca-det-st { display: inline-flex; padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 900; }
.ca-det-st.ok { background: #dcfce7; color: #166534; } .ca-det-st.and { background: #fef3c7; color: #92400e; } .ca-det-st.esp { background: #ebe7de; color: #334155; }
.ca-det-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .ca-det-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ca-det-kpi { border: 1px solid #e6e0d6; border-radius: 12px; padding: 8px 10px; background: #fbfaf6; }
.ca-det-kpi small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #64748b; }
.ca-det-kpi b { display: block; font-size: 14px; font-weight: 900; color: #152e50; margin-top: 2px; }
.ca-det-kpi.az b { color: #1d4ed8; } .ca-det-kpi.verm b { color: #b91c1c; }
.ca-det-sec { border: 1px solid #e6e0d6; border-radius: 14px; padding: 10px 12px; }
.ca-det-sec h4 { margin: 0 0 8px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #152e50; display: flex; align-items: center; gap: 7px; }
.ca-det-sec h4 i { color: #d4a017; }
.ca-det-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-det-pessoa { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #152e50; color: #fff; font-size: 12px; font-weight: 800; }
.ca-det-pessoa i { color: #fac043; font-size: 10px; }
.ca-det-pessoa.saiu { background: #e6e0d6; color: #475569; } .ca-det-pessoa.saiu i { color: #64748b; }
.ca-det-nota, .ca-det-vazio { margin: 6px 0 0; font-size: 11.5px; color: #94a3b8; } .ca-det-vazio { margin: 0; font-style: italic; }
.ca-det-lista, .ca-det-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ca-det-lista li { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; font-size: 12.5px; padding: 6px 8px; border-radius: 10px; background: #fbfaf6; }
.ca-det-lista b { color: #152e50; white-space: nowrap; } .ca-det-lista span { color: #64748b; font-weight: 700; white-space: nowrap; } .ca-det-lista em { font-style: normal; color: #334155; }
.ca-det-longa { color: #b91c1c !important; }
.ca-det-tempo li { position: relative; padding: 0 0 0 16px; font-size: 12px; }
.ca-det-tempo li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #fac043; }
.ca-det-tempo li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 13px; bottom: -8px; width: 1px; background: #e6e0d6; }
.ca-det-tempo b { color: #152e50; margin-right: 6px; } .ca-det-tempo span { color: #334155; font-weight: 700; } .ca-det-tempo em { display: block; font-style: normal; color: #64748b; }
.ca-det-rodape { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: #475569; font-weight: 800; }
.ca-det-rodape span { display: inline-flex; gap: 6px; align-items: center; }
.ca-det-rodape button { display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid #e6e0d6; background: #fff; color: #152e50; font: inherit; font-weight: 800; cursor: pointer; transition: border-color .18s ease; }
.ca-det-rodape button:hover { border-color: #fac043; }
html[data-tema-app="escuro"] .ca-det { background: #10233d !important; color: #cbd5e1; }
html[data-tema-app="escuro"] .ca-det-kpi, html[data-tema-app="escuro"] .ca-det-lista li { background: #0d1c33; border-color: #1e3556; }
html[data-tema-app="escuro"] .ca-det-sec, html[data-tema-app="escuro"] .ca-det-rodape button { border-color: #1e3556; background: transparent; }
html[data-tema-app="escuro"] .ca-det-kpi b, html[data-tema-app="escuro"] .ca-det-sec h4, html[data-tema-app="escuro"] .ca-det-lista b, html[data-tema-app="escuro"] .ca-det-tempo b, html[data-tema-app="escuro"] .ca-det-rodape button { color: #e6eefb; }
html[data-tema-app="escuro"] .ca-det-lista em, html[data-tema-app="escuro"] .ca-det-tempo span { color: #cbd5e1; }
@media (prefers-reduced-motion: reduce) { .ca-card[data-ca-det] { transition: none; } .ca-card[data-ca-det]:hover { transform: none; } }

/* Pausada por hoje (fim do turno, Jornada SQL 127). */
.ca-pausa.ca-pausa-dia { background: #eef2ff !important; color: #3730a3 !important; border-color: #c7d2fe !important; }
html[data-tema-app="escuro"] .ca-pausa.ca-pausa-dia { background: #1e1b4b !important; color: #c7d2fe !important; border-color: #3730a3 !important; }