@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
    --bg:        #0b0f18;
    --surface:   #0f1520;
    --surface-2: #131b28;
    --border:    rgba(255,255,255,0.06);
    --border-blue: rgba(58,134,255,0.18);
    --blue:      #3a86ff;
    --text:      #e2e8f0;
    --text-muted:#8494a9;
    --text-dim:  #707f96;
    --radius:    14px;
    --radius-sm: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(58,134,255,0.18); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(58,134,255,0.35); }

body {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(ellipse at 15% 10%, #0e1829 0%, #0b0f18 55%);
    color: var(--text);
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 58px; min-width: 58px;
    background: #080c13;
    color: #fff;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    overflow: hidden;
    transition: width 0.32s cubic-bezier(0.4,0,0.2,1), min-width 0.32s cubic-bezier(0.4,0,0.2,1);
    z-index: 10;
}
.sidebar.expanded { width: 250px; min-width: 250px; }

.logo {
    display: flex; justify-content: center; align-items: center;
    padding: 18px 0; min-height: 68px; flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.logo-img { width: 34px; opacity: 0.85; transition: width 0.32s ease; }
.sidebar.expanded .logo-img { width: 58px; }
.logo-img:hover { opacity: 1; }

.menu { flex: 1; padding: 6px 0; list-style: none; overflow-y: auto; overflow-x: hidden; }
.menu::-webkit-scrollbar { width: 3px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb { background: rgba(58,134,255,0.2); border-radius: 99px; }
.menu::-webkit-scrollbar-thumb:hover { background: rgba(58,134,255,0.4); }

.menu-icon {
    width: 24px; height: 24px; flex-shrink: 0;
    fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.menu-item {
    padding: 13px 0; cursor: pointer; color: #7a8599;
    display: flex; align-items: center; justify-content: center; gap: 0;
    transition: background 0.2s, color 0.2s;
    margin: 3px 0;
    white-space: nowrap; position: relative;
}
.sidebar.expanded .menu-item { padding: 13px 18px; justify-content: flex-start; gap: 13px; }
.menu-item:hover  { background: rgba(58,134,255,0.08); color: #fff; }
.menu-item.active { color: #fff; box-shadow: inset 3px 0 0 #3a86ff; }

.menu-item .label {
    font-size: 14px; font-weight: 500; flex: 1;
    opacity: 0; max-width: 0; overflow: hidden;
    transition: opacity 0.2s ease, max-width 0.32s ease;
}
.menu-item .arrow {
    font-size: 11px; opacity: 0; max-width: 0; overflow: hidden;
    transition: opacity 0.2s ease, max-width 0.32s ease, transform 0.28s ease;
}
.sidebar.expanded .menu-item .label { opacity: 1; max-width: 160px; }
.sidebar.expanded .menu-item .arrow { opacity: 1; max-width: 20px; }
.menu-item.open .arrow { transform: rotate(180deg); }

.menu-tooltip {
    position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
    background: #1b263b; color: #f1f5f9; padding: 6px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity 0.15s ease;
    border: 1px solid rgba(58,134,255,0.2); box-shadow: 0 4px 14px rgba(0,0,0,0.45); z-index: 200;
}
.menu-item:hover .menu-tooltip { opacity: 1; }
.sidebar.expanded .menu-item .menu-tooltip { display: none; }

.submenu {
    max-height: 0; overflow: hidden; opacity: 0; list-style: none;
    margin: 0 6px; padding: 0 0 4px 0;
    transition: max-height 0.4s ease, opacity 0.25s ease;
}
.sidebar.expanded .submenu.open { max-height: 100dvh; opacity: 1; margin-bottom: 4px; }

/* ── Links diretos no submenu ── */
.submenu > li > a,
.submenu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px 9px 16px; font-size: 13px; font-weight: 500;
    color: #8494a9; text-decoration: none; border-radius: 8px;
    transition: background 0.18s, color 0.18s; white-space: nowrap;
}
.submenu a:hover  { background: rgba(255,255,255,0.04); color: #cbd5e1; }
.submenu a.active { color: #e2e8f0; background: rgba(58,134,255,0.07); }

/* Círculo antes de cada link */
.submenu a::before {
    content: ""; flex-shrink: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: #47596f; border: 1.5px solid #3d5068;
    transition: all 0.2s ease;
}
.submenu a:hover::before  { background: #3a86ff; border-color: #3a86ff; }
.submenu a.active::before { background: #3a86ff; border-color: #3a86ff; }

/* ── Shopee ──
   Menu próprio, então usa o laranja da transportadora (#F97316, o mesmo dos gráficos
   e do card de perfil) no lugar do azul padrão. Sem isso ele virava só mais uma linha
   idêntica às outras, e a razão de ter saído de dentro de Operação não aparecia. */
#menu-shopee:hover                { background: rgba(249,115,22,0.08); }
#menu-shopee.active               { box-shadow: inset 3px 0 0 #F97316; }
#menu-shopee.open  .menu-icon,
#menu-shopee.active .menu-icon    { color: #F97316; }
#submenu-shopee a.active          { background: rgba(249,115,22,0.08); }
#submenu-shopee a:hover::before,
#submenu-shopee a.active::before  { background: #F97316; border-color: #F97316; }

.sidebar-footer {
    padding: 8px 6px; border-top: 1px solid var(--border);
    display: flex; justify-content: center; flex-shrink: 0;
}
.sidebar.expanded .sidebar-footer { justify-content: space-between; padding: 0 10px; }

.hamburger-btn {
    background: none; border: none; outline: none; cursor: pointer;
    user-select: none; -webkit-tap-highlight-color: transparent;
    height: 32px; padding: 0 5px; border-radius: 8px;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px;
    transition: color 0.2s; color: #7a8599;
}
.hamburger-btn:hover { color: #fff; }
.hamburger-btn .chevron-icon { transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }
.sidebar.expanded .hamburger-btn .chevron-icon { transform: rotate(180deg); }

/* ===== CONTENT ===== */
.content { flex: 1; display: flex; flex-direction: column; padding: 20px; min-width: 0; overflow: hidden; }

.topbar {
    height: 56px; display: flex; align-items: center; justify-content: space-between;
    background: rgba(8,12,19,0.75);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius); padding: 0 20px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.35);
    font-weight: 500; margin-bottom: 20px;
    border: 1px solid var(--border); flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar h1 { font-size: 16px; font-weight: 600; color: #e2e8f0; letter-spacing: -0.2px; }

.user-area { display: flex; align-items: center; gap: 15px; position: relative; }
.username { font-size: 14px; color: #aab4c8; font-weight: 500; }

.logout-btn {
    position: relative; width: 36px; height: 36px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); transition: 0.2s;
}
.logout-btn:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
.tooltip {
    position: absolute; bottom: -30px; background: #0f0f14; color: #fff;
    padding: 5px 10px; font-size: 12px; border-radius: 6px;
    opacity: 0; transform: translateY(-5px); transition: 0.2s ease;
    pointer-events: none; border: 1px solid rgba(58,134,255,0.3); white-space: nowrap;
}
.logout-btn:hover .tooltip { opacity: 1; transform: translateY(0); }

/* ===== MAIN ===== */
.main { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: stretch; position: relative; }

.card {
    background: rgba(27,38,59,0.9); padding: 50px; border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); z-index: 1;
    min-width: 320px; max-width: 500px; text-align: center;
    transition: 0.3s ease; border: 1px solid rgba(58,134,255,0.15);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 25px 70px rgba(58,134,255,0.2); }
.card h2 { color: #fff; margin-bottom: 15px; font-size: 24px; font-weight: 700; }
.card p  { color: #aab4c8; font-size: 16px; line-height: 1.6; }

.logo-central { width: 300px; height: auto; opacity: 0.04; position: absolute; }

/* ===== VIEWS ===== */
.view { display: none; width: 100%; min-width: 0; min-height: 0; }
.active-view { display: flex; align-items: center; justify-content: center; }

.tela-full {
    display: none; width: 100%; min-width: 0; min-height: 0;
}
.tela-full.active-view {
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start; overflow: hidden;
}

/* Cabeçalho fixo (não rola) */
.fech-header {
    flex-shrink: 0; width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.fech-period-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 8px;
}

/* Corpo rolável */
.fech-body {
    flex: 1; min-height: 0; min-width: 0;
    overflow-y: auto; overflow-x: hidden;
    padding-top: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(58,134,255,0.3) transparent;
    -webkit-overflow-scrolling: touch;
}

/* ===== ATIVOS — CONVERSA (visual próprio do sistema, sem imitar o app de origem) ===== */
/* A tela em si só centraliza; o painel da conversa é o .wac-phone dentro dela */
.wac-tela.active-view { align-items: stretch; justify-content: center; background: var(--bg); padding: 18px; }
.wac-phone {
    width: 100%; max-width: 820px; height: 100%;
    margin: 0 auto; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.wac-chat-header {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    background: var(--surface-2); padding: 12px 16px; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.wac-voltar { background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; }
.wac-chat-avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.wac-chat-info { display: flex; flex-direction: column; min-width: 0; }
.wac-chat-nome { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wac-chat-numero { font-size: 11.5px; color: var(--text-muted); }
.wac-chat-body {
    flex: 1; min-height: 0; overflow-y: auto;
    background: var(--bg);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
}
.wac-bubble {
    max-width: 62%; padding: 7px 10px 8px; border-radius: 8px;
    font-size: 13.5px; line-height: 1.4; color: var(--text);
    white-space: pre-wrap; word-break: break-word; position: relative;
}
.wac-bubble.enviada  {
    align-self: flex-end; background: rgba(58,134,255,0.13);
    border: 1px solid rgba(58,134,255,0.22); border-bottom-right-radius: 2px;
}
.wac-bubble.recebida {
    align-self: flex-start; background: var(--surface-2);
    border: 1px solid var(--border); border-bottom-left-radius: 2px;
}
/* Separador de data entre os dias da conversa. Centralizado no meio do corpo (que é flex
   em coluna, com as bolhas em align-self), pra não ser confundido com mensagem de nenhum
   dos dois lados. */
.wac-chat-dia {
    align-self: center; margin: 10px 0 6px; max-width: 100%;
}
.wac-chat-dia span {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.wac-bubble-hora {
    float: right; margin: 4px 0 -3px 8px; font-size: 10.5px; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.wac-check { color: var(--text-muted); }
/* Quem enviou só aparece quando a mensagem é selecionada — no dia a dia poluía. */
.wac-bubble-autor { display: none; font-size: 11px; font-weight: 700; color: var(--blue); }
.wac-bubble.selecionada .wac-bubble-autor { display: block; margin-bottom: 3px; }
.wac-bubble { cursor: pointer; }
.wac-bubble.selecionada { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Pisca a mensagem do pedido que abriu a conversa */
.wac-bubble.destacada { animation: wacDestaque 2s ease; }
@keyframes wacDestaque {
    0%, 60%  { box-shadow: 0 0 0 3px rgba(58,134,255,0.55); }
    100%     { box-shadow: 0 0 0 3px rgba(58,134,255,0); }
}
.wac-selecao-barra {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    padding: 9px 14px; font-size: 12.5px; color: var(--text);
}
.wac-selecao-cancelar {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 15px; padding: 0 2px; line-height: 1;
}
.wac-selecao-cancelar:hover { color: var(--text); }
.wac-selecao-excluir {
    margin-left: auto; background: none; border: none; cursor: pointer; font-family: inherit;
    color: #ef4444; font-size: 12.5px; font-weight: 700;
}
.wac-card-acao {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: none; border: 1px solid var(--border); cursor: pointer; font-family: inherit;
    color: var(--text-muted); font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.wac-card-acao:hover { color: #22c55e; border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08); }
/* Arrastar e soltar */
.wac-card[draggable="true"] { cursor: grab; }
.wac-card.arrastando { opacity: 0.4; cursor: grabbing; }
.wac-drop { min-height: 54px; border-radius: 10px; transition: background 0.12s, box-shadow 0.12s; }
.wac-drop.sobre {
    background: rgba(58,134,255,0.07);
    box-shadow: inset 0 0 0 2px rgba(58,134,255,0.45);
}
.wac-card-acao.reabrir:hover { color: var(--text); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
/* Não lidas: quantas mensagens o cliente mandou depois da última vez que ESTA pessoa abriu
   a conversa. Substitui o ponto verde, que só dizia "tem resposta" e continuava aceso
   mesmo depois de alguém ter lido tudo — não dava pra separar o que falta ver. */
/* A contagem fica na borda direita do card, alinhada com o avatar — não colada no código.
   Grudada no título ela andava junto com o texto, e cada card parava num lugar diferente.
   Só o número, em verde: mais uma pílula arredondada num card de 62px só embolava. */
.wac-card-naolidas {
    flex-shrink: 0; padding-left: 8px;
    font-size: 12px; font-weight: 800; color: #22c55e;
    font-variant-numeric: tabular-nums;
}
/* Conversa com mensagem por ler: um traço verde reto na esquerda. Os dois cantos que ele
   encosta vão a zero — com o raio de 10px do card as pontas curvavam e o traço deixava de
   ser reto. O traço é box-shadow, não borda mais grossa: assim o card não muda de tamanho
   ao passar de lido pra não lido e a coluna inteira não dança. */
.wac-card.nao-lida {
    border-radius: 0 10px 10px 0;
    border-left-color: #22c55e;
    box-shadow: inset 2px 0 0 #22c55e;
}
.wac-card.nao-lida .wac-card-nome { color: #f1f5f9; font-weight: 700; }

/* Data da conversa. Ficava só o vencimento (acareação) ou a hora crua (outros), então não
   dava pra saber de que dia era a conversa sem abrir. */
.wac-card-data { font-size: 11px; color: #717f95; margin-top: 2px; }
.wac-selecao-responder {
    margin-left: auto; background: none; border: none; cursor: pointer; font-family: inherit;
    color: var(--blue); font-size: 12.5px; font-weight: 700;
}
.wac-selecao-responder + .wac-selecao-excluir { margin-left: 0; }
.wac-resultado-opcoes { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
.wac-resultado-btn {
    padding: 11px 14px; border-radius: 10px; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 600; text-align: left;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    transition: border-color 0.12s, background 0.12s;
}
.wac-resultado-btn.recebeu:hover     { border-color: rgba(34,197,94,0.5);  background: rgba(34,197,94,0.08); }
.wac-resultado-btn.nao-recebeu:hover { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.08); }
.wac-compose {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: var(--surface-2); border-top: 1px solid var(--border);
}
.wac-compose input {
    flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
    padding: 9px 14px; color: var(--text); font-size: 13.5px; outline: none; font-family: inherit;
    transition: border-color 0.15s;
}
.wac-compose input:focus { border-color: var(--blue); }
.wac-compose-btn {
    width: 34px; height: 34px; border-radius: 50%; background: var(--blue); border: none;
    color: #fff; font-size: 14px; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.wac-compose-btn:hover { background: #2f6fe0; }
/* Funil por prazo — colunas divididas, cards compactos */
.wac-kanban {
    display: flex; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow-x: auto;
}
.wac-coluna {
    flex: 1 1 0; min-width: 205px;
    border-right: 1px solid var(--border); padding: 14px 12px;
}
.wac-coluna:last-child { border-right: none; }
.wac-coluna-header {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: #94a3b8; margin-bottom: 12px;
}
.wac-coluna-contagem { margin-left: auto; color: var(--text); font-size: 12px; }
/* Cada coluna rola por conta própria: com muitos cards a página não estica e a faixa
   de encerrados continua alcançável logo abaixo do quadro. */
.wac-coluna-cards {
    display: flex; flex-direction: column; gap: 7px;
    max-height: 52vh; overflow-y: auto; padding-right: 3px;
}
/* Faixa de encerrados: é consulta, não o foco — ocupa menos altura que a de cima. */
#wac-lista-fechados .wac-coluna-cards { max-height: 34vh; }
.wac-coluna-vazia { font-size: 11.5px; color: var(--text-muted); padding: 6px 2px; }
/* "Nos chamaram": lista corrida, sem colunas — não há prazo nem desfecho pra separar. */
.wac-lista-simples {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 12px;
}
.wac-card {
    display: flex; align-items: center; gap: 10px; min-height: 62px; flex-shrink: 0;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 10px; cursor: pointer;
    transition: border-color 0.12s;
}
.wac-card:hover { border-color: rgba(58,134,255,0.4); }
.wac-card-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.wac-card-info { min-width: 0; flex: 1; }
.wac-card-nome {
    font-size: 12.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wac-card-numero { font-size: 11px; color: var(--text-muted); font-family: monospace; }

/* Filtro por transportadora — a selecionada aparece na cor dela, a mesma do resto do
   sistema, em vez de mais uma fileira de abas azuis idêntica à de cima. */
.wac-transp-tabs { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.wac-transp-tab {
    display: flex; align-items: center; gap: 7px;
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 2px 0 5px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: #8494a9;
    margin-right: 20px; transition: color .15s, border-color .15s;
}
.wac-transp-tab:hover { color: #cbd5e1; }
.wac-transp-tab.active { color: var(--transp-cor); border-bottom-color: var(--transp-cor); }
.wac-transp-n { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.wac-card-prazo { font-size: 11.5px; color: #94a3b8; font-weight: 500; margin-top: 3px; }

@media (max-width: 680px) {
    .wac-tela.active-view { padding: 0; }
    .wac-phone { max-width: 100%; border-radius: 0; border: none; }
    .wac-bubble { max-width: 82%; }
    .wac-chat-body { padding: 14px 12px; }
}


/* ===== FECHAMENTOS / PAINEL ===== */
.fech-select {
    appearance: none; -webkit-appearance: none;
    background: rgba(11,16,26,0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a6a8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: #e2e8f0; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
    padding: 10px 38px 10px 14px; cursor: pointer; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.fech-select:hover  { border-color: rgba(58,134,255,0.35); }
.fech-select:focus  { border-color: #3a86ff; box-shadow: 0 0 0 3px rgba(58,134,255,0.12); }
.fech-select option { background: #0f1520; color: #e2e8f0; }

input.fech-select[type="date"] {
    background: rgba(11,16,26,0.9); padding: 9px 14px; color-scheme: dark;
}
/* O preenchimento automático do Chrome pinta o campo de branco/amarelo e ignora a cor
   do texto — o box-shadow interno é o único jeito de recuperar o fundo escuro. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(11,16,26,0.9) inset;
    -webkit-text-fill-color: #e2e8f0;
    caret-color: #e2e8f0;
    transition: background-color 9999s ease-out;
}
input.fech-select[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }

/* Desempenho — Quantidade x Hora */
/* Desempenho — Quantidade x Hora */

.dh-equipe {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 18px;
}
.dh-equipe-kpi {
    background: var(--surface-2); border: 1px solid rgba(58,134,255,0.18);
    border-radius: var(--radius-sm); padding: 14px 18px;
}
.dh-equipe-kpi-val { font-size: 22px; font-weight: 700; color: #f1f5f9; line-height: 1; }
.dh-equipe-kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; }

.dh-summary {
    font-size: 11px; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}
.dh-card {
    background: rgba(14,22,40,0.85);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px;
}
.dh-head {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.dh-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.dh-rank {
    font-size: 16px; flex-shrink: 0; line-height: 1;
    width: 28px; text-align: center;
}
.dh-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: #2a72e8; color: #fff;
    font-size: 13px; font-weight: 700; display: flex;
    align-items: center; justify-content: center;
}
.dh-name {
    font-size: 14px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dh-peak-pill {
    font-size: 10px; font-weight: 700; color: #4ade80;
    background: rgba(34,197,94,0.1); border-radius: 99px; padding: 1px 7px;
}
.dh-stats { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.dh-stat { text-align: right; }
.dh-stat-value { font-size: 24px; font-weight: 700; color: #f1f5f9; line-height: 1; }
.dh-stat-label {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .04em; margin-top: 3px;
}
.dh-compare {
    display: flex; flex-wrap: wrap; gap: 5px 24px;
    padding: 8px 12px; background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm);
    margin-bottom: 14px;
}
.dh-compare-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.dh-compare-label { color: var(--text-dim); font-weight: 600; min-width: 120px; }
.dh-badge {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px; font-weight: 700;
}
.dh-badge.up { color: #22c55e; }
.dh-badge.down { color: #ef4444; }
.dh-badge.neutral { color: var(--text-dim); font-weight: 600; }
.dh-body { display: flex; gap: 24px; align-items: center; }
.dh-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dh-bars-wrap { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.dh-trend { font-size: 10.5px; font-weight: 700; }
.dh-trend.up { color: #22c55e; }
.dh-trend.down { color: #8494a9; }
.dh-trend.flat { color: var(--text-dim); }
.dh-bars { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.dh-bar-col {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    flex: 0 0 52px; width: 52px;
}
.dh-bar-val { font-size: 10px; color: #cbd5e1; font-weight: 600; white-space: nowrap; }
.dh-bar-track {
    width: 100%; height: 72px; display: flex; align-items: flex-end;
    background: rgba(0,0,0,0.28); border-radius: 5px; overflow: hidden;
}
.dh-bar-fill {
    width: 100%; background: linear-gradient(180deg, #60a5fa 0%, #1d5fc9 100%);
    border-radius: 4px 4px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.dh-bar-fill.dh-bar-peak {
    background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 12px rgba(34,197,94,0.3);
}
.dh-bar-hour { font-size: 9px; color: var(--text-dim); font-weight: 600; }
.dh-donut-area {
    flex: 0 0 auto; display: flex; align-items: center;
    gap: 22px; padding: 0 16px 0 24px;
    border-left: 1px solid rgba(255,255,255,0.06);
    align-self: stretch;
}
.dh-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.dh-donut-item { display: flex; align-items: center; gap: 7px; }
.dh-donut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dh-donut-lbl { font-size: 12px; color: var(--text-muted); min-width: 42px; }
.dh-donut-val { font-size: 12px; font-weight: 700; color: #cbd5e1; min-width: 30px; text-align: right; }
.dh-donut-pct { font-size: 11px; color: var(--text-dim); margin-left: 4px; }

@media (max-width: 680px) {
    .dh-equipe { grid-template-columns: repeat(2, 1fr); }
    .dh-head { flex-direction: column; align-items: flex-start; }
    .dh-stats { width: 100%; justify-content: flex-start; gap: 24px; }
    .dh-stat { text-align: left; }
}

/* ── Ranking Desempenho ── */
/* ── Ranking Desempenho ── */

.rank-summary {
    font-size: 11px; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.rank-summary::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.05); }
.rank-card {
    background: rgba(14,22,40,0.85);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px;
}
.rank-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rank-pos { font-size: 20px; width: 30px; text-align: center; flex-shrink: 0; line-height: 1; }
.rank-pos-num { font-size: 13px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rank-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #1e4d8c, #2a72e8); color: #fff;
    font-size: 12px; font-weight: 700; display: flex;
    align-items: center; justify-content: center;
}
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-pct-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rank-total { text-align: right; flex-shrink: 0; }
.rank-num { font-size: 28px; font-weight: 800; color: #f1f5f9; line-height: 1; font-variant-numeric: tabular-nums; }
.rank-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.rank-bar-track {
    height: 6px; background: rgba(255,255,255,0.05);
    border-radius: 99px; overflow: hidden; margin-bottom: 12px;
}
.rank-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #2a72e8, #60a5fa);
    box-shadow: 0 0 8px rgba(58,134,255,0.4);
}
.rank-carriers { display: flex; flex-direction: column; gap: 5px; }
.rank-carrier { display: flex; align-items: center; gap: 8px; }
.rank-c-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rank-c-name { font-size: 11px; color: var(--text-muted); width: 38px; flex-shrink: 0; }
.rank-c-track { flex: 1; height: 5px; background: rgba(255,255,255,0.04); border-radius: 99px; overflow: hidden; }
.rank-c-fill { height: 100%; border-radius: 99px; }
.rank-c-val { font-size: 11px; font-weight: 700; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

.fech-filtrar-btn {
    padding: 10px 22px; background: #3a86ff; border: none; border-radius: var(--radius-sm);
    color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
    font-family: 'Inter', sans-serif; transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.fech-filtrar-btn:hover { background: #2a72e8; box-shadow: 0 4px 16px rgba(58,134,255,0.35); transform: translateY(-1px); }
.fech-filtrar-btn:active { transform: translateY(0); }

.quinzena-toggle {
    display: flex; gap: 10px; width: 100%;
}
.quinzena-btn {
    flex: 1; padding: 12px 16px;
    background: rgba(27,38,59,0.45);
    border: 1px solid rgba(58,134,255,0.1);
    color: #717f95; font-size: 13.5px; font-weight: 500;
    cursor: pointer; text-align: center; white-space: nowrap;
    transition: all 0.22s ease;
    font-family: 'Inter', sans-serif; border-radius: 12px;
}
.quinzena-btn:hover:not(.active) {
    border-color: rgba(58,134,255,0.28);
    color: #94a3b8;
    background: rgba(27,38,59,0.85);
}
.quinzena-btn.active {
    background: rgba(58,134,255,0.1);
    border-color: rgba(58,134,255,0.5);
    color: #93c5fd; font-weight: 600;
    box-shadow: 0 0 0 1px rgba(58,134,255,0.15), 0 4px 20px rgba(58,134,255,0.1);
}

.fechamento-empty {
    background: rgba(27,38,59,0.9); border: 1px solid rgba(58,134,255,0.15);
    border-radius: 16px; padding: 40px 24px; min-height: 180px;
    display: flex; align-items: center; justify-content: center;
    color: #7a8599; font-size: 15px; text-align: center;
}

/* ===== PAINEL ENTREGADOR ===== */
.painel-banner {
    border-radius: 14px; padding: 24px 28px;
    display: flex; align-items: center; gap: 28px;
    margin-bottom: 20px; border: 1px solid rgba(58,134,255,0.18);
}
.painel-banner.banner-positivo {
    background: linear-gradient(140deg, rgba(34,197,94,0.11) 0%, rgba(14,22,40,0) 55%);
    border-color: rgba(34,197,94,0.22);
}
.painel-banner.banner-negativo {
    background: linear-gradient(140deg, rgba(239,68,68,0.11) 0%, rgba(14,22,40,0) 55%);
    border-color: rgba(239,68,68,0.22);
}
.pb-left { flex: 1; }
.pb-eyebrow { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #707f96; font-weight: 700; margin-bottom: 9px; }
.pb-valor { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.banner-positivo .pb-valor { color: #22c55e; }
.banner-negativo .pb-valor { color: #ef4444; }
.pb-sub { font-size: 11px; color: #717f95; margin-top: 9px; }
.pb-ant-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pb-pagamento { font-size: 11px; color: #717f95; margin-top: 6px; margin-bottom: 16px; padding-left: 2px; }

/* ── Card status pagamento (entregador) ── */
.pgto-card { display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.pgto-card.pgto-pago       { background: rgba(34,197,94,0.08);  border: 1px solid rgba(34,197,94,0.22); }
.pgto-card.pgto-antecipado { background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.22); }
.pgto-card.pgto-pendente   { background: rgba(58,134,255,0.06); border: 1px solid rgba(58,134,255,0.18); }
.pgto-card-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.pgto-pago       .pgto-card-icon { background: rgba(34,197,94,0.15);  color: #22c55e; }
.pgto-antecipado .pgto-card-icon { background: rgba(249,115,22,0.15); color: #f97316; }
.pgto-pendente   .pgto-card-icon { background: rgba(58,134,255,0.12); color: #3a86ff; }
.pgto-card-title { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.pgto-pago       .pgto-card-title { color: #22c55e; }
.pgto-antecipado .pgto-card-title { color: #f97316; }
.pgto-pendente   .pgto-card-title { color: #3a86ff; }
.pgto-card-sub { font-size: 12px; color: #8494a9; }

.pb-divider { width: 1px; background: rgba(255,255,255,0.06); align-self: stretch; margin: 4px 0; }

.pb-right { text-align: center; min-width: 148px; padding: 0 12px; }
.pb-ent-label { font-size: 9px; color: #707f96; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; margin-bottom: 9px; }
.pb-ent-valor { font-size: 40px; font-weight: 800; color: #f1f5f9; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.pb-ent-sub { font-size: 11px; color: #717f95; margin-top: 8px; }

.painel-ajustes {
    display: grid; grid-template-columns: repeat(1, 1fr); gap: 12px; margin-bottom: 20px;
}
.painel-adicionais {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.painel-descontos {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px;
}
/* Receber Shopee — mesmo cartão de bipagem da separação, sem o sticky, que lá existe
   por causa do grid de duas colunas e aqui só deixaria o cartão flutuando. */
.shr-scan-card { position: static; margin-top: 0; margin-bottom: 18px; }
.shr-scan-btn {
    background: none; border: none; cursor: pointer; color: #3a86ff;
    display: flex; align-items: center; padding: 0 2px;
    opacity: 0.75; transition: opacity 0.15s;
}
.shr-scan-btn:hover { opacity: 1; }

/* Faixa do XPT: fica sempre à vista enquanto se bipa. É o que impede alguém passar
   duzentos pacotes antes de perceber que está recebendo no lugar errado. */
.shr-faixa {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 16px; border-radius: 12px; margin-bottom: 12px;
    background: var(--shr-cor-bg); border: 1px solid var(--shr-cor-bd);
}
.shr-faixa-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--text-muted);
}
.shr-faixa-xpt {
    font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--shr-cor);
}
.shr-faixa-obs { font-size: 11.5px; color: var(--text-dim); margin-left: auto; }
/* Um azul só para os dois XPTs: cada pessoa recebe num deles, então cor diferente por
   XPT não distingue nada que ela já não saiba. */
.shr-faixa.cfc, .shr-faixa.via { --shr-cor: #3a86ff; --shr-cor-bg: rgba(58,134,255,0.08); --shr-cor-bd: rgba(58,134,255,0.28); }
/* Polo sem Shopee (Joaçaba): neutro, porque não há recebimento acontecendo. */
.shr-faixa.sem { --shr-cor: #94a3b8; --shr-cor-bg: rgba(148,163,184,0.06); --shr-cor-bd: rgba(148,163,184,0.22); }
.shr-escolha-opcoes { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Escolha inicial do XPT — pergunta uma vez, e o que for escolhido fica no perfil. */
.shr-escolha-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 14px; }
.shr-escolha-btn {
    padding: 20px 14px; border-radius: 12px; cursor: pointer; font-family: inherit;
    background: rgba(0,0,0,0.25); border: 1.5px solid var(--border);
    transition: border-color .15s, background .15s, transform .12s;
}
.shr-escolha-btn:hover { transform: translateY(-2px); border-color: rgba(58,134,255,0.5); background: rgba(58,134,255,0.07); }
.shr-escolha-cidade { display: block; font-size: 16px; font-weight: 800; color: #f1f5f9; margin-bottom: 4px; }
.shr-escolha-cod    { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #3a86ff; }
/* Polo sem Shopee não ganha o azul: ele não é um destino de recebimento. */
.shr-escolha-btn[data-xpt=""] .shr-escolha-cod { color: var(--text-muted); font-weight: 600; letter-spacing: 0; }

/* Resumo do recebimento Shopee: o total do XPT em uso e a parte que a pessoa bipou. */
.shr-resumo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
/* Cartão de início enxuto: título, tipo e o atalho da seleção numa linha só. O caminho
   normal é clicar em "Conferir" na visão geral, então o seletor não precisa ficar aberto
   ocupando meia tela — quem vai marcar vários abre pelo botão. */
.sca-inicio-topo {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.sca-inicio-topo .bip-scan-title { margin-bottom: 0; }
.sca-inicio-topo .filtro-tabs { padding-left: 20px; border-left: 1px solid var(--border); }
.sca-abrir {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: #3a86ff;
}
.sca-abrir:hover { text-decoration: underline; }
.sca-abrir-seta { transition: transform .18s; }
.sca-abrir.aberto .sca-abrir-seta { transform: rotate(180deg); }
/* Em tela estreita a linha quebra e o risquinho divisor fica solto no meio do nada. */
@media (max-width: 680px) {
    .sca-inicio-topo { gap: 12px; }
    .sca-inicio-topo .filtro-tabs { padding-left: 0; border-left: none; }
    .sca-abrir { margin-left: 0; }
}

/* Entregador do cluster, na visão geral. Sem ninguém definido fica apagado e discreto — é
   um convite, não um alerta; cluster sem entregador é situação normal no começo do dia. */
.sca-entregador {
    background: none; border: 1px dashed var(--border); border-radius: 8px;
    padding: 4px 10px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 600; color: #7b8ea6;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.sca-entregador:hover { border-color: rgba(58,134,255,0.5); color: #cbd5e1; }
.sca-entregador.definido {
    border-style: solid; border-color: rgba(58,134,255,0.3);
    background: rgba(58,134,255,0.08); color: #93c5fd;
}
.sca-entregador.definido:hover { border-color: #3a86ff; color: #dbeafe; }

/* Seletor de dia da visão geral. Fica colado no título porque é ele que diz de quando é o
   quadro — solto num canto, dava pra ler o dia 5 achando que era hoje. */
.sca-dia {
    background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 8px;
    padding: 4px 10px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 600; color: #cbd5e1;
}
.sca-dia:hover { border-color: rgba(58,134,255,0.5); color: #e2e8f0; }
.sca-dia:focus { outline: none; border-color: #3a86ff; }
/* Aviso de dia fechado: o quadro é o que foi guardado, não dá pra conferir mais nele. */
.sca-retrato {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: #eab308; background: rgba(234,179,8,0.12);
    border: 1px solid rgba(234,179,8,0.3); border-radius: 6px; padding: 3px 8px;
}

/* Visão geral em painel próprio: é a tela principal daqui, e sem moldura ela encostava
   no cartão de cima e parecia parte dele. */
.sca-painel {
    margin-top: 22px; padding: 18px 20px 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Histórico de conferências: bloco próprio, recuado e mais apagado. Coladinho na visão
   geral ele parecia continuação da tabela de cima — são duas coisas diferentes, uma é o
   estado de agora e a outra é o que já foi feito. */
.sca-secao {
    margin-top: 30px; padding: 20px 20px 6px;
    background: rgba(0,0,0,0.16); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.sca-secao-titulo {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: #8494a9;
}
/* Tabela do histórico um tom abaixo: quem está trabalhando olha a de cima. */
.sca-secao .ant-hist-table th { color: #717f95; }
.sca-secao .ant-hist-table td { font-size: 12.5px; }

/* Escolha de vários clusters. Caixa de seleção mesmo, não chip: aqui a pessoa marca
   quantos quiser, e caixa marcada é o controle que diz isso sem precisar explicar. */
/* Em grade e compacto: em lista de uma coluna, algumas dezenas de clusters empurravam a
   visão geral pra fora da tela. Assim cabem cinco por vez sem o cartão crescer. */
.sca-multi {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px; max-height: 132px; overflow-y: auto;
    background: rgba(0,0,0,0.22); border: 1px solid var(--border);
    border-radius: 10px; padding: 5px;
}
.sca-multi-item {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 5px 8px; border-radius: 7px; cursor: pointer;
    font-size: 12.5px; color: #cbd5e1; transition: background .12s;
}
.sca-multi-item:hover { background: rgba(58,134,255,0.07); }
.sca-multi-item input { width: 14px; height: 14px; accent-color: #3a86ff; cursor: pointer; flex-shrink: 0; }
.sca-multi-item > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sca-multi-item.marcado { background: rgba(58,134,255,0.12); color: #e2e8f0; font-weight: 600; }
.sca-multi-qtd { margin-left: auto; font-size: 10.5px; color: #717f95; font-weight: 400; flex-shrink: 0; }

/* Cabeçalho fora da rolagem: contagem e atalhos ficam sempre à vista. */
.sca-multi-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 6px; flex-wrap: wrap;
}
.sca-multi-resumo { font-size: 11.5px; color: #8494a9; }
.sca-multi-acoes { display: flex; gap: 14px; }
.sca-multi-acoes button {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 600; color: #3a86ff; padding: 0;
}
.sca-multi-acoes button:hover { text-decoration: underline; }

/* Barra de conclusão da conferência — fica acima do campo de bipagem, à vista o tempo
   todo: é ela que diz se o grupo acabou, sem a pessoa ter que somar cartão de cabeça. */
.sca-progresso {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px;
}
.sca-prog-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sca-prog-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: #8494a9;
}
.sca-prog-pct { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sca-prog-obs { font-size: 12.5px; color: #8494a9; margin-left: auto; }

/* Conferência LineHaul — barra de progresso por TO, como a planilha. */
.slh-linha { cursor: pointer; transition: background .12s; }
.slh-linha:hover { background: rgba(58,134,255,0.06); }
.slh-pct { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.slh-barra {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,0.06); min-width: 90px;
}
.slh-barra-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }

/* Lista de códigos da TO — rola dentro do modal, senão uma TO de 300 pacotes empurra
   os botões pra fora da tela. */
.slh-to-lista { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.slh-cod {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 5px;
    border: 1px solid var(--border); background: rgba(0,0,0,0.18);
}
.slh-cod.falta { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.05); }
.slh-cod.ok    { border-color: rgba(34,197,94,0.22); background: rgba(34,197,94,0.04); }
.slh-cod-num   { font-family: monospace; font-size: 12.5px; font-weight: 700; color: #e2e8f0; }
.slh-cod-info  { font-size: 11.5px; color: #8494a9; text-align: right; }
.slh-cod-info.falta { color: #ef4444; font-weight: 600; }

/* Faixa "atualizado em" do romaneiro — é a primeira coisa que a pessoa vem conferir. */
.shr-ultima {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 13px 18px; border-radius: 12px; margin-bottom: 18px;
    background: rgba(58,134,255,0.07); border: 1px solid rgba(58,134,255,0.22);
}
.shr-ultima.vazia { background: rgba(148,163,184,0.05); border-color: rgba(148,163,184,0.2); }
.shr-ultima-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: #8494a9;
}
.shr-ultima-valor { font-size: 15px; font-weight: 800; color: #f1f5f9; font-variant-numeric: tabular-nums; }
.shr-ultima-rel   { font-size: 12.5px; font-weight: 600; color: #3a86ff; }
.shr-ultima.vazia .shr-ultima-valor { font-size: 14px; font-weight: 600; color: #8494a9; }
.shr-ultima-obs   { font-size: 12px; color: #8494a9; margin-left: auto; }

/* Exportar e paginar o recebimento Shopee. */
.shr-export-btn {
    display: flex; align-items: center; gap: 7px;
    background: rgba(58,134,255,0.08); border: 1px solid rgba(58,134,255,0.28);
    border-radius: 9px; color: #3a86ff; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; padding: 7px 13px;
    transition: background .15s, border-color .15s;
}
.shr-export-btn:hover { background: rgba(58,134,255,0.16); border-color: rgba(58,134,255,0.5); }
/* Calendário de intervalo embutido no modal — mesmo desenho do de Pedidos, mas fixo no
   card em vez de flutuando: aqui ele é o campo, não um popover sobre a tela. */
.shr-cal {
    background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; overflow: hidden; user-select: none;
}
.shr-cal .ped-cal-footer { border-top: 1px solid rgba(255,255,255,0.045); padding: 11px 14px 12px; }

.shr-paginacao {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.shr-pag-btn {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px;
    color: #94a3b8; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; padding: 7px 14px;
    transition: border-color .15s, color .15s;
}
.shr-pag-btn:hover:not(:disabled) { border-color: rgba(58,134,255,0.4); color: #cbd5e1; }
.shr-pag-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.shr-pag-info { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Polo na lista de usuários GC — select discreto, do tamanho do conteúdo. */
.gc-polo-select {
    background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 8px;
    color: #cbd5e1; font-family: inherit; font-size: 12.5px; font-weight: 600;
    padding: 5px 9px; cursor: pointer;
}
.gc-polo-select:hover { border-color: rgba(58,134,255,0.4); }
.gc-polo-select:disabled { opacity: 0.5; cursor: wait; }

/* Remover recebimento — discreto, porque é exceção: só admin/dev vê. */
.shr-del-btn {
    background: none; border: 1px solid rgba(239,68,68,0.28); border-radius: 7px;
    color: #ef4444; cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 600; padding: 4px 11px;
    transition: background .15s, border-color .15s;
}
.shr-del-btn:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.5); }

/* Percentual junto do número, menor: é leitura de apoio, não um segundo total. */
.shr-pct {
    font-size: 13px; font-weight: 700; color: #3a86ff;
    margin-left: 8px; letter-spacing: 0;
}
/* XPT na tabela: texto sublinhado, não pílula. Cada linha já é uma linha de tabela —
   uma cápsula colorida em cima disso vira enfeite, não informação. */
.shr-xpt-tag {
    display: inline-block; padding-bottom: 2px;
    border-bottom: 2px solid #3a86ff; color: #3a86ff;
    font-size: 11.5px; font-weight: 700; font-family: 'Inter', sans-serif;
}
.pt-header-neg { color: #ef4444; }
.pt-row span.val-neg { color: #ef4444 !important; font-weight: 600; }
.paj-card {
    background: rgba(14,22,40,0.8); border: 1px solid rgba(58,134,255,0.12);
    border-radius: 10px; padding: 16px 18px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.paj-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.paj-card.positivo {
    background: linear-gradient(140deg, rgba(34,197,94,0.09) 0%, rgba(14,22,40,0.8) 60%);
    border-color: rgba(34,197,94,0.2);
}
.paj-card.negativo {
    background: linear-gradient(140deg, rgba(239,68,68,0.09) 0%, rgba(14,22,40,0.8) 60%);
    border-color: rgba(239,68,68,0.2);
}
.paj-label    { font-size: 9px; color: #707f96; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.paj-sublabel { font-size: 10px; color: #717f95; margin-bottom: 6px; }
.paj-value    { font-size: 20px; font-weight: 800; color: #f1f5f9; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.paj-card.positivo .paj-value { color: #22c55e; }
.paj-card.negativo .paj-value { color: #ef4444; }

.painel-section-title {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.13em; color: #707f96; margin-bottom: 10px; margin-top: 4px;
    display: flex; align-items: center; gap: 10px;
}
.painel-section-title::after {
    content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.04);
}

.painel-transp {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.pt-card {
    background: rgba(27,38,59,0.9); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px; padding: 14px 16px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pt-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.pt-card-loggi  .pt-header { color: #12a5e8; border-bottom-color: rgba(18,165,232,0.15); }
.pt-card-jt     .pt-header { color: #ef4444; border-bottom-color: rgba(239,68,68,0.15); }
.pt-card-imile  .pt-header { color: #9333ea; border-bottom-color: rgba(147,51,234,0.15); }
.pt-card-anjun  .pt-header { color: #22c55e; border-bottom-color: rgba(34,197,94,0.15); }
.pt-card-shopee .pt-header { color: #f97316; border-bottom-color: rgba(249,115,22,0.15); }
.pt-card-te     .pt-header { color: #f59e0b; border-bottom-color: rgba(245,158,11,0.15); }
.pt-header {
    font-size: 12px; font-weight: 700; color: #3a86ff;
    margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(58,134,255,0.12);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.pt-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.pt-row:last-child { border-bottom: none; }
.pt-row span:first-child { color: #717f95; font-size: 11px; font-weight: 500; }
.pt-row span:last-child  { color: #f1f5f9; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

.painel-ocorrencias {
    display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px;
}
.poc-card {
    background: rgba(14,22,40,0.8); border: 1px solid rgba(58,134,255,0.1);
    border-radius: 10px; overflow: visible; position: relative;
}
.poc-header {
    padding: 12px 16px; font-size: 9px; font-weight: 700; color: #707f96;
    letter-spacing: .13em; text-transform: uppercase;
    background: rgba(8,14,26,0.7); border-bottom: 1px solid rgba(58,134,255,0.08);
    border-radius: 10px 10px 0 0;
    display: flex; align-items: center; gap: 10px;
}
.poc-header::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.04); }
.poc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.poc-table th {
    text-align: left; padding: 8px 14px; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #7a8599; font-weight: 500; border-bottom: 1px solid rgba(58,134,255,0.08);
    background: rgba(15,15,20,0.2);
}
.poc-table td { padding: 10px 14px; color: #f1f5f9; border-bottom: 1px solid rgba(58,134,255,0.06); }
.poc-table tr:last-child td { border-bottom: none; }
.poc-table .mono { font-size: 11px; color: #7a8599; }
.poc-table .val-neg { color: #ef4444; font-weight: 600; }
.poc-empty { text-align: center !important; color: #7a8599 !important; padding: 20px 14px !important; }

/* ===== EXTRAVIOS CARDS ===== */
.extr-lista { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 14px; }
.extr-vazio { padding: 22px 14px; text-align: center; color: #717f95; font-size: 13px; }
.extr-card {
    background: rgba(10,16,30,0.55); border-radius: 8px;
    padding: 12px 14px; border: 1px solid rgba(58,134,255,0.08);
    transition: border-color .12s;
}
.extr-card:hover { border-color: rgba(58,134,255,0.2); }
.extr-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 7px;
}
.extr-transp { font-size: 9px; font-weight: 700; color: #3a86ff; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.extr-codigo { font-size: 10px; color: #717f95; font-family: monospace; word-break: break-all; text-align: right; max-width: 60%; }
.extr-endereco { font-size: 12px; color: #94a3b8; line-height: 1.5; margin-bottom: 10px; }
.extr-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.extr-valor { font-size: 13px; font-weight: 700; color: #717f95; font-variant-numeric: tabular-nums; }
.extr-valor.val-neg { color: #ef4444; }
.extr-wa {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; background: rgba(37,211,102,0.08);
    border: 1px solid rgba(37,211,102,0.25); border-radius: 8px;
    color: #25d366; font-size: 11px; font-weight: 600;
    text-decoration: none; transition: background 0.2s, border-color 0.2s; white-space: nowrap;
}
.extr-wa:hover { background: rgba(37,211,102,0.18); border-color: rgba(37,211,102,0.5); }

/* ===== ADMIN ===== */
.admin-section {
    background: rgba(27,38,59,0.9); border: 1px solid rgba(58,134,255,0.15);
    border-radius: 14px; padding: 20px; margin-bottom: 16px;
}
.admin-section-title {
    font-size: 14px; font-weight: 600; color: #f1f5f9;
    margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(58,134,255,0.1);
}
.admin-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.admin-input {
    flex: 1; min-width: 200px; padding: 10px 14px;
    background: rgba(15,15,20,0.8); border: 1px solid rgba(58,134,255,0.2);
    border-radius: 10px; color: #f1f5f9; font-size: 14px;
    font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s;
}
.admin-input:focus { border-color: #3a86ff; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-list-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; background: rgba(15,15,20,0.4); border-radius: 8px; font-size: 13.5px;
}
.admin-list-item .info { color: #7a8599; font-size: 12px; }
.gc-toggle {
    width: 46px; height: 26px; border-radius: 13px;
    background: #1a2235; border: 1.5px solid #2d3a50;
    position: relative; cursor: pointer; flex-shrink: 0;
    transition: background 0.22s, border-color 0.22s;
}
.gc-toggle--on {
    background: #3a86ff; border-color: #3a86ff;
}
.gc-toggle__knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #3a4a60;
    transition: transform 0.22s, background 0.22s;
}
.gc-toggle--on .gc-toggle__knob {
    transform: translateX(20px);
    background: #fff;
}
.admin-del-btn {
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px; color: #ef4444; font-size: 12px; padding: 4px 10px;
    cursor: pointer; transition: 0.2s; font-family: 'Inter', sans-serif;
}
.admin-del-btn:hover { background: rgba(239,68,68,0.2); }
.admin-save-btn {
    background: rgba(58,134,255,0.1); border: 1px solid rgba(58,134,255,0.3);
    border-radius: 6px; color: #3a86ff; font-size: 12px; padding: 4px 10px;
    cursor: pointer; transition: 0.2s; font-family: 'Inter', sans-serif;
}
.admin-save-btn:hover { background: rgba(58,134,255,0.2); }
.adm-fech-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px; flex-wrap:wrap; }
.adm-pdf-btn {
    display:flex; align-items:center; gap:7px;
    background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.3);
    border-radius:10px; color:#22c55e; font-size:13px; font-weight:600;
    padding:8px 16px; cursor:pointer; transition:0.2s; font-family:'Inter',sans-serif;
}
.adm-pdf-btn:hover { background:rgba(34,197,94,0.2); }
.adm-pdf-btn:disabled { opacity:0.5; cursor:not-allowed; }
.admin-nome-input {
    background: rgba(15,15,20,0.6); border: 1px solid rgba(58,134,255,0.15);
    border-radius: 6px; color: #f1f5f9; font-size: 13px; padding: 5px 8px;
    font-family: 'Inter', sans-serif; width: 210px; outline: none;
}
.admin-nome-input:focus { border-color: #3a86ff; }
.admin-badge {
    font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600;
}
.admin-badge.admin  { background: rgba(58,134,255,0.2); color: #3a86ff; }
.admin-badge.entregador { background: rgba(52,211,153,0.15); color: #34d399; }

/* ===== MOBILE ===== */
.sidebar-backdrop { display: none; }

.topbar-mobile-menu {
    display: none; background: none; border: none; color: #7a8599;
    cursor: pointer; padding: 6px; border-radius: 8px;
    align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    margin-right: 6px;
}
.topbar-mobile-menu:active { color: #fff; }

.sidebar-reload-btn {
    display: none; background: none; border: none; color: #7a8599;
    cursor: pointer; padding: 6px 8px; border-radius: 8px;
    align-items: center; justify-content: center; gap: 6px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s; margin-left: 4px;
    font-size: 13px; font-weight: 500;
}
.sidebar-reload-btn:hover, .sidebar-reload-btn:active { color: #fff; }
.sidebar.expanded .sidebar-reload-btn { display: flex; }

/* ── VIDEIRA PAINEL ─────────────────────────────────────────────── */
.vp-hero {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: linear-gradient(140deg, rgba(34,197,94,0.07) 0%, rgba(15,23,42,0) 55%);
    border: 1px solid rgba(34,197,94,0.16); border-radius: 18px;
    padding: 22px 26px; margin-bottom: 14px;
}
.vp-hero.neg {
    background: linear-gradient(140deg, rgba(239,68,68,0.07) 0%, rgba(15,23,42,0) 55%);
    border-color: rgba(239,68,68,0.16);
}
.vp-hero-eyebrow {
    font-size: 9px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: #717f95; margin-bottom: 7px;
}
.vp-hero-val {
    font-size: 32px; font-weight: 800; letter-spacing: -.03em;
    line-height: 1; color: #22c55e; font-variant-numeric: tabular-nums;
}
.vp-hero.neg .vp-hero-val { color: #ef4444; }
.vp-hero-val.neutral { color: #f1f5f9; }
.vp-hero-sub { font-size: 11px; color: #717f95; margin-top: 7px; }
.vp-hero-sep { width: 1px; height: 52px; background: rgba(255,255,255,0.06); margin: 0 26px; }
.vp-hero-right { text-align: right; }

.vp-stats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 9px; margin-bottom: 20px;
}
.vp-stat {
    background: rgba(14,22,40,0.8); border: 1px solid rgba(58,134,255,0.09);
    border-radius: 11px; padding: 12px 14px;
}
.vp-stat-lbl {
    font-size: 9px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #717f95; margin-bottom: 5px;
}
.vp-stat-val { font-size: 14px; font-weight: 700; color: #f1f5f9; font-variant-numeric: tabular-nums; }
.vp-stat.orange { border-color: rgba(249,115,22,0.18); }
.vp-stat.orange .vp-stat-val { color: #f97316; }
.vp-stat.red { border-color: rgba(239,68,68,0.2); }
.vp-stat.red .vp-stat-val { color: #ef4444; }

.vp-lbl {
    font-size: 9px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #707f96;
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 10px;
}
.vp-lbl::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.04); }

.vp-carrier-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 9px; margin-bottom: 22px;
}
.vp-c {
    background: rgba(14,22,40,0.8); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px; padding: 14px 16px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.vp-c:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.vp-c-name { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
.vp-c-val { font-size: 17px; font-weight: 700; color: #f1f5f9; line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.vp-c-qty { font-size: 11px; color: #717f95; }

#vp-table { font-variant-numeric: tabular-nums; }
#vp-table thead th { position: sticky; top: 0; background: #0d1629; z-index: 1; }
/* ── /VIDEIRA PAINEL ─────────────────────────────────────────────── */

@media (max-width: 680px) {
    body { height: 100dvh; }

    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
        transform: translateX(-100%);
        width: 260px !important; min-width: 260px !important;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .sidebar.expanded { transform: translateX(0); }
    .sidebar.expanded .menu-item { padding: 13px 18px; justify-content: flex-start; gap: 13px; }
    .sidebar.expanded .menu-item .label { opacity: 1; max-width: 160px; }
    .sidebar.expanded .menu-item .arrow { opacity: 1; max-width: 20px; }
    .sidebar.expanded .submenu.open { max-height: 200px; opacity: 1; margin-bottom: 6px; border-color: rgba(58,134,255,0.1); }
    .sidebar.expanded .sidebar-footer { justify-content: space-between; padding: 0 10px; }

    .sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 90;
        background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .sidebar-backdrop.active { opacity: 1; pointer-events: auto; }

    .topbar-mobile-menu { display: flex; }

    .content { padding: 12px; }
    .topbar { height: 52px; padding: 0 12px; margin-bottom: 12px; border-radius: 12px; }
    .topbar h1 { font-size: 15px; }
    .username { display: none; }
    .logout-btn { width: 34px; height: 34px; }

    .card { padding: 28px 18px; min-width: unset; }
    .card h2 { font-size: 20px; }
    .card p  { font-size: 14px; }
    .logo-central { width: 200px; }

    .fech-select { font-size: 13px; padding: 9px 30px 9px 10px; }
    .fech-filtrar-btn { padding: 9px 14px; font-size: 13px; }
    .quinzena-btn { font-size: 12.5px; padding: 10px 8px; }

    .painel-banner {
        flex-direction: column; align-items: stretch;
        gap: 0; padding: 20px;
    }
    .pb-valor { font-size: 38px; }
    .pb-divider { display: none; }
    .pb-right {
        text-align: left; min-width: unset; padding: 14px 0 0;
        margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.05);
    }
    .pb-ent-valor { font-size: 30px; }
    .pb-ent-label { text-align: left; }
    .pb-ent-sub   { text-align: left; }

    .painel-ajustes { grid-template-columns: 1fr; }
    .painel-adicionais, .painel-descontos { grid-template-columns: 1fr 1fr; }
    .painel-transp  { grid-template-columns: 1fr 1fr; }
    .vp-hero { grid-template-columns: 1fr; gap: 14px; }
    .vp-hero-sep { display: none; }
    .vp-hero-right { text-align: left; }
    .vp-hero-val { font-size: 26px; }
    .vp-carrier-grid { grid-template-columns: 1fr 1fr; }
    .pt-card { padding: 10px 12px; }
    .pt-row  { padding: 3px 0; }
    .pt-row span:first-child { font-size: 11px; }
    .pt-row span:last-child  { font-size: 11px; white-space: nowrap; }

    .poc-table { min-width: 340px; }

    .admin-form { flex-direction: column; align-items: stretch; }
    .admin-input { min-width: unset; }
    .admin-list-item { flex-wrap: wrap; }
}

/* ===== HOME REDESIGN ===== */
#tela-home {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: hidden;
}
.logo-central {
    width: 340px; height: auto; opacity: 0.04; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    pointer-events: none;
}
.home-container {
    text-align: center; max-width: min(820px, 96vw); width: 100%;
    padding: 16px 20px 20px; position: relative; z-index: 1;
    margin: 0 auto;
}
.home-eyebrow {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.14em; color: #3a86ff; margin-bottom: 10px;
    display: inline-flex; align-items: center; gap: 8px;
}
.home-eyebrow::before, .home-eyebrow::after {
    content: ""; display: inline-block; width: 22px; height: 1px;
    background: rgba(58,134,255,0.4);
}
.home-greeting {
    font-size: 32px; font-weight: 700; color: #f1f5f9;
    letter-spacing: -0.8px; margin-bottom: 10px; line-height: 1.15;
}
.home-role-badge {
    display: inline-flex; align-items: center; padding: 4px 14px;
    background: rgba(58,134,255,0.08); border: 1px solid rgba(58,134,255,0.14);
    border-radius: 20px; font-size: 11.5px; color: #5d9aff;
    font-weight: 600; margin-bottom: 20px; letter-spacing: 0.02em;
}
.role-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 8px; flex-shrink: 0;
}
.home-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px; width: 100%; max-width: 760px; margin: 0 auto;
}
.home-action-card {
    background: rgba(14,22,40,0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 20px 18px 16px; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.home-action-card:hover {
    border-color: color-mix(in srgb, var(--ac, #3a86ff) 45%, transparent);
    background: rgba(20,30,52,0.9);
}
.hac-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.hac-icon svg {
    width: 20px; height: 20px; fill: none;
    stroke: var(--ac, #3a86ff);
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.hac-body { width: 100%; text-align: left; }
.hac-title { font-size: 14px; font-weight: 700; color: #e2e8f0; margin-bottom: 4px; }
.hac-desc  { font-size: 12px; color: #8494a9; line-height: 1.45; }
.hac-go {
    font-size: 11px; font-weight: 700; color: var(--ac, #3a86ff);
    letter-spacing: 0.03em; opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
}
.home-action-card:hover .hac-go { opacity: 1; transform: translateX(3px); }
.hac-arrow { display: none; }

#home-nf-status { margin-top: 10px; max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }

/* ── Admin Home Dashboard ── */
#home-admin-dash, #home-videira-dash {
    margin-top: 18px; width: 100%; max-width: 760px;
    margin-left: auto; margin-right: auto;
}
.adm-kpi-wrap {
    background: rgba(11,16,26,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}
.adm-kpi-header {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.015);
}
.adm-kpi-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.55);
}
.adm-kpi-periodo {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.3px; color: #7b98b5;
}
.adm-kpi-row { display: flex; align-items: stretch; }
.adm-kpi-item {
    flex: 1; display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; transition: background 0.15s;
}
.adm-kpi-item.clickable { cursor: pointer; }
.adm-kpi-item.clickable:hover { background: rgba(255,255,255,0.025); }
.adm-kpi-sep {
    width: 1px; background: rgba(255,255,255,0.05);
    flex-shrink: 0; margin: 10px 0;
}
.adm-kpi-icon {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.adm-kpi-icon svg { width: 17px; height: 17px; }
.adm-kpi-num { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; white-space: nowrap; }
.adm-kpi-lbl { font-size: 11px; color: #7b98b5; margin-top: 3px; }
@media (max-width: 580px) {
    .adm-kpi-row { flex-direction: column; }
    .adm-kpi-sep { width: auto; height: 1px; margin: 0 16px; }
    .adm-kpi-num { font-size: 18px; }
}

/* ── Username clicável ── */
.perfil-trigger {
    cursor: pointer; border-radius: 6px;
    padding: 4px 8px; margin: -4px -8px;
    transition: background 0.15s, color 0.15s;
}
.perfil-trigger:hover { background: rgba(58,134,255,0.08); color: #c8d8f0; }

/* ── Card de perfil (dropdown) ── */
.perfil-card {
    position: fixed;
    width: 288px; z-index: 99999;
    background: #0b1018; border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(58,134,255,0.06);
    animation: pc-in 0.15s ease;
    max-height: calc(100vh - 70px); overflow-y: auto;
}
@keyframes pc-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.pc-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.045);
}
.pc-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #1e3a5f, #0d2240);
    border: 1.5px solid rgba(58,134,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #5d9aff; letter-spacing: 0;
}
.pc-name { font-size: 13px; font-weight: 600; color: #e2e8f0; line-height: 1.25; }
.pc-meta { font-size: 11px; color: #7b98b5; margin-top: 2px; }
.pc-section { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.045); }
.pc-section-hd {
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: #66829c; margin-bottom: 10px;
}
.pc-nivel-row {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.pc-nivel-num {
    font-size: 20px; font-weight: 800; color: #f1f5f9;
    letter-spacing: -0.5px; line-height: 1;
}
.pc-nivel-total { font-size: 10px; color: #66829c; margin-left: auto; }
.pc-bar {
    height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.05); overflow: hidden; margin-bottom: 5px;
}
.pc-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width 0.5s ease;
}
.pc-nivel-sub { font-size: 10.5px; color: #7b98b5; }
.pc-transp-list { display: flex; flex-direction: column; gap: 6px; }
.pc-transp-row { display: flex; align-items: center; gap: 8px; }
.pc-transp-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.pc-transp-label { font-size: 11px; color: #8494a9; width: 44px; flex-shrink: 0; }
.pc-transp-bar-wrap {
    flex: 1; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.05); overflow: hidden;
}
.pc-transp-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.pc-transp-val { font-size: 11px; font-weight: 600; color: #7a9ab8; width: 28px; text-align: right; flex-shrink: 0; }
.pc-senha-info {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 12px 16px; color: #7b98b5; font-size: 11.5px;
    line-height: 1.4; border-top: 1px solid rgba(255,255,255,0.045);
}
.pc-senha-info svg { flex-shrink: 0; opacity: 0.6; }

/* ── Widget de Desempenho (role user) ── */
#home-user-dash { margin-top: 18px; text-align: left; width: 100%; max-width: 760px; margin-inline: auto; }
.user-desemp-widget {
    background: rgba(11,16,26,0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
}
.user-desemp-top {
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.045);
}
.user-desemp-eyebrow {
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: #7b98b5; margin-bottom: 10px;
}
.user-desemp-eyebrow svg { opacity: 0.55; }
.user-desemp-count-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px;
}
.user-desemp-count {
    font-size: 48px; font-weight: 800; color: #f1f5f9;
    line-height: 1; letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}
.user-desemp-pos-block { text-align: right; padding-bottom: 4px; }
.user-desemp-pos {
    font-size: 22px; font-weight: 700; color: #3a86ff; line-height: 1;
    letter-spacing: -0.5px;
}
.user-desemp-pos-sub {
    font-size: 10px; color: #7b98b5; margin-top: 2px;
}
.user-desemp-bottom {
    padding: 14px 20px;
    display: flex; align-items: center; gap: 8px;
}
.user-desemp-gap-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
    background: rgba(58,134,255,0.08); border: 1px solid rgba(58,134,255,0.14);
    display: flex; align-items: center; justify-content: center;
}
.user-desemp-gap-icon svg { opacity: 0.7; }
.user-desemp-gap-text { font-size: 12.5px; color: #7a8fa8; line-height: 1.45; }
.user-desemp-gap-text strong { color: #c8d8ec; font-weight: 600; }
.user-desemp-gap-text em { color: #3a86ff; font-style: normal; font-weight: 600; }
.user-desemp-first {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 20px;
}
.user-desemp-first-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
    background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.18);
    display: flex; align-items: center; justify-content: center;
}
.user-desemp-first-icon svg { opacity: 0.75; }
.user-desemp-first-text { font-size: 12.5px; color: #7a8fa8; }
.user-desemp-first-text strong { color: #fbbf24; font-weight: 600; }
@media (max-width: 420px) {
    .user-desemp-count { font-size: 38px; }
    .user-desemp-pos { font-size: 18px; }
}

.home-nf-widget {
    border-radius: 16px; padding: 16px 20px; display: flex; align-items: center;
    gap: 14px; border: 1px solid; text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-nf-widget.ok       { background: rgba(34,197,94,0.05);   border-color: rgba(34,197,94,0.2);   cursor: default; }
.home-nf-widget.pendente { background: rgba(251,146,60,0.06);  border-color: rgba(251,146,60,0.3);  cursor: pointer; }
.home-nf-widget.pendente:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(251,146,60,0.15); }
.home-nf-widget-icon {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.home-nf-widget-icon.ok       { background: rgba(34,197,94,0.14); }
.home-nf-widget-icon.pendente { background: rgba(251,146,60,0.14); }

@media (max-width: 680px) {
    .home-greeting { font-size: 26px; }
    .home-actions  { gap: 6px; }
}

/* ===== ADMIN RESUMO QUINZENA ===== */
.adm-resumo-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
}
.adm-resumo-card {
    background: rgba(27,38,59,0.9); border: 1px solid rgba(58,134,255,0.15);
    border-radius: 14px; padding: 16px 18px;
}
.adm-rc-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    color: #7b98b5; font-weight: 600; margin-bottom: 8px;
}
.adm-rc-valor { font-size: 20px; font-weight: 700; color: #f1f5f9; }
.adm-rc-verde { color: #34d399; }
.adm-rc-neg   { color: #ef4444; }
.adm-chart-wrap {
    background: rgba(27,38,59,0.9); border: 1px solid rgba(58,134,255,0.15);
    border-radius: 14px; padding: 20px 20px 14px; margin-bottom: 20px;
}
@media (max-width: 680px) {
    .adm-resumo-cards { grid-template-columns: 1fr 1fr; }
}

/* ===== ADMIN SEARCH ENTREGADOR ===== */
.adm-search-wrap { position: relative; margin-bottom: 20px; }
.adm-search-input-area {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    background: rgba(15,15,20,0.8); border: 1px solid rgba(58,134,255,0.25);
    border-radius: 10px; transition: border-color 0.2s, box-shadow 0.2s;
}
.adm-search-input-area:focus-within {
    border-color: #3a86ff; box-shadow: 0 0 0 3px rgba(58,134,255,0.1);
}
.adm-search-input-area svg {
    width: 15px; height: 15px; stroke: #7b98b5; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.adm-search-input-area input {
    flex: 1; background: none; border: none; outline: none;
    color: #f1f5f9; font-size: 14px; font-family: 'Inter', sans-serif;
}
.adm-search-input-area input::placeholder { color: #7b98b5; }
.adm-selected-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    background: rgba(58,134,255,0.1); border: 1px solid rgba(58,134,255,0.4);
    border-radius: 10px;
}
.adm-selected-chip span { font-size: 14px; font-weight: 600; color: #f1f5f9; }
.adm-selected-chip button {
    background: none; border: none; cursor: pointer; color: #7b98b5;
    font-size: 20px; line-height: 1; padding: 0 2px; transition: color 0.2s;
}
.adm-selected-chip button:hover { color: #ef4444; }
.adm-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
    background: #0f1923; border: 1px solid rgba(58,134,255,0.2);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    max-height: 280px; overflow-y: auto;
}
.adm-dropdown-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; cursor: pointer;
    border-bottom: 1px solid rgba(58,134,255,0.07); transition: background 0.15s;
}
.adm-dropdown-item:last-child { border-bottom: none; }
.adm-dropdown-item:hover { background: rgba(58,134,255,0.12); }
.adm-dropdown-item-nome { font-size: 13.5px; font-weight: 500; color: #aab4c8; }
.adm-dropdown-item:hover .adm-dropdown-item-nome { color: #fff; }
.adm-dropdown-item-valor { font-size: 13px; font-weight: 700; color: #34d399; white-space: nowrap; }
.adm-dropdown-empty { padding: 16px 14px; font-size: 13px; color: #7b98b5; text-align: center; }

/* ===== GRID ENTREGADORES ===== */
.adm-ent-resumo {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
    padding: 14px 18px;
    background: rgba(27,38,59,0.5); border: 1px solid rgba(58,134,255,0.1);
    border-radius: 12px;
}
.adm-ent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.adm-ent-card {
    background: rgba(27,38,59,0.7); border: 1px solid rgba(58,134,255,0.1);
    border-radius: 14px; padding: 16px; cursor: pointer;
    transition: all 0.18s ease;
}
.adm-ent-card:hover {
    border-color: rgba(58,134,255,0.35);
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.adm-ent-card.selected {
    border-color: #3a86ff; background: rgba(58,134,255,0.08);
    box-shadow: 0 0 0 1px rgba(58,134,255,0.2);
}
.adm-ent-card-nome {
    font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-ent-card-valor { font-size: 20px; font-weight: 700; color: #34d399; line-height: 1; margin-bottom: 3px; }
.adm-ent-card-qtd   { font-size: 11px; color: #7b98b5; margin-bottom: 10px; }
.adm-ent-transp     { display: flex; gap: 5px; flex-wrap: wrap; }
.adm-ent-t          { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }

@media (max-width: 680px) {
    .adm-ent-grid { grid-template-columns: 1fr 1fr; }
    .adm-ent-card { padding: 12px; }
    .adm-ent-card-valor { font-size: 16px; }
}

/* ===== DASHBOARD ===== */
.dash-comp-toggle {
    display: flex; background: rgba(15,15,20,0.6);
    border: 1px solid rgba(58,134,255,0.15); overflow: hidden;
}
.dash-comp-btn {
    flex: 1; padding: 9px 16px; background: none; border: none;
    color: #7b98b5; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background 0.2s, color 0.2s; font-family: 'Inter', sans-serif;
    border-right: 1px solid rgba(58,134,255,0.1);
}
.dash-comp-btn:last-child { border-right: none; }
.dash-comp-btn.active { background: rgba(58,134,255,0.18); color: #fff; }
.dash-comp-btn:hover:not(.active) { background: rgba(58,134,255,0.07); color: #aab4c8; }

.dash-total-banner {
    background: rgba(27,38,59,0.9); border: 1px solid rgba(58,134,255,0.15);
    padding: 24px 28px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.dash-total-period { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: #7b98b5; font-weight: 600; margin-bottom: 8px; }
.dash-total-num { font-size: 48px; font-weight: 700; color: #f1f5f9; line-height: 1; letter-spacing: -2px; }
.dash-total-sub { font-size: 12px; color: #7b98b5; margin-top: 6px; }
.dash-total-right { text-align: right; }
.dash-delta-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 20px; font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
}
.dash-delta-badge.up   { background: rgba(52,211,153,0.1);  color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.dash-delta-badge.down { background: rgba(239,68,68,0.1);   color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.dash-delta-badge.flat { background: rgba(120,120,120,0.1); color: #7a8599; border: 1px solid rgba(120,120,120,0.2); }
.dash-delta-sub { font-size: 11px; color: #7b98b5; margin-top: 5px; }

.dash-transp-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px;
}
.dash-tc {
    background: rgba(14,22,40,0.8); border: 1px solid rgba(255,255,255,0.07);
    padding: 14px 14px;
    transition: background .15s ease;
}
.dash-tc:hover { background: rgba(20,30,52,0.9); }
.dash-tc-name { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
.dash-tc-qtd  { font-size: 26px; font-weight: 800; color: #f1f5f9; line-height: 1; letter-spacing: -0.03em; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.dash-tc-sub  { font-size: 10px; color: #717f95; margin-bottom: 8px; }

.dash-charts-row {
    display: grid; grid-template-columns: 260px 1fr; gap: 12px; margin-bottom: 16px;
}
.dash-chart-card {
    background: rgba(14,22,40,0.8); border: 1px solid rgba(58,134,255,0.12);
    padding: 18px 18px 14px;
}
.dash-chart-title {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .13em; color: #707f96; margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
}
.dash-chart-title::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.04); }
.dash-chart-canvas { position: relative; height: 240px; }
/* Donut chart inside left card */
.dash-pie-donut { position: relative; width: 150px; height: 150px; margin: 0 auto 14px; }
.dash-pie-legend { display: flex; flex-direction: column; gap: 7px; }
.dash-pie-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dash-pie-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-pie-name { color: #94a3b8; flex: 1; font-size: 11px; }
.dash-pie-qty { font-weight: 700; color: #f1f5f9; font-variant-numeric: tabular-nums; font-size: 12px; }
.dash-pie-pct { font-size: 10px; color: #717f95; min-width: 38px; text-align: right; }

@media (max-width: 860px) {
    .dash-charts-row { grid-template-columns: 1fr; }
    .dash-pie-donut  { width: 120px; height: 120px; }
}
@media (max-width: 680px) {
    .dash-transp-grid { grid-template-columns: 1fr 1fr; }
    .dash-total-banner { flex-direction: column; align-items: flex-start; }
    .dash-total-right { text-align: left; }
    .dash-total-num { font-size: 36px; }
    .dash-chart-canvas { height: 180px; }

    .dash-tc     { padding: 10px 10px; }
    .dash-tc-qtd { font-size: 16px; }
    .dash-tc-sub { font-size: 9px; margin-bottom: 6px; }
    .lbadge      { font-size: 9px; padding: 2px 5px; }
}

/* ===== DASHBOARD KPI + PERIOD CHIPS + LUCRO BADGE ===== */
.dash-kpi-row {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 14px;
}
.dash-kpi-card {
    background: rgba(14,22,40,0.8); border: 1px solid rgba(255,255,255,0.07);
    padding: 18px 20px; transition: border-color .25s, background .25s;
}
.dash-kpi-card.kpi-up   { border-color: rgba(34,197,94,0.25); }
.dash-kpi-card.kpi-down { border-color: rgba(239,68,68,0.25); }
.dash-kpi-lbl {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .13em; color: #707f96; margin-bottom: 10px;
}
.dash-kpi-num {
    font-size: 28px; font-weight: 800; color: #f1f5f9;
    line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.dash-kpi-num.sm { font-size: 19px; }
.dash-kpi-pct { font-size: 28px; font-weight: 800; margin-bottom: 6px; line-height: 1; letter-spacing: -0.03em; }
.dash-kpi-pct.up   { color: #22c55e; }
.dash-kpi-pct.down { color: #ef4444; }
.dash-kpi-pct.flat { color: #717f95; }
.dash-kpi-sub { font-size: 11px; color: #717f95; }

.dash-pchips {
    display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(58,134,255,0.25) transparent;
}
.dash-pchip {
    flex-shrink: 0; background: rgba(14,22,40,0.8);
    border: 1px solid rgba(58,134,255,0.1);
    padding: 9px 13px; text-align: center; min-width: 76px;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.dash-pchip:hover { border-color: rgba(58,134,255,0.4); background: rgba(58,134,255,0.08); }
.dash-pchip.current { border-color: rgba(58,134,255,0.55); background: rgba(58,134,255,0.12); }
.dpc-lbl { font-size: 9px; color: #717f95; margin-bottom: 4px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dpc-val { font-size: 13px; font-weight: 700; color: #f1f5f9; font-variant-numeric: tabular-nums; }

.lbadge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; font-size: 11px; font-weight: 700; margin-top: 6px;
}
.lbadge.lucro  { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
.lbadge.preju  { background: rgba(239,68,68,0.09);  color: #ef4444; border: 1px solid rgba(239,68,68,0.18); }
.lbadge.estavel{ background: rgba(120,120,120,0.07); color: #7a8599; border: 1px solid rgba(120,120,120,0.12); }

.ent-total-rec {
    background: rgba(34,197,94,0.05);
    border: 1px solid rgba(34,197,94,0.2);
    padding: 11px 16px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ent-total-rec-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #707f96; }
.ent-total-rec-val { font-size: 18px; font-weight: 800; color: #22c55e; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.ent-transp-grid {
    display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 12px;
}

@media (max-width: 680px) {
    .dash-kpi-row    { grid-template-columns: 1fr 1fr; }
    .ent-transp-grid { grid-template-columns: 1fr 1fr; }

    .dash-kpi-card   { padding: 12px 14px; }
    .dash-kpi-pct    { font-size: 22px; }
    .dash-kpi-num    { font-size: 20px; }
    .dash-kpi-num.sm { font-size: 16px; }
    .dash-kpi-sub    { font-size: 10px; }
    .dash-kpi-lbl    { font-size: 10px; }

    .dpc-lbl { font-size: 9px; }
    .dpc-val { font-size: 11px; }
    .dash-pchip { padding: 6px 10px; }
}

/* ===== NOTA FISCAL ===== */
.nota-upload-area {
    background: rgba(58,134,255,0.05); border: 1.5px dashed rgba(58,134,255,0.28);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
    cursor: pointer; transition: background 0.2s, border-color 0.2s;
    display: flex; align-items: center; gap: 12px;
    -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.nota-upload-area:hover { background: rgba(58,134,255,0.1); border-color: rgba(58,134,255,0.5); }
.nota-upload-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: rgba(58,134,255,0.13); display: flex; align-items: center; justify-content: center;
}
.nota-upload-text { flex: 1; min-width: 0; text-align: left; }
.nota-upload-title { font-size: 14px; font-weight: 700; color: #c8d8f0; margin-bottom: 3px; }
.nota-upload-sub { font-size: 12px; color: #7b98b5; }
.nota-upload-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    background: rgba(58,134,255,0.15); border: 1px solid rgba(58,134,255,0.35);
    color: #3a86ff; border-radius: 8px; padding: 8px 14px;
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background 0.2s; -webkit-tap-highlight-color: transparent;
}
.nota-upload-area:hover .nota-upload-btn { background: rgba(58,134,255,0.25); }
.nota-upload-area.drag-over { background: rgba(58,134,255,0.15); border-color: rgba(58,134,255,0.7); border-style: solid; }
.nota-btn-upload { display: none; }
.nota-hint { display: none; }
.nota-loading { text-align: center; color: #7b98b5; font-size: 13px; padding: 16px; }
.nota-card-ok-icon {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: rgba(34,197,94,0.12); display: flex; align-items: center; justify-content: center;
}
.nota-ver-btn {
    background: rgba(58,134,255,0.1); border: 1px solid rgba(58,134,255,0.3);
    color: #3a86ff; border-radius: 8px; padding: 5px 12px;
    font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background 0.2s; flex-shrink: 0;
}
.nota-ver-btn:hover { background: rgba(58,134,255,0.2); }
.nota-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.nota-modal {
    background: #0f1829; border: 1px solid rgba(58,134,255,0.2);
    border-radius: 16px; width: 100%; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.nota-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px; font-weight: 700; color: #e2e8f0;
}
.nota-modal-close {
    background: none; border: none; color: #8494a9; font-size: 16px;
    cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: color 0.2s;
}
.nota-modal-close:hover { color: #e2e8f0; }
.nota-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.nota-modal-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nota-modal-lbl { font-size: 12px; color: #8494a9; flex-shrink: 0; }
.nota-modal-val { font-size: 13px; font-weight: 600; color: #f1f5f9; text-align: right; word-break: break-all; }
.nota-modal-footer {
    padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: flex-end;
}

.nota-card {
    background: rgba(27,38,59,0.9); border: 1px solid rgba(34,197,94,0.2);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.nota-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(58,134,255,0.1);
}
.nota-card-title { font-size: 12px; font-weight: 700; color: #3a86ff; text-transform: uppercase; letter-spacing: 0.06em; }
.nota-remove-btn {
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
    color: #ef4444; border-radius: 8px; padding: 4px 10px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.nota-remove-btn:hover { background: rgba(239,68,68,0.18); }
.nota-field {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 0; border-bottom: 1px solid rgba(58,134,255,0.05); gap: 12px;
}
.nota-field:last-child { border-bottom: none; }
.nota-field-lbl { font-size: 11px; color: #7a8599; flex-shrink: 0; }
.nota-field-val { font-size: 13px; font-weight: 600; color: #f1f5f9; text-align: right; }
.nota-chave-val { font-family: monospace; font-size: 11px; word-break: break-all; color: #94a3b8; font-weight: 400; text-align: right; }
.nota-field-chave { align-items: flex-start; }
.nota-field-chave .nota-field-lbl { padding-top: 2px; }
.nota-status {
    margin-top: 12px; padding: 10px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.nota-status.confere { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: #22c55e; }
.nota-status.diverge { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #ef4444; }

/* ===== ADMIN NOTAS FISCAIS ===== */
/* Grid de filtros NF (mês/ano/quinzena/datas + Pesquisar/Redefinir) */
.nf-filtro-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px 16px; align-items: end;
}
.nf-filtro-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nf-filtro-label {
    font-size: 11px; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.nf-filtro-input {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: rgba(11,16,26,0.9); font-size: 13.5px;
    padding: 10px 14px; cursor: pointer; white-space: nowrap; overflow: hidden;
    transition: border-color 0.2s;
}
.nf-filtro-input:hover { border-color: rgba(58,134,255,0.35); }
.nf-filtro-input .txt { overflow: hidden; text-overflow: ellipsis; color: #7b98b5; }
.nf-filtro-input .txt.ativo { color: #cbd5e1; font-weight: 600; }
.nf-filtro-input svg { flex-shrink: 0; opacity: 0.6; }
.nf-filtro-actions { display: flex; gap: 8px; }
.nf-btn-pesquisar {
    border: none; border-radius: var(--radius-sm); background: #3a86ff; color: #fff;
    font-size: 13.5px; font-weight: 700; padding: 10px 24px; cursor: pointer; font-family: inherit;
    transition: background 0.2s; flex: 1;
}
.nf-btn-pesquisar:hover { background: #2a72e8; }
.nf-btn-redefinir {
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent;
    color: #94a3b8; font-size: 13.5px; font-weight: 600; padding: 10px 20px; cursor: pointer; font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}
.nf-btn-redefinir:hover { border-color: rgba(255,255,255,0.2); color: #cbd5e1; }

.adm-nf-wrap {
    background: rgba(15,25,43,0.7); border: 1px solid rgba(58,134,255,0.12);
    border-radius: 14px; overflow: hidden;
}
.adm-nf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-nf-table th {
    padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 700;
    color: #7a8599; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(58,134,255,0.12); white-space: nowrap;
}
.adm-nf-table td {
    padding: 12px 16px; border-bottom: 1px solid rgba(58,134,255,0.07); color: #f1f5f9;
    vertical-align: middle;
}
.adm-nf-table tr:last-child td { border-bottom: none; }
.adm-nf-table tr:hover td { background: rgba(58,134,255,0.04); }
.adm-nf-entregador { font-weight: 600; color: #e2e8f0; }
.adm-nf-valor { font-weight: 700; color: #22c55e; }
.adm-nf-cnpj { font-family: monospace; font-size: 12px; color: #94a3b8; }
.adm-nf-counter { font-size: 12px; color: #7a8599; margin-bottom: 12px; }
.adm-nf-badge {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.adm-nf-badge.confere { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.adm-nf-badge.diverge { background: rgba(239,68,68,0.12); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.adm-nf-badge.pendente { background: rgba(148,163,184,0.1); color: #8494a9; border: 1px solid rgba(148,163,184,0.2); }
.adm-nf-chave { word-break: break-all; max-width: 180px; line-height: 1.5; font-size: 11px; }
/* ===== PAGAMENTOS ===== */
.pag-pix-badge {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600;
    background: rgba(58,134,255,0.1); color: #3a86ff;
    border: 1px solid rgba(58,134,255,0.2); white-space: nowrap;
}
.pag-doc  { font-family: monospace; font-size: 12px; color: #94a3b8; }
.pag-pix  { font-size: 12px; color: #e2e8f0; word-break: break-all; }
.pag-valor { font-weight: 700; color: #22c55e; }
.pag-sem-cad { color: #717f95; font-size: 12px; font-style: italic; }
@media (max-width: 680px) {
    #tela-admin-pagamentos .adm-nf-table th:nth-child(3),
    #tela-admin-pagamentos .adm-nf-table td:nth-child(3),
    #tela-admin-pagamentos .adm-nf-table th:nth-child(4),
    #tela-admin-pagamentos .adm-nf-table td:nth-child(4) { display: none; }
}

/* ===== SUBMENU 3º NÍVEL ===== */
/* ── Subgroup header (nível 1: ex "Bipagem") ── */
.subgroup-header {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px 9px 16px; cursor: pointer; list-style: none;
    color: #8494a9; font-size: 13px; font-weight: 600;
    border-radius: 8px; margin: 1px 0;
    transition: background 0.18s, color 0.18s;
}
.subgroup-header:hover  { color: #cbd5e1; }
.subgroup-header.open   { color: #e2e8f0; }

.subgroup-arrow {
    font-size: 10px; opacity: 0.5; margin-left: auto;
    transition: transform 0.25s ease; display: inline-block;
}
.subgroup-header.open .subgroup-arrow  { transform: rotate(180deg); opacity: 0.8; }
.subgroup-header-2.open .subgroup-arrow { transform: rotate(180deg); opacity: 0.8; }

/* ── Sub-submenu (nível 1 expandido) ── */
.sub-submenu {
    list-style: none;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.35s ease, opacity 0.22s ease;
    padding-left: 18px;
}
.sub-submenu.open { max-height: 60dvh; opacity: 1; }
.sub-submenu a { padding-left: 18px !important; font-size: 13px !important; }

/* ── Subgroup header nível 2 (ex "Alimentar separação") ── */
.subgroup-header-2 {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 18px; cursor: pointer; list-style: none;
    color: #7b98b5; font-size: 12.5px; font-weight: 600;
    border-radius: 8px; margin: 1px 0;
    transition: background 0.18s, color 0.18s;
}
.subgroup-header-2:hover  { color: #94a3b8; }
.subgroup-header-2.open   { color: #cbd5e1; }

/* ── Sub-sub-submenu (nível 2 expandido) ── */
.sub-sub-submenu {
    list-style: none;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.22s ease;
    padding-left: 14px;
}
.sub-sub-submenu.open { max-height: 40dvh; opacity: 1; }
.sub-sub-submenu a { padding-left: 18px !important; font-size: 12.5px !important; }

/* ===== TELA IMPORTAR TRAMPAY ===== */
.trampay-upload-area {
    border: 2px dashed rgba(58,134,255,0.22); border-radius: 14px;
    padding: 28px; text-align: center; margin-bottom: 16px;
    transition: border-color 0.2s;
}
.trampay-upload-area:hover { border-color: rgba(58,134,255,0.45); }
.trampay-preview-wrap {
    background: rgba(15,25,43,0.7); border: 1px solid rgba(58,134,255,0.12);
    border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.trampay-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.trampay-table th {
    padding: 10px 14px; text-align: left; font-size: 10px; font-weight: 700;
    color: #7a8599; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(58,134,255,0.12); white-space: nowrap;
    background: rgba(15,15,20,0.3);
}
.trampay-table td {
    padding: 10px 14px; border-bottom: 1px solid rgba(58,134,255,0.06); color: #e2e8f0;
}
.trampay-table tr:last-child td { border-bottom: none; }
.trampay-table tr:hover td { background: rgba(58,134,255,0.03); }
.trampay-table .t-doc  { font-family: monospace; font-size: 12px; color: #94a3b8; }
.trampay-table .t-pix  { font-size: 12px; color: #94a3b8; word-break: break-all; }
.trampay-table .t-nome { font-weight: 600; color: #e2e8f0; }

/* ===== ADMIN USUÁRIOS ===== */
.adm-usr-add-btn {
    padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(58,134,255,0.3);
    background: rgba(58,134,255,0.1); color: #3a86ff; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.2s, transform 0.1s;
}
.adm-usr-add-btn:hover { background: rgba(58,134,255,0.2); transform: translateY(-1px); }
.adm-usr-form-grid {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center;
    margin-top: 14px;
}
.adm-usr-input {
    background: rgba(15,25,43,0.8); border: 1px solid rgba(58,134,255,0.2); color: #f1f5f9;
    border-radius: 10px; padding: 9px 12px; font-size: 13px; outline: none; width: 100%;
}
.adm-usr-input:focus { border-color: rgba(58,134,255,0.5); }
.adm-usr-input option { background: #1b263b; }
.adm-usr-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: #94a3b8; white-space: nowrap;
}
.adm-usr-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.adm-usr-badge.admin      { color: #3a86ff; }
.adm-usr-badge.entregador { color: #22c55e; }
.adm-usr-badge.operador   { color: #94a3b8; }
.adm-usr-badge.ativo   { color: #22c55e; }
.adm-usr-badge.inativo { color: #8494a9; }
/* Quem ainda está na senha temporária não entra. Fica ao lado do "Ativo" porque a conta
   está ativa mesmo — o que falta é a pessoa trocar a senha que o admin entregou. */
.adm-usr-badge.senha-temp { color: #eab308; margin-left: 10px; font-size: 12px; }
/* Isento do bloqueio de NF: precisa ficar à vista na lista, senão ninguém lembra de quem
   foi liberado e a isenção vira permanente por esquecimento. */
.adm-usr-badge.nf-isento { color: #3a86ff; margin-left: 10px; font-size: 12px; }
.adm-usr-action {
    padding: 5px 11px; border-radius: 8px; border: 1px solid; font-size: 11px; font-weight: 600;
    cursor: pointer; background: transparent; transition: opacity 0.2s; white-space: nowrap;
}
.adm-usr-action.inativar { border-color: rgba(251,146,60,0.35); color: #fb923c; }
.adm-usr-action.ativar   { border-color: rgba(34,197,94,0.35);  color: #22c55e; }
.adm-usr-action.deletar  { border-color: rgba(239,68,68,0.35);  color: #ef4444; }
.adm-usr-action.senha    { border-color: rgba(148,163,184,0.3); color: #94a3b8; }
.adm-usr-action:hover    { opacity: 0.65; }

/* Dropdown "Editar" da linha do entregador (Cadastros → Entregadores) */
.adm-usr-editar-wrap { position: relative; display: inline-block }
.adm-usr-editar-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
    background: #111827; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5); min-width: 220px; overflow: hidden;
    display: none;
}
.adm-usr-editar-menu.open { display: block }
.adm-usr-editar-item {
    display: block; width: 100%; text-align: left; padding: 10px 14px; border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent; color: #cbd5e1; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.adm-usr-editar-item:last-child { border-bottom: none }
.adm-usr-editar-item:hover { background: rgba(58,134,255,0.12); color: #fff }

/* ===== MODAL GENÉRICO ===== */
.usr-modal-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.usr-modal-overlay.open { opacity: 1; pointer-events: all; }
.usr-modal {
    background: #0f1925; border: 1px solid rgba(58,134,255,0.2);
    border-radius: 20px; padding: 32px 28px; width: 100%; max-width: 380px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    transform: scale(0.96) translateY(12px);
    transition: transform 0.25s ease, opacity 0.22s ease;
    opacity: 0;
}
.usr-modal-overlay.open .usr-modal { transform: scale(1) translateY(0); opacity: 1; }
.usr-modal-title { font-size: 18px; font-weight: 700; color: #f1f5f9; margin-bottom: 6px; }
.usr-modal-sub   { font-size: 13px; color: #7b98b5; margin-bottom: 24px; }
.usr-modal-field { margin-bottom: 14px; }
.usr-modal-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7b98b5; margin-bottom: 6px; display: block; }
.usr-modal-input {
    width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(58,134,255,0.18);
    color: #f1f5f9; border-radius: 12px; padding: 11px 14px; font-size: 14px;
    font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.usr-modal-input:focus { border-color: rgba(58,134,255,0.5); box-shadow: 0 0 0 3px rgba(58,134,255,0.1); }
.usr-modal-input option { background: #1a2535; color: #e2e8f0; }
.usr-modal-input::placeholder { color: #66829c; }
.usr-modal-error { font-size: 12px; color: #f87171; margin-top: 10px; min-height: 16px; }
.usr-modal-btns { display: flex; gap: 10px; margin-top: 24px; }
.usr-modal-btn-primary {
    flex: 1; padding: 12px; border-radius: 12px; border: none;
    background: #3a86ff; color: #fff; font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.usr-modal-btn-primary:hover:not(:disabled) { background: #2563eb; transform: translateY(-1px); }
.usr-modal-btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.usr-modal-btn-cancel {
    padding: 12px 18px; border-radius: 12px;
    border: 1px solid rgba(58,134,255,0.18); background: transparent;
    color: #8494a9; font-size: 14px; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.usr-modal-btn-cancel:hover { border-color: rgba(58,134,255,0.35); color: #94a3b8; }
.adm-usr-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: rgba(58,134,255,0.15); display: flex; align-items: center;
    justify-content: center; font-size: 13px; font-weight: 700; color: #3a86ff;
}
@media (max-width: 680px) {
    .adm-usr-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== SELETOR DE INTERVALO DE DATAS (calendário com o período inteiro destacado) ===== */
.drp-wrap { position: relative; }
.drp-trigger {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 11px 14px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(58,134,255,0.18); border-radius: 12px;
    color: #e2e8f0; font-size: 14px; font-family: inherit; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.drp-trigger:hover { border-color: rgba(58,134,255,0.4); }
.drp-trigger svg { flex-shrink: 0; color: #7b98b5; }
.drp-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
    width: 272px; background: #14202f; border: 1px solid rgba(58,134,255,0.22);
    border-radius: 14px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.drp-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drp-panel-head span { font-size: 13px; font-weight: 700; color: #e2e8f0; text-transform: capitalize; }
.drp-nav {
    width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: transparent; color: #94a3b8; cursor: pointer; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s; font-family: inherit;
}
.drp-nav:hover { background: rgba(58,134,255,0.14); color: #e2e8f0; }
.drp-grid-dow, .drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.drp-grid-dow span { text-align: center; font-size: 10.5px; font-weight: 700; color: #7b98b5; padding: 4px 0 8px; }
.drp-grid { row-gap: 2px; }
.drp-day {
    height: 30px; border: none; background: transparent;
    color: #cbd5e1; font-size: 12.5px; font-family: inherit; cursor: pointer;
    font-variant-numeric: tabular-nums; transition: background 0.1s;
}
.drp-day.fora-mes { color: #707f96; }
.drp-day.hoje { font-weight: 700; color: #3a86ff; }
.drp-day:not(.fora-mes):hover { background: rgba(58,134,255,0.1); }
/* faixa contínua do intervalo — cada linha da grade fecha as pontas nas
   bordas reais do período (dia inicial/final) ou nos limites da semana */
.drp-day.in-range { background: rgba(58,134,255,0.16); }
.drp-day.range-l { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.drp-day.range-r { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
/* bolinha sólida no dia inicial/final — por último no CSS pra vencer o
   background/radius do range acima quando as duas classes se acumulam */
.drp-day.selecionado { background: #3a86ff; color: #fff; font-weight: 700; border-radius: 999px; }
.drp-panel-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
}
.drp-limpar { background: none; border: none; color: #8494a9; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.drp-limpar:hover { color: #94a3b8; }
.drp-aplicar {
    padding: 7px 16px; border-radius: 9px; border: none;
    background: #3a86ff; color: #fff; font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.drp-aplicar:hover { background: #2563eb; }

/* ===== RELATÓRIO DETALHADO POR DRIVER (modal) ===== */
#modal-relatorio-driver .usr-modal { max-width: 540px; }
#rd-body { max-height: 55vh; overflow-y: auto; margin: 14px 0 4px; }
.rd-chart-card {
    display: flex; align-items: center; gap: 18px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
    padding: 14px; margin-bottom: 10px;
}
.rd-donut { width: 110px; height: 110px; position: relative; flex-shrink: 0; }
.rd-donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none;
}
.rd-donut-pct { font-size: 17px; font-weight: 700; }
.rd-donut-sub { font-size: 9.5px; color: #8494a9; }
.rd-legend { flex: 1; min-width: 0; }
.rd-leg-title {
    font-size: 11px; font-weight: 700; color: #717f95;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.rd-leg-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #94a3b8; padding: 3px 0; }
.rd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rd-leg-nome { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-leg-qtd { color: #e2e8f0; font-weight: 700; }
.rd-leg-pct { color: #8494a9; min-width: 48px; text-align: right; }
.rd-transp-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.rd-transp-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.rd-transp-nome { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e2e8f0; font-weight: 700; }
.rd-transp-tot { font-size: 13px; color: #94a3b8; white-space: nowrap; }
.rd-transp-tot strong { color: #e2e8f0; }
.rd-prazo-row { display: flex; align-items: center; gap: 6px 14px; font-size: 12px; padding: 0 0 8px 17px; flex-wrap: wrap; }
.rd-usr-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 12.5px; padding: 4px 0 4px 17px; color: #94a3b8;
}
.rd-usr-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-usr-val { flex-shrink: 0; }
@media (max-width: 680px) {
    #modal-relatorio-driver { padding: 12px; }
    #modal-relatorio-driver .usr-modal { padding: 22px 16px; }
    #rd-body { max-height: 62vh; }
    .rd-chart-card { flex-direction: column; gap: 12px; padding: 16px 14px; }
    .rd-donut { width: 132px; height: 132px; }
    .rd-donut-pct { font-size: 20px; }
    .rd-donut-sub { font-size: 10.5px; }
    .rd-legend { width: 100%; }
}

/* ===== NOTAS FISCAIS STATUS ===== */
.nf-status-list { display: flex; flex-direction: column; gap: 10px; }
.nf-status-card {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 18px; border-radius: 14px; border: 1px solid;
    transition: transform 0.15s, box-shadow 0.15s;
}
.nf-status-card.ok      { background: rgba(34,197,94,0.05);  border-color: rgba(34,197,94,0.18);  cursor: default; }
.nf-status-card.pendente{ background: rgba(251,146,60,0.06); border-color: rgba(251,146,60,0.25); cursor: pointer; }
.nf-status-card.pendente:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(251,146,60,0.14); }
.nf-status-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nf-status-icon.ok      { background: rgba(34,197,94,0.14); }
.nf-status-icon.pendente{ background: rgba(251,146,60,0.14); }
.nf-status-info { flex:1; min-width:0; }
.nf-status-label{ font-weight:600; color:#e2e8f0; font-size:14px; }
.nf-status-sub  { font-size:12px; color:#8494a9; margin-top:3px; }
.nf-status-tag  { font-size:11px; font-weight:700; white-space:nowrap; }

@media (max-width: 680px) {
    .adm-nf-table th:nth-child(3),
    .adm-nf-table td:nth-child(3),
    .adm-nf-table th:nth-child(4),
    .adm-nf-table td:nth-child(4),
    .adm-nf-table th:nth-child(5),
    .adm-nf-table td:nth-child(5),
    .adm-nf-table th:nth-child(6),
    .adm-nf-table td:nth-child(6),
    .adm-nf-table th:nth-child(7),
    .adm-nf-table td:nth-child(7) { display: none; }
    .mnf-hide-sm { display: none; }

    /* Planejamento de Rotas tem só 3 colunas (Bairro/Sigla/Entregador) —
       a coluna 3 (Entregador) é o campo principal, não pode sumir no mobile */
    .pv-table th:nth-child(3), .pv-table td:nth-child(3) { display: table-cell; }
}

/* ===== EXTRAVIOS DASHBOARD ===== */
.extrv-refresh-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 10px;
    border: 1px solid rgba(58,134,255,0.25); background: rgba(58,134,255,0.08);
    color: #7a8599; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.extrv-refresh-btn:hover { background: rgba(58,134,255,0.16); color: #f1f5f9; }

/* ── Busca por código ── */
.extrv-search-wrap {
    display: flex; align-items: center; gap: 7px;
    background: rgba(15,15,20,0.6); border: 1px solid rgba(58,134,255,0.2);
    border-radius: 10px; padding: 0 12px; height: 36px; min-width: 240px;
    transition: border-color 0.2s;
}
.extrv-search-wrap:focus-within { border-color: rgba(58,134,255,0.5); }
.extrv-search-wrap input {
    background: none; border: none; outline: none;
    font-size: 13px; color: #e2e8f0; flex: 1; font-family: inherit;
}
.extrv-search-wrap input::placeholder { color: #7b98b5; }
.extrv-busca-clear {
    background: none; border: none; cursor: pointer;
    color: #7b98b5; font-size: 18px; line-height: 1;
    padding: 0; transition: color 0.2s;
}
.extrv-busca-clear:hover { color: #f1f5f9; }
.extrv-busca-lista { display: flex; flex-direction: column; gap: 12px; }
.extrv-busca-card {
    background: rgba(15,15,20,0.55); border: 1px solid rgba(58,134,255,0.15);
    border-radius: 12px; padding: 16px;
}
.extrv-bc-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.extrv-bc-code { font-size: 16px; font-weight: 700; color: #3a86ff; font-family: monospace; letter-spacing: 0.5px; }
.extrv-bc-badge {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.extrv-bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; }
.extrv-bc-field { display: flex; flex-direction: column; gap: 2px; }
.extrv-bc-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #7b98b5; }
.extrv-bc-val { font-size: 13px; color: #e2e8f0; }

/* ── Layout geral: centraliza e limita a largura pra não esparramar em telas largas ── */
#extrv-content { max-width: 1240px; margin: 0 auto; }

/* ── Seções ── */
.ed-section {
    background: rgba(27,38,59,0.65); border: 1px solid rgba(58,134,255,0.12);
    border-radius: 16px; padding: 22px 24px; margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}
.ed-section-title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: #7a8599;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(58,134,255,0.08);
}
.ed-legend { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 400; color: #7b98b5; text-transform: none; letter-spacing: 0; margin-left: auto; }
.ed-leg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ed-leg-dot.sim { background: #fb923c; }
.ed-leg-dot.nao { background: #22c55e; }
.ed-sub-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #7b98b5; margin-bottom: 10px; }
.ed-vazio { font-size: 12px; color: #7b98b5; padding: 8px 0; }

/* ── KPIs — faixa horizontal limpa, sem caixas ── */
.ed-kpis { display: flex; flex-wrap: wrap; row-gap: 16px; }
.ed-kpi  { flex: 1 1 0; min-width: 160px; padding: 2px 24px; border-left: 1px solid rgba(255,255,255,0.07); }
.ed-kpi:first-child { border-left: none; padding-left: 2px; }
.ed-kpi-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8494a9; margin-bottom: 7px; white-space: nowrap; }
.ed-kpi-n   { font-size: 27px; font-weight: 700; line-height: 1; color: #f1f5f9; }
.ed-kpi-v   { font-size: 12px; color: #8494a9; margin-top: 4px; }

/* ── Status list ── */
.ed-status-list { display: flex; flex-direction: column; gap: 5px; }
.ed-status-row {
    display: grid; grid-template-columns: 10px 160px 1fr 44px 120px 44px;
    gap: 10px; align-items: center; padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ed-status-row:last-child { border-bottom: none; }
.ed-status-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ed-status-name { font-size: 13px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-status-bar-wrap { background: rgba(255,255,255,0.05); height: 7px; border-radius: 3px; overflow: hidden; }
.ed-status-bar  { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.ed-stat-n   { font-size: 13px; font-weight: 700; color: #f1f5f9; text-align: right; }
.ed-stat-v   { font-size: 11px; color: #8494a9; text-align: right; }
.ed-stat-pct { font-size: 11px; color: #7b98b5; text-align: right; }

/* ── Transportadora ranking ── */
.ed-tr-header { display: grid; grid-template-columns: 180px 1fr auto; gap: 12px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #7b98b5; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ed-tr-list   { display: flex; flex-direction: column; }
.ed-tr-row    { display: grid; grid-template-columns: 180px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ed-tr-row:last-child { border-bottom: none; }
.ed-tr-name   { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.ed-tr-bars   { display: block; }
.ed-tr-bar-bg { background: rgba(255,255,255,0.04); height: 10px; border-radius: 5px; position: relative; overflow: hidden; display: flex; }
.ed-tr-bar-fill { height: 100%; transition: width 0.5s ease; }
.ed-tr-bar-fill.sim { background: rgba(251,146,60,0.8); }
.ed-tr-bar-fill.nao { background: rgba(34,197,94,0.6); }
.ed-tr-stats  { min-width: 280px; }
.ed-tr-total  { display: flex; gap: 12px; align-items: baseline; }
.ed-tr-n      { font-size: 16px; font-weight: 700; color: #f1f5f9; }
.ed-tr-v      { font-size: 12px; color: #8494a9; }
.ed-tr-pct    { font-size: 11px; color: #7b98b5; margin-left: auto; }
.ed-tr-detail { display: flex; gap: 14px; margin-top: 4px; }
.ed-badge-sim { font-size: 11px; font-weight: 600; color: #fb923c; }
.ed-badge-nao { font-size: 11px; font-weight: 600; color: #22c55e; }
.ed-tr-footer { font-size: 12px; color: #7b98b5; text-align: right; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 4px; }

/* ── Descontos GC vs Entregadores ── */
.ed-comp-bar-row { display: flex; align-items: center; gap: 20px; padding: 4px 0 18px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ed-comp-side    { min-width: 130px; }
.ed-comp-side.gc { text-align: left; }
.ed-comp-side.ext{ text-align: right; }
.ed-comp-pct     { font-size: 28px; font-weight: 700; line-height: 1; }
.ed-comp-side.gc  .ed-comp-pct { color: #fb923c; }
.ed-comp-side.ext .ed-comp-pct { color: #6b80ff; }
.ed-comp-lbl     { font-size: 11px; font-weight: 600; color: #94a3b8; margin: 3px 0; }
.ed-comp-val     { font-size: 11px; color: #8494a9; }
.ed-comp-track   { flex: 1; height: 14px; border-radius: 7px; overflow: hidden; display: flex; background: rgba(255,255,255,0.04); }
.ed-comp-seg.gc  { background: #fb923c; transition: width 0.5s ease; }
.ed-comp-seg.ext { background: #6b80ff; transition: width 0.5s ease; }
.ed-desc-cols    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ed-desc-col     { display: block; }
.ed-desc-col-hdr {
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0 0 9px; margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ed-desc-col-hdr.gc  { color: #fb923c; }
.ed-desc-col-hdr.ext { color: #6b80ff; }
.ed-col-sub { margin-left: auto; font-size: 10px; font-weight: 400; color: #8494a9; text-transform: none; letter-spacing: 0; }
.ed-resp-row   { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ed-resp-row:last-child { border-bottom: none; }
.ed-resp-name  { font-size: 12px; font-weight: 600; color: #94a3b8; margin-bottom: 5px; }
.ed-resp-line  { display: flex; align-items: center; gap: 8px; }
.ed-resp-bar-bg{ flex: 1; background: rgba(255,255,255,0.05); height: 7px; border-radius: 3px; overflow: hidden; }
.ed-resp-bar   { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.ed-resp-bar.gc  { background: rgba(251,146,60,0.8); }
.ed-resp-bar.ext { background: rgba(107,128,255,0.8); }
.ed-resp-n     { font-size: 12px; font-weight: 700; color: #f1f5f9; white-space: nowrap; min-width: 44px; text-align: right; }
.ed-resp-v     { font-size: 11px; color: #8494a9; white-space: nowrap; min-width: 90px; text-align: right; }

/* ── Contestações ── */
.ed-cont-grid       { display: grid; grid-template-columns: 1fr 200px; gap: 24px; margin-bottom: 16px; align-items: center; }
.ed-cont-taxa       { padding: 4px 0; }
.ed-taxa-lbl        { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8494a9; margin-bottom: 8px; }
.ed-taxa-num        { font-size: 40px; font-weight: 700; line-height: 1; }
.ed-taxa-sub        { font-size: 12px; color: #8494a9; margin: 6px 0 12px; }
.ed-taxa-track      { background: rgba(255,255,255,0.06); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; max-width: 420px; }
.ed-taxa-fill       { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.ed-taxa-saved      { font-size: 13px; font-weight: 600; color: #22c55e; }
.ed-cont-chart-wrap { display: block; }
.ed-cont-cards      { display: flex; flex-wrap: wrap; row-gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.05); }
.ed-cc              { flex: 1 1 0; min-width: 180px; padding: 2px 24px; border-left: 1px solid rgba(255,255,255,0.07); }
.ed-cc:first-child  { border-left: none; padding-left: 2px; }
.ed-cc-dot  { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ed-cc-lbl  { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8494a9; margin-bottom: 7px; white-space: nowrap; }
.ed-cc-n    { font-size: 24px; font-weight: 700; color: #f1f5f9; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.ed-cc-v    { font-size: 12.5px; font-weight: 600; }
.ed-cc.resolvido  .ed-cc-v { color: #22c55e; }
.ed-cc.pendente   .ed-cc-v { color: #fbbf24; }
.ed-cc.total-cont .ed-cc-v { color: #3a86ff; }
.ed-cc-pct  { font-size: 11px; color: #7b98b5; margin-top: 5px; }

/* ── Evolução mensal (lista) ── */
.ed-mes-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }
.ed-mes-row  { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; }
.ed-mes-row.hl { background: rgba(58,134,255,0.08); }
.ed-mes-name { font-size: 12px; font-weight: 700; color: #7a8599; }
.ed-mes-bar-wrap { display: flex; height: 10px; background: rgba(255,255,255,0.04); border-radius: 5px; overflow: hidden; gap: 0; }
.ed-mes-bar.sim { background: rgba(251,146,60,0.8); transition: width 0.5s ease; }
.ed-mes-bar.nao { background: rgba(34,197,94,0.6);  transition: width 0.5s ease; }
.ed-mes-stats { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.ed-mes-total { font-size: 14px; font-weight: 700; color: #f1f5f9; min-width: 28px; text-align: right; }
.ed-mes-val   { font-size: 11px; color: #8494a9; min-width: 110px; text-align: right; }
.ed-mes-sim   { font-size: 11px; font-weight: 600; color: #fb923c; min-width: 32px; text-align: right; }
.ed-mes-nao   { font-size: 11px; font-weight: 600; color: #22c55e; min-width: 32px; text-align: right; }

/* ── Tabela cruzada Mês × Transportadora ── */
.ed-cross-wrap { overflow-x: auto; }
.ed-cross-hdr-row, .ed-cross-row, .ed-cross-footer-row {
    display: flex; align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ed-cross-hdr-row { background: rgba(15,15,20,0.5); border-radius: 8px 8px 0 0; }
.ed-cross-footer-row { background: rgba(58,134,255,0.06); border-radius: 0 0 8px 8px; }
.ed-cross-hdr-mes, .ed-cross-mes { width: 44px; min-width: 44px; font-size: 11px; font-weight: 700; color: #7a8599; padding: 8px 6px; flex-shrink: 0; }
.ed-cross-hdr-t { flex: 1; min-width: 80px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7b98b5; padding: 8px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-cross-hdr-total { width: 100px; min-width: 100px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7b98b5; padding: 8px 6px; text-align: right; }
.ed-cross-cell { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; gap: 1px; }
.ed-cross-cell.has { background: rgba(251,146,60,0.05); }
.ed-cross-row.hl .ed-cross-cell.has { background: rgba(251,146,60,0.12); }
.ed-cross-row.hl { background: rgba(58,134,255,0.04); }
.ed-cross-n { font-size: 13px; font-weight: 700; color: #f1f5f9; }
.ed-cross-v { font-size: 10px; color: #8494a9; }
.ed-cross-zero { font-size: 12px; color: rgba(255,255,255,0.1); }
.ed-cross-total-cell { width: 100px; min-width: 100px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 6px 8px; gap: 1px; background: rgba(58,134,255,0.05); }

@media (max-width: 680px) {
    .ed-kpis       { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .ed-kpi        { border-left: none; padding: 0; min-width: 0; }
    .ed-status-row { grid-template-columns: 8px 1fr auto auto; }
    .ed-stat-pct, .ed-status-bar-wrap { display: none; }
    .ed-tr-row     { grid-template-columns: 120px 1fr; }
    .ed-tr-stats   { display: none; }
    .ed-desc-cols  { grid-template-columns: 1fr; }
    .ed-cont-grid  { grid-template-columns: 1fr; }
    .ed-cont-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .ed-cc         { border-left: none; padding: 0; min-width: 0; }
    .ed-mes-val    { display: none; }
    .ed-comp-bar-row { flex-direction: column; gap: 10px; }
}



/* ===== SEPARAÇÃO (BIPAGENS) ===== */
.bip-layout {
    display: flex; flex-direction: column; gap: 0;
    /* sem overflow:hidden — fech-body já tem overflow-y:auto e rola tudo */
}

/* Scanner centralizado no topo, sessão embaixo em largura total */
.bip-grid { display: flex; flex-direction: column; gap: 22px; }
.bip-col-scan {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; max-width: 560px; align-self: center;
}
.bip-col-log { min-width: 0; }
.bip-resultado-area { width: 100%; }

/* Card do scanner — fixo no topo ao rolar */
.bip-scan-card {
    position: sticky; top: -20px; z-index: 5;
    background: linear-gradient(150deg, rgba(20,28,44,0.98) 0%, rgba(11,16,26,1) 60%);
    border: 1px solid rgba(58,134,255,0.2);
    border-radius: var(--radius); padding: 18px 20px 16px;
    margin-top: -20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.bip-scan-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: #3a86ff;
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 14px;
}
.bip-scan-hint { font-size: 11px; color: var(--text-dim); margin-top: 10px; }

/* ── Conferência do entregador: dias e clusters ──
   O motorista abre isso no celular, no pátio. Os dois blocos são de toque: alvo grande,
   pouca informação por linha, e o que importa (quanto falta) legível de relance. */
.cen-dia-card {
    display: block; width: 100%; text-align: left;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
    cursor: pointer; font-family: inherit;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.cen-dia-card:hover  { background: rgba(58,134,255,0.07); border-color: rgba(58,134,255,0.3); }
.cen-dia-card:active { transform: scale(0.995); }
.cen-dia-topo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 4px;
}
.cen-dia-nome { font-size: 14.5px; font-weight: 700; color: #e2e8f0; }
.cen-dia-pct  { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cen-dia-obs  { font-size: 12.5px; color: #8494a9; margin-bottom: 10px; }
.cen-dia-tag {
    display: inline-block; margin-left: 8px;
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.cen-dia-tag.ok        { background: rgba(34,197,94,0.14);  color: #4ade80; }
.cen-dia-tag.andamento { background: rgba(234,179,8,0.14);  color: #fcd34d; }

.cen-cluster {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 11px 14px; margin-bottom: 8px;
}
.cen-cluster-topo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.cen-cluster-nome { font-size: 13.5px; font-weight: 700; color: #e2e8f0; }
.cen-cluster-num  { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Item avariado: a dica não é informativa, é um aviso — bipar ali tira o pacote de todas
   as conferências e só dev desfaz. Em cinza-claro, do tamanho das outras, ninguém lia. */
.bip-scan-hint.sav-alerta {
    font-size: 12px; line-height: 1.5;
    color: #fcd34d;
    background: rgba(234,179,8,0.08);
    border: 1px solid rgba(234,179,8,0.22);
    border-radius: 9px;
    padding: 9px 12px;
}
.bip-scan-hint.sav-alerta strong { color: #fde68a; }

/* Search input */
.bip-search-wrap {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1.5px solid rgba(58,134,255,0.18);
    border-radius: 14px; padding: 13px 18px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.bip-search-wrap:focus-within {
    border-color: rgba(58,134,255,0.45);
    background: rgba(58,134,255,0.04);
    box-shadow: 0 0 0 3px rgba(58,134,255,0.07);
}
.bip-search-wrap.flash-ok {
    border-color: rgba(34,197,94,0.7) !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.15) !important;
}
.bip-search-wrap.flash-err {
    border-color: rgba(239,68,68,0.7) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
}
.bip-search-wrap input {
    flex: 1; background: none; border: none; outline: none;
    color: #e2e8f0; font-size: 15px; font-family: inherit;
    font-weight: 500; caret-color: #3a86ff;
}
.bip-search-wrap input::placeholder { color: #607289; }
.bip-clear-btn {
    background: none; border: none; cursor: pointer;
    color: #707f96; font-size: 19px; line-height: 1;
    padding: 0 2px; transition: color 0.15s; font-family: inherit;
}
.bip-clear-btn:hover { color: #8494a9; }
.bip-sync-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(251,146,60,0.35);
    background: rgba(251,146,60,0.08); color: #fb923c;
    font-size: 13px; font-weight: 600; font-family: inherit;
    transition: background 0.2s;
}
.bip-sync-btn:hover { background: rgba(251,146,60,0.16); }
.bip-sync-info { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }

.adm-nf-pdf-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 7px; cursor: pointer;
    border: 1px solid rgba(58,134,255,0.3);
    background: rgba(58,134,255,0.08); color: #3a86ff;
    font-size: 11px; font-weight: 700; font-family: inherit;
    transition: background 0.15s;
}
.adm-nf-pdf-btn:hover { background: rgba(58,134,255,0.18); }

/* Session log */
.bip-log-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-shrink: 0;
}
.bip-log-title {
    font-size: 11px; font-weight: 700; color: #707f96;
    text-transform: uppercase; letter-spacing: .1em;
}
.bip-count-badge {
    font-size: 11px; font-weight: 700; color: #3a86ff;
    background: rgba(58,134,255,0.1); border: 1px solid rgba(58,134,255,0.2);
    border-radius: 20px; padding: 2px 10px;
    min-width: 28px; text-align: center;
}
.bip-empty-msg { color: #8494a9; font-size: 13px; padding: 6px 0; }

/* Chips com contagem por transportadora na sessão */
.bip-sessao-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bip-sessao-stats:empty { display: none; }
.bip-stat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
    border: 1px solid;
}


/* Session items */
.bip-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015);
    margin-bottom: 5px; transition: background 0.15s;
}
.bip-item:hover { background: rgba(255,255,255,0.035); }
.bip-item-badge {
    font-size: 10px; font-weight: 700; letter-spacing: .03em;
    padding: 3px 9px; border-radius: 20px; flex-shrink: 0; white-space: nowrap;
}
.bip-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bip-item-ent {
    font-size: 13px; font-weight: 600; color: #e2e8f0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bip-item-code {
    font-size: 11px; color: #707f96;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.bip-item-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.bip-item-city { font-size: 11px; color: #7b98b5; }
.bip-item-hora { font-size: 10px; color: #8494a9; font-variant-numeric: tabular-nums; }

/* Result card */
.bip-result-card {
    border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,15,24,0.95);
}
.bip-result-head {
    padding: 10px 16px 9px;
    border-bottom: 1px solid rgba(255,255,255,0.045);
    display: flex; align-items: center; gap: 9px;
}
.bip-result-transp {
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
}
/* ── Bloco do entregador (destaque) ── */
.bip-result-ent {
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.045);
    display: flex; align-items: center; gap: 14px;
}
.bip-result-ent-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid; display: flex; align-items: center; justify-content: center;
}
.bip-result-ent-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .1em; color: #66829c; margin-bottom: 3px;
}
.bip-result-ent-nome {
    font-size: 20px; font-weight: 800; color: #f1f5f9;
    letter-spacing: -0.4px; line-height: 1.15;
}
.bip-result-ent-nome.sem-ent {
    font-size: 14px; font-weight: 500; color: #fb923c;
}
.bip-result-ent-sigla {
    font-size: 13px; color: #ffffff !important; margin-top: 3px; font-weight: 600;
}
/* ── Detalhes abaixo ── */
.bip-result-rows { padding: 4px 18px 10px; }
.bip-result-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.035);
}
.bip-result-row:last-child { border-bottom: none; }
.bip-result-lbl { font-size: 11px; color: #66829c; font-weight: 500; white-space: nowrap; }
.bip-result-val { font-size: 13px; font-weight: 600; color: #c8d8ec; text-align: right; }
.bip-result-val.warn { color: #fb923c; }
.bip-result-val.accent { color: #fb923c; }

/* Loading / Error */
.bip-loading {
    display: flex; align-items: center; gap: 10px;
    color: #8494a9; font-size: 13px; padding: 20px 0;
}
.bip-error-card {
    display: flex; align-items: center; gap: 12px;
    background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.18);
    border-radius: 12px; padding: 14px 16px;
    color: #ef4444; font-size: 13px; font-weight: 500;
}

/* ===== TELAS DO ENTREGADOR — MOBILE ===== */

/* Grid do formulário de antecipação */
.ant-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Linha "valor + botão valor total" */
.ant-valor-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Inputs do formulário de antecipação — evita zoom no iOS (font-size < 16px dispara zoom) */
#ant-cnpj, #ant-telefone, #ant-valor, #ant-numero-nf {
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
}

/* ═══ ANTECIPAÇÃO ENTREGADOR ═══ */

.ant-nf-card {
    background: rgba(58,134,255,0.07); border: 1px solid rgba(58,134,255,0.2);
    border-radius: 14px; padding: 16px 20px; margin-bottom: 16px;
}
.ant-nf-label { font-size: 11px; color: #8494a9; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.ant-nf-info  { font-size: 20px; font-weight: 700; color: #e2e8f0; }

.ant-form-wrap {
    background: rgba(15,25,35,0.55); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 22px 24px;
}
.ant-form-title { font-size: 15px; font-weight: 700; color: #e2e8f0; margin-bottom: 20px; }

.ant-field { display: flex; flex-direction: column; gap: 6px; }
.ant-label  { font-size: 12px; color: #8494a9; font-weight: 700; letter-spacing: 0.03em; }
.ant-input  {
    width: 100%; padding: 11px 14px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    color: #e2e8f0; font-size: 15px; font-family: inherit; box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
}
.ant-input:focus { outline: none; border-color: rgba(58,134,255,0.5); background: rgba(58,134,255,0.05); }
/* selects com a mesma cara dos inputs, mas com a setinha (o appearance:none some com ela) */
select.ant-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
    padding-right: 38px; cursor: pointer;
}
select.ant-input option { background: #1a2535; color: #e2e8f0; }
.ant-input:-webkit-autofill,
.ant-input:-webkit-autofill:hover,
.ant-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0d1623 inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    caret-color: #e2e8f0;
}
.ant-valor-btn {
    padding: 10px 14px; border-radius: 10px;
    border: 1px solid rgba(58,134,255,0.35); background: rgba(58,134,255,0.08);
    color: #3a86ff; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; white-space: nowrap; flex-shrink: 0; transition: background 0.2s;
}
.ant-valor-btn:hover { background: rgba(58,134,255,0.16); }
.ant-form-msg { font-size: 13px; border-radius: 9px; padding: 10px 14px; margin-bottom: 14px; }
.ant-submit-btn {
    padding: 12px 28px; border-radius: 11px; border: none;
    background: #3a86ff; color: #fff; font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: background 0.2s;
}
.ant-submit-btn:hover    { background: #2563eb; }
.ant-submit-btn:disabled { opacity: 0.6; cursor: default; }

.ant-historico-section { margin-top: 28px; }
.ant-sol-title {
    font-size: 11px; font-weight: 700; color: #717f95; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Tabela de histórico */
.ant-hist-table { width: 100%; border-collapse: collapse; }
.ant-hist-table th {
    padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 700;
    color: #717f95; text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ant-hist-table td {
    padding: 13px 14px; font-size: 13px; color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ant-hist-table tr:last-child td { border-bottom: none; }
.ant-hist-table tr:hover td { background: rgba(58,134,255,0.04); }

/* ===== BAIXAS — TOTAL EXPRESS ===== */
.bte-foto-row { display: flex; }
.bte-foto-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 16px; border-radius: 10px;
    border: 1px solid rgba(58,134,255,0.35); background: rgba(58,134,255,0.08);
    color: #3a86ff; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: background 0.2s;
}
.bte-foto-btn:hover { background: rgba(58,134,255,0.16); }
.bte-foto-preview {
    margin-top: 10px; max-width: 220px; max-height: 220px;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
}
.bte-codigo-row { display: flex; gap: 10px; }
.bte-scan-btn {
    flex-shrink: 0; width: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid rgba(58,134,255,0.35); background: rgba(58,134,255,0.08);
    color: #3a86ff; cursor: pointer; transition: background 0.2s;
}
.bte-scan-btn:hover { background: rgba(58,134,255,0.16); }

/* ===== DEVOLUÇÕES — CRIAR (entregador) ===== */
/* Tile de foto: área tracejada que vira a própria miniatura depois da captura */
.dev-foto-tile {
    position: relative; width: 100%; height: 150px; border-radius: 12px;
    border: 1.5px dashed rgba(58,134,255,0.35); background: rgba(58,134,255,0.05);
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.dev-foto-tile:hover { background: rgba(58,134,255,0.09); border-color: rgba(58,134,255,0.55); }
.dev-foto-tile.tem-foto { border-style: solid; border-color: rgba(255,255,255,0.12); background: #000; }
.dev-foto-vazio {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: #3a86ff; font-size: 13px; font-weight: 600;
}
.dev-foto-tile.tem-foto .dev-foto-vazio { display: none; }
.dev-foto-tile img { width: 100%; height: 100%; object-fit: cover; display: none; }
.dev-foto-tile.tem-foto img { display: block; }
.dev-foto-refazer {
    position: absolute; right: 8px; bottom: 8px; display: none;
    padding: 5px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
    background: rgba(7,10,16,0.75); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.15);
}
.dev-foto-tile.tem-foto .dev-foto-refazer { display: block; }

/* Cabeçalho do formulário */
.dev-form-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.dev-form-icon {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    background: rgba(58,134,255,0.12); color: #3a86ff;
    display: flex; align-items: center; justify-content: center;
}
.dev-form-sub { font-size: 12.5px; color: #8494a9; }

/* Seções numeradas — o preenchimento é uma sequência: foto → motivo → transportadora → código */
.dev-sec { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.dev-sec-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 11.5px; font-weight: 700; color: #94a3b8;
    letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px;
}
.dev-sec-num {
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    background: rgba(58,134,255,0.12); color: #3a86ff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; letter-spacing: 0;
}

/* Chips de seleção (motivo / transportadora) — mais rápidos no celular que dropdown */
.dev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03);
    color: #94a3b8; font-size: 13px; font-weight: 600; font-family: inherit;
    transition: border-color .15s, background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.dev-chip:hover { border-color: rgba(58,134,255,0.4); color: #cbd5e1; }
.dev-chip.active { border-color: #3a86ff; background: rgba(58,134,255,0.14); color: #fff; }

/* Abas de filtro (Todos/Online/Ativos...) — texto puro com sublinhado no
   selecionado, sem caixinha de botão, pra não parecer chip de formulário. */
.filtro-tabs { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.filtro-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 2px 0 4px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; color: #8494a9; transition: color .15s, border-color .15s;
}
.filtro-tab:hover { color: #cbd5e1; }
.filtro-tab.active { color: #3a86ff; border-bottom-color: #3a86ff; }

.dev-sem-codigo-row {
    display: flex; align-items: center; gap: 9px; margin-top: 12px;
    font-size: 13px; color: #94a3b8; cursor: pointer;
}
.dev-sem-codigo-row input { width: 16px; height: 16px; accent-color: #3a86ff; cursor: pointer; flex-shrink: 0; }
#dev-descricao-field { margin-top: 12px; }

.dev-submit {
    width: 100%; padding: 14px; font-size: 14.5px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 2px;
}
@media (max-width: 680px) {
    .dev-chip { flex: 1 1 calc(50% - 4px); padding: 12px 8px; }
    .dev-foto-tile { height: 170px; }
}

.abte-foto-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid rgba(58,134,255,0.3); background: rgba(58,134,255,0.08);
    color: #5d9aff; font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: inherit; white-space: nowrap; transition: background 0.2s;
}
.abte-foto-btn:hover { background: rgba(58,134,255,0.18); }

/* ===== EXPORTAR PEDIDOS — CALENDARIO DE INTERVALO ===== */
.ped-export-pop {
    position: fixed; z-index: 99999; width: 300px;
    background: #0b1018; border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; overflow: hidden; user-select: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(58,134,255,0.06);
    animation: pc-in 0.15s ease;
}

/* Combobox de entregador (Planejamento de Rotas) */
.pv-combo-pop {
    position: fixed; z-index: 99999;
    background: #0b1018; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; overflow: hidden auto; max-height: 240px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(58,134,255,0.06);
    animation: pc-in 0.15s ease;
}
.pv-combo-item {
    padding: 9px 14px; font-size: 13px; color: #cbd5e1; cursor: pointer;
    white-space: normal; word-break: break-word; line-height: 1.35;
}
.pv-combo-item:hover { background: color-mix(in srgb, var(--pv-accent, #3a86ff) 18%, transparent); color: #fff; }
.pv-combo-empty { padding: 10px 14px; font-size: 12.5px; color: #7b98b5; }

/* Título com ícone (Planejamento de Rotas) */
.pv-title-icon {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--pv-accent, #3a86ff) 14%, transparent);
    color: var(--pv-accent, #3a86ff);
    transition: background 0.25s ease, color 0.25s ease;
}

/* Abas de transportadora (Planejamento de Rotas) — cada uma na cor da própria transportadora */
.pv-transp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pv-transp-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px 8px 14px; border-radius: 99px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; transition: all 0.2s ease;
    border: 1px solid color-mix(in srgb, var(--pvc) 32%, transparent);
    background: color-mix(in srgb, var(--pvc) 8%, transparent);
    color: var(--pvc);
}
.pv-transp-tab svg { flex-shrink: 0; opacity: 0.85; }
.pv-transp-tab:hover { background: color-mix(in srgb, var(--pvc) 18%, transparent); transform: translateY(-1px); }
.pv-transp-tab.active {
    background: var(--pvc); color: #fff; border-color: var(--pvc);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--pvc) 50%, transparent);
}
.pv-transp-tab.active .pv-tab-dot { background: #fff; }
.pv-tab-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--pvc); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--pvc) 60%, transparent);
}

/* Tira de indicadores (total / definidos / pendentes / cobertura) */
.pv-stats { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pv-stat-tile {
    background: var(--surface-2); border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm); padding: 12px 22px; min-width: 96px;
}
.pv-stat-val { font-size: 24px; font-weight: 700; color: #f1f5f9; line-height: 1; font-variant-numeric: tabular-nums; }
.pv-stat-val.pv-ok   { color: #22c55e; }
.pv-stat-val.pv-warn { color: #fb923c; }
.pv-stat-lbl {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .05em; margin-top: 5px; white-space: nowrap;
}
.pv-stat-progress {
    flex: 1; min-width: 200px; background: var(--surface-2);
    border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm);
    padding: 11px 18px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.pv-stat-progress-hd {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
}
.pv-stat-progress-hd b { color: var(--pv-accent, #3a86ff); font-size: 14px; letter-spacing: 0; }
.pv-progress-track { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.pv-progress-fill {
    height: 100%; border-radius: 99px; transition: width 0.5s ease;
    background: var(--pv-accent, #3a86ff);
}

/* Card da tabela — acento na cor da transportadora selecionada */
.pv-card {
    background: rgba(14,22,40,0.9);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius); overflow: hidden;
}
.pv-table { table-layout: fixed; width: 100%; }
.pv-table th:nth-child(2) { width: 90px; }
.pv-table th:nth-child(3), .pv-table td:nth-child(3) { width: 46%; }
.pv-table td:nth-child(1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pv-tbody tr:hover td { background: color-mix(in srgb, var(--pv-accent, #3a86ff) 6%, transparent); }

.pv-sigla-pill {
    display: inline-block; padding: 3px 11px; border-radius: 99px; white-space: nowrap;
    font-size: 11.5px; font-weight: 700; font-family: 'SFMono-Regular', Consolas, monospace; letter-spacing: .01em;
    color: var(--pv-accent, #3a86ff);
    background: color-mix(in srgb, var(--pv-accent, #3a86ff) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--pv-accent, #3a86ff) 28%, transparent);
}

.pv-ent-cell { display: flex; align-items: center; gap: 10px; }
.pv-ent-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; color: #fff;
    background: var(--pv-accent, #3a86ff);
}
.pv-ent-avatar.pv-avatar-vazio {
    background: rgba(255,255,255,0.04); color: #fb923c;
    border: 1.5px dashed rgba(251,146,60,0.4); box-shadow: none;
}
.pv-ent-cell .pv-combo-input { flex: 1; min-width: 0; }

.pv-combo-input { transition: border-color 0.2s, box-shadow 0.2s, color 0.2s; }
.pv-combo-input:focus {
    border-color: var(--pv-accent, #3a86ff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pv-accent, #3a86ff) 18%, transparent);
    outline: none;
}
.pv-combo-input.pv-nao-definido { color: #fb923c; font-style: italic; }

/* Alternador de visão: Por Bairro / Por Entregador */
.pv-view-toggle {
    display: flex; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 99px; padding: 3px; gap: 2px;
    background: rgba(0,0,0,0.2);
}
.pv-view-btn {
    padding: 7px 16px; border-radius: 99px; border: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    background: transparent; color: var(--text-muted); transition: all 0.2s ease;
}
.pv-view-btn:hover:not(.active) { color: #cbd5e1; }
.pv-view-btn.active {
    background: var(--pv-accent, #3a86ff); color: #fff;
}

/* Cards agrupados por entregador — "quem vai fazer qual rota" */
.pv-driver-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
    align-items: start;
}
.pv-driver-card {
    background: rgba(14,22,40,0.9);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius); padding: 16px 18px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    min-width: 0; /* item de grid não deve crescer além da coluna por causa do header nowrap */
}
.pv-driver-card.pv-drop-target {
    transform: scale(1.02);
    background: color-mix(in srgb, var(--pv-accent, #3a86ff) 10%, rgba(14,22,40,0.9));
    box-shadow: 0 0 0 2px var(--pv-accent, #3a86ff);
}
.pv-driver-card.pv-driver-vazio {
    border-color: rgba(251,146,60,0.35);
}
.pv-driver-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.pv-driver-name {
    font-size: 14px; font-weight: 700; color: #e2e8f0; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-driver-vazio .pv-driver-name { color: #fb923c; }
.pv-driver-count {
    font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 99px;
    color: var(--pv-accent, #3a86ff); background: color-mix(in srgb, var(--pv-accent, #3a86ff) 14%, transparent);
    white-space: nowrap; flex-shrink: 0;
}
.pv-driver-vazio .pv-driver-count { color: #fb923c; background: rgba(251,146,60,0.14); }
.pv-driver-bairros { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-bairro-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; padding: 4px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.035); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.06);
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pv-bairro-chip:hover { border-color: color-mix(in srgb, var(--pv-accent, #3a86ff) 40%, transparent); }
.pv-bairro-chip:active { cursor: grabbing; }
.pv-bairro-chip .sigla { font-family: monospace; font-weight: 700; color: var(--pv-accent, #3a86ff); font-size: 10.5px; }

/* Chip "fantasma" que segue o cursor enquanto o bairro é arrastado */
.pv-chip-source-dragging {
    opacity: 0.28; border-style: dashed; border-color: var(--pv-accent, #3a86ff);
    background: transparent;
}
.pv-chip-ghost {
    z-index: 99999; pointer-events: none; margin: 0 !important;
    background: color-mix(in srgb, var(--pv-accent, #3a86ff) 26%, #0b1018);
    color: #fff; border: 1px solid var(--pv-accent, #3a86ff);
    box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--pv-accent, #3a86ff) 45%, transparent);
    /* transform (escala + rotação do "balanço") é controlado via JS a cada frame */
    animation: pv-chip-pulse 1s ease-in-out infinite;
}
.pv-chip-ghost .sigla { color: #fff; opacity: 0.85; }
@keyframes pv-chip-pulse {
    0%, 100% {
        box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--pv-accent, #3a86ff) 45%, transparent);
    }
    50% {
        box-shadow: 0 20px 44px rgba(0,0,0,0.6), 0 0 0 5px color-mix(in srgb, var(--pv-accent, #3a86ff) 60%, transparent);
    }
}

@media (max-width: 680px) {
    .pv-stats { gap: 8px; }
    .pv-stat-tile { padding: 10px 14px; min-width: 0; flex: 1; }
    .pv-stat-progress { flex-basis: 100%; }
    /* padding lateral: da uma folga pro card crescer (scale do drop-target) sem estourar a tela,
       já que no mobile é 1 coluna full-width */
    .pv-driver-grid { grid-template-columns: 1fr; padding: 0 6px; }

    .pv-transp-tabs { gap: 6px; margin-top: 10px; }
    .pv-transp-tab { padding: 7px 12px 7px 10px; font-size: 12px; }

    .pv-table th, .pv-table td { padding: 10px 6px; }
    .pv-table th:nth-child(1), .pv-table td:nth-child(1) { width: 30%; }
    .pv-table th:nth-child(2), .pv-table td:nth-child(2) { width: 74px; }
    .pv-table th:nth-child(3), .pv-table td:nth-child(3) { width: auto; }
    .pv-sigla-pill { padding: 3px 7px; font-size: 10.5px; }
    .pv-ent-cell { gap: 5px; }
    .pv-ent-avatar { width: 22px; height: 22px; font-size: 9px; }
    .pv-combo-input { padding: 7px 8px; font-size: 12.5px; }
}
.ped-cal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.045);
}
.ped-cal-header span { font-size: 13px; font-weight: 700; color: #e2e8f0; text-transform: capitalize; }
.ped-cal-nav {
    width: 26px; height: 26px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.04); color: #94a3b8; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ped-cal-nav:hover { background: rgba(58,134,255,0.15); color: #5d9aff; }
.ped-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 6px 10px 4px; gap: 2px; }
.ped-cal-dow { font-size: 10px; font-weight: 700; color: #66829c; text-align: center; padding: 6px 0 8px; text-transform: uppercase; }
.ped-cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: #cbd5e1; border-radius: 8px; cursor: pointer;
    position: relative; transition: background 0.1s, color 0.1s;
}
.ped-cal-day.outro-mes { color: #1e2c3d; }
.ped-cal-day:hover { background: rgba(58,134,255,0.12); }
.ped-cal-day.no-intervalo { background: rgba(58,134,255,0.12); border-radius: 0; }
.ped-cal-day.intervalo-inicio { background: #3a86ff; color: #fff; font-weight: 700; border-radius: 8px 0 0 8px; }
.ped-cal-day.intervalo-fim { background: #3a86ff; color: #fff; font-weight: 700; border-radius: 0 8px 8px 0; }
.ped-cal-day.intervalo-unico { background: #3a86ff; color: #fff; font-weight: 700; border-radius: 8px; }
.ped-cal-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px 14px; border-top: 1px solid rgba(255,255,255,0.045);
}
.ped-cal-range-txt { font-size: 11.5px; color: #7b98b5; line-height: 1.3; }
.ped-cal-btns { display: flex; gap: 8px; }
.ped-cal-btn-cancelar {
    padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
    background: transparent; color: #94a3b8; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.ped-cal-btn-confirmar {
    padding: 7px 14px; border-radius: 8px; border: none;
    background: #3a86ff; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.ped-cal-btn-confirmar:hover:not(:disabled) { background: #2563eb; }
.ped-cal-btn-confirmar:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 680px) {

    /* ════ FECHAMENTO — PAINEL ENTREGADOR ════ */

    /* fech-body: menos padding no topo em mobile */
    .fech-body { padding-top: 14px; }

    /* Banner: mais compacto e legível */
    .painel-banner {
        flex-direction: column; align-items: stretch;
        gap: 0; padding: 18px 16px; border-radius: 14px;
        margin-bottom: 14px;
    }
    .pb-valor { font-size: 32px; letter-spacing: -0.5px; }
    .pb-eyebrow { font-size: 10px; margin-bottom: 6px; }
    .pb-sub { font-size: 11px; margin-top: 6px; }
    .pb-divider { display: none; }
    .pb-right {
        text-align: left; min-width: unset; padding: 12px 0 0;
        margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
    }
    .pb-ent-valor { font-size: 26px; line-height: 1; }
    .pb-ent-label { text-align: left; font-size: 10px; margin-bottom: 6px; }
    .pb-ent-sub   { text-align: left; font-size: 11px; margin-top: 5px; }
    .pb-pagamento { font-size: 11px; margin-top: 5px; margin-bottom: 12px; }

    /* Ajustes: 1 coluna compacta */
    .painel-ajustes {
        grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px;
    }
    .paj-card  { padding: 11px 10px; border-radius: 10px; }
    .paj-label { font-size: 9px; letter-spacing: 0.04em; }
    .paj-sublabel { font-size: 8px; }
    .paj-value { font-size: 15px; }

    /* Título de seção */
    .painel-section-title {
        font-size: 10px; margin-bottom: 8px; margin-top: 16px;
    }

    /* Transportadoras: 2 colunas */
    .painel-transp { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
    .pt-card    { padding: 10px 11px; border-radius: 10px; }
    .pt-header  { font-size: 11px; padding-bottom: 7px; margin-bottom: 7px; }
    .pt-row     { padding: 3px 0; }
    .pt-row span:first-child { font-size: 10px; }
    .pt-row span:last-child  { font-size: 11px; }

    /* Ocorrências: 1 coluna */
    .poc-card { border-radius: 10px; }
    .poc-table { min-width: 300px; }
    .poc-card .poc-header { font-size: 11px; }


    /* ── Nota Fiscal card (dentro do fechamento) ── */
    .nota-card { padding: 12px; border-radius: 10px; margin-bottom: 10px; }

    /* Linha: ícone ok + "NF Enviada + chave" + botões — empilha em 2 linhas no mobile */
    .nota-card > div:first-child {
        flex-wrap: wrap; gap: 8px;
    }
    .nota-card > div:first-child > div[style*="flex:1"] {
        flex: 1 1 120px; min-width: 0;
    }
    .nota-ver-btn {
        padding: 7px 14px; font-size: 12px; flex-shrink: 0;
    }
    .nota-remove-btn {
        padding: 5px 10px; font-size: 12px; flex-shrink: 0;
    }

    /* Status diverge/confere: texto pode quebrar */
    .nota-status {
        font-size: 11px; padding: 9px 12px; border-radius: 8px;
        flex-wrap: wrap; margin-top: 8px;
    }

    /* ── Nota upload area ── */
    .nota-upload-area { flex-wrap: wrap; gap: 8px; padding: 12px; }
    .nota-upload-btn  { width: 100%; justify-content: center; padding: 10px; }

    /* ── Quinzena toggle: touch-friendly ── */
    .quinzena-btn { min-height: 46px; font-size: 13px; padding: 12px 8px; }

    /* ── Select: 16px previne zoom iOS ── */
    .fech-select { font-size: 16px; }

    /* ════ ANTECIPAÇÃO ENTREGADOR ════ */

    .ant-nf-card  { padding: 13px 15px; margin-bottom: 12px; border-radius: 12px; }
    .ant-nf-info  { font-size: 17px; }
    .ant-form-wrap { padding: 15px 16px; border-radius: 12px; }
    .ant-form-title { font-size: 14px; margin-bottom: 16px; }
    .ant-form-grid  { grid-template-columns: 1fr; }
    .ant-input { font-size: 16px; padding: 12px 14px; }
    .ant-valor-row  { flex-direction: column; }
    .ant-valor-btn  { width: 100%; justify-content: center; text-align: center; padding: 12px; }
    .ant-submit-btn { width: 100%; padding: 14px; font-size: 15px; border-radius: 12px; margin-top: 4px; }

    /* Histórico → cards no mobile */
    .ant-hist-table thead { display: none; }
    .ant-hist-table tr {
        display: block;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 11px;
        padding: 12px 14px;
        margin-bottom: 8px;
    }
    .ant-hist-table td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 5px 0; border-bottom: none; font-size: 13px;
    }
    .ant-hist-table td:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.04); padding-bottom: 6px; }
    .ant-hist-table td::before {
        content: attr(data-label);
        font-size: 11px; color: #717f95; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.04em;
        margin-right: 8px; flex-shrink: 0;
    }
}

@media (max-width: 420px) {
    /* ── Banner ainda mais compacto ── */
    .pb-valor     { font-size: 28px; }
    .pb-ent-valor { font-size: 22px; }
    .painel-banner { padding: 14px; }

    /* ── Ajustes: etiquetas ainda menores ── */
    .paj-label { font-size: 8px; }
    .paj-value { font-size: 14px; }

    /* ── Topbar ── */
    .topbar h1 { font-size: 14px; }
    .home-greeting { font-size: 22px; }

    /* ── Formulário antecipação ── */
    #ant-form-wrap { padding: 12px; }
    #ant-nf-card   { padding: 11px 12px; }
}

/* ===== IMPRESSÃO / PDF ===== */
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .sidebar, .sidebar-backdrop, .topbar, .fech-header { display: none !important; }
    body { background: #0f0f14 !important; overflow: visible !important; height: auto !important; display: block !important; }
    .content { padding: 10px !important; overflow: visible !important; display: block !important; }
    .main { overflow: visible !important; height: auto !important; display: block !important; }
    .view { display: none !important; }
    .tela-full.active-view { display: block !important; overflow: visible !important; height: auto !important; }
    .fech-body { overflow: visible !important; height: auto !important; padding: 0 !important; }
    #adm-fech-empty, #adm-ent-section { display: none !important; }
    #adm-fech-data { display: block !important; }
    #adm-pdf-header { display: block !important; }
    #adm-pdf-btn, [onclick="limparSelecaoEntregador()"] { display: none !important; }
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== CUSTOM MODALS (gcAlert / gcConfirm) ===== */
.gc-overlay {
    position: fixed; inset: 0; z-index: 9990;
    background: rgba(7,9,14,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: gcFadeIn 0.15s ease;
}
/* ===== SKELETON LOADER ===== */
@keyframes sk-shimmer {
    from { background-position: -600px 0; }
    to   { background-position:  600px 0; }
}
.sk {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 1200px 100%;
    animation: sk-shimmer 1.6s infinite linear;
    border-radius: 6px;
}
.sk-mode, .fechamento-empty.sk-mode {
    background: transparent; border: none; padding: 0;
    min-height: unset; display: block;
}
.sk-banner {
    border-radius: 18px; padding: 28px 32px;
    border: 1px solid rgba(58,134,255,0.08);
    background: rgba(27,38,59,0.45);
    display: flex; align-items: center; gap: 32px;
    margin-bottom: 20px;
}
.sk-banner-left  { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.sk-banner-right { min-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sk-divider { width: 1px; background: rgba(255,255,255,0.06); align-self: stretch; margin: 4px 0; }
.sk-section { height: 8px; width: 100px; border-radius: 4px; margin-bottom: 10px; }
.sk-grid-5  { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 20px; }
.sk-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.sk-card {
    background: rgba(27,38,59,0.45); border: 1px solid rgba(58,134,255,0.08);
    border-radius: 14px; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.sk-tall { min-height: 100px; }
.sk-h8  { height: 8px;  border-radius: 4px; }
.sk-h14 { height: 14px; border-radius: 4px; }
.sk-h44 { height: 44px; border-radius: 8px; }
.sk-w40 { width: 40%; }
.sk-w60 { width: 60%; }
.sk-w80 { width: 80%; }
@media (max-width: 680px) {
    .sk-grid-5 { grid-template-columns: 1fr 1fr; }
    .sk-grid-2 { grid-template-columns: 1fr; }
    .sk-banner { flex-direction: column; gap: 16px; padding: 20px; }
    .sk-divider { display: none; }
    .sk-banner-right { width: 100%; align-items: flex-start; }
}

@keyframes gcFadeIn { from { opacity: 0 } to { opacity: 1 } }
.gc-card {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 26px 28px 22px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0,0,0,0.65);
    animation: gcSlideUp 0.18s ease;
}
@keyframes gcSlideUp { from { transform: translateY(10px); opacity:0 } to { transform: translateY(0); opacity:1 } }
.gc-card-title {
    font-size: 15px; font-weight: 700; color: #f1f5f9; margin-bottom: 8px;
}
.gc-card-msg {
    font-size: 14px; color: #94a3b8; line-height: 1.6; margin-bottom: 22px;
    white-space: pre-line;
}
.gc-card-btns { display: flex; gap: 10px; justify-content: flex-end; }
.gc-btn-confirm {
    background: #3a86ff; color: #fff; border: none; border-radius: 9px;
    padding: 9px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.gc-btn-confirm:hover { background: #2563eb; }
.gc-btn-cancel {
    background: rgba(255,255,255,0.05); color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 9px;
    padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.gc-btn-cancel:hover { background: rgba(255,255,255,0.09); }

/* ===== TORRE DE CONTROLE — ALIMENTAR ===== */
.ta-wrap { max-width: 720px; margin: 0 auto; padding: 4px 0 40px; }
.ta-transp-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px 5px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    border: 1px solid; margin-bottom: 28px;
}
.ta-titulo { font-size: 22px; font-weight: 800; color: #f1f5f9; letter-spacing: -0.3px; margin-bottom: 6px; }
.ta-sub    { font-size: 13.5px; color: #7b98b5; margin-bottom: 32px; line-height: 1.5; }

.ta-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.ta-step {
    display: flex; gap: 16px; align-items: flex-start;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.055);
    border-radius: 12px; padding: 14px 16px;
}
.ta-step-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(58,134,255,0.15); border: 1.5px solid rgba(58,134,255,0.3);
    color: #5d9aff; font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.ta-step-body { flex: 1; min-width: 0; }
.ta-step-titulo { font-size: 13.5px; font-weight: 700; color: #e2e8f0; margin-bottom: 3px; }
.ta-step-desc   { font-size: 12.5px; color: #7b98b5; line-height: 1.5; }
.ta-step-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 6px 12px; border-radius: 8px;
    background: rgba(58,134,255,0.1); border: 1px solid rgba(58,134,255,0.25);
    color: #5d9aff; font-size: 12px; font-weight: 600; text-decoration: none;
    transition: background 0.15s;
}
.ta-step-link:hover { background: rgba(58,134,255,0.2); }

.ta-upload-zone {
    border: 2px dashed rgba(58,134,255,0.25); border-radius: 16px;
    background: rgba(58,134,255,0.04);
    padding: 40px 24px; text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.ta-upload-zone.drag-over { border-color: rgba(58,134,255,0.7); background: rgba(58,134,255,0.1); }
.ta-upload-zone svg { opacity: 0.35; margin-bottom: 14px; }
.ta-upload-title { font-size: 15px; font-weight: 600; color: #cbd5e1; margin-bottom: 5px; }
.ta-upload-sub   { font-size: 12px; color: #707f96; }
.ta-upload-tipos { font-size: 11px; color: #707f96; margin-top: 6px; }

.ta-file-sel {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 12px 16px; margin-top: 16px;
}
.ta-file-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: rgba(58,134,255,0.12); display: flex; align-items: center; justify-content: center; }
.ta-file-nome { font-size: 13px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-file-size { font-size: 11.5px; color: #7b98b5; margin-top: 2px; }
.ta-file-remover { flex-shrink: 0; background: none; border: none; color: #7b98b5; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.ta-file-remover:hover { color: #f87171; }

.ta-btn-enviar {
    width: 100%; margin-top: 16px; padding: 14px;
    background: #3a86ff; border: none; border-radius: 12px;
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: 'Inter', sans-serif; transition: background 0.15s, transform 0.1s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ta-btn-enviar:hover:not(:disabled) { background: #2563eb; transform: translateY(-1px); }
.ta-btn-enviar:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ta-msg {
    display: flex; align-items: center; gap: 10px; margin-top: 14px;
    padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 500;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.3s, transform 0.3s;
}
.ta-msg.show { opacity: 1; transform: translateY(0); }
.ta-msg-ok  { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); color: #34d399; }
.ta-msg-err { background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.18); color: #f87171; }

/* ===== TORRE DE CONTROLE — NA RUA ===== */
/* Hierarquia: um número lidera, o apoio fica menor ao lado, os gráficos abaixo e a tabela
   por último. Antes eram quatro cards de peso igual — nenhum liderava, e a tela não dizia
   por onde começar a ler. */
.nr-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.nr-cab-dir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nr-atualizado { font-size: 11.5px; color: #6b7a91; }

.nr-topo-painel {
    display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 14px; align-items: stretch; margin-bottom: 20px;
}
@media (max-width: 780px) { .nr-topo-painel { grid-template-columns: 1fr; } }

.nr-hero {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px 20px 16px;
    display: flex; flex-direction: column; justify-content: center;
}
.nr-hero-label {
    font-size: 10px; font-weight: 700; color: #6b7a91;
    text-transform: uppercase; letter-spacing: .12em;
}
/* Figuras proporcionais, não tabulares: em corpo grande o dígito de largura fixa faz
   "121" parecer frouxo. Tabular fica só nas colunas da tabela, que alinham na vertical. */
.nr-hero-valor {
    font-size: 46px; font-weight: 800; line-height: 1.05; color: #f1f5f9;
    letter-spacing: -0.03em; margin: 6px 0 2px;
}
.nr-hero-sub { font-size: 12px; color: #8494a9; margin-bottom: 14px; }

/* Medidor: o trilho é a mesma família do preenchimento, um passo mais escuro, pra que o
   estado se leia na barra inteira e não só no pedaço cheio. */
.nr-meter {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(148,163,184,0.14);
}
.nr-meter-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.nr-meter-legenda { font-size: 11px; color: #7b8ba3; margin-top: 7px; }

.nr-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}
.nr-tile {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 18px;
    display: flex; flex-direction: column; justify-content: center;
}
.nr-tile-label {
    font-size: 10px; font-weight: 700; color: #6b7a91;
    text-transform: uppercase; letter-spacing: .1em;
    display: flex; align-items: center;
}
.nr-tile-valor { font-size: 26px; font-weight: 700; color: #e2e8f0; letter-spacing: -0.02em; margin: 5px 0 1px; }
.nr-tile-sub { font-size: 11px; color: #7b8ba3; }

.nr-graficos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.nr-grafico-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 18px 14px;
}
.nr-grafico-titulo { font-size: 12.5px; font-weight: 700; color: #cbd5e1; }
/* Altura com folga pro eixo: container apertado espreme o plot e corta os rótulos. */
.nr-grafico-area { position: relative; height: 250px; margin-top: 12px; }
.nr-grafico-vazio {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: #7b8ba3; text-align: center;
}
/* Legenda só onde há mais de uma série: nos gráficos de série única o título já nomeia
   o que está ali, e uma legenda de um item é ruído. */
.nr-grafico-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.nr-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #8494a9; }
.nr-leg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.nr-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.nr-barra .filtro-tabs { flex-wrap: wrap; }
.nr-dica { font-size: 11.5px; color: #6b7a91; }

/* A tabela rola por dentro em vez de esticar a página: com 60 entregadores o resto da
   tela ficava a três rolagens de distância. */
.nr-tabela-scroll {
    max-height: 380px; overflow: auto;
    border: 1px solid var(--border); border-radius: 12px;
}
.nr-tabela-scroll .ant-hist-table { margin: 0; border: none; }
.nr-pivot th, .nr-pivot td { padding: 9px 14px; font-size: 12.5px; }
/* Cabeçalho e rodapé fixos: rolando a lista some a referência de qual coluna é qual e de
   qual é o total — que é justamente o que se compara. */
.nr-pivot thead th {
    position: sticky; top: 0; z-index: 2; background: #131b28;
    white-space: nowrap; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em; color: #8494a9;
}
.nr-pivot tfoot td {
    position: sticky; bottom: 0; z-index: 2; background: #131b28;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-weight: 700; color: #cbd5e1;
}
.nr-pivot .nr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nr-pivot th.nr-num { text-align: right; }
.nr-pivot .nr-num.zero { color: #3a4557; }
.nr-pivot .nr-total { font-weight: 700; color: #e2e8f0; }
.nr-pivot tbody tr:hover td { background: rgba(255,255,255,0.025); }
/* Número que abre a lista de pedidos. Sublinhado pontilhado no hover, não link azul: a
   coluna inteira azul tiraria a referência de onde estão os valores. */
.nr-pivot .nr-click { cursor: pointer; }
.nr-pivot .nr-click:hover { color: #fff; text-decoration: underline dotted; text-underline-offset: 3px; }
.nr-chip-cor {
    display: inline-block; width: 8px; height: 8px; border-radius: 2px;
    margin-right: 6px; vertical-align: middle;
}

/* Ocultar coluna / linha. Some ao recarregar a página de propósito — é um recorte pra
   olhar agora, não uma configuração. */
.nr-th-col { cursor: pointer; user-select: none; }
.nr-th-col:hover { color: #e2e8f0; }
.nr-dim { cursor: pointer; }
.nr-dim:hover { color: #fff; text-decoration: line-through; text-decoration-color: #6b7a91; }

.nr-ocultos {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px; font-size: 11.5px;
}
.nr-ocultos-label { color: #6b7a91; margin-right: 2px; }
.nr-oculto-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; cursor: pointer; font-family: inherit;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    color: #8494a9; font-size: 11.5px;
}
.nr-oculto-chip:hover { color: #e2e8f0; border-color: rgba(58,134,255,0.4); }
.nr-oculto-chip span { font-size: 13px; line-height: 1; opacity: 0.7; }
.nr-ocultos-tudo {
    background: none; border: none; cursor: pointer; font-family: inherit;
    color: var(--blue); font-size: 11.5px; font-weight: 600; padding: 3px 4px;
}

/* ── Pedidos de uma célula ── */
.nr-pac-lista { max-height: 46vh; overflow-y: auto; }
.nr-pac-item {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
    margin-bottom: 6px; background: rgba(255,255,255,0.02);
}
.nr-pac-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nr-pac-cod { font-family: monospace; font-size: 12px; font-weight: 700; color: #e2e8f0; word-break: break-all; }
.nr-pac-dias {
    font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #8494a9;
    display: inline-flex; align-items: center; gap: 6px;
}
.nr-pac-ponto { width: 7px; height: 7px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.nr-pac-nome { font-size: 12.5px; color: #cbd5e1; margin-top: 3px; }
.nr-pac-obs  { font-size: 11.5px; color: #8494a9; margin-top: 2px; }

.nr-previa-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 16px 0 10px;
}
.nr-aviso {
    margin-bottom: 12px; padding: 9px 13px; border-radius: 9px; font-size: 12.5px;
    background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.22); color: #fcd34d;
}
.nr-rodape-nota { font-size: 11.5px; color: #7b8ba3; margin-top: 8px; }

/* ═══════════════════ MÓDULO FISCAL (CT-e) ═══════════════════ */
/* Usa as variáveis do tema (--surface, --border, --text…) em vez de cores
   fixas: a primeira versão saiu com fundo branco e sumiu no tema escuro. */

/* As telas fiscais colocam tudo num container so, sem cabecalho fixo. Como
   .tela-full.active-view tem overflow:hidden (feito para telas que rolam por
   dentro), o conteudo longo era simplesmente cortado - o formulario do CT-e e
   o perfil de operacao nao davam para rolar. */
.conteudo-fiscal {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    padding-right: 6px;
}

.cabecalho-tela { display:flex; justify-content:space-between; align-items:center;
                  gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.cabecalho-tela h2 { color:var(--text); font-size:19px; font-weight:600; }
.carregando { color:var(--text-muted); padding:18px 0; }

.secao-form { background:var(--surface); border:1px solid var(--border);
              border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; }
.secao-form h3 { margin:0 0 14px; color:var(--blue); font-size:15px; font-weight:600; }
.secao-form h4 { margin:16px 0 8px; font-size:13px; color:var(--text-muted); }
.secao-form .opcional { color:var(--text-dim); font-weight:400; font-size:12px; }
.secao-nota { color:var(--text-muted); font-size:12px; margin-bottom:12px; }

.linha-form { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.linha-form label, .filtros-cte label {
    display:flex; flex-direction:column; font-size:12px;
    color:var(--text-muted); gap:5px; flex:1 1 170px; }
.linha-form label.largo { flex:2 1 340px; }
.linha-form input, .linha-form select, .secao-form textarea,
.filtros-cte input, .filtros-cte select, .grupo-trib input {
    padding:8px 10px; background:var(--surface-2); color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    font-size:13px; font-family:inherit; }
.linha-form input:focus, .linha-form select:focus, .secao-form textarea:focus,
.grupo-trib input:focus {
    outline:none; border-color:var(--border-blue); }
.linha-form input:disabled { background:rgba(255,255,255,0.03); color:var(--text-dim); }
.secao-form textarea { width:100%; resize:vertical; }
input[type=file] { padding:9px; border:1px dashed var(--border-blue);
                   border-radius:var(--radius-sm); background:var(--surface-2);
                   color:var(--text-muted); font-size:13px; width:100%; }

/* passos do formulário */
.passos-cte { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.passos-cte .passo { padding:6px 12px; border:1px solid var(--border);
                     background:var(--surface-2); border-radius:99px; font-size:12px;
                     cursor:pointer; color:var(--text-muted); transition:.15s; }
.passos-cte .passo:hover { border-color:var(--border-blue); color:var(--text); }
.passos-cte .passo.ativo { background:var(--blue); color:#fff;
                           border-color:var(--blue); font-weight:600; }

.acoes-rodape { display:flex; gap:10px; justify-content:flex-end;
                margin:18px 0; flex-wrap:wrap; }
.acoes-rodape button, .filtros-cte button {
    padding:8px 16px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); font-size:13px; cursor:pointer; }
.acoes-rodape button:hover, .filtros-cte button:hover { border-color:var(--border-blue); }
.acoes-rodape button:disabled { opacity:.4; cursor:not-allowed; }
.btn-primario { background:var(--blue) !important; color:#fff !important;
                border-color:var(--blue) !important; font-weight:600; }
.btn-perigo { background:rgba(231,76,60,.15) !important; color:#ff6b5b !important;
              border-color:rgba(231,76,60,.35) !important; }

/* avisos — texto corrido, sem caixa colorida.
   O informativo fica discreto como nota de rodapé; erro e sucesso mantêm cor,
   porque ali a cor é o próprio recado. */
.aviso-info, .aviso-bloqueio, .aviso-sucesso {
    padding:0; margin:0 0 12px; font-size:13px; line-height:1.55; }
.aviso-info     { color:var(--text-muted); }
.aviso-bloqueio { color:#ff6b5b; }
.aviso-sucesso  { color:#2ecc71; }
.aviso-info strong, .aviso-bloqueio strong, .aviso-sucesso strong {
    display:block; margin-bottom:2px; font-weight:600; }
.aviso-info p, .aviso-bloqueio p, .aviso-sucesso p { margin:2px 0; }
.aviso-bloqueio p, .aviso-sucesso p { color:var(--text-muted); }
.aviso-bloqueio ul, .aviso-info ul, .aviso-info ol { margin:4px 0 0 18px; }
.aviso-bloqueio li, .aviso-info li { margin-bottom:3px; color:var(--text-muted); }
.dica { color:var(--text-dim); font-size:12px; margin-top:8px; }
.secao-form code, .aviso-info code, .aviso-bloqueio code {
    background:var(--surface-2); padding:1px 5px; border-radius:4px;
    font-family:Consolas, monospace; font-size:12px; color:var(--blue); }

/* conferência */
.conf-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
              gap:10px; margin-top:12px; }
.conf-bloco { background:var(--surface-2); border:1px solid var(--border);
              border-radius:var(--radius-sm); padding:11px 13px;
              font-size:12.5px; line-height:1.6; color:var(--text-muted); }
.conf-bloco b { color:var(--blue); font-weight:600; }

/* listagem */
.filtros-cte { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
               background:var(--surface); border:1px solid var(--border);
               border-radius:var(--radius); padding:14px; margin-bottom:16px; }
.filtros-cte label { flex:0 1 auto; }

.badge-status { display:inline-block; padding:4px 11px; border-radius:99px;
                color:#fff; font-size:11px; font-weight:600; white-space:nowrap; }
.mono-pequeno { font-family:Consolas, monospace; font-size:11px;
                color:var(--text-dim); word-break:break-all; }
.vazio { color:var(--text-dim); text-align:center; padding:30px; }
.erro { color:#ff6b5b; }

/* tributação */
.grupo-trib { border:1px solid var(--border); border-radius:var(--radius-sm);
              padding:12px 15px; margin-bottom:11px; display:flex;
              align-items:flex-end; gap:14px; flex-wrap:wrap; }
.grupo-trib legend { font-size:12px; color:var(--blue); font-weight:600; padding:0 6px; }
.grupo-trib label { display:flex; flex-direction:column; font-size:12px;
                    color:var(--text-muted); gap:5px; }
.grupo-trib .calculado { font-size:12px; color:var(--text-muted); }
.grupo-opcional { margin-top:12px; font-size:13px; color:var(--text-muted); }
.grupo-opcional summary { cursor:pointer; color:var(--blue); padding:6px 0; }
.totais-trib { display:flex; gap:20px; flex-wrap:wrap; margin-top:14px;
               padding-top:12px; border-top:1px solid var(--border);
               font-size:13px; color:var(--text-muted); }
.totais-trib b { color:var(--text); }
.rodape-versao { color:var(--text-dim); font-size:11px; margin-top:16px; }
label.check { display:flex; flex-direction:row; align-items:center; gap:8px;
              font-size:13px; color:var(--text-muted); margin:10px 0; }

/* ═══════════════ EXTRAVIOS — REGISTROS ═══════════════
   Três cores com função: azul = ação, âmbar = falta preencher, vermelho = erro.
   Fora isso, só os tokens de texto. Radius de 2px em tudo; o único círculo é o
   spinner. Sem sombra: a borda de 1px já separa o que precisa ser separado. */

/* ── Controles ── */
.extrv-reg-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Override escopado: a tela Pesquisar continua com o campo arredondado dela. */
#tela-extravios-registros .extrv-search-wrap { border-radius: 2px; }
.extrv-reg-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 16px 0; }

.extrv-reg-filtros select {
    background: var(--bg); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 2px;
    padding: 6px 8px; font-size: 12.5px; outline: none; cursor: pointer;
    color-scheme: dark;
}
.extrv-reg-filtros select:hover { color: var(--text); border-color: var(--border-blue); }
.extrv-reg-filtros select:focus { color: var(--text); border-color: var(--blue); }

/* Ação secundária é texto. Só o que grava dado ganha peso visual. */
.extrv-reg-acao {
    background: none; border: 0; padding: 0;
    color: var(--text-muted); font-size: 12.5px; font-family: inherit;
    cursor: pointer; border-bottom: 1px solid transparent;
    transition: color .1s, border-color .1s;
}
.extrv-reg-acao:hover:not(:disabled) { color: var(--text); border-bottom-color: var(--text-dim); }
.extrv-reg-acao:disabled { color: var(--text-dim); opacity: .5; cursor: default; }

.extrv-reg-btn {
    background: var(--blue); color: #fff;
    border: 1px solid var(--blue); border-radius: 2px;
    padding: 7px 14px; font-size: 12.5px; font-weight: 500; font-family: inherit;
    cursor: pointer; transition: background .1s, border-color .1s;
}
.extrv-reg-btn:hover:not(:disabled) { background: #2f6fd8; border-color: #2f6fd8; }
.extrv-reg-btn:disabled { opacity: .5; cursor: default; }

/* ── Resumo ── */
.extrv-reg-resumo {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--text-muted); padding-bottom: 12px;
}
.extrv-reg-resumo b { color: var(--text); font-weight: 600; }
.extrv-reg-resumo .pendente b { color: #fbbf24; }

/* ── Lista ── */
.extrv-reg-lista { border-top: 1px solid var(--border); }
.extrv-reg-linha-item {
    display: grid;
    grid-template-columns: minmax(160px, 240px) 150px 92px minmax(140px, 1fr) 56px;
    align-items: baseline; gap: 16px;
    padding: 12px 4px; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background .1s;
}
.extrv-reg-linha-item:hover { background: rgba(255,255,255,0.025); }
.extrv-reg-linha-item.abrindo { opacity: .45; }

.extrv-reg-cabecalho {
    cursor: default; padding-top: 0; padding-bottom: 8px;
    font-size: 11.5px; color: var(--text-dim);
}
.extrv-reg-cabecalho:hover { background: none; }

.extrv-reg-cod {
    font-family: monospace; font-size: 13px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.extrv-reg-dup {
    margin-left: 8px; font-family: 'Inter', sans-serif;
    font-size: 11.5px; color: var(--text-dim);
}
.extrv-reg-status {
    font-size: 12.5px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Quem está completo não precisa dizer nada: a coluna fica vazia. */
.extrv-reg-pend { font-size: 12.5px; color: #fbbf24; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extrv-reg-origem { font-size: 12px; color: var(--text-dim); }
.extrv-reg-num { font-size: 12px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }

.extrv-reg-vazio, .extrv-reg-carregando {
    padding: 48px 4px; color: var(--text-dim); font-size: 13px;
}
.extrv-reg-carregando { display: flex; align-items: center; gap: 8px; }

.extrv-reg-spinner {
    width: 12px; height: 12px; flex: none; display: inline-block;
    border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--text-muted);
    border-radius: 50%; animation: extrvRegGirar .6s linear infinite;
}
.extrv-reg-btn .extrv-reg-spinner {
    border-color: rgba(255,255,255,0.35); border-top-color: #fff;
    margin-right: 8px; vertical-align: -2px;
}
@keyframes extrvRegGirar { to { transform: rotate(360deg); } }

.extrv-reg-paginacao {
    display: flex; align-items: center; gap: 16px; padding: 16px 4px;
    font-size: 12.5px; color: var(--text-dim);
}

/* ── Modal ── */
.extrv-reg-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(5,7,12,0.78);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.extrv-reg-modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 2px;
    width: 100%; max-width: 640px; max-height: calc(100vh - 48px); overflow-y: auto;
}
.extrv-reg-modal-carregando {
    max-width: 260px; padding: 24px;
    display: flex; align-items: center; gap: 12px;
    color: var(--text-muted); font-size: 13px;
}

.extrv-reg-modal-topo {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 20px 24px 16px;
}
.extrv-reg-modal-titulo { font-size: 15px; font-weight: 600; color: var(--text); }
.extrv-reg-modal-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.extrv-reg-fechar {
    background: none; border: 0; padding: 0;
    color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer;
}
.extrv-reg-fechar:hover { color: var(--text); }

.extrv-reg-aviso {
    display: none; margin: 0 24px; padding: 12px 0;
    border-top: 1px solid rgba(239,68,68,0.35); border-bottom: 1px solid rgba(239,68,68,0.35);
}
.extrv-reg-aviso-titulo { font-size: 13px; color: #ef4444; margin-bottom: 8px; }
.extrv-reg-dup-item {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
    font-size: 12px; color: var(--text-muted); padding: 4px 0;
}
.extrv-reg-dup-item b { font-family: monospace; font-weight: 400; color: var(--text); }
.extrv-reg-dup-linha { margin-left: auto; color: var(--text-dim); }

.extrv-reg-form {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 16px; padding: 16px 24px 24px;
}
.extrv-reg-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.extrv-reg-campo.c3  { grid-column: span 3; }
.extrv-reg-campo.c6  { grid-column: span 6; }
.extrv-reg-campo.c12 { grid-column: span 12; }

.extrv-reg-campo label { font-size: 12px; color: var(--text-dim); }
.extrv-reg-campo label i { color: var(--text-muted); font-style: normal; }

.extrv-reg-campo input,
.extrv-reg-campo select,
.extrv-reg-campo textarea {
    width: 100%; background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 2px;
    padding: 8px 10px; font-size: 13px; font-family: 'Inter', sans-serif;
    outline: none; transition: border-color .1s;
    /* Faz o calendário e o relógio nativos virem escuros. */
    color-scheme: dark;
}
/* O select precisa de fundo sólido: o popup nativo herda daqui, e transparente
   vira branco com o texto claro por cima — ilegível. */
.extrv-reg-campo select { background: var(--surface); }
.extrv-reg-campo select option,
.extrv-reg-filtros select option { background: var(--surface); color: var(--text); }
.extrv-reg-campo textarea { resize: vertical; min-height: 56px; }
.extrv-reg-campo input:focus,
.extrv-reg-campo select:focus,
.extrv-reg-campo textarea:focus { border-color: var(--blue); }
.extrv-reg-campo.com-erro input,
.extrv-reg-campo.com-erro select,
.extrv-reg-campo.com-erro textarea { border-color: #ef4444; }

.extrv-reg-erro { font-size: 11.5px; color: #ef4444; }
.extrv-reg-dica { font-size: 11.5px; color: var(--text-dim); }
.extrv-reg-dica.alerta { color: #fbbf24; }
.extrv-reg-dica.erro { color: #ef4444; }

.extrv-reg-modal-rodape {
    display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 16px 24px; border-top: 1px solid var(--border);
}
.extrv-reg-autoria { margin-right: auto; font-size: 11.5px; color: var(--text-dim); }

@media (max-width: 760px) {
    .extrv-reg-campo.c3, .extrv-reg-campo.c6 { grid-column: span 12; }
    .extrv-reg-filtros select { flex: 1 1 140px; }
    .extrv-reg-linha-item { grid-template-columns: 1fr auto; gap: 4px 16px; }
    .extrv-reg-cabecalho { display: none; }
    .extrv-reg-status { grid-column: 2; grid-row: 1; text-align: right; }
    .extrv-reg-origem { grid-column: 1; grid-row: 2; }
    .extrv-reg-pend { grid-column: 1 / -1; grid-row: 3; }
    .extrv-reg-num { grid-column: 2; grid-row: 2; text-align: right; }
    .extrv-reg-autoria { width: 100%; margin: 0 0 8px; }
    .extrv-reg-modal-rodape { flex-wrap: wrap; }
}